スタイル・ガイド
このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりするため、詳細は開発者ツールなどを駆使してください。
このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。例示で使われている妙な文章は、雑記の過去記事からランダムに選択された文を組み合わせたものです。特に意味はありません。
また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。
ベースライン
スタイルは、ベースラインとそれ以外の大きく2つに分けられます。ベースライン以外では、必ずカスタム・プロパティーを経由して値を設定することによって、段階的なスタイルの適用を可能にしています。
アイコン
on-background色で塗りつぶしたSVGフォーマットの画像です。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものが、ブラウザーによって使い分けられるでしょう。
大きさ
あらゆる大きさ、枠線の幅や、文字の大きさ、行送りの高さ、余白、コンテンツの幅は、基本の比率である1.25
で乗除することで決定しています。この数字は、2乗するとおよそ1.618
と、黄金比に近い値になります。
枠線
サンプル | 大きさ | 計算式 | キーワード | 使用箇所 |
---|---|---|---|---|
0.069rem |
1 / 1.25^12 |
default | 表のセルの上、表のヘッダー・セルの下 |
標準の枠線は、コンテンツで明示的に周囲と切り分けたいものに使っています。
文字
サンプル | 大きさ | 計算式 | キーワード | 使用箇所 |
---|---|---|---|---|
行ったり来たり | 1rem |
1 | default | 本文 |
日本のblosxomユーザー | 0.8rem |
default / 1.25 |
small | 図のキャプション、ボタン、メタデータ表記、注意書き、ページ一覧、投稿一覧の日時 |
置き場所そのもの | 1.25rem |
default * 1.25 |
large | data-description 属性を持つ見出しレベル1、見出しレベル2 |
武田神社 | 1.563rem |
large * 1.25 |
huge | 見出しレベル1 |
重要なものを大きくし、補助的なものを小さくしています。
行送り
サンプル | 比率 | 計算式 | キーワード | 使用箇所 |
---|---|---|---|---|
Gitの サブコマンドの オプションは 単純な機能の 制御だけでなく、 このような コマンドや シェルスクリプトを 書く上で 役に立つものも 多くある。 | 1.563 |
1.25^2 |
default | 本文 |
Webフォントを 非同期に 読むテクニックは いくつかあるけど、 その理由について まとめられた文章は 少ない。 | 1.25 |
default / 1.25 |
small | 見出しレベル1、見出しレベル2、整形済みテキスト、投稿一覧の日時 |
文字にx-heightという概念のない日本語で主に書かれているので、標準の行送りは少し高めにしています。文字の大きさが大きかったり、伝統的に低めに設定されていたりする要素で、低くしています。
余白
サンプル | 大きさ | 計算式 | キーワード | 使用箇所 |
---|---|---|---|---|
DuckDuckGo 欠点 |
1.563rem |
1.25^2 |
default | 見出しレベル3の上、段落など多くのグルーピング要素の上、陳列棚の項目の縦余白 |
バグ 放置プレイ |
1rem |
default / 1.25^2 |
small | 整形済みテキストの上下内余白、表のセルの上下内余白 |
HTTPS化 別ドメイン |
2.441rem |
default * 1.25^2 |
large | 見出しレベル1の下、見出しレベル3の上、整形済みテキストの上下、図の上下、表の上下 |
そのブロック 規模 |
0.64rem |
small / 1.25^2 |
tiny | 序列付きリストと序列なしリストの項目の上、ボタンの上下内余白 |
いわゆる普通のウェブページ 再訪問という行為そのもの |
4.768rem |
large * 1.25^3 |
huge | 見出しレベル2の上、水平線の上下、section 要素直下のfooter 要素直下での最初のメタデータ表記の上 |
物を増やすこと 買わない理由 |
9.313rem |
huge * 1.25^3 |
gargantuan | 見出しレベル1の上、footer 要素直下での最初のページ一覧の上、article 要素直下のheader 要素直下での最初のメタデータ表記の上 |
隣接する要素との関連性を考慮して、決定しています。標準の大きさは、標準の行送りと同じです。
レイアウト
幅に制限を加えた、中央寄せの1カラムです。左の余白はその最大値を制限しているため、大きい画面では左寄せになります。
カラムの最大幅は、65ch
です。Noto Sans CJK JPで、ひらがなが1行に36文字入るように決めています。
色彩
色コード | コントラスト | キーワード | 使用箇所 |
---|---|---|---|
- |
- |
background | ルート要素の背景、ボタン |
- |
- |
surface | 整形済みテキストの背景、画像の背景、表のセルの背景 |
- |
- |
on-background | アイコン、ルート要素、ボタンの背景 |
それぞれ対応する色と、コントラストを80以上確保しています。
フォント
ルート要素にサン・セリフ、コード部分に等幅が使っています。特定のフォントは指定していないので、システム、ブラウザー、またはユーザーの設定がそのまま利用されます。
HTML要素
HTML要素に直接割り当てているスタイルの例と解説です。
文書要素
rem
単位を利用するため、文字の大きさはこの要素で指定しています。他に背景色や、前景色、フォント、行間もこの要素で指定しています。
文字の大きさは、描画領域の幅に応じて、徐々に大きくなります。最低でもユーザーの指定した標準の大きさ(既定では16px
)が確保され、最大で156.25%
(既定では25px
)です。
body
要素
レイアウトともっとも外側の余白はこの要素へのスタイルで実現しています。
左の余白は、描画領域に応じて少しづつ広がっていきます。最大で9vw
くらいです。この値は以下のように計算されています。
1.25^10 = 9.313
上下の余白は、左の余白より少し小さくなるように計算されています。そのため同じように少しづつ広がっていきます。こちらは最大で7vw + 0.8rem
くらいです。
見出しレベル1
AdSenseと連携したGoogle検索
h1
要素は、文字をかなり大きくし、上にとても大きく余白をとり、下に大きく余白をとります。
CSSプリプロセッサーに
data-description
属性を持つ場合は、その値が追加され、文字を大きくし、太字を解除し、下にとても大きく余白をとります。
見出しレベル2
10人くらい書いてくれれば
h2
要素は、文字を大きくし、上にかなり大きく余白をとります。
見出しレベル3
うちみたいな静的コンテンツ+動的blogの組み合わせ
h3
要素は、本文と同じ文字サイズにし、上に大きく余白をとります。
段落
再起動無しで反映されるのは良さそうだ。絞り込みを設定すると検索結果のページに特定の単語での絞り込み検索をおこなうリンクを挿入することができる。スバラシイ。
特に強いスタイルは当てません。
水平線
線の代わりに、3つのAsterisk Operator(U+2217
)を疑似要素で挿入し、上下にかなり大きく余白をとり、インデントします。
整形済みテキスト
$ mkdir example
主に英文になることから、行送りを一段階落とし、上下に大きく余白をとります。
買おうと決めたあたりで黒アッパーで白ソールのレザー・スニーカーにすることは決めていた。ついでに古くてやばそうなので、マザーの電池も購入。今までその値にvar()を使われることを想定していなかったため、var()が引用符で括られてしまうというバグがあったようだ。「お、メガネかっこいい」とは言われた。 https://www.example.com/ad/laborum/ullamco/mollit/elit/do/ut/dolor/eu/duis/sunt/irure/aute/deserunt/ullamco/eu/sunt/do/ad/dolore/aute/nulla/
長い行は、折り返せるなら折り返します。折り返せない場合は、カラム幅からはみ出さないようにします。
引用
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。個人的には河内希望。そういうことができるライトウェイトな画像編集ソフトウェアと連携したりとかのが良さそうな気がしてきた。
右の余白を削除します。
序列付きリストと序列なしリスト
- あんまり融通が利かないスクリプトで悪かったなスミマセン。
- これまでいくつものスクロール制御の実装を作ってきたが、ひとつとして「あれは出来が良かった」と思えるものがない。
- そのためこういった引数を与えるというテクニックは使う場所が限られそう。
- 一番はJosh Homme。
- 画像でキャッチし簡潔なコメントで更に興味をもたせ、元サイトへ誘導みたいなのが結構上手く回ってるようなイメージ。
- これだけではエクスプローラーのサイドバーにOneDriveのアイコンが残る。
入れ子にした時に、余白が空きすぎないようにします。項目の上にかなり小さく余白をとります。
- ベスト・プラクティスありそうな気がすると思って、netrwのNetrwHome()の実装とか見たらものすごくひどい感じだった……。
- Media Queriesバンザイ。
- しかしまたいっぱいにならない。
- HTTPリクエストの増加はユーザーに負担を求めることになるが、Google CDNのようなキャッシュが大いに期待できるものならなんとかメリットが上回りそう。
- 発売は来年の1/13なのですが、そろそろ入荷するかもとかいう噂。
- 通常二個セットのが単品で扱われてるのかと思う程安いけど、ちゃんと二個セットだった。
序列なしリストも同じです。
図とキャプション

