このサイトでは、ウェブページを作るためにHTMLと並んで必要となる、CSSの仕組みや書き方について解説しています。スタイルシート（Style Sheet）というのは、HTMLやXMLといったドキュメントのマークアップに対して、その表示形式を制御するために定義された言語です。CSSは「Cascading Style Sheets」の略称であり、スタイルシートの中で最も一般的に知られている形式です。ここでは「スタイルシート＝CSS」として説明します。
よく使うCSSプロパティ
| 要素のボックスを制御する | |
|---|---|
| box-sizing | 要素の幅と高さをどのように計算するかを指定する |
| display | 要素の表示形式を指定する |
| margin | 要素の外側の余白（マージン）をまとめて指定する |
| padding | 要素の内側の余白（パディング）をまとめて指定する |
| width | 要素の幅を指定する |
| height | 要素の高さを指定する |
| 背景や境界線を表示させる | |
| border | 要素の周囲に境界線を付ける |
| border-radius | 要素の角丸についてまとめて指定する |
| background | 背景に関する指定をまとめて行う |
| 要素の表示位置を決める | |
| position | 要素の位置指定の種類を変更する |
| top | 位置指定で配置された要素の上辺からの距離を指定する |
| right | 位置指定で配置された要素の右辺からの距離を指定する |
| bottom | 位置指定で配置された要素の底辺からの距離を指定する |
| left | 位置指定で配置された要素の左辺からの距離を指定する |
| z-index | 要素の重なり順序を指定する |
| テキストやフォントの設定 | |
| color | 文字の色を指定する |
| text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
| line-height | 行の高さを指定する |
| font-size | 文字フォントの大きさを指定する |
| font-weight | 文字フォントの太さを指定する |
| font-family | 文字フォントの種類を指定する |
| text-decoration | 文字の装飾線に関する値を一括で指定する |
CSSリセット
ウェブサイトを制作する上で、CSSリセットという技法は欠かせなものです。なぜなら、同じソースコードの内容であっても、それを解読するブラウザがユーザーごとに違うからです。ブラウザの仕様やCSSの実装状況が異なれば、製作者の意図しない形で表示されてしまいます。それを防ぐためには、まずブラウザの既定値で適用されるスタイルを全てリセットし、改めてこちら側で用意したスタイルを当てはめて行く作業が必要となります。
以下の内容は、CSSリセットでよく使われているプロパティの参考例です。あくまで、多くのサイトで採用されている記述の組み合わせとなります。全ての内容が必須というわけではありません。自身のサイトに反映させる場合は、必要な部分を抜き出して最適化していけば良いでしょう。
/* 全ての要素の余白をリセットする */
* {
margin: 0;
padding: 0;
}
/* ボックスのサイズ指定を境界線の外側に変更する */
*, *::before, *::after {
box-sizing: border-box;
}
/* HTML文書全体の振る舞いを定義する */
html {
height: 100%;
font-size: 100%;
overflow-y: scroll;
}
/* Bodyに表示される内容の基本的な共通指定 */
body {
min-block-size: 100%;
line-height: 1.5;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 画像の初期スタイルを指定する */
img {
block-size: auto;
max-width: 100%;
max-inline-size: 100%;
vertical-align: top;
}
/* リストの初期スタイルを指定する */
ol, ul, menu {
list-style: none;
}
/* テーブルの初期スタイルを指定する */
table {
border-collapse: collapse;
}
/* 特定の要素を除外した上でスタイルを設定 */
*:where(:not(fieldset, progress, meter)) {
border-width: 0;
border-style: solid;
background-origin: border-box;
background-repeat: no-repeat;
}
/* 特定の要素や属性に絞り込んでスタイルを設定 */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
text-align: center;
}