スタイルシート(CSS)基礎講座

スタイルシート(CSS)デザインにチャレンジ 2012年6月28日

HTML基礎講座で基本的なHTMLは習得できましたか?最終的に このようなホームページが作成できましたか?ここからはこのページを飾り付けていくことを学びましょう。

スタイルシートって何だろう? 2012年6月28日

まずはこちらのサイトをご覧ください。私はSOHOで中小企業のウェブサイトを制作してますのでそちらのサイトなのですが、スタイルシートでデザインしています。

CSSファイルを作成 2012年6月28日

初めてのホームページ制作例をこれからデザインしていきましょう。まずはフォルダやファイルの構成が以下のようになっていますか?ブラウザで見るとこんな風になっているはずです。

見出しの文字を飾り付けてみよう 2012年6月28日

それでは「style.css」をメモ帳で開いて以下のように記述して見ましょう。/* ~ */の部分はコメントなので書かなくて良いです。

<body>~</body>をスタイルで指定 2012年6月28日

スタイルシートの作る手順とその効果がなんとなくわかりましたか?では、表示される部分つまり<body> ~  </body>の部分全体をスタイルシートでデザインするとどうなるでしょう?以下のように、前ページで作成したCSSファイルに以下のよう に追加してみましょう。

ページをさらにデザインしていこう 2012年6月28日

テーブル(表)もスタイルシートでデザインできます。まずは現在のHTMLにはここがテーブルだよ、とわかるように「table border=”1″」と書かれている部分がありますが、ここの「border=”1″」はとってしまいましょう。

スタイルシートで段組を作る 2012年6月28日

ホームページでよくあるレイアウト、ページが縦に分かれていてメニュー部分と内容の部分に分かれているという形。これをスタイルシートで作りましょう。

メニュー部分を作る 2012年6月28日

メニュー部分を少しメニューらしくしたいですね。まずはHTMLにメニューであることの記述を以下のようにしましょう。先ほどまでは改行のタグを使っていましたが、ボタン風にしたいのでそれぞれのリンクを<div></div>で囲んでください。

CSSのデザインを完成 2012年6月28日

さて後は細かいところを修正していきましょう。 まずは、タイトルの下に左部分の色が少し回りこんでいるのが気に入らないので、h1の部分に1行追加して以下のようにします。

カラーチャート 2012年6月28日

ウェブデザインの基本の色です。ホームページ作成の際の色指定の参考にしてください。スタイルシートのファイルの中ではたとえば以下の様に書きます。