Webデザイン初心者がランクアップするためのCSSのコツ10選

酒井涼

2017年3月1日

1,090

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
　　
>> 執筆記事一覧はこちら

ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。
また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。
そこで必ず話題に上るのが、CSSです。

もちろん、LessやSassのようなCSSプリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができるCSS)が誕生したことで、より複雑なデザインをできるだけ少ないコードで書くことができるようになりました。

しかし、フロントエンドエンジニアとしてレベルアップするためには、どのように書けばレイアウトが改善されたり表示速度が速くなるのかをしっかりと理解しておいたほうがよいでしょう。

今回は、Webデザイン初心者がランクアップするためのCSSのコツをご紹介します。
これから紹介する、多くの初心者を泣かせたCSSの疑問を解決するための10のコツを理解すると、デザインの可能性もさらに広がります。

1. クリーンなCSSリセットの書き方

マージンやパディングなど、ブラウザによってデフォルトの表示設定が異なっているために、従来はnormalize.cssに代表されるCSSリセットライブラリを使用するWebデザイナーやフロントエンドエンジニアが多かったのではないでしょうか。
これらのライブラリはブラウザ間の表示誤差をできるだけ少なくしてくれるので、長年にわたり人気を保ち続けてきました。

しかし、normalize.cssの中身を開いたことがある人なら分かるかもしれませんが、ほとんどのプロジェクトではライブラリに入っている全てのルールが必要ではなく、すべての要素のマージンとパディングだけ調整すれば事足りるケースがほとんどです。

そこで今回、下記のようなCSSリセットの書き方を紹介します。

* {
　　box-sizing: border-box;
　　margin: 0;
　　padding: 0;
}

box-sizingの宣言はオプションです。
次のbox-sizingの継承に関するポイントを実践している場合は、この宣言を飛ばしても大丈夫です。

参考：
2016年で最もダウンロードされたリセットCSSランキングトップ5

2. box-sizingの継承

「box-sizing」は要素のwidth(横幅)・height(縦幅)の計算方法を指定するためのプロパティです。簡潔にいえば、paddingやborderを縦横の幅に含めるかどうかを指定することができます。

box-sizingを正しく定義していないと、ブラウザによってはboxのサイズがpaddingを含んでいて、別のブラウザではpaddingを含めずに計算しているために、レイアウト崩れの原因になってしまうことがあります。
また、アイコンフォントなど、外部のCSSライブラリを読み込んでしまうと、そのbox-sizingを継承してしまって、意図したデザインが表示されないケースもあります。

そこで、下記のコードを挿入してみましょう。

html {
　　box-sizing: border-box;
}
, :before, *:after{
　　box-sizing: inherit;
}

border-boxを指定すると、widthやheightは「paddingやborderを含めた値」となるので、デザインする上でのピクセルの計算の仕方がシンプルになります。
htmlにborder-boxを指定して、それをほかの全ての要素に継承することで、ピクセルの計算方法に一貫性を持たせることができます。

参考：
意外と盲点!? あまり知られていないけど"知ると便利"なCSSプロパティ19選

3. 上下中央揃えのシンプルな書き方

ページ全体で、左右中央揃えにするには「text-align: center;」を指定すればよいというのはすぐに思いつきますが、上下に中央揃えしたいとなると、タイプする手が止まってしまいますよね。
CSSグリッドシステムを使う予定がない場合には、次のコードを使ってみてはどうでしょうか。

html, body{
　　height: 100%;
　　margin: 0;
}
body{
　　-webkit-align-items: center;
　　-ms-flex-align: center;
　　align-items: center;
　　display: -webkit-flex;
　　display: flex;
}

現在、ほとんどすべてのモダンブラウザがFlexboxに対応しているので、この方法だと簡単に上下中央揃えができます。

4. 最もシンプルなバーティカルリズムの取り方

バーティカルリズムとは、縦方向に並んだ要素の行間やマージンをある一定の倍率で取って、文章や図をリズミカルにバランスよく見せて可読性を上げるデザイン上のテクニックのことです。
しかし、すべての要素に逐一マージンを設定するのは面倒ですよね。
そこで、ユニバーサルセレクタ(¥*)を使ってバーティカルリズムを生み出す方法を書いてみました。

.intro > * {
　　line-height: 1.25rem;
　　margin-bottom: 1.25rem;
}

こうすることで、すべての要素の行間が1.25remに統一されるので、まるでグリッドラインのノートに書くかのようにすっきりと要素が並ぶことになります。

