スタイル・ガイド

このウェブサイトの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を書いている。個人的には河内希望。そういうことができるライトウェイトな画像編集ソフトウェアと連携したりとかのが良さそうな気がしてきた。

右の余白を削除します。

序列付きリストと序列なしリスト

  1. あんまり融通が利かないスクリプトで悪かったなスミマセン。
  2. これまでいくつものスクロール制御の実装を作ってきたが、ひとつとして「あれは出来が良かった」と思えるものがない。
    1. そのためこういった引数を与えるというテクニックは使う場所が限られそう。
    2. 一番はJosh Homme。
    3. 画像でキャッチし簡潔なコメントで更に興味をもたせ、元サイトへ誘導みたいなのが結構上手く回ってるようなイメージ。
  3. これだけではエクスプローラーのサイドバーにOneDriveのアイコンが残る。

入れ子にした時に、余白が空きすぎないようにします。項目の上にかなり小さく余白をとります。

  • ベスト・プラクティスありそうな気がすると思って、netrwのNetrwHome()の実装とか見たらものすごくひどい感じだった……。
  • Media Queriesバンザイ。
    • しかしまたいっぱいにならない。
    • HTTPリクエストの増加はユーザーに負担を求めることになるが、Google CDNのようなキャッシュが大いに期待できるものならなんとかメリットが上回りそう。
    • 発売は来年の1/13なのですが、そろそろ入荷するかもとかいう噂。
  • 通常二個セットのが単品で扱われてるのかと思う程安いけど、ちゃんと二個セットだった。

序列なしリストも同じです。

図とキャプション

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

arialbbi.ttfとかよりもArial Black Bold Italic.ttfとかの方が

キャプションは文字を小さくし、少し透過させます。

語・句・文単位での意味付け

ずっと使っていたホースリールがバキバキに割れ始め、うまく巻き取れなくなってしまった。メンバーズクラブのポイントは交換先があまり充実してない。

色コード コントラスト キーワード 使用箇所
- - 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以上になるよう、調節しています。

メタデータ表記

どうもこの系統だと日暮里は止まらないようだ。

クラス名としてmetalineを持つ要素は、文字を小さくします。

ブラウザのリロードは魔法のメソッドSendKeyでF5を送ってやれば良し。

article要素直下のheader要素の直下での最初で使われる場合は、上にとても大きく余白をとります。

section要素直下のheader要素の直下での最初で使われる場合は、上にかなり大きく余白をとります。

豆乳でスコーンを作ったら膨らまないし、まったくさっくりしていないものに仕上がった。

ファイル名に他所のカテゴリ文字列が含まれていると誤認されてしまうらしい。

また、続く要素との間を詰めます。

ページ一覧

  • npmスクリプト
  • 日付順
  • Compass
  • プロジェクト
  • 言葉遊び
  • これといった理由
  • こちょこちょ
  • もうちょっと

クラス名としてpagesを持つ要素は、項目を横並びに配置し、文字を小さくします。カラム幅におさまらない場合は、折り返されるでしょう。また、最後以外の項目の右に余白をとります。

  • 本家ウェブサイト
  • リリーフ・グリップ
  • 新発売

footer要素直下での最初で使われる場合は、上にとても大きく余白をとります。

  • 購入当時
  • 面倒
  • 正面

クラス名としてsepを持つ子要素は、その後ろに疑似要素で区切り線を挿入します。

投稿一覧

クラス名としてpostsを持つ要素は、リストのブレットやインデントを削除します。項目の日時は、文字を小さくし、行間を落とし、上に余白をとります。

陳列棚

クラス名としてshowcaseを持つ要素は、グリッドに沿って、1行につき3つ、下端を揃えて画像を並べ、上下に大きく余白をとります。

本文へ飛ぶ

例はありません。ページを再読み込みした直後にTabキーなどを押してみてください。

クラス名としてskip-to-main-contentを持つ要素は、文字を小さくし、画面上端のすぐ外に配置します。キーボードなどでフォーカスが当たると、画面上端に移動するでしょう。

スクリプト

どうしてもHTMLやCSSだけでは難しい機能は、スクリプトを使って実装します。

append-next

画像が多いページでは、ユーザーの明示的な操作による多段階読み込みを採用します。JavaScriptが無効だったり、利用しているAPIに非対応の場合は、残りのコンテンツを含むウェブページへのリンクを表示します。

back-to-top

Test back-to-top.js

先頭へ戻るリンクを使用して、先頭へ戻った時、アドレスバーの値を書き換え、#topを消します。

unutm

Test unutm.js

ユーザーが訪問した時、何らかの理由でutm_で始まるパラメーターが付いていた場合、削除します。