ホームページをコーディングする(HTML編)

さて、ついにこれからコーディング作業にはいります。コーディングには『table組み』と『CSS組み』の2種類あります。違いを大雑把にいうとtableは『表』、CSSは『ブロック』になります。

tableとCSSの違い


現在、table組みは、ほぼ使われていませんので、CSS組みでつくります。理由はいっぱいあるので後々話しますが、取りあえずtableでは『スマホサイトが作りづらい』とだけ言っておきます。まず、以下のようにブロックに分けて記述していきます。

161223_img_02

こちらもコピペして結構ですが、コード説明を読んで、どんな命令が出されているか理解しておいてください。コードは前回作成したtemplate.htmlの「body」の中に書いていきます。


ヘッダー(header)



グローバルナビ(g_navi)



コンテナー(container)

※コンテンツとサイドバーを囲ったブロック



サイドバー(saidebar)※container内



フッター(footer)



template.html内全体



コード説明(要素)



ソースは必ず半角英数!

この要素の後ろにある「id」「class」は、CSSでレイアウトする時に、それぞれ違った命令を出すためのものマーキングみたいなものです。 id・classに付ける名前は、任意で構いませんが、こちらもいくつか制限があります。


・id→固有の名詞にあたる(1ページに1回のみ)
・class→種類を意味する(1ページに複数可)
・半角英数のみ
・先頭に数字不可(×→class=”123_navi”)
・「-」「_」以外の記号文字は使用不可


idやclassの書き方

とりあえず、これでHTMLファイルの雛形は完成です。ん?画像と文字が並んでいるだけですね。次回はコレに「CSS」を追加して装飾していきます。

次のお話