New・HTML実験室: 10.CSSを使う

CSSは、HTMLタグと両輪になるもので、スタイルシートと呼ばれるコマンドです。CSSもバージョンが上がって進化して来ましたが、基本的にはタグで指定できないデザイン面の書式を指定するものです。あまりにも種類が多く、覚えているコマンドを手で入れるということは、ほとんど不可能です。ページの共通のデザインを決めるために使われますが、コンテンツのタグ表現の数倍の分量の文字数になります。テンプレートと呼ばれる、デザインはblogなどで使われています。手作りCSSで自分のページを飾るのは、自分で手縫いした洋服のようなもので、デザイナーが作った服を着るのが、今のwebの常識です。しかし、部分的にも理解しておくことは、HTML理解には必須です。ここでは、基本的な理解のための説明をします。

●タグの中で、オプションのように　style="　"　で使う

タグのオプションが＝を使うのに対し、コマンド：指定値　のようにコロンで区切り、セミコロンで繋ぎます。

text-align: center　は、文字などを中央寄せするものですが、<p>タグの中に入れる場合は、
<p style="text-align: center ;"> 文章　</p> と書きます。どのタグに、どういうCSSが入れられるかは、内容によって決まっています。辞典や、ネットで調べて使います。すべて頭に入っているのは、プロのwebデザイナーくらいです。

リンクのタグ<a>の中に、<a style="text-decoration: none;" href="リンクアドレス">ここをクリック</a>

を入れると、リンク文字に着くアンダーラインを消すことができます。

<h1 style="color: #ff0000;">タイトルの文字の色を赤にする</h1> は、表題タグ<h1>に組み込んだ例です。

●classを指定して、複数の場所で同じスタイルを使う

CSSは、複数のコマンドが使われます。これを繋ぐのに、セミコロンで区切りますが、上の例のように1行で収まり、他では使わない場合、タグの中に埋め込みます。しかし、複数のCSSを複数の場所で使う場合、まとめて記述しておき、classというグループにして、呼び出せるようにします。これが、本来のスタイルシートという記述です。この記述は <style>　で始まり、</style>で終わるもので、この間の記述はHTMLで表示されません。

<style>

div {width: 240px;height: 100px;border: 6px solid #00b200;}

a {text-decoration: none;}

h1 {color: #ffaa00;}

.b-radius {border-radius: 16px;text-align: center;}

</style>

<h1>CSSで角丸を作る</h1>

<div>太枠の箱に文字を入れる。横240　縦100　太さ6　です。</div><br>

<div class="b-radius">箱の、四つ角を丸くする設定をし、文字を中央配置にしています。改行していないので、折り返し後に中央になります。</div>

<a href="http://winboys.net/">ここをクリックして</a>

htmlを開くと、この様に表示されます。

CSSは、クラス名前 {コマンド； }　で書かれますが、タグの名前を使うか、独自名を使いますが、その場合は先頭をピリオドにします。タグ名で指定すると、そのタグすべてに適用されます。本当は、divなど他で使うものをclassに使わない方が良いです。独自名のclassを使う場合は、タグの中に　class=" ピリオドを除いた名前"を宣言します。<div class="b-radius">は、divで宣言したスタイルと、.b-radius

で宣言したスタイルが適用されます。ここをくりっくして　は、リンクが埋め込まれていて、アンダーラインはありませんが、マウスカーソルは「手」になります。

●CSSで画像の書式を設定する

文字と画像で始まったhtmlですが、見栄えをよくするためのCSSは、画像の書式を追加するものが多いです。これらは、種類も多く次々追加されるので、辞典もすぐ古くなります。ネットで調べて利用しましょう。