CSS Class List – wordpress “Twenty Twenty”

CSSのクラス（ class ）とは

一つ以上のスタイルプロパティを、ひと固まりに設定し、名前を付けたもの。

Twenty Twenty 定義済 クラス 1.

ヘッダーのスタイルを定義済なクラス

faux-heading

; ヘッダー（h1, h2, h3, h4, h5, h6）と同様の定義がされているクラス

.faux-heading {
	font-feature-settings: "lnum";
	font-variant-numeric: lining-nums;
	font-weight: 700;
	letter-spacing: -0.0415625em;
	line-height: 1.25;
	margin: 3.5rem 0 2rem;
}

heading-size-1

; ヘッダー 1 （ “h1” ） と 同じフォントサイズ、太さ、行間の幅を定義済なクラス

.heading-size-1 {
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 1.138888889;
}

heading-size-2

; ヘッダー 2 （ “h2” ） と 同じフォントサイズを定義済なクラス

.heading-size-2 {
	font-size: 3.2rem;
}

heading-size-3

; ヘッダー 3 （ “h3” ） と 同じフォントサイズを定義済なクラス

.heading-size-3 {
	font-size: 2.8rem;
}

heading-size-4

; ヘッダー 4 （ “h4” ） と 同じフォントサイズを定義済なクラス

.heading-size-4 {
	font-size: 2.4rem;
}

.heading-size-4 {
	font-size: 2.4rem;
}

heading-size-5

; ヘッダー 5 （ “h5” ） と 同じフォントサイズを定義済なクラス

.heading-size-5 {
	font-size: 2.1rem;
}

heading-size-6

; ヘッダー 6 （ “h6” ） と 同じフォントサイズ、文字間幅、テキスト効果（英文字の先頭を大文字に変換）を定義済なクラス

.heading-size-6 {
	font-size: 1.6rem;
	letter-spacing: 0.03125em;
	text-transform: uppercase;
}

Twenty Twenty 定義済 クラス 2.

ギャラリーのスタイルを定義済なクラス

適用されるHTMLコードの例

<div class="widget_media_gallery">
    <div class="gallery gallery-columns-3">
        <figure class="gallery-item">
            <div class="gallery-icon">
                /* ここにギャラリー用のアイテム（画像）を配置 例: <img src="" /> */
            </div>
            <figcaption class="gallery-caption">
                /* ここはアイテムのキャプションを配置 例: <p></p> */
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon">
                /* ここにギャラリー用のアイテム（画像）を配置 例: <img src="" /> */
            </div>
            <figcaption class="gallery-caption">
                /* ここはアイテムのキャプションを配置 例: <p></p> */
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon">
                /* ここにギャラリー用のアイテム（画像）を配置 例: <img src="" /> */
            </div>
            <figcaption class="gallery-caption">
                /* ここはアイテムのキャプションを配置 例: <p></p> */
            </figcaption>
        </figure>
    </div>
</div>

gallery gallery-columns-n

; ギャラリーとして表示する全体のクラス。 ※nはカラムの数 2~9が定義済

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 3em 0 3em -0.8em;
	width: calc(100% + 1.6em);
}

	/* VANILLA GALLERIES */

	.gallery-columns-2 .gallery-item {
		max-width: 50%;
	}

	.gallery-columns-3 .gallery-item {
		max-width: 33.33%;
	}

	.gallery-columns-4 .gallery-item {
		max-width: 25%;
	}

	.gallery-columns-5 .gallery-item {
		max-width: 20%;
	}

	.gallery-columns-6 .gallery-item {
		max-width: 16.66%;
	}

	.gallery-columns-7 .gallery-item {
		max-width: 14.28%;
	}

	.gallery-columns-8 .gallery-item {
		max-width: 12.5%;
	}

	.gallery-columns-9 .gallery-item {
		max-width: 11.11%;
	}

gallery-item

; ギャラリー内のアイテムに設定するクラス

.gallery-item {
	margin: 0.8em 0;
	padding: 0 0.8em;
	width: 100%;
}

gallery-caption

; ギャラリーのキャプション クラス

.gallery-caption {
	display: block;
	margin-top: 0.8em;
}