【スタンダードデザイン】HTML5とCSS3でヘッダーとフッターのデザインStep2

前回からの続き

【スタンダードデザイン】HTML5とCSS3でWebサイトの大枠を作成Step1

2018.02.03

今回はヘッダーとフッターを作成していきます。
ヘッダーはロゴとグローバルナビ、フッターはナビとコピーライトを配置します。
CSSで画像の配置やmargin,paddingで制御します。ナビはul,liで作成します。

ソースコード

HTML

CSS

ロゴの作成

ロゴはCOOLTEXT(https://ja.cooltext.com/)のジェネレータで作成しました。

ヘッダー部分のはじめにh1タグをロゴとしてクラスを設定します。

CSSで画像を設定します。ロゴ画像は1つなのでno-repeatで設定します。
margin: 0 auto;で中央揃えになります。

また以下の3つでロゴ画像とロゴの文字列が二つにならないように文字列を消します。
overflow: hidden;
text-indent: 100%;
white-space: nowrap;

隠しテキストになりますが、SEOの観点からでも意図的にクローラーを誤魔化すための用途でないので問題ありません。

ナビデザイン

HTML

HTML5ではul,liで作成することがほとんどです。
ナビ範囲全体をglobal-navクラスで指定します。
またliにnav-itemとしたクラスを指定します。

CSS

backgroundですがベンダープレフィックスで複数行あります。
CSSのグラデーションコードを生成してくれるサイト(http://grad3.ecoloniq.jp/)を利用しました。

padding: 10px 0;でナビの縦幅を調整しています。
text-align: center; でナビを中央配置にします。

中身の文字を横配列にするため、「display: inline-block;」を設定します。
ナビ文字列の横幅間隔を調整するため、marginで調整します。

ナビのリンク部分の四角形を作成します。
width,heightでナビの文字数と調度よくなる値を設定します。
リンクになる部分は中央配置なのでtext-alignはcenterになります。
「border-radius: 8px;」でboxの角を丸めます。pxが大きいほど丸くなります。
「transition: 0.5s;」はマウスカーソルが重なってからリンクの色が変わる時間です。
アニメーションなのでお好みの時間に設定してください。

マウスカーソルを乗せた時のカラー設定です。
上述のグラデーションサイトからCSSを作成しています。

フッターのデザイン

HTML

コピーライトは「©️ <発生年> <著作元>」の情報があれば大丈夫です。
会社によってはわかりやすいように「All Rights Reserved.」をつける習慣があるところもあります。
あと現在の年はやはり更新しているという意思表示で書くこともあるようです。
実際のところ、コピーライトは書かなくても著作権は発生します。

CSS

display: inline-block;で横並びにします。
その場合、HTMLの改行がスペースとして反映されるため、位置がずれてしまいます。
なので親クラスのfooter-listでfont-size:0;を指定し、子クラスの.footer-itemでfont-sizeを上書きして設定します。

footerの右端をwrapperの端と合わせるため、widthをwrapperと同じ980pxにして、marginで左右をautoにします。
text-alignをrightにすることでwrapperの右端にフッターナビを配置できます。

.footer-listの中で.footer-itemの直後にあるfooter-itemにborder-leftを反映します。

コピーライトはmaginで配置を調整してcenterに配置しています。

次回は中央のコンテンツを作り込んできます。

【スタンダードデザイン】メインコンテンツ(トピック)の配置Step3

2018.02.10

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です