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

前回つくったHTMLファイルに「CSSファイル」を読み込ませることで、レイアウトやデザインを加えることができます。ちなみにCSSはカスケードスタイルシートと呼び、htmlを装飾するファイルになります。

実は、前々回説明なしで記述した下記一文がスタイルシートを読み込む命令文になります。


作り方はhtmlと同様に、下記ソースをメモ帳などにコピーして今度は「style.css」で保存してください。(今回も「全てのファイル」で)



ホームページ作成ソフトなどが入ってないと、アイコンが変わりません。カーソルを合わせた時に「カスケードスタイルシート」と表示されれば問題なくCSSファイルが作成されているので、安心してください。

さて、まず全体に関わるCSSを記述していきます。スタイルシートの書き方は先頭に「要素」や「id名」「class名」を記述して、「{}」で囲んだ中に、命令文を入力します。

CSSの書き方

下記一文を追記して、勝手に入ってしまう余白を消します。



「margin」は要素の外側、「padding」は内側の余白を意味します。これを設定しないと、勝手に余白が入ってしまい、うまくレイアウトすることができない場合があります。

次にフォントを「メイリオ」に指定します。



それ以外になにやら、いっぱい書いてありますが、これは「Mac」やメイリオフォントが使用できない環境の場合、どのフォントを置き換えるかって内容になっています。

ここでちょいネタ。実は(実は多いな)ここでフォント以外に、ある記述をしています。



これはちょっとしたコーディングテクニックで、「hed_bg.jpg」という細い黒ベタの画像を画面いっぱいに広げるという命令になっています。これをすることで、HTMLが若干短縮することができ、データも軽減できるという利点があります。

端から端まで色を入れたいときに使用する記述なので、背景色が白だったらこの記述はいりません。

161226_img_01 161226_img_02

さて、ここまでCSSを追記したら、一旦ちゃんと反映されているか確認しましょう。表示の確認は、htmlをダブルクリックしてブラウザで見れます。

CSSを「保存」するとhtmlも反映されますので、更新ボタンもしくは「F5」でブラウザを更新してください。上下の余白、フォント、黒ベタが変更されなかったら、この時点で何かしら記述が間違っている可能性があります。 全角文字が入っていないか、style.cssを呼び出す記述にスペルミスがないか、チェックしてください。正常にCSSが読み込めていましたら、上からどんどん記述していきましょう。


全体共通


次に前回つくったHTMLのID名やクラス名に指示を出して装飾していきます。全て半角英数で記述します。途中で全角文字が入りますと、正しく表示されないので、ご注意ください。

ID名は「#」、クラス名は「.」を先頭に記述します。


ヘッダー(id:header内)



グローバルナビ(id:g_navi内)



コンテナー(id*container内)



コンテンツ(id:contents内)



サイドバー(id:sidebar内)



フッター(id:footer)



CSS説明(記述不要)

>>サンプルサイト「template.html」

CSSってよくよくみると、簡単な英語が多いのに気づきましたか?widthは幅で、heightは高さ、fontはフォント(文字)、backgroundは背景です。

たまに見慣れない単語もでてきますが、ほとんど「このブロックの横幅はーで、高さはー」といった内容になります。これを、右に寄せたり左に寄せたりして、ホームページをデザインしているだけなんです。

さて、これで雛形が完成しました。 次回からこれを基に、各ページを作成していきます。

次のお話 ↓