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

概要

スタンダードなデザインをHTML5とCSS3で作りながら基礎知識を身に付けていきます。
最近のグリッドデザインではないですが、後々そちらの方も書いていきます。
大枠は以下のような形で作成します。
わかりやすいようにCSSでブロックごとに色をつけています。

ソースコード

HTML

CSS

解説

HTML

最近はhtmlタグやbodyタグは不要です。ソースの可読性を上げる意味では書いた方がいい場合が多いと思います。
今回はテストサイトなので、省略して作成しています。
HTML5からヘッダーがだいぶシンプルに書けるようになってスッキリしています。

reset.cssとは
htmlファイルをブラウザで読み込むとある程度見やすいようにブラウザ側でcssを適用してくれます。
しかし、デザインする側からは問題があって閲覧するブラウザによってcss適用されてしまう部分がでてきます。
なので、reset.cssを読み込ませることで、ブラウザごとの自動で適用されるcssを排除する目的で導入しています。

色々なreset.cssがありますが、私は以下のサイトから使うことが多いです。
https://code.google.com/archive/p/html5resetcss/downloads

Webサイトはヘッダーとフッターで中央にコンテンツがあります。
その中央で二つのブロックを作成してコンテントを二つに分かれるようにします。
classとしてmain,sidemenuの二つに分けます。
そしてその二つを包括するようにwrapperというクラスで囲みます。

CSS

主要ブラウザはデフォルトでフォントサイズが16pxなので62.5%にすることで10pxになります。
ブラウザごとにユーザがフォントサイズを指定していることが多いので基本的に%で調整します。
remはroot-emの略で要素ごとの相対的なサイズではなくhtmlの10pxを基準にした相対的なフォントサイズ指定が可能となります。
今回の場合1.2remで12pxのサイズとなります。

wrapperクラスはmainとsidmenuのクラスを合わせた箇所になります。
今回はmainを左側sidemenuを右側に配置するためfloatで指定しています。
clearfixはfloatで指定したmain,sidemenuの下にfooterを配置するためにclassを作成してwrapperのdivにクラスを指定しています。
header,footerと中央コンテンツのスペースはwrapperの上下marginで調整をしています。

これで大枠のデザインは完成です。
ここからロゴやメニュー、main部分の肉付けやfooterのコピーライトなど追加していきます。

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

2018.02.08

コメントを残す

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