前エントリーで【見出しタグ】について説明しました。
そして、タグの設定次第で横に線を付けたり下に破線をつけたり出来ることもちょっと書きました。
そのための方法が【CSS】と言います。
今回はその仕組みを理解していただけたらな、と。
HTMLとCSSは親戚
HTMLだけでも背景に画像を表示させたり、文字の色を変えたりなどデザイン的ないろいろなことが出来ます。
しかし、HTMLは本来、文章（文字）を表示させるための言語です。
そこで、CSSという言語を使って【HTMLは文章。CSSでデザイン】とはっきりと役割分担しましょう、となったわけです。
この考えにより、HTMLはすっきりと、さらにCSSをいじるだけですべてのHTMLのデザインを変更することが可能になったわけです。
というわけで、HTMLとCSSは親戚のようなものなんです。
HTMLで文章を作り、CSSでデザインを整えるわけですから。
さて、上の数行をHTMLで見てみると
<h2>HTMLとCSSは親戚</h2> <p>HTMLだけでも背景に画像を表示させたり、文字の色を変えたりなどデザイン的ないろいろなことが出来ます。<br/> しかし、HTMLは本来、文章（文字）を表示させるための言語です。<br/> そこで、CSSという言語を使って<strong>【HTMLは文章。CSSでデザイン】</strong>とはっきりと役割分担しましょう、となったわけです。</p>
こんな感じです。
<アルファベット>で書かれているのが【タグ】です。
タグ自体はHTML内に書き込みます。
しかし、ここに書いてあるタグだけでは見出しの頭についているオレンジ色の線は表示されません。
CSSで設定して初めて表示されます。
【見出し２】にオレンジ色の線が表示されるように当サイトのCSSでは以下のように書いてます。
h2 {
border-width:0 0 0 10px;
border-color:#f79708;
border-style:solid;
}
（これだけでは無いのですが、簡略化するために少し省略しています）
CSSのルール
CSSの書き方はまず【タグ】を書き、そのタグに設定する要素（色や大きさなど）を { } の中に書きます。
要素を複数設定する場合は ; で区切ります。
これがCSSの基本です。
これを設定すればブログ内の<h2>で囲まれた部分にオレンジ色の線が表示されます。
しかし、これだけでは不十分です。
なぜなら、ブログ内のすべての<h2>タグにこの設定が反映されてしまうからです。
本文の中だけに表示したいのに、場合によってはウィジェット（サイドカラム）に反映されてしまう場合もあります。
それは、困りますよね。
そこで【どこの】という情報を追加しましょう。
すると
#content .entry-content h2 {
border-width:0 0 0 10px;
border-color:#f79708;
border-style:solid;
}
こうなります。
idとclass
- id・・・#（ナンバー）から書かれる。上で言うと #content がid。
- class・・・．（ピリオド）から書かれる。上で言うと .entry-content がclass。
CSSで【どこの】という情報を追加する場合は【id】または【class】あるいはその両方をタグの前に記述することになります。
言うなれば住所のようなものです。
住所をちゃんと記述すれば、この住所にあるタグにだけCSSが反映します。
とは言え、Wordpressのように誰かが作ったHTML文書の場合はどのようにタグ付けされているのかわかりづらいことがあります。
そういう場合はブラウザの【ソースを表示】や【要素を検証】などを使うとなかなか便利です。
Chromeを例に言うと。
- 目的のページをブラウザで表示
- ページ上で右クリック
- 【要素を検証】をクリック
- ウィンドウが開くので目的のタグを探す
- 開いたウィンドウの右側に要素が表示
- 「#（ナンバー）」や「.（ピリオド）」で始まる行を探す
こんな感じです。
まあ、こうやって書いてるのを読んだところですぐ出来るようにはならないと思います。
結局は試行錯誤して覚えるしかないんですよね。。。
idとclassは自分で探すしかないんですが、タグは『CSS タグ 作成』などで検索すると自動作成してくれるサイトが見つかります。
活用してくださいね。
CSSの表記場所
WordPressの場合は【外観】⇒【カスタマイズ】、あるいは【外観】⇒【（テーマ名）Settings】辺りにCSSを追記記述出来る場所があります。
（テーマによっては無い場合もありますが。。。）
フリーブログの場合は【CSS編集】などという項目を探してください。
そこに作成したCSSを貼り付けます。
きちんと記述出来ていればブログに反映されます。
反映されない場合は
- idやclassに間違いが無いか
- 全角文字が混ざってないか
- ；と：を間違えてないか
辺りを探ってみてください。
‡ポイント‡
CSSのルールはこんな感じです。
まあ、結局は習うより慣れろ、なんですが。。。
読んだけど、よくわからない。
PC作業が苦手なので作ってもらいたい。
なんていうアーティストさん、YourTuneWorksではWebサイト制作も承っております。
まずはお気軽にお見積からどうぞ。
Webサイト制作の発注・お見積≫