トップ/CSS用クラス名一覧（セレクタ）

CSS用クラス名一覧（セレクタ）

2021/10/13 4:572021/10/13 4:57

ページ全体を囲むdivに付与しているクラス

全体を囲むdivにはpageクラスが付与されており、さらにそれぞれのページに対して個別のクラスが付与されています。

トップページには page-_top クラスが付与されています。

パーマリンクを設定したページにはそのパーマリンクのURL文字列が page-about　のような形で適用されます。パーマリンクを指定していない場合にはURLにもなっているページIDが割り当てられます。

/* ページ全体を囲むdivに付与されているクラス */
.page {
}

/* トップページの場合のページ全体を囲むdivに付与されているクラス */
.page.page-_top {
}

/* パーマリンクでurlを/aboutと指定したURLの場合のページを囲むdivに付与されているクラス */
.page.page-about {
}

/* 特定のページのpageId:abcdefg12345678 の場合のページ全体を囲むdivに付与されているクラス */
.page.page-abcdefg12345678 {
}CSS

パンくずリストに応じたクラス

全体を囲むdivにはパンくずリストに応じた pageMap から始まるクラスも付与されています。

/* トップページ */
.pageMap__top{}

/* トップページ配下のパーマリンクがblogのページ */
.pageMap__top_blog{}

/* トップページ配下のページIDがabcdefg12345678のページ */
.pageMap__top_abcdefg12345678{}

/* トップページ配下でないページ */
.pageMap_abcdefg12345678{}

/* トップページ配下でないパーマリンクがnewsのページ */
.pageMap_news{}

/* トップページ配下でないパーマリンクがnewsのページのは以下のページ */
.pageMap_news_abcdefg12345678{}CSS

例えば、トップページ配下のblogページ配下の個別ページにスタイルを当てたい場合にはこのようなcssを書けば適用できます。

.page[class*="pageMap__top_blog_"] .title {
}CSS

ヘッダーに付与しているクラス

基本 .headerは画面幅いっぱいなので、.header__contentsWrapperを利用してコンテンツと横幅を揃えられます。

/* ヘッダー全体を囲むクラス */
.header {
}

/* ヘッダーのコンテンツを囲むクラス */
.header__contentsWrapper {
}
/* サイトタイトルを囲むリンク */
.header__link {
}
/* サイトタイトルを画像にした場合のクラス */
.header__img {
}
/* ボタンを設置した際の、ボタン全体を囲むdiv */
.header__btns {
}
/* ボタン個別のクラス */
.header__btn {
}
/* スマートフォンの場合のハンバーガーボタン */
.header__menu {
}CSS

カバー画像に付与しているクラス

.coverImage {
}
CSS

コンテンツを囲むクラス

/* ヘッダーとカバー画像を除いて、コンテンツとフッターまで囲うdiv */
.container {
}
/* .container内でフッターを除いた部分を囲うdiv */
.contents {
}CSS

タイトルエリア

ページアイコン

パンくずリスト

ページタイトル

ページ日時

を含むタイトルエリアを囲むsectionおよびdivに付与されたclassです

.titleSection {
}
.titleSection__contentsWrapper {
}CSS

タイトル部のページアイコン

.pageIcon-cover {
}
/* 画像指定でなく絵文字指定の場合 */ 
.pageIcon-cover.emoji {
}

/* container直下に配置される、
　　アイコンがあってカバー画像がない場合にページアイコンが
   上部にめり込むのを防ぐためのスペースを作るdiv */
.pageIconSpacer {
}CSS

パンくずリスト

/* パンくずリスト */
.breadcrumbs {
}
.breadcrumb__link {
}
/* 有効なリンクに付与されるクラス(表示中の自身のページにはリンクがつかない) */
.breadcrumb__link--passive {
}
.breadcrumb__icon {
}
.breadcrumb__icon.emoji {
}
/* / マーク */
.breadcrumb__spacer {
}CSS

日付

pageDatetime__createdの中に pageDatetime__created__day と pageDatetime__created__time が入ります。日付だけ表示したい場合は pageDatetime__created__time へ display: none; を指定してください。

