第22回：HTML&CSS講座本編3「CSSを書いてみよう」
どうも、シノです。
2週間の節目を過ぎ、折角のいい機会だったのでブログの書き方の本を2冊ほど読んでます。このブログは全然ダメでしたね（笑）
まあ、このHTML&CSS講座はどちらかというと将来の自分に向けたメモの意味が強いので、そのまま続けさせてもらいます。本で読んだ内容は雑記系で取り入れていこうかなと。
さて、今回はHTML&CSS講座第3回！
ついに、もう一つの本命「CSS」の書き方を解説していきます。
そもそもCSSって何だっけ？って方は、以下の記事をご覧ください。
今回の目次です。
0.前回の復習
前回は、はてなブログの見たまま編集でできることをHTMLで書いていきました。ただ、あまりに長くなりそうだったので一部は省略してます…
これに慣れてくると、自分で調べてタグを使うといったこともできるので、是非慣れておきましょう。
1.CSSってどこに書くの？
どんなふうに書くか、の前に、どこに書くかを見ていきましょう。
CSSは、主に以下の3パターンの書き方があります。
- 各HTMLタグのstyleオプションとして記載する
- styleタグに記載する
- 外部ファイルに記載し、HTMLで読み込む
これらは、上にいくほど優先順位が高いです。つまり、ある1か所に対し、上の3つ全部で定義が書かれていると、一番上のHTMLタグのオプションが適用されます。
2.HTMLタグのオプションとして書いてみよう
さて、早速書き方を…と言いたいところですが、その前にCSSをこの形式で書く際に使えるHTMLタグを2つほど紹介しておきます。<div>～</div>と、<span>～</span>です。
- <div>～</div>：これで囲んだ範囲を1つのブロック要素とする。
- <span>～</span>：これで囲んだ範囲を1つのインライン要素とする。
似たようなことを書きましたが、実際意味はほぼ同じです。両方とも、このタグによって囲まれた部分を1つの塊として定義します。両方とも、これらで囲ったものは重要である、強調すべきであることを表すといったイメージでしょうか。その塊の大きさが異なり、divは複数行にまたがる場合、spanは1行のうちの一部という認識でいいでしょう。
ただ、これらだけでなく、pタグや、h1タグ等の各タグにもオプションでCSSを指定することができます。
では、書き方です。オプションに、以下の記述を加えます。
style="(プロパティ): (値);[(プロパティ): (値);]..."
ごちゃごちゃしてますね、一個ずつ見ていきましょう。
まず、プロパティです。これは、どんな見た目を変更するかを書きます。例えば、文字の色であれば「color」、文字の太さであれば「font-weight」、背景色であれば「background」などです。
次に、値。これは、プロパティで指定した見た目を、実際にどう変更するのかを書きます。上で挙げた文字色、背景色などの色であれば#から始まる7桁のカラーコードを、文字の太さであれば「bold」(太くする)、「lighter」(細くする)などです。
実際に使ってみましょう。以下の文字列のうち、「かきくけこ」の文字を赤字に、かつ太くしてみます。
あいうえおかきくけこさしすせそ
さて、まずは赤字にしてみましょう。文字色を変えるプロパティは「color」、値はカラーコードを指定するんでしたね。赤のカラーコードは「#FF0000」です。なので、赤字にするオプションは「color: #FF0000;」となります。
あいうえお<span style="color: #FF0000;">かきくけこ</span>さしすせそ表示例
あいうえおかきくけこさしすせそ
次に、太字にします。文字を太くするには、プロパティは「font-weight」、値は「bold」を指定してあげます。これを追加してあげましょう。
あいうえお<span style="color: #FF0000; font-weight: bold;">かきくけこ</span>さしすせそ表示例
あいうえおかきくけこさしすせそ
これで、赤字かつ太字になりました。
このプロパティとそれに対する値も、ここでは解説しきれない量があります。是非、色々調べてみましょう。
3.styleタグに書いてみよう
さて、ここである疑問が浮かんできます。
「え、それって毎回毎回指定しないといけないの？」ということです。
こんなことを毎回指定していたら面倒ですし、まとめて変更したいってなったら全部変えなければいけなくなって、変更忘れも出てきてしまうと思います。
そんなときは、一か所に変更内容をまとめてしまいましょう。その方法の一つがこの<style>～</style>に記載する方法です。
<style>～</style>：このHTML内で使用するスタイルを定義する。基本的にheadタグ内に記載する。
これを使うと、そのHTML内で使うタグの見た目を一括で変更できます。早速見ていきましょう。
<style><!--
(セレクタ){
(プロパティ): (値);
(プロパティ): (値);
...
}
(セレクタ){
(プロパティ): (値);
(プロパティ): (値);
...
}
...
--></style>
プロパティと値は、「2.HTMLタグのオプションとして書いてみよう」で書いたものと同じです。それ以外で新しく、セレクタというものが出てきていますね。
セレクタとは、どんな部分にこのスタイルを適用するかを指定するものです。例えば、見出しの中でもh1タグでつけた見出しは赤字にしたい、という場合はこのセレクタにh1を指定します。
そして、なんか見たことある<!--と-->がくっついてます。これ、HTMLのコメントです。詳細は前回書いてますので、よかったらどうぞ。なんでこれが入っているかですが、表示するブラウザが対応してないと、ここに書いたものがそのままテキストとして表示されてしまうんです。それを防ぐために入っているのですが、最近はほとんど対応しているので、入れなくてもそんなに問題はないそうです。本記事では入れておきます。
で、同じタグでも、別のスタイルにしたい時もありますよね。例えば、「文字の色を変えたいけど、ある場所は赤文字、別の場所は青文字にしたい…」なんて場合です。
そんな時は、classセレクタというものを使いましょう。これは、スタイルに対してクラス名という名前をつけてあげ、実際に使う際にこのクラス名のスタイルを使うよと指定してあげる方法です。それぞれの書き方を見てみましょう。
スタイルを使う部分(HTML記述)
<(タグ名) class="(クラス名)">
これも具体例で見ていきます。例えば、spanタグで、赤字にする部分と青字にする部分があるとしましょう。以下の下線部分をそのままその色にしたいとします。
この文章では赤字にする。
この文章では青字にする。
このとき、スタイルを決める部分では以下のように定義します。
<style><!--
span.redcolor{
color: #FF0000;
}
span.bluecolor{
color: #0000FF
}
--></style>
そして、HTML部分の記載は以下の通りです。
<p>この文章では<span class="redcolor">赤字</span>にする</p>
<p>この文章では<span class="bluecolor">青字</span>にする</p>これを表示すると、以下のようになります。
この文章では赤字にする。
この文章では青字にする。
これで、同じタグを使っても、別のスタイルを適用できるようになりました。
なお、この方法で指定すると、指定したセレクタ内のクラスのみで適用されます。上の例だと、spanタグの各クラス名を指定した場所のみが適用されます。このまま<p class="redcolor">としても、そこの色は変わりません。
タグ関係なく、とにかく「このクラス名をつけたら変更するようにしたい」という場合は、セレクタの部分をそのまま消してしまいましょう。「.(クラス名)」という記述にすると、全てのタグで使えるクラス名になります。
4.外部ファイルに書いて、HTMLで読み込んでみよう
さて、ここまでで文章に見た目の変化をつけられるようになりました。
でも、今度は、「これを毎回HTMLに書いていくの…？」となってしまいますね。それも、解決しちゃいましょう。見出しにある通り、別のファイルにこの内容を書いていきます。
別のファイルに書くとき、「CSSファイル」に書いていきます。そう、拡張子がまた変わるんですね。拡張子については本講座本編1で書いています。よかったらそちらもどうぞ。
で、今回は拡張子をそのまま「.css」というものに変更します。それ以外は、HTMLの時と同じです。
中身も、「3.styleタグに書いてみよう」のタグ内の記載と同じです。コメントにした中身の部分をコピー&ペーストして、タグ自体は消してしまいましょう。
そして、HTMLファイル側には、読み込むための記述をします。以下の内容をHTMLのheadタグ内に書いてください。
このlinkタグは、本来は文章間の関係(トップページや次のページなど)を指定するものですが、CSSファイルを読み込む際にも使用します。色々解説しますが、よくわからない人はとりあえずhrefの内容を変えればいいんだなと思ってください。
hrefは、上にも書いてある通り、読み込むCSSファイルを指定してあげてください。ここには、Webで公開されているCSSも指定することができます。その際は、そこの規約等もしっかり確認しておきましょう。
relは、hrefで指定した対象の種別を指定します。本来であれば、最初の文章なら「start」、これを書いている次のページなら「next」などですね。スタイルシートの場合は「stylesheet」です。
typeは、MIMEタイプというものを指定してあげます。簡単に言ってしまうと、Web上での拡張子のようなものです。スタイルシートの場合は「text/css」です。
ちなみにですが、はてなブログの「スタイルCSS」は、この外部ファイルに記載するCSSと同じです。ここに書いておけば、ブログの全ての記事にそのスタイルを適用させることができます。カスタマイズしたい方は、元々書いてある内容をバックアップしてからチャレンジしてみましょう！
5.まとめ
いかがだったでしょうか。今回は、基本的なCSSの書き方について解説していきました。
ここまでできるようになると、ブログのカスタマイズが可能になります。自分のしたいスタイルにチャレンジです！
さて、次回ですが、前回解説できなかった部分を解説していこうかなと思います。目次だったり脚注だったりですね。主に、aタグの使い方になるかと思います。
更新情報等はTwitterでも呟いてますので、よかったらフォローをお願いします！！！
次回：色々なリンクを貼ってみよう(2019/1/13投稿しました！！！)
それでは。
