スタイル・ガイド

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

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

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

ベースライン

スタイルは、ベースラインとそれ以外の大きく2つに分けられます。ベースライン以外では、必ずカスタム・プロパティーを経由して値を設定することによって、段階的なスタイルの適用を可能にしています。

アイコン

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

大きさ

あらゆる大きさは、基本の比率である1.25で乗除することで決定しています。

文字サイズ

キーワード サンプル 大きさ 計算式
small 日本のblosxomユーザー 0.8rem default / 1.25
default 行ったり来たり 1rem 1
large 置き場所そのもの 1.25rem default * 1.25
huge 武田神社 1.563rem large * 1.25

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

行送り

キーワード サンプル 比率 計算式
default Gitの サブコマンドの オプションは 単純な機能の 制御だけでなく、 このような コマンドや シェルスクリプトを 書く上で 役に立つものも 多くある。 1.563 1.25^2

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

余白

キーワード サンプル 大きさ 計算式
tiny
ブロック
規模
0.64rem small / 1.25^2
small
バグ
放置プレイ
1rem default / 1.25^2
default
DuckDuckGo
欠点
1.563rem 1.25^2
large
HTTPS化
別ドメイン
1.953rem default * 1.25
huge
ウェブページ
再訪問
3.815rem large * 1.25^3
gargantuan
ミラー
明記
7.451rem huge * 1.25^3

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

レイアウト

幅に制限を加えた、中央寄せの1カラムです。左の余白はその最大値を制限しているため、大きい画面では左寄せになります。

カラムの最大幅は、65chです。Noto Sans CJK JPで、ひらがなが1行に36文字入るように決めています。

色彩

キーワード サンプル コントラスト
background - -
background-tone - -
on-background - -
on-background-tint - -

それぞれ対応する色と、コントラストを80以上にします。修飾子として-tintまたは-shadeがついている場合は、60以上確保します。

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

フォント

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

HTML要素

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

文書要素

背景色をbackgroundにし、前景色をon-backgroundにし、フォントをサン・セリフにし、文字サイズを描画領域の幅に応じて徐々に大きくし、行送りをdefaultにします。

文字のサイズを指定しているのは、rem単位を利用するためです。最低でもユーザーの指定した標準の大きさ(既定では16px)が確保され、最大で156.25%(既定では25px)です。

body要素

背景色を継承し、上下と左の余白を描画領域の幅に応じて徐々に大きくし、幅を制限し、左右の内側の余白をsmallにします。

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

1.25^10 = 9.313

上下の余白は、左の余白より少し小さくなるように計算されています。そのため同じように少しづつ広がっていきます。こちらは最大で6vwくらいです。

見出しレベル1

AdSenseと連携したGoogle検索

文字サイズをhugeにし、下の余白をhugeにし、上の余白をgargantuanにします。

CSSプリプロセッサーに

data-description属性を持つ場合は、文字サイズをlargeにし、下の余白をgargantuanにします。

また、疑似要素でdata-description属性の値を追加し、太字を解除します。

見出しレベル2

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

文字サイズをlargeにし、下の余白を削除し、上の余白をhugeにします。

ヘッダーとフッター

最後にQuery Stringモジュールでパラメーターに組み立ててPOSTするだけ。

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

段落

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

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

水平線


下左右の枠線を削除し、上の枠線幅をthickにし、上の枠線種をdottedにし、上の枠線色をon-background-tintにし、上下の余白をhugeにし、左の余白をlargeにし、右の余白をautoにし、幅を12chにします。

整形済みテキスト

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

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

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

引用

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

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

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

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

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

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

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

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

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

図とキャプション

上下の余白をlargeにします。

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

キャプションは、前景色をon-background-tintにし、文字サイズをsmallにします。

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

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

キーワード サンプル コントラスト
link - -

ハイパーリンクは、前景色をlinkにし、コントラストをsurfaceと60以上にします。

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

編集

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

追加は、下線を削除します。

埋め込みコンテンツ

