電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

html/css「header、footer、side」エリアの作成

calendar

前回の続きです。※前回はホームページの骨組みまで作成しました↓

今回は「header」「footer」「side」エリアを記述し、WEBブラウザに反映させるところまでやります。

かなりホームページらしくなってきますので、htmlとcssの使い方がなんとなく分かってくると思います。

※sideエリアに画像を表示させるので、あらかじめimgフォルダに任意の画像を入れておいてください。

スポンサーリンク

headerの記述

headerのhtml

headerタグ内に、<div>要素を作成します。

class名はなんでもいいですが、”top”とします。

div要素内にはheaderの文字のみが入っている状態です。

headerのcss

背景色を黒にしたいので、header要素のbacgroundをbrackに変更。

文字を中央に寄せるために、text-align:centerを追加。

文字色を白に変更するために、color:whiteを追加。

続いてtopクラスの要素を追加し、フォントサイズを大きくします。

headerの見栄えを良くするため、上下の幅を少し広げます。

padding:10px 0;にて、上下のみ10px分の幅が広がります。

仕上がりはこんな感じです。↓

header画像

footerの記述

footerのhtml

footerのhtmlについては特に追加はありません。

そのまま前回の骨組みでOKです。

footerのcss

headerと同じ感じです。背景を黒、文字差サイズを少し大きく、位置をセンターに。

見栄えを良くするために上下に10pxの幅を取ります。

こんな感じになります↓

footer画像

sideの記述

sideのhtml

class side要素の中に、class asideとclass bsideの要素を追加します。

今回asideは外部リンク用、bsideはプロフィール用として記述します。

<h1>は見出しを表すタグになります。

asideの<a>タグ内には外部リンクの記述↓

<a href=”http://robio.html.xdomain.jp”

それを新規タブで開く記述(結構便利)↓

target=”_blank”>

その後のimg/..は画像の参照先になるので、imgフォルダ内に入れた画像の名前を入れると、その画像が外部リンク用のボタンになります。

<p>タグは段落を表します。

sideのcss

1~22行目までの記述は、見出しの装飾や行間の隙間の設定になります。

これを追加することによって、<h1>タグや<p>タグの使用時の見た目が良くなります。

sideクラスは、#EEEEEEで背景色を変更し、text-align:center;の追加で画像の位置を中央に寄せます。ただし、この記述で<p>タグの内容まで中央寄せになってしまいます。

<p>を左寄せに戻すために、side p で text-align:leftを追加します。

aside、bsideの記述は、paddingにて上下の余白を指定し、見栄えを良くしています。これも追加。

aside a:hoverは、外部リンクの画像をボタンと認識させるための記述です。aside内に配置した画像にカーソルを合わせると、画像の色が少し変化します。これも追加します。

sideはこんな感じになるはずです。↓

side画像

html/css「header、footer、side」エリアの作成まとめ

これまでのまとめを一応のせておきます。

html

css

現段階での表示画面

現段階でのWEBサイトはこんな感じです↓

PC WEB画面
PC画面
スマホ画面
スマホ画面

だいぶWEBサイトっぽくなってきたと思います。

次回はここにメニューボタンを入れていきたいと思います。