スタイルシートを作る

ホームページ作成4日目:スタイルシートを作る

「style.css」でデザインを指定していく

メインページとなる「index.html」ファイルを作ったら次は「style.css」と呼ばれるスタイルシートを作成します。 ここで色、大きさ、余白など指定をかけていきページのデザイン部分を作りこんでいきます。

ホームページ作成のメインとなるのがスタイルシート。

このスタイルシート作成ですが、ホームぺージ作成において最も重要なところになります。 スタイルシートでは単純に文字に色をつけたり大きさを指定したりすることが出来るだけではなく、 ホームページ全体を2列にわけたり3列にわけたりと、全体的な構造の指定もかけることが出来ます。

指定の方法もいくつかあり、スタイルシートの説明だけで50ページは作れてしまいます。

ここではあまり難しいことは説明せず、かんたんな部分だけを紹介してみたいと思います。

スタイルシートの例

<body>タグに指定をかけてみる。

  1. body {
  2. background-color : #fff ;
  3. width : 100% ;
  4. }

<body>タグはhtmlファイルに置いて必ずどのページにも出てくるタグになります。 ページ全体を1番外側から覆うタグというイメージになるでしょうか。例文ではこのbodyタグに指定をかけています。

background-colorでは背景色を指定できる

「background-color: #fff」とありますが、これは「background-color」で背景色を指定、「#fff」で白を選択しています。 つまりこれにより「背景色を白にしてください」という指定をかけていることになります。

「#fff」はいわゆるカラーコードと呼ばれるものですが、HTMLリファレンス のようなサイトをみることですきな色を指定できるようになります。 このカラーリファレンスの探し方は他にも便利な方法がありますが、まずはこのようなものがあることを覚えてください。

widhtでは横幅を指定できる

次に指定をかけているのが「width : 100% ;」になります。これは「width」で横幅を指定して「100%」でページ全体に 表示されるようにしています。例えばこれが「50%」としていれば、ページの半分しか表示されないことになります。

<h1>のスタイルシートを作る

次に、前のページで作ったとてもかんたんなページに指定をかけてみたいと思います。<h1>タグは見だしタグになっていますので、 より見だしのように見えるようデザインしていきます。

  1. .h1 {
  2. font-size: 18px;
  3. borer-left: 8px solid #6FBF8F;
  4. padding: 10px 0px 5px 10px;
  5. }

ここでは「文字の大きさを18px」、「左側に8PXの厚みで線を引く」、「パディングで余白の調整」をそれぞれ指定しています。

この指定をかけた見だしが次のものになります。

************************

こちらが指定をかけたものになります。

************************

今回のスタイルシートにより、このようなデザインとして見だしを表示させることができました。 指定のタグは他にもいろいろあるので、多種多様なデザインを自分で作ることが出来るようにいなります。

<p>タグの色と大きさを変える

次に文章を形成する<p>タグに色をつけたり、大きさを変えてみたりしたいと思います。

→5日目デザインをする