HTML5とCSS3で簡単ホームページ作成

HTML5とCSS3でホームページを作ってみよう

”HTML5”、”CSS3”と言うと何かしら少し敷居が高く思っている方や、Word pressなどのCMSを使っている方でテンプレートのデザインを少し変えてみいと思っている方の参考にして貰えればと思います。

凝ったことをしようと思えば、やはり、それなりに難しくもなり複雑にもなってきますので、ごく簡単なホームページを今では主流となっているHTML5で作り、CSS3で簡単な装飾をして、最後はレスポンシブなページに仕上げてみたいと思います。

1．2カラムのレイアウトを作成: ページの大枠として2カラムのレイアウトを作ります。先に、以前の様にdiv要素でレイアウトを作成したものをHTML5の仕様に修正しています。
2．DOCTYPEとhead要素内の記述: DOCTYPE宣言とhead要素内にmeta要素やlink要素を使い、ページに関する情報を記述します。
内容はごく一般的なものだけを記述しています。
3．body要素内を記述１: 先ずは、装飾を付けずに、ほぼ要素の初期設定でサイトタイトル領域、グローバルナビゲーション領域の記述と、暗黙的アウトラインと明示的アウトラインの比較をしてみます。
4．body要素内を記述２: 次に、メインコンテンツ領域でのリスト要素のスタイル、テーブル要素のスタイルを設定、更に、サイドバー領域とフッター領域を記述しています。
5．ページの装飾１: 区別しやすいようにヘッダー領域からフッター領域まで色分けされている背景色を統一し、見出しなどを少し装飾してみます。
6．ページの装飾２: 更に、グラデーションやぼかしなどでページを装飾しています。
7．レスポンシブデザイン: スマートフォンやタブレットに対応できるレスポンシブデザインに修正しています。

HTMLメモとCSSメモはSampleページを作るのに、覚え書きとして書いたものですが、こちらもなにかの参考になればと思います。