どうも、シノだ。
前回までで、基本的なものだけだが一通りHTMLについて解説してきた。今回は、その見た目をカスタマイズできるようにしていく。
そう、やっとCSSに入るわけだ。これができると、見た目を思うがままにカスタマイズできるようになる
同時に、便利なHTMLタグについても解説していこう。
前回の復習
前回は、HTMLタグのオプションの書き方と、基本的なHTMLタグの紹介を行った。このあたりは覚えておくといいだろう。
HTML文章の塊を定義する2つのタグ
いきなりだが、ちょっと横道にそれる。
HTML文章で、ここの塊は一つのもの、という感じでまとめたい場合がある。これをするために使える2つのタグを紹介しよう。
- divタグ：これで囲った部分を一つの塊とみなす。主に1行以上をまとめる場合に使う。
- spanタグ：これで囲った部分を一つの塊とみなす。主に1行の中の1部分をまとめる場合に使う。
これらは、このタグを使用しただけでは見た目に変化は現れない。本当に、そこを一つのものとして扱うためにあるという認識でいいだろう。
これらは、CSSで書く場合によく使うものである。覚えておこう。
CSSの3通りの書き方
さて、早速CSSを書いていこう。
CSSの書き方は、以下の3通りある。
- 各HTMLタグの「style」オプションとして記述する
- HTMLのstyleタグにまとめて記述する
- 外部ファイルに記述し、HTMLファイルで読み込む
これらのうち、基本的には上にいくほど優先度が高くなると思ってもらってもいいだろう。しかし、厳密には異なるので注意して欲しい。
今回のサンプルも、また別のページにまとめた。ここから参照してほしい。
一つずつ詳細を見ていこう。
styleオプションで記述する
まずは一つ目、HTMLタグのstyleオプションで記述するパターンだ。これが一番手軽で、簡単にできる。基本的な書き方は以下の通り。
style="プロパティ: 値;プロパティ: 値;..."プロパティはどんな見た目を変えたいか、値はその見た目を具体的にどう変えたいかだ。
具体的な例を出そう。以下の文章の鍵括弧の中を太字かつ下線を引きたいとする。
強調したい内容は、「ここの部分」だ。
さて、まずはここのHTMLを見てみよう。以下のようになっているはず。
<p>強調したい内容は、「ここの部分」だ。</p>最初に、上で紹介したspanタグで、スタイルを変えたい部分を囲む。そこの部分を、一つの塊とみなすのだ。
<p>強調したい内容は、「<span>ここの部分</span>」だ。</p>この時点では、まだ見た目は変わらない。
次に、まずは太字にしてみる。文字の太さを変えるプロパティは「font-weight」、太くする値は「bold」だ。すると、
<p>強調したい内容は、「<span style="font-weight: bold;">ここの部分</span>」だ。</p>こんな書き方になる。見た目はサンプルページを参照してほしい。
さて、最後に下線を引こう。これには大きく分けて二つの方法があるので、それぞれ紹介する。
まず、text-decorationプロパティを使用する方法。これは、文字に装飾を行うもので、下線以外にも指定することができる。
今回は、値として「underline」を指定してみた。
<p>強調したい内容は、「<span style="font-weight: bold; text-decoration: underline;">ここの部分</span>」だ。</p>すると、よく見る下線が引かれていると思う。これで、いったんは目的が達成された。
では、もう一つの方法を見てみよう。今度はborder-bottomプロパティを使用する方法。こちらは、borderという名前が入っている通り、本来その箇所に枠線をつけるものだが、下だけ枠をつけることで、疑似的に下線を引く。サンプルは以下の通り。
<p>強調したい内容は、「<span style="font-weight: bold; border-bottom: 1px solid #000000;">ここの部分</span>」だ。</p>三つ値を一気に指定している。一つ目は線の太さ。今回はピクセル単位で、1ピクセルを指定している。二つ目は線の種類。一本線を表すsolidを指定した。三つ目は線の色。カラーコードで指定していて、全部0の場合は黒を表す。
こうすると、ちょっと下にさがるがしっかり下線が引かれているだろう。
これを応用すると、下線のみ色を変えることができる。試しに赤にしてみよう。そのとき、指定するカラーコードは#FF0000になる。
<p>強調したい内容は、「<span style="font-weight: bold; border-bottom: 1px solid #FF0000;">ここの部分</span>」だ。</p>これで、下線部分だけ色を変更することができる。これだけでもだいぶ印象が変わるだろう。
styleタグ内でまとめて記述する
さて、一つ一つ設定していってもいいが、そうすると問題も出てくる。
例えば、一度決めたものを一斉に変更したい場合だ。このとき、いちいち全部手で変えていくのも面倒だろう。変更忘れも出てしまいかねない。
そこで、あらかじめルールを決めておいて、そのルールに基づいて見た目が変わるようにする方法も用意されている。その一つが、このstyleタグを用いる方法だ。
基本的な書き方は以下の通り。
セレクタ {
プロパティ: 値;
プロパティ: 値;
...
}セレクタで、どこに適用するかを指定する。その後、上と同じプロパティ・値の組を中括弧でくくってあげるだけだ。
このセレクタについては書き方が色々ある。例えば、あるタグの書式を一括で変えたい場合はそのタグを書く。
それ以外にも、ある名前をつけたものを一括で変更することもできる。このある名前とは…前回ちらっと出てきたidオプションや、他にもclassオプションがある。
classオプションについてもちょっと解説しよう。HTMLタグのオプションの一つで、nameとほぼ同じ使い方をする。つまり、重複したクラス名もつけれるのだ。
で、このclassオプションでつけた名前を指定し、一括でスタイルを指定してあげることができる。
こちらも、具体例を見ていこう。以下のHTMLを見て欲しい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>styleタグによる指定</title>
<link rel="stylesheet" type="text/css" href="./css/Sample02.css">
</head>
<style>
span {
font-weight: bold;
}
#id1 {
color: red;
}
.class1 {
font-weight: normal;
background: yellow;
}
.class2 {
border-bottom: 1px solid black;
}
</style>
<body>
<h1>styleタグによる指定</h1>
<div class="contents">
<p>一つ目の例</p>
<ul>
<li>spanタグのみ指定：<br><p>強調したい内容は、「<span>ここの部分</span>」だ。</p></li>
<li>id1指定：<br><p>強調したい内容は、「<span id="id1">ここの部分</span>」だ。</p></li>
<li>class1指定：<br><p>強調したい内容は、「<span class="class1">ここの部分</span>」だ。</p></li>
<li>class2指定：<br><p>強調したい内容は、「<span class="class2">ここの部分</span>」だ。</p></li>
<li>class1かつclass2指定：<br><p>強調したい内容は、「<span class="class1 class2">ここの部分</span>」だ。</p></li>
</ul>
</div>
</body>
</html>ここのサンプルページのソース全文だ。下の方にあるulタグの中身に注目して欲しい。
箇条書きの中に、5つのli要素がある。そして、それぞれの中に強調する部分として5つのspanタグがあるだろう。そこと、今度は上の方にあるheadタグ内のstyleタグを見て欲しい。
これらが対応し合って、実際の見た目を作り出している。基本的な書き方から見ていこう。
まず、HTMLタグを指定して見た目を変える場合。サンプルでいうと以下の個所だ。
span {
font-weight: bold;
}このspanの部分がセレクタと呼んでいる部分だ。これにより、とにかくspanタグを使ったら太字にするよう指定している。表示例も、一番上は太字になっているかと思う。
次に、idで設定している部分。二つ目の個所に注目しよう。
#id1 {
color: red;
}このように、先頭に「#」をつけることでそのID名を使用した箇所に変更を加えることができる。今回は「#id1」と書いているので、ID名に「id1」を指定したものの文字がここによる変更を受ける。
中のcolorプロパティは文字色を決めるもの、さっきの例だとカラーコードを指定したが、一部はこういった具体的な色の名前も反映してくれる。今回は赤色にしてみた。
で、実際にid1を指定した部分は、上のspanタグの部分と、ここの文字色変更により太字かつ赤色になっている、というわけだ。
さて、三つ目。今度は先頭にドットがついている。
.class1 {
font-weight: normal;
background: yellow;
}このドットをつけると、今度はそのクラス名を指定したタグ全てにこれを反映させることができる。
中身は、文字の太さを普通にするものと、background…背景を黄色にする。これを、class1というクラス名がつけられたものに反映させている。サンプル内では三つ目の箇条書きがこれにあたる。
四つ目も同じクラス名指定だ。今度は名前と指定している内容が違う。
.class2 {
border-bottom: 1px solid black;
}上でも解説した、枠線を応用した下線だ。サンプルは四つ目。
さて、サンプルには5つ目も用意してある。これは、class1、class2二つのクラスを指定している。
このように、クラス名は半角スペースを挟むことで、複数のクラス名を同時につけてあげることもできる。しっかり、両方のクラスの内容が反映されていることが確認できると思う。
外部ファイルにまとめて記述し、HTMLで読み込む
さて、まとめて定義することはできたが、今度は複数のHTMLで同じ設定をしたい。同じサイトなのにページそれぞれで違うスタイルを使用することもそんなにないだろう。
というわけで、今度はそもそもCSSを別のファイルにしてしまい、HTMLで読み込んでしまおうというものだ。この、別にしたものは拡張子を「.css」にしてあげる。拡張子って何？という方は以前解説しているのでこちらを参照してほしい。
まずは、サンプルのHTML部分を見てみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部ファイルによる指定</title>
<link rel="stylesheet" type="text/css" href="./css/Sample02.css">
<link rel="stylesheet" type="text/css" href="./css/Sample03-3.css">
</head>
<body>
<h1>外部ファイルによる指定</h1>
<div class="contents">
<ul>
<li>spanタグのみ指定：<br><p>強調したい内容は、「<span>ここの部分</span>」だ。</p></li>
<li>id1指定：<br><p>強調したい内容は、「<span id="id1">ここの部分</span>」だ。</p></li>
<li>class1指定：<br><p>強調したい内容は、「<span class="class1">ここの部分</span>」だ。</p></li>
<li>class2指定：<br><p>強調したい内容は、「<span class="class2">ここの部分</span>」だ。</p></li>
<li>class1かつclass2指定：<br><p>強調したい内容は、「<span class="class1 class2">ここの部分</span>」だ。</p></li>
</ul>
</div>
</body>
</html>設定するものを外に出してしまったので、この中にはスタイルを決めるような記述は一切ない。代わりに、さっきはなかったものが1行追加されている。
headタグの最後を見て欲しい。
<link rel="stylesheet" type="text/css" href="./css/Sample03-3.css">これが、外部のCSSファイルを読み込むものだ。今回はこのファイルから見たCSSファイルの場所(相対パス)を書いたが、URL全体(絶対パス)を書いてくれても全く問題ない。
このlinkタグのオプションについて詳しく見ていく。
一つ目のrelオプションは、本来はhrefオプションで指定している対象が、この文章から見てどういった位置付けなのかを表すものだ。目次とか、次のページとか。CSSの場合は、ここに「stylesheet」という記述をしてあげる。ここは固定で覚えてしまおう。
二つ目、typeオプションだ。これは、Webページ版拡張子のように思ってもらっていい。対象のファイルの拡張子を指定してあげる。CSSの場合は「text/css」で。ここも覚えよう。
で、三つ目のhrefオプションに、実際のCSSファイルがある場所を指定してあげる。
勘のいい方はお気づきかもしれないが、前回からこれを使って見た目をちょっとだけ調節していて、今回も流用している。具体的な内容はソースを表示したら見れるので、ちょっと覗いてみるといいかもしれない。
では、今回のCSSファイルの中身を見てみよう。実際の中身もここから確認できる。
span {
font-weight: bold;
}
#id1 {
color: red;
}
.class1 {
font-weight: normal;
background: yellow;
}
.class2 {
border-bottom: 1px solid black;
}styleタグで指定していたときのものを、そのまま写しただけだ。もちろん、結果も同じになる。
これが使えるようになると、複数のHTMLに対して、同じCSSを使うことができる。これで、自分の書いたWebページ全体のスタイルを一括で設定できるのだ。一部変えたい場合は、また別のファイルを作って読み込ませるとか、本当に特定のタグ一か所だけならstyleオプションで変えてあげればいい。
オマケ：スタイル確認用ページ
ちょっとオマケだ。4つ目のサンプルページについて軽く解説する。
ここは、div、span二つのHTMLタグを、それぞれクラス名をつけて用意した。
で、下の条件を入力し、「反映」ボタンを押すと、それに沿ってスタイルが変わるようにしてみた。
それぞれ、文全体が、あるいは文の一部がどう変わるか見たいときに使えると思う。よかったら色々いじって見て欲しい。
なお、ここにはjQueryというものも使用している。いつか解説するつもりだが、気になったら調べてみよう。
まとめ
いかがだっただろうか。今回の内容で、簡単な見た目が変更できるようになった。
さて、実は…CSS編は今回だけだ。もう基本的なものは全て解説してしまった。プロパティとか値とかはここでは扱いきれない数が存在する。適宜、使用時に調べてみて欲しい。
なお、セレクタには「あるタグかつこのクラス名だったら」とか、「あるタグに含まれるこのタグには」といった指定の方法もある。使うときが来たら解説を入れよう。
次回だが…ついにJavaScript編開始だ。HTML&CSS講座はここでいったん終わりとなる。
次回から、ようやく画面で入力を受け取ったり、実際に処理したりと動きのある内容を書けるようになってくる。是非、マスターしてほしい。
更新情報はTwitterでも呟いている。ページ下部のTwitterアイコンから覗いてみて欲しい。
それでは。
コメント
[…] 前回は、CSSの基本的な書き方について扱っていた。書き方は3通りあり、それぞれHTMLタグのstyleオプションとして使用する方法、styleタグに記述する方法、外部ファイルに記述して読み込む方法があった。 […]