3日目 CSSを学ぼう！
「今日はCSSについて学ぶよ。ユーザーが実際に見る画面をレイアウトするために必須だから頑張って覚えて」
「はーい」
* * *
※https://www.w3.org/
「HTMLは文書構造のための言語だったね。じゃぁ装飾をするためにはどうすればいいのかということで作られたのがCSS（Cascading Style Sheets）。HTMLとともに使う言語で、装飾するために特化したもの。
文書構造はHTML、装飾はCSSという役割分担。ただ、前回も言ったけどHTML4のころはまだまだ役割分担できていなかったけど、今ではできる限り装飾はCSSを使うようになっている。
CSSは1994年にCERNで誕生した。こちらもHTMLと同じくスイス生まれのエリートだよ。
1996年 CSS1
1998年 CSS2
2012年 CSS3 現在のCSS
CSS4 草案 そのうちこれになる感じ。
今の書き方になったのがCSS3になってから、ケータイ小説全盛期のころからある小説サイトで使われているHTML/CSSを覚えたのであればHTML4/CSS2が基本になっているんだろうね。今はHTML5/CSS3だからちゃんと覚え直しをするのがいいよ。
多くのことが変わっているし、できる限り新しい書き方ができるようにしてね」
「なるほどね。私が覚えてるのは古かったんだ。だからリニューアルが必要なんだね」
「そういうこと。できることも変わってきているし、なるべく定期的に新しい知識も入れないといけないな。じゃぁ使い方を説明していくよ」
* * *
「CSSはHTML 文書の要素に選択的に装飾を適用できる。例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のような CSS を記述する。
p {
color: red;
}
一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述します。
p {
color: red;
width: 500px;
border: 1px solid black;
}
セレクタが装飾したい要素を指定するもので、単に要素を指定するだけではなくていくつも指定の仕方があるよ。
* {
color: #333;
}
アスタリスクを使うと、すべての要素に適用させることができる。でも、動作が遅くなるからあまり推奨されてない。使うときは注意。
<span class="red">内容</span>
.red {
color: red;
}
次にクラス指定。一番使うので覚えておこう。HTMLにClass属性を付けて識別する。
span.red {
color: red;
}
こんな書き方もできるよ。同じClass属性はいくつもの要素につけられるからその中でも限定する書き方だね。
<span id="red">内容</span>
#red {
color: red;
}
次はid属性をしていた指定。＃を付けて指定するよ。ちなみに同じid属性は同じページに1つしか付けられないよ。
p span {
color: red;
}
他には小孫指定、特定の要素の中の、要素を指定することもできる。
p , span {
color: red;
}
複数の要素に同じプロパティを設定することもできる。
こんな感じに、装飾したいものを指定してプロパティを設定するのがCSSだよ」
「うーん、なんだか難しいなぁ」
「使ってみればなれるよ。じゃぁ次は適用させる方法だね」
* * *
「適用方法は3つある。1つ目は外部ファイルを読み込む方法。2つ目はHTMLファイルのheadタグ内に書く方法。最後はタグのstyle属性に直接書く方法がある、それぞれ説明するよ。
1. 外部ファイルを読み込む
<head>
<link rel="stylesheet" href="styles.css">
</head>
HTMLファイルのHeadタグの中にlinkタグを使ってCSSファイルを読み込むことができるよ。
2. HTMLファイルのheadタグ内に書く
<head>
<style>
p , span {
color: red;
}
</style>
</head>
headタグの中にstyleタグを追加してその中にCSSを書いていく。
3. タグのstyle属性に直接書く
<p style="color: red;">段落</p>
直接タグに指定することもできる」
「ふーん、どう使い分けるの？」
「基本的には外部ファイルを読み込んで適用させる。特定のページだけデザインを変えたいときに2つ目の方法を使う。3つ目の方法は特定のタグだけデザインを変えたいときに使う。でも2番目も3番目もできる限り使わないようにするべきだね」
「どうして、直接書くのはダメなの？」
「いくつか理由はあって、まず大きいのが修正作業が非常に面倒になるから。もしデザインに変更があった場合に直接書かれていると何ページも修正しないといけなくなるからだね。例えばサイト全体で100ページ分のHTMLがあるとすると、100ページ分の修正が必要になる。でも外部ファイルを読み込んでいるなら、その1つのファイルの修正だけで済むよ。
あとは、HTMLは文書構造を表すもので、装飾は入れないようにするのが基本だからかな。できる限り装飾と構造は分離しておくのが原則」
「なるほど、わかったわ」
「あとは、そうだね、スマホ対応のレスポンシブについて。最近の閲覧デバイスはスマホの方が多いからきちんと対応しておかないといけない。普通に作ったら、PC用のレイアウトになるから、スマホ用に指定しないといけない。
まずはheadタグの中にこのタグを入れる。
<meta name="viewport" content="width=device-width,initial-scale=1">
これは表示領域を設定するもので、スマホでも見やすくするための物。あとはCSSに画面サイズによって指定するプロパティを変える設定をする。
@media(max-width:580px){
p{
font-size:14px;
}
}
メディアクエリーといって、表示された画面幅によって設定を変えることもできるんだ。この場合だと、画面幅が580px以下の場合に有効になるよ。
こんな風に大きい画面サイズの場合（PC用）、小さい画面サイズ（スマホ用）のレイアウトを別に作って、どちらでも対応できるようにしておくといいかな。
デザインは、大きいサイズ（PC用）、中くらいのサイズ（タブレット用）、小さいサイズ（スマホ用）の3つくらい用意するとどの端末でも見やすくていいかも」
「あぁ、そっか色々な人が使うからそれぞれ見る人の環境が違うんだね。うーん大変だ」
「スマホレイアウトを基準にして作るやり方もあって、全部それに統一すると楽かもね。まぁ対象となる人の端末次第かな。PCで使う人が少ないんだったらスマホに合わせてもいいと思うよ。そのあたりは作るものによるかな。
じゃぁ、あとはよく使うプロパティを並べておくからそれぞれ使い方の勉強をしよう」
「まだまだ覚えることはたくさんだなぁ……」
「まだまだ序の口。じゃぁ説明していくよ。
■レイアウト関連：レイアウト用に使う装飾。ひと昔前はflexレイアウトが流行っていたけど今はgridが流行ってる。
display：要素の表示形式を指定する。flexを指定すればflexレイアウトができる。gridを指定すればgridレイアウトが可能。
flex-direction：子要素の並ぶ向きを指定。
flex-wrap：子要素の折り返しを指定。
justify-content：水平方向のそろえを指定
align-items：垂直方向のそろえを指定
align-content：複数行にしたときのそろえを指定。
grid-template-columns：子要素の幅を指定
grid-template-rows：子要素の高さを指定。
grid-gap：子要素の余白を指定。
■ボックス関連：要素が生成されるとそこにはボックス領域が作られる。その設定をするための物。
要素を生成した場合はボックス領域が作られる。ボックス領域は4つの部分がある。
・コンテンツ（中身）
・padding（内側余白）
・border（枠線）
・margin（外側余白）
width：幅を指定。
height：高さを指定。
margin：外側余白を指定
padding：内側余白を指定
border：枠線を指定
なお、padding, margin, borderは方向を指定することもできる。
-top, -left, -right, -bottomを付ける。
■リスト：リストタグの装飾のためのプロパティ
list-style：リストマーカーの種類、位置、画像を指定する。
■文字の装飾：文字の装飾を行うためのプロパティ
font-size：文字サイズを指定
font-family：フォントの種類を指定
font-weight：文字の太さを指定
line-height：行間を指定
text-align：テキスト揃えを指定
text-decoration：文字の下線、打消しなど飾りを指定
letter-spacing：文字間隔を指定
color：文字色を指定
■背景の装飾：
background：背景色、画像にかんする指定を行う
こんなところかな」
「はー、いっぱいあるなぁ。そろそろオーバーヒートしそう」
「こんな時にはどのプロパティを使うかだけ覚えればいいよ。参考になるWebサービスはいっぱいあるからね」
「よし、がんばるか」
そのあと、シンプルなWebサイトをいくつか作って使い方を覚えていった。うーん、小説投稿サイトを作るのは大変だ。
CSSはできる限り外部ファイルから読み込みましょう。あとで説明するフレームワークを使うと便利です。
なお、今回のエッセイでは使いませんが、コードのメンテナンス性を高めるSCSSやSASSなどもあります。Classの命名規則や有用なフレームワークなど覚えることはたくさんあります。
またCSSデザイントレンドは変化が早く、フラットデザイン、マテリアルデザイン、 ニューモーフィズムなどのすぐに変化します。
個人開発にはCSSフレームワークを使って作るのが楽かなぁと思います。正直手が回らないことがしばしば。枠組みの中で実現させればそこまで労力はかからないです。
Webデザイナーさんのお知り合いがいれば手伝ってもらうのもいいかと思います。
こだわりすぎるといくらでも時間が融けるので、デザインに凝るのはそこそこにしておきましょう。
