前回のお話のPart4で、WEB上にたくさん解説があるといいつつ、HTMLタグのこと、少しだけ解説しました。Part4.こちら
続いて、CSSについても、少し解説をしたいと思います。Part3.で、HTMLが、ページ全体の構成（要素）を作るためのもので、それをより見栄えよくするために使うのが、CSS（Cascading Style Sheets）と説明しました。
CSSとはそもそもどういうものか？
- 単なる文字列に、装飾を施すために使用する。
- 摘要方法は、3パターンある。
- 基本の書き方は、プロパティ：（コロン）値。
＜基本の書き方＞
font-size: 24px
font-sizeの部分が、プロパティとなり、その値が24pxということになります。
そして、適用方法が、3パターンあるうちの、一つの書き方で示すと、以下のようになります。
<h1 style="font-size:24px;">この内容は見出しである</h1>
これは、前回解説したHTMLタグを含んだ書き方になっています。h1タグは、見出しという意味を持つ、タグでした。このh1タグで、「この内容は見出しである」という文字列を、囲んでありますので、この部分が大見出しであることは分かります。そして、その大見出しに装飾を施すために書かれているのが、CSSで、ここでは、style=”font-size:24px;”の部分になります。
この書き方は、インライン（タグに埋め込む）方式であり、直接記載してあるタグにのみ、影響を与えるCSSです。
font-size＝文字のサイズ ということですので、大見出しの文字サイズが、24pxという意味になります。
他の２つの方法は、HTMLタグ以外の場所にcssを書くのですが、そのうち1つは、ファイル自体を別にして、リンクを貼る方法、もう一つは、ファイル内のヘッダー部分に、CSSを記述する方法です。
いずれの場合も、CSS部分の書き方としては、下記のようになります。
h1 {
font-size:24px;
font-weight: bold;
color: #ff7800;
}
先ほどと違うのは、h1（この部分をセレクタと言います） の後に｛ をつけ、プロパティと値を書き、 ｝で、閉じている点です。これは、単に書き方の違いというだけですが、書き方を間違えると、正しく反映されないので、注意が必要です。
インライン方式で書いたように、フォントサイズの指定だけであれば、下記のようにも書けます。
h1 {font-size:24px;}
｛ ｝の部分を行替えしたりしているのは、単に、コードを見やすくするだけの工夫ですので、実際は、必ず行替えをしないといけないというわけではありません。また、反映したいスタイルが、複数ある場合は；（セミコロン）を使います。一つのプロパティ値ごとに；を入れて、続けて記述できるのです。
つまり、最初に説明したインライン方式で記述した場合は、下記のようになります。
<h1 style="font-size:24px; font-weight: bold; color: #ff7800;">この内容は見出しである</h1>
インライン方式の場合は、style=”” （ダブルコーテーション）で囲まれた中に記載するのが特徴ですね。まずは、記述の仕方の違いがわかりましたでしょうか？
そして、CSSというのは、一つのセレクタに対して複数のプロパティ値を書き込むことが多いのです。例の場合は、文字サイズ、文字の太さ、文字の色の指定です。それだけでなく、例えば、その文字を四角で囲む、四角の背景の色を指定する、影を付けるなど。そうすると、｛ ｝書きの際に、行替えした方が、見やすくなるのも、納得ですよね。
勢いで記述している時は、良いのですが、後に修正や変更を加えることもしばしばです。どこに何をどう書いているのかが、見つけやすい工夫は大切です。
では、次にstyle＝の部分について。インライン方式の場合は、style＝とすることで、その後に書くのは、CSS言語であることを示します。HTMLタグ以外の場所にCSSを書く他の２つの方法の場合は、どうなっているのでしょうか？
そもそも、h1｛ ｝でCSSを記述した場合、そのページで書かれたh1タグ全てに、同じCSSを適用させることができるようになります。
大見出しを1ページに沢山書くことはないかもしれませんが、次の見出し、h2タグであれば、1ページに何度も登場する可能性があります。そんな時に、インライン方式で、全部のh2タグ内にCSSを書き込むのは非効率です。
ここからは、話しがより複雑になりますが、多くの場合は、このHTML以外に書く方法を使うので、必ず理解が必要です。
先ほど・・
- ファイル自体を別にして、リンクを貼る方法
- ファイル内のヘッダー部分に、CSSを記述する方法
上記、２つの方法があると書きました。
この違いをもう少し説明します。ファイル自体を別にする方法では、PCソフトのメモ帳などを使って、CSSを記述し、そのファイルを拡張子.css として、保存します。
例えば、「style.css」というファイルを作成したとします。
そのCSSを反映させたいHTMLファイルのヘッダー部分に、下記のように記述します。
<head> <link href="style.css" rel="stylesheet" type="text/css" media="all"> </head>
上記は、リンク先として指定している、styleというファイルが、stylesheet（スタイルシート）であることを指示しています。お決まりの書き方ぐらいに思っておくといいです。
link タグは、href=”” で、リンク先を指定します。当然ですが、ファイルのある場所を指定する必要があるので、HTMLファイルと同じ場所にstyleファイルも置いてある場合が、上記の記載になります。
他、リンクタグについて、下記よければあわせて見てみてくださいね。
このようにリンクをヘッダーに書きこむことで、別ファイルとして保存されている「style.css」を読み込んで、このヘッダーに記述したのと同じ状態に、することができます。
それに対して、2つ目の「ファイル内のヘッダー部分に、CSSを記述する方法」は、直接そのファイルに、CSSを書き込むため、書き込みをしたファイル（ページ）へのみ反映させることになります。
もう、お分かりいただけましたか？
どのように、3つのパターンを使い分けるのか・・。
ということで、まとめると・・
①インライン方式＝HTMLタグ内に書き込む
②外部リンク方式＝ファイル自体を別にして、リンクを貼る方法
③内部ヘッダー方式＝ファイル内のヘッダー部分に、CSSを記述する方法
※この〇〇方式は私が便宜的に勝手に名前をつけていますので、ご容赦を。
HTMLは、１つの記事（ページ）ごとに、１つのファイルで構成されています。特に、このじゅうmado宇部のWEBサイトのように、ブログタイプのページ構成の場合は、各ページごとにスタイルを設定するのはとても大変です。
例えば、このサイト内のブログ記事のタイトルは、基本同じ装飾です。
他にも、読む人が読みやすいように、引いているマーカータイプなども同じです。
このような場合は、②外部リンク方式を使って、全ページに影響を及ぼすようなスタイルシートを用意しておくだけで良いので、いざ訂正となっても作業が楽ですよね。
また、仮に特殊なデザインのページが1ページだけあるような場合は、そのファイルのみに影響するスタイルシート、③内部ヘッダー方式を使った方が、管理がしやすいです。
さらに、全体では、h1タグのフォントサイズは、24pxだけど、このページだけは、30pxでより目立たせたい。などという場合は、①インライン方式で書き込みすると良いでしょう。
CSSは、仮にh1のスタイルが複数あった場合、優先的に、一番近い・・インライン方式が採用されます。というか、上書きされます。
基本的に読み込まれた順に、上書きされていくので、仮に同じタグに対する指定があった場合は、後に読み込まれた方が反映されるのです。
ここまでで、長くなってしまったので、今回は終了しましょう。まだ、もう少しCSSについては、お話ししたいことがあるので、次回もよろしくお願いします。