スタイルシートとCSS
CSSというのは、Cascading Style Sheets、カスケーディング・スタイル・シートの略で、ウェブページのスタイルを指定するための言語です。HTMLが文書構造を指定するのに対し、CSSは装飾について指定する言語です。
CSSでは、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
CSSを使うメリットは、「デザイン」と「文書構造（段落・見出しなど）」が切り離されることが最大のポイントです。スタイルシートのおかげで、ＨＴＭＬ文書に手を加えなくても後で自由にデザインを修正・変更できるようになり、Webページ製作・維持管理が非常に楽になったと言えます。ブログなどでサイト全体のデザインを簡単に変更できるのもこのスタイルシート技術のおかげなのです。
スタイルシートのメリットを最大限に活かすには、スタイルシートのみを独立させた外部ファイルの作成が一番です。CSSは、タグ内部、<head>タグ内部どちらに記載することもできますが、ページのブラウジングを考えても外部に切り離して読み込ませる方法が一般的です。
Sublime textを開いて何も記載しないまま、sample.htmlと同じフォルダ内にstyle.cssと名前を付けて保存します。
これから学習するCSSはこのstyle.cssに記載していきます。
CSSでは下記のようなことを装飾することができます。
- 文字の大きさ、フォント、色
- テキストの行間や字間の調整
- 文字の背景の色や、画像の表示
- 文字リンクの下線の変更、色の変更
- 表の罫線の種類、太さ、色
- 画像の位置、回り込みの指定
- 要素同士の距離の調整
- Webページの段組み
ほかにもいろいろありますが、WebページのデザインというのはこのHTMLファイルとCSSファイルの組み合わせでできるだけ思い通りにブラウザにWebページを表示させるようデザインすることを言います。
CSSの文法
p{
font-size: 12px;
}
たとえば上記はp要素のフォントのサイズを12ピクセルにしますという指示になります。
セレクタはCSSデザインを適用する適用先です。デザインを変えたい要素をセレクタとして指定します。プロパティはセレクタに指定した要素の何を変えるのかを指定する部分です。値は色や大きさの指定などを指定します。
また、プロパティと値はセットで使います。一組のプロパティと値のセットを宣言といいます。プロパティと値の間には「:（コロン）」を書きます。宣言を複数書く場合宣言と宣言の間には「;（セミコロン）」を書きます。一行しか宣言がない場合、文末のセミコロンは記載しなくてもかまいませんが、後から別の宣言を加えたり、宣言の順序を入れ替える場合に備えて記載するのが一般的です。
宣言は、セレクタの後の半角 { } 中括弧の間に書きます。この中括弧の中を宣言ブロックといいます。
セレクタと宣言ブロックのセットをルール（ルールセット、スタイルルール）と呼びます。
CSSの勉強はまずプロパティと値を覚えることが基本です。大まかなプロパティをこれから学んでいきます。
文字の指定
まずは、テキストのデザインのCSSプロパティを学んでいきましょう。
CSSプロパティ一覧（文字編）
| u30d7u30edu30d1u30c6u30a3u540d | u4f7fu3044u65b9 |
|---|---|
| font-size | u30d5u30a9u30f3u30c8u306eu30b5u30a4u30bau6307u5b9a |
| line-height | u884cu3068u884cu306eu9593u9694u306eu6307u5b9a |
| font-family | u30d5u30a9u30f3u30c8u306eu7a2eu985eu3092u6307u5b9a |
| text-align | u30c6u30adu30b9u30c8u306eu6c34u5e73u4f4du7f6eu306eu6307u5b9a |
| letter-spacing | u6587u5b57u3068u6587u5b57u306eu9593u9694u306eu6307u5b9a |
| color | u6587u5b57u306eu8272u306eu6307u5b9a |
値の指定方法は下記のとおりです。
| u5358u4f4du306au3069 | |||
|---|---|---|---|
| u5927u304du3055 | px | % | em |
| u4f4du7f6e | left | center | right |
| u8272 | u8272u540d | 16u9032u6570 | rgbau6307u5b9a |
単位で使われるpxというのは、ディスプレイで表示される一番小さな点一つ分を表す単位です。
%は、比率を使ってサイズをしていする単位です。比率の基準になるのは、親要素のfont-sizeです。body要素のfont-sizeが16pxの場合、pに75%と指定すると 16×0.75=12 となり 12pxでの表示になります。
emも比率を表す単位です。比率の基準になるのは、%と同じく、親要素のフォントサイズで、1em＝100% を表します。1.25emは125% 0.5emは50%となります。emは日本語で訳すと倍ということになります。
フォントの種類を変えるfont-familyプロパティは、文字そのものの書体デザインの指定に使われます。同じPCでもWindowsとMacでは入っている（表示できる）フォントが違います。そのため、どのPCで見ても同じような書体になるように、font-familyはいくつかを指定することが多いです。フォント名に全角文字やスペースが含まれている場合はフォント名を「” ”」ダブルクオーテーションで囲みます。フォント名は全角、半角、スペースの有無、スペースの全角、半角を正確に書かなければ反映されません。また、font-familyを指定しない場合、OSやブラウザで決められたフォントで表示されます。複数のフォントを指定した場合、利用可能なフォントから順番に探して、あれば表示されることになります。
複数のフォントを設定する場合、間にカンマ（,）を入れることで指定が可能です。
text-alignプロパティは、OfficeソフトのWordの左揃え、右揃え、中央揃えと同じです。
それでは、style.cssに h1の フォントの指定を記載してみましょう。
フォントサイズ24px フォントファミリーは「”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif」、中央揃え、色はgrayで指定してみてください。
フォントファミリーの最後のsans-serifですが、これは指定したフォントがすべてない場合、フォントの系統を指定して近い表示をさせる方法です。
serif（セリフ）というのは、日本語の明朝体のような、アルファベットを表示する際のひげがあるフォントです。今回指定したsans-serifはゴシック体のようなひげのないフォントの系統になります。
sample.html内にstyle.cssへのリンクを追記します。
CSSファイルのリンクの貼り方は下記のようになります。
<head> <meta charset="utf-8"> <!-- エンコードの指定はutf-8 --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- スタイルシートのファイル指定 --> <title>Web Design Lesson</title> </head>
きちんとリンクが貼られていれば下記のように表示されます。
h1部分が画面中央に表示されて、色が変わっています。
また、フォントのプロパティはまとめて記述することも可能です。この際はfont-size,line-height,font-familyの順に記述します。
p{
font: 12px / 100% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
font-size と line-height の間は半角スラッシュ / で区切り、line-height と font-familyの間は、半角スペースで区切ります。
fontプロパティではこのほかにも font-style、 font-weight 、 font-variant プロパティがあります。
色の指定
色の指定方法は、色の名前（red、blue、blackなど）で指定する方法とRGB 16進法で指定する方法、RGBAカラーモデルで色を指定する方法があります。
16進法は、RGB値の各値を6桁の16進数（0～f）で指定します。#000000は黒、#ffffffは白。
webデザインではHTMLやCSSにおける色の指定の仕方としてこのような16進数による表記を主に用いています。
16進数の最初の二けたは赤の光の強さを示す16進数です。中央の二けたは緑の光の強さを示す16進数です。最後の二けたは青の光の強さを示す16進数です。
RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。rgbaカラーの使用方法は、カンマ（ , ）区切りにした３つの数値でRGBの色を指定した後に、数値で透明度を指定します。 RGBの色は0-255、または、0%-100%で指定します。透明度は、0（完全に透明）～1（完全に不透明）の数値で指定します。RGBA値の指定では、RGB値の指定とは異なり #FFFFFF のような16進表記を使用することはできません。
p{
background-color: rgba(0,0,255,0.5);
}
上記は背景色に rgba(0,0,255,0.5) を指定、半透明となります。
尚、RGBA値をサポートしていないブラウザでは、透明度だけが無視されて単なるRGB値として扱われるのではなく、色指定そのものが認識されずに無効となるので注意してください。
それでは、p要素の文字色を#006666にしてみましょう。
p{
color: #006666;
}
少しグリーンのような文字色になります。
文字色の指定はcolorプロパティで指定しますが、背景を変えることもできます。
この場合background-colorプロパティで指定します。
h1要素の背景色を#000066にしてみましょう。
h1{
font-size : 24px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align : center;
color: gray;
border-bottom: dotted 1px gray;
background-color: #000066;
}
h1の背景が青くなりました。今回は文字色を先にグレーで指定していたので、文字が見えづらくなってしまいました。文字色を白に変更して、ファイルを保存しておきます。