背景色をsurfaceにし、枠線を消し、縦横比を維持してカラムの幅から飛び出さないようにします。SVG画像では、既定で前景色と同じ色で塗られるようにします。

figure要素内で使われる場合は、文字の下端と位置を揃えます。

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

枠線の間を削除し、背景色をsurfaceにし、上下の余白をlargeにします。

セルは、上の枠線種をsolidにし、上の枠線色をon-background-tintにし、内側の余白をtinyにし、文字を上に寄せます。

ヘッダー・セルは、下の枠線種をsolidにし、下の枠線色をon-background-tintにし、内側の余白をtinyにし、文字を上に寄せます。

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

カラムの幅から飛び出さないようにします。

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

セル内で改行文字を使うと、改行できるようにします。

ページ内アンカー

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

ページ内アンカーで、ページ内のどこかへ進む場合は、上にlargeだけずらした位置へスクロールします。

構造

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

他所のカテゴリ文字列

article要素直下の、最初のheader要素直下の段落は、上の余白をgargantuanにします。また、続く見出しレベル1は、上の余白を削除します。

「のたまう」って尊敬語だったのか。

輝かしい記録

section要素直下の、最初のheader要素直下の段落は、上の余白をgargantuanにします。また、続く見出しレベル2は、上の余白を削除します。

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

body要素直下のfooter要素は、、前景色をon-background-tintにします。また、疑似要素で線を挿入します。その疑似要素は、上の枠線幅をthinにし、上の枠線種をsolidにし、上の枠線色をon-backgroundにし、上の余白をgargantuanにし、左の余白をlargeにし、右の余白をautoにし、幅を6chにします。

コンポーネント

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

アフィリエイト

クラス名としてaffiliateを持つ要素は、画像を常に幅いっぱいに表示します。要素の縦幅は12行分くらいになります。

画像そのものは、背景を白にし、内側の余白をsmallにし、縦横比を維持して拡大・縮小され、中央に寄せて表示されます。

横長の画像でも、縦方向の中央に寄せられます。

構文強調

// Sample code for testing Comment, Literal, String, and Global.
function test() {
	const foo = false;
	const bar = "bar";
}
キーワード サンプル コントラスト
comment - -
literal - -
string - -
global - -

そのコンテンツの言語が明示されているcode要素は、HTMLファイルを作成する時にhighlight.jsを使って構文強調されます。使う色は、surfaceとコントラストが60以上にします。

ページ一覧

  • こういったCLIツール
  • コマンドライン・オプション
  • パーサー・ライブラリ
  • コントラストのバリエーション

クラス名としてpagesを持つ要素は、横並びに項目を並べ、折り返すようにし、項目間の余白をtinyにし、ブレットを削除し、左の内側の余白を削除します。

  • 機能的
  • MediaWiki
  • ほぼフルに

クラス名としてsepを持つ項目は、その後ろに疑似要素でSolidus(U+002F)を挿入します。その疑似要素は、左の余白を項目間の余白と同じにします。

  • Internet Explorer

項目が、子にem要素を持つ場合は、大文字にします。また、その子のa要素は、前景色を親要素と同じにし、下線を消します。

投稿一覧

  1. かっこいいと思ってはいないんだけど
  2. 残念ながらツールの助けは必要になるだろうが、特にHTMLやJavaScriptの助けは必要としない
  3. モニター名をクリックすると各モニターの詳細ページへ飛ぶ

クラス名としてpostsを持つ要素は、リストのブレットを削除し、左の内側の余白を削除します。

項目の日時は、文字サイズをsmallにし、上の余白をdefaultにします。

陳列棚

クラス名としてshowcaseを持つ要素は、下端を揃えて、グリッドに沿って、項目間の上下の余白をlargeにし、項目間の左右の余白をdefaultにし、1行につき3つ、リストのブレットを削除し、上下の余白をlargeにし、左の内側の余白を削除します。

スクリプト

どうしてもHTMLやCSSだけでは難しい機能は、スクリプトを使って実装します。しかし、現在は何も使われていません。