/* デフォルトで非表示になっています */
.pageDatetime {
}
/* Notionのページの作成日時が入ります */
.pageDatetime__created {
}
/* Notionのページの最終編集日時が入ります */
.pageDatetime__edited {
}
/* Notionのページの作成日付が入ります */
.pageDatetime__created__day {
}
/* Notionのページの最終編集日付が入ります */
.pageDatetime__edited__day {
}
/* Notionのページの作成時間が入ります */
.pageDatetime__created__time {
}
/* Notionのページの最終編集時間が入ります */
.pageDatetime__edited__time{
}CSS

セクション区切りをしたコンテンツを囲むdiv

.separatedSection {
}
.separatedSection__contentsWrapper {
}CSS

シェアボタン

.shareBtns {
}
.shareBtns__tw {
}
.shareBtns__tw__icon {
}
.shareBtns__tw__text {
}CSS

フッター

.footer {
}
.footer__contentsWrapper {
}CSS

※以下執筆途中です

コンテンツ内で指定してあるクラス一覧

テキストカラー、テキスト背景色

.red {
}
.pink {
}
.purple {
}
.blue {
}
.teal { /* greenでないことに注意 */
}
.yellow {
}
.orange {
}
.brown {
}
.gray {
}

.red_background {
}
.pink_background {
}
.purple_background {
}
.blue_background {
}
.teal_background { /* greenでないことに注意 */
}
.yellow_background {
}
.orange_background {
}
.brown_background {
}
.gray_background {
}CSS

テキスト装飾等

/* リンク */
.link{}
/* 太字 */
b {}
/* 斜字 */
em {}
/* 取り消し線 */
s {}
/* 下線 */
.underline {
}
/* 引用 */
.quote {}CSS

コード

/* コードブロック */
.codeblock{}
.codeblock .languageName{}

/* インラインコード */
code.code__inline-code {
}CSS

数式

.MathJax_Preview{}CSS

Callout

.callout {
}
/* Callout左に表示されるアイコン */
.callout .pageIcon{
}
.callout-text {
}CSS

ページリンク

.pagelink {
}
.pagelink__title {
}
/* アイコン未指定のページリンクに表示されるアイコン */
.pagelink__title svg {
}
/* アイコン指定時のページリンクに表示されるアイコン */
.pagelink__icon {
}
.pagelink__icon-img {
}
/* ページのカバー画像（デフォルト非表示) */
.pagelink__coverImage{}

/* ページの日時（デフォルト非表示) */
.pagelink__datetime {
}
.pagelink__datetime__created {}
.pagelink__datetime__created__day {}
.pagelink__datetime__created__time {}
.pagelink__datetime__edited {}
.pagelink__datetime__edited__day {}
.pagelink__datetime__edited__time {}CSS

ブックマーク

.bookmark {
}
.bookmark__content {
}
.bookmark__title {
}
.bookmark__description {
}
.bookmark__url {
}
.bookmark__icon {
}
.bookmark__link {
}
.bookmark__coverImage {
}CSS

画像などのアセット

.asset-wrapper {
}
/* Asset no data */
.asset__noData {
}
.asset__noData p {
}

/* Asset Pdf Preview */
.asset__pdf {
}
.asset__pdf__wrapper {
}
CSS

カラム

.column-row {
}
.column {
}
.column-spacer {
}CSS

Toggle

details {}

/* タイトル */
summary {}

/* 詳細コンテンツ */
details > p {CSS

/* リストの行を囲む要素 */
li {}

/* 数字ありリスト */
ul {}
ul li {}

/* 数字なしリスト */
ol {}
ol li {}

/* TODOリスト */
ul.todo {}
/* チェックしてあるリスト */
ul.todo li[data-checked="true"] {}
/* TODOリストのチェックマーク */
ul.todo li svg {}
/* チェックしてあるチェックマーク */
ul.todo li[data-checked="true"] > svg {}CSS

テーブル

.collection_view {
}
.collection_view__td--bold {
}
.collection_view__table,
.collection_view__th,
.collection_view__td {
}
.collection_view__table {
}
.collection_view__th,
.collection_view__td {
}
.collection_view__th {
}CSS

ギャラリー

.collection_view__gallery {
}
.collection_view__gallery-card {
}
.collection_view__gallery-content {
}
.collection_view__gallery-title {
}
.collection_view__gallery-data.is-first {
}CSS

Twitterでシェア