はじめに
このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりすることもあるので、詳細は開発者ツールなどを駆使してください。
このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。例示で使われている妙な文章は、雑記の過去記事からランダムに選択された文を組み合わせたものです。特に意味はありません。
また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。
アイコン
on-backgroundで六角形に塗りつぶしたSVGフォーマットの画像です。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものが、ブラウザーによって使い分けられるでしょう。
大きさ
あらゆる大きさは、基本の比率である1.272で乗除することで決定しています。この数値は以下のように黄金比から計算されています。
sqrt((1 + sqrt(5)) / 2) = 1.272
幅
水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
本文の最大幅は約47remです。この値は以下のように計算されています。Noto Sans CJK JPで、文字「水」が1行に45文字前後入るように決めています。
1.272^16 = 46.967
文字サイズ
| キーワード | サンプル | 大きさ | 計算式 |
|---|---|---|---|
| small | 日本のblosxomユーザー | 0.786rem |
default / 1.272 |
| default | 行ったり来たり | 1rem |
1 |
| large | 置き場所そのもの | 1.272rem |
default * 1.272 |
| huge | ブランディング | 1.618rem |
default * 1.272^2 |
単位にremを使い、文書要素での文字サイズの変化に応じ、実際の大きさは変わるでしょう。
行送り
| キーワード | サンプル | 比率 | 計算式 |
|---|---|---|---|
| default | Gitの サブコマンドの オプションは 単純な機能の 制御だけでなく、 このような コマンドや シェルスクリプトを 書く上で 役に立つものも 多くある。 | 1.618 |
1.272^2 |
| small | 印刷向けスタイルシートを 分ける理由は、 スクリーン向けスタイルシートを できうる限り 小さくし、 ウェブページの レンダリング開始を できるかぎり 早めることにある。 | 1.272 |
default / 1.272 |
文字にx-heightという概念のない日本語で主に書かれているので、defaultの行送りは少し高めにしています。
余白
| キーワード | サンプル | 大きさ | 計算式 |
|---|---|---|---|
| v-tiny | 外部エンコーディング UTF-8 |
0.382rem |
v-small / 1.272^2 |
| v-small | バグ 放置プレイ |
0.618rem |
v-default / 1.272^4 |
| v-default | DuckDuckGo 欠点 |
1.618rem |
1.272^2 |
| v-large | HTTPS化 別ドメイン |
2.618rem |
v-default * 1.272^2 |
| v-huge | ウェブページ 再訪問 |
4.236rem |
v-large * 1.272^2 |
| v-gargantuan | サブディレクトレリ フレッツ光 |
6.853rem |
v-huge * 1.272^2 |
| v-rect | 機械的なダメ出し 大切なもの |
1.927rem |
v-default - half leading |
| h-small | Chrome 28 キャッシュレス |
0.786rem |
h-default / 1.272^4 |
| h-default | 以下のようなURL 余白 |
2.058rem |
1.272^16 / 1.272^13 |
v-*は縦方向の余白にのみ、h-*は横方向の余白にのみ使われます。v-defaultの大きさは、defaultの行送りと同じです。
色彩
| キーワード | サンプル | コントラスト |
|---|---|---|
| background | 簡単なもの | - |
| background-tone | アイテム・ディレクトリ | - |
| on-background | こういう構造 | - |
| link | バッファー・ローカル | - |
| link (vs text) | ol要素 | - |
それぞれ対応する色と、コントラストを80以上にします。修飾子として-toneがついている場合は、60以上確保します。カッコ内の小数はWCAG 2.2におけるコントラストの値です。
また、linkはコントラストをbackground-toneと60以上にします。一方、on-backgroundとのコントラストは下線があるため無視します。
また、ユーザーのダーク・モード設定に適応して、自動的に色は変更されます。
フォント
総称ファミリーのみを使い、特定のフォントは指定していません。システムや、ブラウザー、ユーザーの設定が、そのまま利用されます。
HTML要素
HTML要素に直接割り当てているスタイルの例と解説です。
文書要素
背景色をbackgroundにし、前景色をon-backgroundにし、フォントをサン・セリフにし、文字サイズを112.5%にし、行送りをdefaultにします。
本文要素
背景色を継承し、上下の余白を描画領域の幅に応じて徐々に大きくし、上と下の余白をv-defaultにし、右の余白を自動にし、左の余白を描画領域の幅に応じて徐々に大きくし、幅を制限し、左と右の内側の余白をh-smallにします。
左の余白は、描画領域に応じて少しづつ広がっていき、最大で11vwくらいです。この値は以下のように計算されています。
1.272^10 = 11.088
見出しレベル1
AdSenseと連携したGoogle検索
文字サイズをhugeにし、太字を解除し、行送りをsmallにし、上と下の余白をv-gargantuanにします。
見出しレベル2
10人くらい書いてくれれば
文字サイズをlargeにし、行送りをsmallにし、下の余白を削除し、上の余白をv-hugeにします。
見出しレベル3
CLIで使う場合もこれでSTDOUTにBase64なData URIで吐けて便利
文字サイズをdefaultにし、行送りをsmallにし、下の余白を削除し、上の余白をv-largeにします。
段落
再起動無しで反映されるのは良さそうだ。絞り込みを設定すると検索結果のページに特定の単語での絞り込み検索をおこなうリンクを挿入することができる。スバラシイ。
下の余白を削除し、上の余白をv-defaultにします。
Movable Typeでやってるみたいです
二番目のデモはborderプロパティのスタイルをdoubleにしたものです。svn updateやgit pullと似たような動作をする。
また、見出しレベル2と見出しレベル3に続く場合は、上の余白をv-tinyにします。
水平線
下の枠線を削除し、上の枠線種をsolidにし、上の枠線幅をthinにし、左と右の枠線を削除し、上と下の余白をv-rectにし、左の余白を消し、幅をカラムの最大幅から計算します。
44 / 1.272^8 = 6.42
例はこのページの最後を参照してください。
また、main要素に続く場合は、上の余白をv-gargantuanにします。
整形済みテキスト
ウェブでの文章は 流し読みされるのが普通で、 行間に意味を込める前提で書くと 空虚に感じられる文章になりやすい。 買おうと決めたあたりで黒アッパーで白ソールのレザー・スニーカーにすることは決めていた。ついでに古くてやばそうなので、マザーの電池も購入。今までその値にvar()を使われることを想定していなかったため、var()が引用符で括られてしまうというバグがあったようだ。
背景色をbackground-toneにし、上と下の余白をv-rectにし、カラム幅からはみ出さないようにし、内側の上と下の余白をv-smallにし、内側の左と右の余白をh-smallにし、タブを4文字にします。
引用
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。個人的には河内希望。そういうことができるライトウェイトな画像編集ソフトウェアと連携したりとかのが良さそうな気がしてきた。
下と右の余白を削除し、上の余白をv-defaultにし、内側の左の余白をh-defaultにします。
序列付きリスト
- あんまり融通が利かないスクリプトで悪かったなスミマセン。
- これまでいくつものスクロール制御の実装を作ってきたが、ひとつとして「あれは出来が良かった」と思えるものがない。
- そのためこういった引数を与えるというテクニックは使う場所が限られそう。
- 一番はJosh Homme。
- 画像でキャッチし簡潔なコメントで更に興味をもたせ、元サイトへ誘導みたいなのが結構上手く回ってるようなイメージ。
- これだけではエクスプローラーのサイドバーにOneDriveのアイコンが残る。
下の余白を削除し、上の余白をv-defaultにし、内側の左の余白をh-defaultにします。
入れ子にした時に、上の余白を削除します。
項目の上の余白をtinyにします。
序列なしリスト
- ベスト・プラクティスありそうな気がすると思って、netrwのNetrwHome()の実装とか見たらものすごくひどい感じだった……。
- Media Queriesバンザイ。
- しかしまたいっぱいにならない。
- HTTPリクエストの増加はユーザーに負担を求めることになるが、Google CDNのようなキャッシュが大いに期待できるものならなんとかメリットが上回りそう。
- 発売は来年の1/13なのですが、そろそろ入荷するかもとかいう噂。
- 通常二個セットのが単品で扱われてるのかと思う程安いけど、ちゃんと二個セットだった。
序列ありリストと同じです。
図
上と下の余白をv-rectにします。
文字サイズをsmallにします。
ハイパーリンク
ずっと使っていたホースリールがバキバキに割れ始め、うまく巻き取れなくなってしまった。
前景色をlinkにします。
強調
メンバーズクラブのポイントは交換先があまり充実してない。
斜体を解除し、太字にします。
コード、出力、キー入力
CMSによる生成が主流となって以降、複数のセクションをまとめるためにdiv要素が使われてきました。Surface Pro 7で、Surfaceコネクターは廃止されなかった。これで輸入盤ストアのベストセラー50位までのアイテムからランダムに拾えます（多分）。
フォントを等幅にし、文字サイズを親要素と同じにします。
追加
デメリットをまったく説明されなかったので華麗にスルーした。広告ドリブン・ウェブデザイン。その変更とはエラーの検知後は巡回頻度を徐々に下げていくと言うもので、正常に取得できた場合は一時間に一回という既定の巡回頻度に戻ります。
下線を削除します。
画像
枠線を消し、縦横サイズに枠線が含まれるようにし、表示をinline-blockにし、高さを自動で決定し、最大の高さを100%にし、最大の幅を100%にし、行ボックスの下端に整列します。
SVG
svg要素は、表示をinline-blockにし、既定で前景色と同じ色で塗られるようにし、高さを自動で決定し、最大の高さを100%にし、最大の幅を100%にし、行ボックスの下端に整列します。
表
| 検索 | ぶっ壊れ気味 |
|---|---|
| ひどい | メイン |
| ここ | ポストする |
枠線の間を削除し、背景色をbackground-toneにし、上と下の余白をv-rectにし、最大幅を100%にし、カラムの最大幅から飛び出さないようにします。
| 机に収まらないくらい大きいか、逆に子供用で小さいか、というサイズ感で見送った。 | ただ、取得しているRSSファイルのリストがOPMLファイルだと、他のRSS Aggregatorに持っていくときに楽だなぁとか思っただけなのですよ。 |
|---|---|
| transformプロパティーではtranslate3d() (translateY()でも悪くはない)を使い、ドキュメント全体を動かす。 | SNSをやめる人がいる一方で、僕はソーシャル・ボタンを再設置した。 |
| 撮っていて気づくのは、急に寒くなるあたりで突然落ち始め、寒いピークにはあまり落ちていなくなるということだ。 | そしてその多くが受け入れがたいものだったことがこういった印象を抱かせることになった。 |
はみ出す場合は、スクロールバーが表示されます。
セル
例は表を参照してください。
セルは、上の枠線種をsolidにし、上の枠線幅をthinにし、内側の上と下の余白をv-smallにし、内側の左と右の余白をh-smallにし、行ボックスの上端に整列し、折り返しを禁止します。
| ということで、 パンをお取り寄せした。 |
セル内で改行文字を使うと、そのまま改行されて表示されます。
見出しセル
例は表を参照してください。
下の枠線種をsolidにし、下の枠線幅をthinにし、内側の上と下の余白をv-smallにし、内側の左と右の余白をh-smallにし、寄せ方向を親から継承し、行ボックスの上端に整列し、折り返しを禁止します。
全要素
状況に応じて、全要素に与えられるスタイルについてです。
ページ内アンカー
ページ内アンカーで、ページ内のどこかへ進む場合は、上の空間をv-hugeにするようにスクロールします。
フォーカスされた要素
フォーカスが当たった場合は、上と下の空間をv-hugeにするようにスクロールします。
コンポーネント
読みやすくしたり、眺めやすくしたりするため、意味のある単位でまとめています。
アフィリエイト
高いのすごい、という雑な感想しかない
クラス名としてaffiliateを持つ要素は、特に何もしません。
また、その子孫のimg要素は、アスペクト比を16:9にし、背景を白にし、高さを自動で決定し、縦横比を維持して拡大・縮小し、内側の上と下の余白をv-defaultにし、内側の左と右の余白をh-defaultにし、幅を100%にします。
画像の拡大・縮小は、縦長と横長のどちらでもうまく調整されます。
日付
こういうものも気を付けて書けば、カスタム・プロパティー化して再利用できることがわかってきた。
クラス名としてdateを持つ要素は、文字サイズをsmallにします。
着丈もそのままだったのがちょっと残念
*.txtは可能だけど再帰的に検索してくれないし、**/*.txtは受け付けてくれないし……。
また、h2要素に続く場合は、上の余白をv-defaultにします
inline-tableでは、センタリングするにはその親でtext-align: centerなどとすることになる。
また、クラス名としてpage-headerを持つ要素の最初の子である場合は、上の余白をv-gargantuanにします
それに対する解決法について、//hicksdesignのskip navigation solutionsで書かれてました。
特にHTML5.1(2013-05-28付けのWD)だとstrong native semantics持ちなので、そもそもrole="main"なarticle要素を作っちゃうとmain要素使えなくなる（と思う）。
また、続く要素の上の余白を削除します。
ロゴ
例はこのページの最初を参照してください。
クラス名としてlogoを持つ要素は、文字サイズを親要素と同じにし、行送りを親要素と同じにし、上の余白を削除します。
また、その子孫のsvg要素は、前景色をon-backgroundにし、最大幅を制限せず、幅を行ボックスの高さと同じにします。
年別アーカイブ
ここ最近のコードブロックのスタイリングの流行りに、本文よりもコードブロックが左右に飛び出すようなデザインがある。
クラス名としてyearly-archivesを持つ要素は、特に何もしません。
また、その子孫のa要素は、折り返しを禁止します。
スクリプト
どうしてもHTMLやCSSだけでは難しい機能は、スクリプトを使って実装しますが、今は特に利用していません。