今からホームページ作成を学ぶのであれば、
「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の中に書き込むのも手です。