アイキャッチ:CSS

CSS学習サイト:初心者でも分かりやすいCSSプロパティ一覧と入門リファレンス

このサイトでは、ウェブページを作るために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リセットでよく使われているプロパティの参考例です。あくまで、多くのサイトで採用されている記述の組み合わせとなります。全ての内容が必須というわけではありません。自身のサイトに反映させる場合は、必要な部分を抜き出して最適化していけば良いでしょう。

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;
}