CSS関連で変わったこと｜約20年くらいでざっくり
CSSも私が触り始めた2005年頃はバージョン2で現在ない機能もありました。
角丸の作り方
CSS３の現在はborder-radiusで指定するだけです。しかし、昔は角丸の部分だけ画像を用意してピクセルパーフェクトでレイアウトするなんていう手法で表現されていました。
※ピクセルパーフェクトというのは１pxまでピッタリに合わせるという意味です。
特にブラウザの開発者ツールなどもまだなかった時代これをやるのは結構大変で
ブラウザで表示してみるしか確認方法がないんですよね。
テーブルレイアウト
また2007年くらいまではtableレイアウトも普通にあったように記憶しています。
これも今のようなflexboxやグリッドレイアウトなどがなく、floatを用いたレイアウトも安定性がなかったため、苦肉の策として編み出されたレイアウト法でした。
これらの原因はブラウザ間の解釈の差異で最近終了されたIEを始め各社でCSS対応がバラバラだったため、CSSの裏技（ハックと呼ばれてました）が普通に書籍などにも書かれているという時代でした。
※阿部寛さんのHPでは現在もテーブルレイアウトを貫かれていますのでみてみたい方は検索して右クリックでソースを表示してみてください。業界のプログラマも驚愕する爆速のHTMLサイトです。
どこまで学べばいいのか？
CSSもHTMLと同じで基本構文がなんとなく理解できていればあとは全て暗記する必要はありません。
暗記する時間があれば作りたいものを作ったり、他のスキルの勉強に充てて、CSSはわからないことがあったら調べて使うということを続けていけば自然と必要なところだけ覚えられると思います。
現場で書いている人も長い人は暗記しているものも多いですが、前述のスタンスの人がほとんどだと思います。
ただ最近はSassというCSSの親戚のようなものもあります。
これはCSSの記述で同じところをまとめて短くかけたり、変数のような便利な機能があったりします。なので現場で導入されているところも多く、学習する必要があると思います。反面新しいCSSではこう言った機能が追加されつつあり、ブラウザの対応も随時追加されていく流れは止まらないのでいずれtableレイアウトのようにほとんど使われなくなる流れというのは忘れてはならない事実ですね。
どこまで学ぶかはこういった「言語やフレームワークの変化」、さらに「ブラウザの対応」や「実際に現場でどの程度使われているか」などをみながら判断するのが良いと思います。
ですからCSSを極める！というのは書籍を出すだったり、専門のサイトを作るだったりの何かしらの理由がある人がやっているという印象があります。しかし、そう言った方々のおかげでいろいろな情報が世の中に出ているのでリスペクトと感謝は忘れてはいけませんね。
CSSを体験してみる
ここからはPCで実際にCSSを体験してみましょう。
まずはHTMLのみのファイルを作成してブラウザで表示してみます。
<html lang="ja">
<head>
<title>CSSテストページ</title>
</head>
<body>
<h1>CSSテストページ</h1>
<p>これは<span>CSSのテスト</span>です。</p>
</body>
</html>上記ソースをindex.htmlとして保存し、右クリックでブラウザから開いてみましょう。
こんな風に表示されればOKです。
ここにCSSを加えてみます。
<html lang="ja">
<head>
<title>CSSテストページ</title>
<style>p{color: red;}</style>
</head>
<body>
<h1>CSSテストページ</h1>
<p>これは<span>CSSのテスト</span>です。</p>
</body>
</html>
このように変われば成功です。
次にCSSとHTMLでファイルを分けてみましょう。
index.html
<html lang="ja">
<head>
<title>CSSテストページ</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>CSSテストページ</h1>
<p>これは<span>CSSのテスト</span>です。</p>
</body>
</html>style.css
p {
color: red;
}
span {
color: blue;
font-weight: bold;
font-style: italic;
}※保存するフォルダは同じ階層にしてください。
このように表示されれば成功です。
CSSはページ表示の高速化にも関わっている
CSSを少し触ってみるととても手軽に実行でき、学習の入り口は広いと思います。しかし、ソースが大量に書くことになってくると継承の問題（同じ記述をしたときの優先度）、管理体制をどうするか、またページ表示高速化（ユーザービリティ）などにも影響してきます。
それゆえ適当に動いていればいいやという世界でもありません。特に同じことを実現するにしてもどの手法がどう言ったメリットを持っているか、またSEOなどに与える影響などは経験を少しずつ積んで常に勉強していかなかなければ身につかないでしょう。
力みすぎず、しかし、気を抜きすぎず、長く付き合うつもりで、というスタンス
で学ぶのが個人的にはおすすめですね。
コメント