スクレイピング等のためにCSSのつくりを把握しておくことを主な目的とした備忘録です．

目次

  1. ファイル冒頭
  2. コメントアウト
  3. 複数プロパティを指定
  4. セレクタ
    1. 複数セレクタに適用
    2. 下位項目のセレクタに適用
    3. ID
    4. クラス
  5. レスポンシブデザイン
  6. グリッドレイアウト
  7. リスト
    1. 横並び
  8. 参考文献

ファイル冒頭

CSSファイルの文字コードを指定する．

@charset "UTF-8";

htmlのフォントを通常サイズにしておく．

html {
	font-size: 100%;
}

フォントサイズとかは

body {
	font-family: "Yu Gothic Medium", YuGothic;
	line-height: 1.5;
	color: #aaa;
}

といった具合．

画像ははみ出ないようにする．

img {
	max-width: 100%;
}

適当にwrapperクラスを作るとき，画面が横に広くなりすぎないようにして，また，マージンをとっておくには，

.wrapper {
	max-width: 1100px;
	margin: 0 auto;
}

コメントアウト

/*
p {color: blue; font-size: 10px;}
*/

複数プロパティを指定

p {color: blue; font-size: 10px;}

セレクタ

複数セレクタに適用

h3とpに対して指定する例．

h3,p {color: blue}

下位項目のセレクタに適用

h3の内部にあるpに対して指定する例．

h3 p {color: blue}

ID

#ID名 {
	# プロパティ
}

クラス

.クラス名 {
	# プロパティ
}

レスポンシブデザイン

画面サイズによってCSSを分ける方針．

@media (max-width: 600px) {
	# 600px以下の画面用のCSSを書く
}

グリッドレイアウト

display: grid;が使われている．

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(最低ピクセル数, 1fr));
	gap: 間隔;
}

boxクラスで自動で格子を切るなら，

.box {
	grid-column: auto;
	grid-row: auto;
}

リスト

横並び

display: flex;で横並びにできる．

.クラス {
	display: flex;
	justify-content: space-between;
}

参考文献

  • Mana (2019)「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」SBクリエイティブ．