上下に大きく余白をとります。

キャプションは文字を小さくし、少し透過させます。
語・句・文単位での意味付け
ずっと使っていたホースリールがバキバキに割れ始め、うまく巻き取れなくなってしまった。メンバーズクラブのポイントは交換先があまり充実してない。
色コード | コントラスト | キーワード | 使用箇所 |
---|---|---|---|
- |
- |
link | ハイパーリンク |
ハイパーリンクはlink色にし、surface色と60以上になるようにします。強調は斜体を解除し、太字にします。
編集
デメリットをまったく説明されなかったので華麗にスルーした。広告ドリブン・ウェブデザイン。その変更とはエラーの検知後は巡回頻度を徐々に下げていくと言うもので、正常に取得できた場合は一時間に一回という既定の巡回頻度に戻ります。
追加した部分の下線を削除します。
埋め込みコンテンツ

枠線を消し、カラムの幅から飛び出さないようにします。SVG画像では、既定で前景色と同じ色で塗られるようにします。
表
検索 | ぶっ壊れ気味 |
---|---|
ひどい | メイン |
ここ | ポストする |
surface色で背景を塗り、上下に大きく余白をとり、セルの上とヘッダー・セルの下に枠線を付けます。
机に収まらないくらい大きいか、逆に子供用で小さいか、というサイズ感で見送った。 | ただ、取得しているRSSファイルのリストがOPMLファイルだと、他のRSS Aggregatorに持っていくときに楽だなぁとか思っただけなのですよ。 |
---|---|
transformプロパティーではtranslate3d()(translateY()でも悪くはない)を使い、ドキュメント全体を動かす。 | SNSをやめる人がいる一方で、僕はソーシャル・ボタンを再設置した。 |
撮っていて気づくのは、急に寒くなるあたりで突然落ち始め、寒いピークにはあまり落ちていなくなるということだ。 | そしてその多くが受け入れがたいものだったことがこういった印象を抱かせることになった。 |
カラムの幅から飛び出さないようにします。
ということで、 パンをお取り寄せした。 |
セル内で改行文字を使うと、改行できるようにします。
ボタン
on-background色で背景を塗り、文字を小さく、太くし、background色にします。
ラベルが長い場合は、折り返されます。
コンポーネント
読みやすくしたり、眺めやすくしたりするため、意味のある単位でまとめています。
アフィリエイト
クラス名としてaffiliate
を持つ要素は、画像を常に幅いっぱいに表示します。要素の縦幅は13行分になります。画像そのものは縦横比を維持して拡大・縮小され、中央に寄せて表示されます。
アフィリエイト画像の多くは背景色が白のため、背景を白(white
)で埋めます。
横長の画像でも、縦方向の中央に寄せられます。
構文強調
// Keyword, HTML tag and element name, CSS type selector
function test() {
// Literal, HTML attribute name, CSS property and pseudo selector
const baz = false;
// Number, CSS ID selector
const foo = 1;
// String, HTML attribute value, CSS class selector
const bar = "bar";
// Comment, HTML doctype
}
色コード | コントラスト | 使用箇所 |
---|---|---|
- |
- |
キーワード、HTMLのタグと要素名、CSSの要素セレクター |
- |
- |
リテラル、HTMLの属性名、CSSのプロパティーと疑似セレクター |
- |
- |
数値、CSSのIDセレクター |
- |
- |
文字列、HTMLの属性値、CSSのクラス・セレクター |
- |
- |
コメント、HTMLのdoctype |
そのコンテンツの言語が明示されているcode
要素は、HTMLファイルを作成する時にhighlight.jsを使って構文強調されます。動的に構文強調されることはありません。使う色は、surface色とコントラストが60以上になるよう、調節しています。
ロゴ
そしてそれらのネスト
クラス名としてlogo
を持つ要素は、太字にし、大文字にします。
メタデータ表記
クラス名としてmetaline
を持つ要素は、文字を小さくします。
article
要素直下のheader
要素の直下での最初で使われる場合は、上にとても大きく余白をとります。
section
要素直下のheader
要素の直下での最初で使われる場合は、上にかなり大きく余白をとります。
ファイル名に他所のカテゴリ文字列が含まれていると誤認されてしまうらしい。
また、続く要素との間を詰めます。
ページ一覧
- npmスクリプト
- 日付順
- 音
- Compass
- プロジェクト
- 言葉遊び
- これといった理由
- こちょこちょ
- もうちょっと
クラス名としてpages
を持つ要素は、項目を横並びに配置し、文字を小さくします。カラム幅におさまらない場合は、折り返されるでしょう。また、最後以外の項目の右に余白をとります。
footer
要素直下での最初で使われる場合は、上にとても大きく余白をとります。
- 購入当時
- 面倒
- 正面
クラス名としてsep
を持つ子要素は、その後ろに疑似要素で区切り線を挿入します。
投稿一覧
クラス名としてposts
を持つ要素は、リストのブレットやインデントを削除します。項目の日時は、文字を小さくし、行間を落とし、上に余白をとります。
陳列棚
クラス名としてshowcase
を持つ要素は、グリッドに沿って、1行につき3つ、下端を揃えて画像を並べ、上下に大きく余白をとります。
本文へ飛ぶ
例はありません。ページを再読み込みした直後にTabキーなどを押してみてください。
クラス名としてskip-to-main-content
を持つ要素は、文字を小さくし、画面上端のすぐ外に配置します。キーボードなどでフォーカスが当たると、画面上端に移動するでしょう。
スクリプト
どうしてもHTMLやCSSだけでは難しい機能は、スクリプトを使って実装します。
append-next
This paragraph should be added after submitting the button.
This paragraph should be added again after submitting the button. There is no more button.
画像が多いページでは、ユーザーの明示的な操作による多段階読み込みを採用します。JavaScriptが無効だったり、利用しているAPIに非対応の場合は、残りのコンテンツを含むウェブページへのリンクを表示します。
back-to-top
先頭へ戻るリンクを使用して、先頭へ戻った時、アドレスバーの値を書き換え、#top
を消します。
unutm
ユーザーが訪問した時、何らかの理由でutm_
で始まるパラメーターが付いていた場合、削除します。