ホーム > ホームページの作り方 > ホームページをコーディングする(HTML編)

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

さて、ついにこれからコーディング作業にはいります。


コーディングには『table組み』と『CSS組み』の2種類あります。


違いを大雑把にいうとtableは『表』、CSSは『ブロック』になります。


tableとCSSの違い


現在、table組みは、ほぼ使われていませんので、CSS組みでつくります。


理由はいっぱいあるので後々話しますが、取りあえずtableでは『スマホサイトが作りづらい』とだけ言っておきます。


まず、以下のようにブロックに分けて記述していきます。


161223_img_02


こちらもコピペして結構ですが、コード説明を読んで、どんな命令が出されているか理解しておいてください。


コードは前回作成したtemplate.htmlの「body」の中に書いていきます。


ヘッダー(header)



グローバルナビ(g_navi)



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



コンテンツ(contnts)※container内



サイドバー(saidebar)※container内



フッター(footer)



template.html内全体



【コード説明(要素)】



ソースは必ず半角英数!


この要素の後ろにある「id」「class」は、CSSでレイアウトする時に、それぞれ違った命令を出すためのものマーキングみたいなものです。


id・classに付ける名前は、任意で構いませんが、こちらもいくつか制限があります。




・id→固有の名詞にあたる(1ページに1回のみ)

・class→種類を意味する(1ページに複数可)

・半角英数のみ

・先頭に数字不可(×→class=”123_navi”)

・「-」「_」以外の記号文字は使用不可



idやclassの書き方




とりあえず、これでHTMLファイルの雛形は完成です。


ん?画像と文字が並んでいるだけですね。


次回はコレに「CSS」を追加して装飾していきます。


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.