5. カレンダー幅を均等にする

WordPressをはじめとしたCMSでカレンダーを表示するとき、通常はtableタグを使ってレイアウトを行います。
しかし、曜日ごとに横幅が若干ずれてしまうのは、非常に気になるものです。
そこで、このような書き方を学びましょう。

.calendar{
　　table-layout: fixed;
}

「table-layout: fixed;」を指定するだけで、横幅を統一することができるのですね。
もちろん、カレンダー以外のテーブルレイアウトでも有効な技です。

6. 空のリンクにurlを表示させる

CMSでリンクを挿入するときなどに便利なのですが、まれにテキストエディタで編集するときに空リンクが入ってしまうことがあります。
例えば、<a>タグの間にテキストが挟まっていないのに、href属性は付いている場合です。

a[href^=”http”]:empty::before{
　　content: attr(href);
}

contentプロパティによって、強制的にhref属性を表示させるということをしています。
これによって、テキストなしの空リンクでもURLがしっかりと表示されるようになります。

7. 「デフォルト」のリンクスタイルを設定する

同じくCMSネタになりますが、WordPressなどのCMSでは、テーマに同梱されている強制的に生成されるリンクには何かしらのclass属性がくっついてきます。
しかし、ブログなどの記事を書く際のclass属性の付いていない「デフォルト」のリンクのスタイルだけを設定したい場合には、どのようにすればいいのでしょうか。
答えは次の通りです。

a[href]:not([class]) {    
　　color: #999;
}

aタグだけに設定してしまうと、テーマ上のリンクも全て影響を受けてしまいます。
以上のように書くことで、単純なデフォルトのリンクにのみスタイリングを行うことができます。

8. 読み込みに失敗した画像のスタイルの書き方

画像の読み込みに失敗する理由はいくつかありますが、画像が見られなくなることでユーザーに与えるデメリットは計り知れません(ユーザーには空の四角い箱だけが表示されてしまいます)。
そんなときに、ここにどんな画像があったのかが分かるだけでも、親切なものです。

img {    
　　display: block;    
　　font-weight: 300;    
　　height: auto;    
　　line-height: 2;    
　　position: relative;    
　　text-align: center;    
　　width: 100%;  
}
img:before {    
　　content: "すみません、画像が読み込めませんでした。。。";    
　　display: block;    
　　margin-bottom: 10px;  
}    
img:after {    
　　content: "(url: " attr(src) ")";   
　　display: block;    
　　font-size: 12px;  
}

9. フォントサイズの最適化を自動化する

レスポンシブレイアウトにおけるフォントサイズはViewportによって自動的に調整されるようにすると便利です。
メディアクエリによってフォントサイズを書き分けるという手間が省けるからです。

そこで、Viewportの縦幅と横幅を計算して、フォントサイズを決定させるやり方を書いてみました。

:root {    
　　font-size: calc(1vw + 1vh + .5vmin);  
}

「:root」によってデフォルトのフォントサイズが決定されれば、あとは「rem」を使ってフォントサイズを指定してあげればいいです。

body {    
　　font: 1rem/1.6 sans-serif;  
}

10. CSSで変数を使う裏技

ワンランクアップするために最後にご紹介したいのが、CSSで変数を使う方法です。
通常、CSSで変数を使う場合にはSassやLessを使いますが、ネイティブのCSSでも、共通のキーワードを宣言して変数のように使うことができます。
例えば、以下のようなコードです。

:root {
　　--main-color: #06c;
　　--accent-color: #999;
}
h1, h2, h3 {
　　color: var(--main-color);
}
p {
　　color: var(--accent-color);
}

配色を変更する場合に、わざわざすべての箇所を修正するのは大変面倒です。
上の例のように、もしメインカラーとアクセントカラーがあるのが分かっていたら、このように変数を使ってみるのもいいかもしれませんね。

まとめ

以上、Webデザイン初心者がランクアップするためのCSSのコツをご紹介しました。

CSSを扱うために初心者から抜け出すには、

親要素・子要素の関係をしっかりと掴む
擬似クラスや擬似セレクタの使い方に慣れる
サイズの絶対指定(pxなど)・相対指定(em)・ルートからの相対指定(rem)の使い分けをする

以上のことに気をつけてみるとよいでしょう。

CSS自体はJavaScriptなどのプログラミング言語と比べると書き方はシンプルですが、さまざまな素晴らしいコードを見ると「こんな書き方もあるのか」と勉強になります。
ぜひ、今回の10のサンプルコードも参考にしてみてください。