Blog article
投稿日:
2019.10.16

ホームページ作成するなら「CSS設計の教科書」で基礎を勉強しよう

CSS設計の教科書

今からホームページ作成を学ぶのであれば、
1冊ですべて身につくHTML&CSSとWebデザイン入門講座」もおすすめ。

独学だったからこそ読んでおきたい

HTMLやCSSなど、独学で勉強して数年。
昔は、<font color=red>赤色</font>などと書いてましたが、
今はCSSで書くのが当たり前になりました。

しかし、覚えたての時は、文字を赤くするだけなのに、
10行目に.aka{color:red}
100行目に.red{color:red}
と、同じ赤くするクラスを量産してました。

今はいい本があります。
CSS設計の教科書」という本です。おすすめ。

2019年現在では若干古い書籍になりますが、
CSS設計を勉強するには、十分な内容だと思います。
※FLOCSSの詳しい書籍(PDF)は「柴犬でもわかるFLOCSS」をご覧ください。

このCSS設計が「正しい」思い込んでる自分へ

ソースコードは短い(cssファイルの容量が少ない)方が読み込みが短いからいい!
と先輩やネットの情報を取り入れ、クラス名なども付けずに、h1〜h6やpなどのHTMLタグに直接CSSを指定してました。

div.decoru h1 {}
div.decoru p {}
div.decoru div {}

しかし、この書き方はページ速度を落とすものだと気づきました。

CSSは左から右を読んでいるわけでなく、右から左を読んでます。
つまり、div.decoru divの場合、全てのdivから、div.decoruを探しているのです。
これは時間かかります。

あと、このdiv.decoruのdivを指定するのもやめました。
同じスタイルであれば、divではない場面でも使う事があるからです。

span.red {color:red}
strong.red {color:red}

と、無駄なことをしてました。

いつ誰が触ってもわかりやすいCSS設計を

cssファイルを開いた時「!important」が並んでいた場合、
そのCSS設計はすでに崩壊していると言っても過言ではないでしょう。
また、htmlタグにstyleを直接書かれている場合も同様です。

同じ手段で変更する事しかできなくなるのです。。。悲しい。

CSS設計のルールを決める

本書には、SMACSSやらBEMやら、聞いたことない言葉が出てきます。
どれを使うかしっかり読んで適切なのを選びましょう。

クラス名のルール(命名規則)なんかも作っておくとよいでしょうか。
btnなのかbuttonなのか。

そして、とにかく似た構成(例えば新着記事のリスト)や、似た色(#333、#424242)のものは統一、使い回す。
できるだけその場でしか使わないスタイルを減らす。に限ります。

ページ表示速度が遅いとチャンスを逃します

ページ速度については、グーグルが下記のように発表しているようです。

「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」
「表示速度が1秒から7秒に落ちると、直帰率は113%上昇」

Find out how you stack up to new industry benchmarks for mobile page speed

ページ速度というのは大切です。
ワードプレスはプラグインいれると、CSSが無駄に入ってくるので、
自分で手がつけられるところは気をつけていきたいです。

運営コストを考えなければ、ファーストビューを構築しているCSSだけ取り除いて、
headの中に書き込むのも手です。

【関連記事】

この記事を書いた人:たかはし
ウェブデザイナー・ウェブ解析士

こちらの記事もオススメです

こういう仕事をしてます

SNSもよろしくね