たった 12 行の CSS だけで、きれいで魅力的な Web サイトを構築できます。

Posted on 10 4月 1:34 am

スタイル設定のない Web ページは、空白のキャンバスのようなものです。可能性は無限にあるため、さまざまなレイアウト、色、フォントを試して時間を無駄にしてしまいがちです。ただし、ブラウザーのデフォルトのスタイルは理想的ではないため、適切なデザインを開始するだけでも努力が必要です。

次のスタイルは、後でその上に構築できる強固な基盤となります。ユーザビリティの問題が解決され、基本的なデザイン原則が定められているので、コンテンツに集中することも、そこからデザインを改良し続けることもできます。

より論理的なボックスのサイジング

物事を健全に保つ

CSS を基礎から学んだ場合は、ボックスモデルについてよく理解しているはずです。しかし、この概念に慣れていない場合は、理解するのが混乱する可能性があります。何が起こっているかがわかっていても、ブラウザーのデフォルトモデルでの作業は扱いにくい場合があるため、次のようにボックスサイズをリセットすることをお勧めします。

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

box-sizing のデフォルト値は content-box です。この設定では、要素に適用する幅と高さのプロパティには、パディング、境界線、またはマージンが含まれなくなります。たとえば、要素がページの幅の半分を占めるようにすることができます。

#about { width: 50%; padding: 8px; }

これにより、合計幅はコンテナの幅の半分に 16 ピクセル (両側に 8 ピクセル) を加えたものになります。 box-sizing の border-box 値により、幅と高さのプロパティにパディングとボーダーが確実に含まれるようになり、ページの幅のちょうど半分の要素を作成することがはるかに簡単になります。

複数行のコードとバックグラウンドでいくつかの Web サイトを含む IDE の図。

最適な線の長さ

広いところと狭いところのバランスがちょうどいい

ほとんどの本や雑誌が縦向きになっているのには理由があります。長い行は読みにくいからです。目が行末に到達し、次の行の先頭に戻るときは、素早く焦点を切り替える必要があります。そうするために移動しなければならない距離が長ければ長いほど、それは難しくなります。

タイポグラフィガイドでは通常、行の長さを 45 ～ 75 文字にすることを推奨しています。 max-width プロパティを使用すると、ch 単位を使用して、行に特定の文字数以下が含まれるようにすることができます。

html { max-width: 70ch; }

ch 単位はあまり知られていませんが、ますます重要になってきています。この単位は、関連するフォントの 0 文字の幅を表すため、1 行あたりのおおよその文字数を確保するのに最適な方法です。

可変幅フォントのため、1 行あたりの正確な文字数を指定することは不可能です。しかし、この近似値は、ほとんどの場合、十分すぎるほどです。

コンテンツを水平方向に中央揃え

誰も画面の端を見つめたくありません

行の長さを設定すると、コンテンツがページの左側に配置されます。フォントサイズがよほど大きくない限り、特にワイドスクリーンモニターを使用している人にとっては、バランスが悪く見えることがよくあります。読者にとっては、頭を回すよりもまっすぐ前を見るほうがはるかに快適です。

簡単な修正は、左右の余白を均等にして、コンテンツをブラウザウィンドウの中央に配置することです。

html { margin: auto; }

これは、要素 (この場合は HTML タグ) の幅が制限されている場合にのみ機能します。全幅要素の場合、バランスをとるための余白はありません。前に設定した max-width プロパティは、大きなウィンドウでは、コンテンツが同じ水平方向のマージンで中央に配置されることを意味します。

快適な対策

可読性は必須です

タイポグラフィでは、行送りとはテキストの行間の垂直方向のスペースを指します。 CSS はこれを「行の高さ」と呼び、ブラウザが通常約 1.2 で解釈するデフォルト値「標準」を指定します。言い換えれば、テキスト行には、その高さの約 10% が上下のスペースとして追加されます。

「リーディング」（「リーディング」と発音）という用語は、従来の機械式プレスで活字の行を区切るために使用される鉛のストリップに由来しています。

デフォルト値は問題ありませんが、行の長さと同様に、読みやすさの問題が発生する可能性があります。使用する値は、最終的にはフォント、行の長さ、段落内の平均単語数によって決まりますが、全体として適切な妥協点は、デフォルトの約 2 倍のスペースである 1.4 です。

html { line-height: 1.4; }

より読みやすいフォントサイズ

デフォルトのサイズが必ずしも十分であるとは限りません

