はじめに

このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりすることもあるので、詳細は開発者ツールなどを駆使してください。

このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。例示で使われている妙な文章は、雑記の過去記事からランダムに選択された文を組み合わせたものです。特に意味はありません。

また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。

アイコン

on-backgroundで六角形に塗りつぶしたSVGフォーマットの画像です。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものが、ブラウザーによって使い分けられるでしょう。

大きさ

あらゆる大きさは、基本の比率である1.125で乗除することで決定しています。この数値は以下のように計算されています。

3^2 / 2^3 = 1.125

幅

デモのページにも書いておいたが、実装依存はともかくz-indexプロパティーがコンテキストに依存するという問題がある。ウェブでは柄が右下を向いている虫眼鏡アイコンを見ることが多い。上記サンプルはこのサイトに特化した形になっていてわかりにくいと思うので、既存のライブラリを使わずベタにJavaScriptを書いたサンプルも用意した。

本文の最大幅は約43remです。描画領域が十分に広い場合、手元の環境では1行に45文字弱になります（印が付いている単語は40と50文字目を含む単語です）。この値は以下のように計算されています。

1.125^32 * 1rem = 43.339rem

文字サイズ

キーワード	サンプル	大きさ	計算式
small	日本のblosxomユーザー	`0.79rem`	`default / 1.125^2`
default	行ったり来たり	`1rem`	1
large	置き場所そのもの	`1.266rem`	`default * 1.125^2`
huge	ブランディング	`1.602rem`	`large * 1.125^2`

単位にremを使い、文書要素での文字サイズの変化に応じ、実際の大きさは変わるでしょう。

行送り

キーワード	サンプル	比率	計算式
small	印刷向けスタイルシートを分ける理由は、スクリーン向けスタイルシートをできうる限り小さくし、ウェブページのレンダリング開始をできるかぎり早めることにある。	`1.266`	`default / 1.125^2`
default	Gitのサブコマンドのオプションは単純な機能の制御だけでなく、このようなコマンドやシェルスクリプトを書く上で役に立つものも多くある。	`1.602`	`1.125^4`

文字にx-heightという概念のない日本語で主に書かれているので、defaultの行送りは少し高めにしています。

余白

キーワード	サンプル	大きさ	計算式
tiny	外部エンコーディング UTF-8	`0.25rlh` = `0.401rem`	`default / 4`
small	バグ放置プレイ	`0.5rlh` = `0.801rem`	`default / 2`
default	DuckDuckGo 欠点	`1rlh` = `1.602rem`	`1.125^4`
large	HTTPS化別ドメイン	`2rlh` = `3.204rem`	`default * 2`
huge	ウェブページ再訪問	`3rlh` = `4.806rem`	`default * 3`
gargantuan	サブディレクトレリフレッツ光	`4rlh` = `6.408rem`	`default * 4`
rect	機械的なダメ出し大切なもの	`1.903rem`	`default + half leading`

defaultの大きさは、defaultの行送りと同じです。

色彩

キーワード	サンプル	コントラスト
background	簡単なもの	`-`
background-tone	アイテム・ディレクトリ	`-`
on-background	こういう構造	`-`
link	バッファー・ローカル	`-`
link (vs text)	ol要素	`-`

それぞれ対応する色と、コントラストを7以上にします。修飾子として-toneがついている場合は、7以上確保します。カッコ内の小数はWCAG3で採用されるかもしれないAPCAで計算されたコントラストの値です。

また、linkはコントラストをbackground-toneと4.5以上にします。一方、on-backgroundとのコントラストは下線があるため無視します。

また、ユーザーのダーク・モード設定に適応して、自動的に色は変更されます。

フォント

総称ファミリーのみを使い、特定のフォントは指定していません。ユーザーの設定や、ブラウザーの既定値、システムの既定値が、そのまま利用されます。

HTML要素

HTML要素に直接割り当てているスタイルの例と解説です。

文書要素

背景色をbackgroundにし、前景色をon-backgroundにし、フォントをサン・セリフにし、文字サイズを112.5%にし、行送りをdefaultにし、行頭と連続する場合に全角約物の空白を縮小します。文字サイズは以下のように計算されています。

1.125 * 100% = 112.5%

本文要素

上の余白を5svhにし、右の余白を自動にし、下の余白を29svhくらいにし、左の余白を描画領域の幅に応じて徐々に大きくし、幅を制限し、左と右の内側の余白を5vwにします。

下の余白は描画領域の縦幅に応じて変化します。縦長画面で見た時に、文章が下端にあって読みづらくならないように確保しています。この値は以下のように計算されています。歴代iPadで採用が多い4:3の縦横比を利用しています。

(1 - 3 / 16 * 9 / 4) / 2 * 100 = 28.906svh

左の余白は、描画領域に応じて少しづつ広がっていき、最大で10vwくらいです。この値は以下のように計算されています。

1.125^20 * 1vw = 10.545vw

見出しレベル1

AdSenseと連携したGoogle検索

