はじめに

このウェブサイトの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や、h3hgroupheader要素に続く場合は、上の空白をsmallにします。

水平線


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

整形済みテキスト

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

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

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

引用

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

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

序列付きリスト

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

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

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

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

序列なしリスト

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

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

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

図のキャプション

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

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

ハイパーリンク

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

前景色をlinkにします。

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

強調

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

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

コード、出力、キー入力

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

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

追加

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

下線を削除します。

画像

枠線を消し、縦横サイズに枠線が含まれるようにし、表示を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にし、行ボックスの上端に整列し、折り返しを禁止します。

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

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

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

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

全要素

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

ページ内アンカー

ページ内アンカーで、ページ内のどこかへ進む場合は、上の余白を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にします。

要約

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

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

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

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

ロゴ

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

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

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

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

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

ページ・ヘッダー

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

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

陳列棚

  • 生協

    アメリカン・サイコ

  • じゃあどうするかというと、大体は表で欲しがられ、その表は何かしらのデータから生成されるので、データ側をいじって誤魔化している

    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にします。

スクリプト

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