ほとんどのブラウザ環境のデフォルトのフォントサイズは 16 ピクセルであり、長い間このままです。画面の解像度が高くなるにつれて、生成されるテキストはますます小さくなり、ある時点でほとんどの好みにとって不快になりすぎます。しかし、デフォルトは同じままです。

適切なヘッダーと本文のフォント

区別は重要です

デフォルトでは、ブラウザではテキストがセリフフォントで表示されます。これは本文テキストには問題ありませんが、サンセリフの見出しは本文のセリフフォントと組み合わせる方が良いと一般に認められています。多くのフォントファミリは、特にこの理由からセリフとサンセリフのペアで提供されます。

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }

優れたテンプレートでは、セリフおよびサンセリフなどの汎用フォントファミリを使用する必要があります。これらは利用可能であることが保証されており、フォントサイズと同様に、ユーザーは Chrome などのブラウザで好みのフォントを選択できます。

Chrome ブラウザのカスタマイズ設定には、フォントサイズと優先フォントファミリーが含まれます。

これらのスタイルをベースラインとして使用すると、一般的なファミリをフォールバックとして保持しながら、デザインを補完する独自のフォントを選択して、フォントスタックでさらにニュアンスを加えることができます。

「セリフ」と「サンセリフ」とはどういう意味ですか?

セリフ？サンセリフ？それは一体何を意味するのでしょうか？

簡単なレスポンシブ画像

物を壊さないでください

コンテナからはみ出した画像は、よく言えば見苦しく、最悪の場合は Web サイトのレイアウトを壊す可能性があります。サイト上の画像を厳密に管理していない場合、特にユーザーが画像をアップロードできる場合、これは陥りやすい罠です。

最も簡単なセーフティネットは、ページ上のすべての画像がそのコンテナの幅よりも広くならないようにすることです。 max-width プロパティを使用すると、これを行うことができます。

img { max-width: 100%; height: auto; }

次のように画像タグで寸法を指定する場合、元の画像のアスペクト比を維持するには height: auto が必要であることに注意してください。

このマークアップでは、max-width プロパティによって幅がトリミングされる可能性がありますが、高さには影響しないため、画像は height: auto なしで引き伸ばされてしまいます。

適切な色のコントラスト

ポップにしましょう！

色のコントラストが優れていることが読みやすさの鍵となります。テキストの色が背景の色と近すぎると、読みにくくなる可能性があります。特定の色を認識することが難しい人にとって、これは 2 倍 (またはそれ以上) になります。

Web コンテンツアクセシビリティガイドラインでは、少なくとも 7:1 のコントラスト比が必要です。参考までに、白の背景 (#ffffff) に黒のテキスト (#000000) のコントラスト比は 21:1 で、色飛びのコントラストテストに合格します。ただし、このようなはっきりしたコントラストには欠点があります。異なる明るさの間で調整する必要があるため、目に負担がかかる可能性があります。

非常に微妙な変更が大きな違いを生む可能性があります。目に見えるほどではありませんが、目が次のように感じるには十分です。

html { color: #333; }

この非常に濃いグレーのコントラスト比は、純白の背景上で 12.63:1 で、純黒のほぼ半分ですが、それでも 7:1 の要件を軽く超えています。

リンクの下線を削除する

好みの問題

1990 年代初頭に HTML が登場して以来、「リンクは青色で下線が引かれている」という当たり前のことがずっと続いてきました。これはデフォルトであり、ほとんどの場合、ユーザビリティ機能としてうまく機能し、ドキュメントのどの部分をクリックできるかを読者に正確に知らせます。

ただし、リンクの下線はデザインと衝突する可能性があり、リンクの長さによっては見苦しくなり、テキストの読みやすさを損なう可能性もあります。 CSS が普及すると、デザイナーはリンクの下線をオフにするという別の自明の理が定着しました。

これを行うかどうかはあなた次第ですが、一般的な手法は、デフォルトでは下線を非表示にし、読者がリンク上にポインタを移動したときに下線を表示することです。

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }

リンクは引き続き青色で表示されるため、引き続き認識できるはずです。キーボードを使用してそれらに移動すると、下線は付きませんが、ブラウザのデフォルトのアウトラインスタイルが適用されるため、それらを確実に識別できます。

完全な CSS

これらのスタイルがすべてデザインに適用されるとは限りません。しかし、それらは作業を行うための優れた基礎であり、単純な文書でも十分に魅力的なものになります。

コード

html {
    box-sizing: border-box;
    max-width: 70ch;
    margin: auto;
    font-size: 1.25em;
    color: #333;
    line-height: 1.4;
}

* {
    box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

a:link {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}