初心者向け
ホームページの
作り方講座

CSSでデザインを固めましょう

html側を全部入力してしまってのデザインもありますが、少しずつ理解していく為にここで一旦cssにいきます。ある程度デザインの外枠をここで決めてみましょう。

index.htmlは前の段階のままブラウザで開いておきます。

まだcontainerの背景と枠線しか入っていない状態ですので、これからホームページらしく調整していきます。

初期化用のスタイルを追加しておきましょう

閲覧する画面(ブラウザ)によって、スタイルに影響が出る場合があるので一旦初期化する設定を追加しておきます。

この初期化するスタイルは制作者によって色々ありますが、当サイト作者の場合はこのぐらいです。スタイルを理解しだしたら自分なりの初期化のスタイルを決めておくといいでしょう。

↓以下タグをコピペして使って下さい。1行目の@charset "utf-8";のすぐ下に入れて下さい。

一応、簡単な説明だけしておきます。詳しくは専門サイトで検索して下さい。
body…ホームページ全体(#containerの外側も含め)への設定です。colorは文字色、marginとpaddingは余白のリセット、fontは文字サイズと行間と文字種類、backgroundは#containerの外側の背景色の部分、h1~~も余白のリセット、ulはリストタグで冒頭に入る黒点を消す設定、imgは画像にリンクをはった時に自動で入る枠線を消す設定、input~~は文字サイズの設定、formも余白のリセット、tableは枠線が1本線になる設定と文字サイズの設定です。

ちょっと見づらいので、タブで余白を作って見やすくします

このままでもいいのですが、どの部分がスタイルを設定している部分か分かりづらいので、タブで余白を空けて見やすくします。

文字が反転したら、キーボードの「Tab」キーを押して下さい。以下のように、余白ができれば成功です。文字の反転を解除するには、どこか左クリックを1回すればOK。

他のスタイルも全て見やすく整えておきましょう。どこがスタイルの設定箇所か見やすくなりました。

containerのスタイルを整えましょう

containerが分かるように背景色をつけましたが、白にしておきます。
現在、
background: #d2d2d2;
なので白に変更しましょう。白は#fff(#ffffffも可)でOKです。
background: #fff;
続いて、枠線(border)が真っ黒で濃すぎるので、薄いグレーにします。
現在、
border: 1px solid #000;
なので、以下に変更します。
border: 1px solid #ccc;
続けてcontainerの内側にほどよいスペースを設けます。
内側への余白の指定方法は、
padding: (幅);
という設定方法になります。前に述べましたが、単位はpxを使って下さい。
今回310pxほど余白を作ってみましょう。タグは以下のようになります。
padding: 30px;

一旦プレビューで見てみましょう

index.htmlを更新(再読み込み)して現在のスタイルを確認してみます。

bodyタグで余白類を0にしてしまったので、containerが上にくっついてしまいました。
ほどよい空間を取ります。

設定が2つから3つに増えました。

2つの場合だと、左から、「上下・左右」の設定となり、3つの場合だと、左から「上・左右・下」への設定になります。また4つになれば左から「上・右・下・左」への設定となります。1つしかない場合は、4方向共通での設定です。

改めてプレビューで見てみます。
以下のように、30pxの空間ができていればOKです。

角に丸みをつけてみましょう

現在、四隅が直角なので、丸みをつけてみましょう。使うタグは、
border-radius: (幅);
になります。
今回は20pxほど設定してみます。
border-radius: 20px;
以下のように角に丸みができればOKです。お好みに合わせてサイズを調整してもらっても構いません。

containerに影をつけてみましょう

containerにドロップシャドウのような影を入れてみましょう。使うタグは、
box-shadow: (色) (幅1) (幅2) (幅3) (幅4) ;
になります。
(幅1)は、右へずらす幅。マイナスを付ければ左へずらす幅に。
(幅2)は、下へずらす幅。マイナスを付ければ上へずらす幅に。
(幅3)は、ぼかす幅。※省略化。
(幅4)は、広げる幅。※省略化。
です。
今回はcontainerの外側に均等に10px入れてみます。(幅4)は使わないので省略します。
box-shadow: 0px 0px 10px #CCC;
以下のように影がつけばOKです。

containerの装飾はこれで終わりです。次はメニューを装飾してみましょう。

次のステップは…

「menuの装飾」です。頑張りましょう!