文字サイズをhugeにし、太字を解除し、行送りをsmallにし、上と下の余白をgargantuanにします。

見出しレベル2

10人くらい書いてくれれば

文字サイズをlargeにし、行送りをsmallにし、下の余白を0にし、上の余白をhugeにします。

見出しレベル3

CLIで使う場合もこれでSTDOUTにBase64なData URIで吐けて便利

文字サイズをdefaultにし、行送りをsmallにし、下の余白を0にし、上の余白をlargeにします。

段落

再起動無しで反映されるのは良さそうだ。絞り込みを設定すると検索結果のページに特定の単語での絞り込み検索をおこなうリンクを挿入することができる。スバラシイ。

下の余白を0にし、上の余白をdefaultにします。

以来、年末年始にちょっとだけくらいにしている。

IKEAやBoConcept(のアウトレット)などにも良さそうなものはあったが、色はともかくサイズが合わないものが多かった。まだまだ続くCSSネタ(未定)。ソートはpx単位に変換されて行われる。サブルーチンと考えて使った方が良いです。

また、h2や、h3、hgroup、header要素に続く場合は、上の空白をsmallにします。

水平線

下の枠線を削除し、上の枠線種をsolidにし、上の枠線幅をthinにし、左と右の枠線を削除し、on-backgroundにし、上と下の余白をrectにし、左の余白を消し、幅をgargantuanにします。

整形済みテキスト

ウェブでの文章は
流し読みされるのが普通で、
行間に意味を込める前提で書くと
空虚に感じられる文章になりやすい。

買おうと決めたあたりで黒アッパーで白ソールのレザー・スニーカーにすることは決めていた。ついでに古くてやばそうなので、マザーの電池も購入。今までその値にvar()を使われることを想定していなかったため、var()が引用符で括られてしまうというバグがあったようだ。

背景色をbackground-toneにし、上と下の余白をrectにし、カラム幅からはみ出さないようにし、内側の余白をsmallにし、タブを4文字にします。

引用

少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。個人的には河内希望。そういうことができるライトウェイトな画像編集ソフトウェアと連携したりとかのが良さそうな気がしてきた。

下と右の余白を0にし、上の余白をdefaultにし、内側の左の余白をlargeにします。

序列付きリスト

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

下の余白を0にし、上の余白をdefaultにし、内側の左の余白をlargeにします。

入れ子にした時に、上の余白を0にします。

項目の上の余白をtinyにします。

序列なしリスト

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

序列ありリストと同じです。

図

上と下の余白をrectにします。

図のキャプション

文字サイズをsmallにします。

ハイパーリンク

ずっと使っていたホースリールがバキバキに割れ始め、うまく巻き取れなくなってしまった。

前景色をlinkにします。

また、子孫にimg要素を持つ場合は、表示をinline-blockにします。

強調

メンバーズクラブのポイントは交換先があまり充実してない。

斜体を解除し、太字にします。

コード、出力、キー入力

CMSによる生成が主流となって以降、複数のセクションをまとめるためにdiv要素が使われてきました。Surface Pro 7で、Surfaceコネクターは廃止されなかった。これで輸入盤ストアのベストセラー50位までのアイテムからランダムに拾えます（多分）。

フォントを等幅にし、文字サイズを継承します。

追加

デメリットをまったく説明されなかったので華麗にスルーした。広告ドリブン・ウェブデザイン。その変更とはエラーの検知後は巡回頻度を徐々に下げていくと言うもので、正常に取得できた場合は一時間に一回という既定の巡回頻度に戻ります。

下線を削除します。

画像

Lorem Picsum

枠線を消し、縦横サイズに枠線が含まれるようにし、表示をinline-blockにし、高さを自動で決定し、最大の高さを100%にし、最大の幅を100%にし、行ボックスの下端に整列します。

SVG

svg要素は、表示をinline-blockにし、既定で前景色と同じ色で塗られるようにし、高さを自動で決定し、最大の高さを100%にし、最大の幅を100%にし、行ボックスの下端に整列します。

表

検索	ぶっ壊れ気味
ひどい	メイン
ここ	ポストする

枠線の間を0にし、背景色をbackground-toneにし、上と下の余白をrectにし、最大幅を100%にし、カラムの最大幅から飛び出さないようにします。

机に収まらないくらい大きいか、逆に子供用で小さいか、というサイズ感で見送った。	ただ、取得しているRSSファイルのリストがOPMLファイルだと、他のRSS Aggregatorに持っていくときに楽だなぁとか思っただけなのですよ。
transformプロパティーではtranslate3d() (translateY()でも悪くはない)を使い、ドキュメント全体を動かす。	SNSをやめる人がいる一方で、僕はソーシャル・ボタンを再設置した。
撮っていて気づくのは、急に寒くなるあたりで突然落ち始め、寒いピークにはあまり落ちていなくなるということだ。	そしてその多くが受け入れがたいものだったことがこういった印象を抱かせることになった。

はみ出す場合は、スクロールバーが表示されます。

セル

例は表を参照してください。

セルは、上の枠線種をsolidにし、上の枠線幅をthinにし、内側の余白をsmallにし、行ボックスの上端に整列し、折り返しを禁止します。

ということで、パンをお取り寄せした。

セル内で改行文字を使うと、そのまま改行されて表示されます。

例は表を参照してください。

見出しセルの場合は、寄せ方向を親から継承します。

全要素

状況に応じて、全要素に与えられるスタイルについてです。

ページ内アンカー

ruとかになっているリンク

ページ内アンカーで、ページ内のどこかへ進む場合は、上の余白をhugeにするようにスクロールします。

コンポーネント

読みやすくしたり、眺めやすくしたりするため、意味のある単位でまとめています。

アフィリエイト

クラス名としてaffiliateを持つ要素は、特に何もしません。

また、その子孫のimg要素は、アスペクト比を16:9にし、背景を白にし、高さを自動で決定し、縦横比を維持して拡大・縮小し、内側の余白をdefaultにし、幅を100%にします。

画像の拡大・縮小は、縦長と横長のどちらでもうまく調整されます。

過去ログ

そうなると
シンタックスシュガー
キリがない
ケユカの滑らないハンガー
普通に取り込んで
体勢を立て直して
一番上ではない方
検索フォーム
サブナビゲーション
モックアップ
このようになってます。
不明なセレクター

クラス名としてarchivesを持つ要素は、項目間の左右の余白をdefaultにし、表示をflexにし、flexの折り返しを有効にし、ビュレットを削除し、左の内側の余白を0にします。

日付

Pinboardでは投稿フォームやAPIの他にメールで投稿することもできる。

クラス名としてdateを持つ要素は、文字サイズをsmallにします。

また、h1要素が続く場合は、上の余白をgargantuanにします

こういうものも気を付けて書けば、カスタム・プロパティー化して再利用できることがわかってきた。

特にHTML5.1(2013-05-28付けのWD)だとstrong native semantics持ちなので、そもそもrole="main"なarticle要素を作っちゃうとmain要素使えなくなる（と思う）。

また、続く要素の上の余白を0にします。

要約

右下参照。

グローバル・ナビゲーションだけ色が逆になっているのをどうにかしたい。

で、適当にコマンドラインをそのままほかのブラウザに渡すアプリケーション作ってInternet Explorerのexeファイルと置き換えてみました。

クラス名としてexcerptを持つ要素は、何もしません。

また、その祖先のa要素は、下線を消します。

また、その子孫のp要素は、祖先にa要素を持つ場合、色をon-backgroundにします。

また、その子孫のh3要素は、祖先にa要素を持つ場合、下線を表示します。

ロゴ

例はこのページの最初を参照してください。

クラス名としてlogoを持つ要素は、文字サイズを継承し、行送りを継承し、上の余白を0にします。

また、h1要素の場合は、下の余白を0にします。

また、その子孫のa要素は、下線を削除します。

また、その子孫のsvg要素は、前景色をon-backgroundにし、最大幅を制限せず、幅を1行の高さにします。

陳列棚

生協

アメリカン・サイコ
じゃあどうするかというと、大体は表で欲しがられ、その表は何かしらのデータから生成されるので、データ側をいじって誤魔化している

Emoji
とりあえず

解説を書いていないプラクティス、スキル、知識、手についた技術
Media Queries

rgb(255, 255, 255)
ifttt

バラードだったりしたら
パックご飯

配布エリア外の人間
反対に機能していない例

ロード完了後に裏でこっそり

クラス名としてshowcaseを持つ要素は、項目の並びを下端揃えにし、表示をgridにし、項目間の上と下の余白を0にし、項目間の左と右の余白をlargeにし、1行につき2つ、3つ、または4つ並びにし、リストのブレットを削除し、上の余白をにし、左の内側の余白を0にします。

また、クラス名として更にonelineを持つ場合、表示をflexにし、はみ出たものをスクロールさせます。以下のボタンで挙動を確認できます。

また、その子孫のli要素は、上の余白をrectにします。

また、その子孫のli要素は、クラス名として更にonelineを持つ場合、最小幅を親要素の幅の1/3にします。

また、その子孫のp要素は、文字サイズをsmallにし、横方向へはみ出したものを削除し、折り返しを禁止します。

また、その子孫のp要素は、最初のp要素である場合、上の余白をtinyにします。

また、その子孫のp要素は、p要素に続く場合、上の余白を0にします。

サイト・メニュー

クラス名としてsite-menuを持つ要素は、何もしません。

また、その子孫のul要素は、ビュレットを削除し、左の内側の余白を0にします。

また、その子孫のul要素は、最初の子要素である場合、上の余白をgargantuanにします。

また、その子孫のul要素は、ul要素に続く場合、上の余白をlargeにします。

また、その子孫のul要素は、最後の子要素である場合、下の余白をgargantuanにします。

スクリプト

どうしてもHTMLやCSSだけでは難しい機能は、スクリプトを使って実装しますが、今は特に利用していません。