このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりするため、詳細は開発者ツールなどを駆使してください。
このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。例示で使われている妙な文章は、雑記の過去記事からランダムに選択された文を組み合わせたものです。特に意味はありません。
また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。
アイコン
primary色で塗りつぶしたSVGフォーマットの画像です。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものが、ブラウザーによって使い分けられるでしょう。
サイズ
あらゆるサイズ（枠線の幅、文字サイズ、行送りの高さ、余白、コンテンツの幅）は、基本の比率である1.272で乗除することで決定しています。この数字は、2乗するとおよそ1.618と、黄金比に近い値になります。
枠線
| サンプル | 比率 | キーワード | 使用箇所 |
|---|---|---|---|
0.236 |
large | 引用の左、表ヘッダーの下 | |
0.056 |
default | 表の上、表のセルの下 |
標準の枠線は、コンテンツで明示的に周囲と切り分けたいものに使っています。太い枠線は修飾目的で使っています。
文字
| 比率 | キーワード | 使用箇所 |
|---|---|---|
1.618 |
huge | 章見出し |
1.272 |
large | 説見出し |
1 |
default | 本文 |
0.786 |
small | 図のキャプション、ボタン、メタデータ表記、ページ一覧 |
重要なものを大きくし、補助的なものを小さくしています。
行送り
- Gitのサブコマンドのオプションは単純な機能の制御だけでなく、このようなコマンドやシェルスクリプトを書く上で役に立つものも多くある。ブログにおける2000本記事は、プロ野球の2000本安打に匹敵するのではないか。その欠点とは動かした要素がブラーがかかったようにぼやけることがあることだ。そこにfixed layoutな理由なんかも語られています。書くまでもなさそうだが一応書いておく。思い出したって言っても、そのもの書いてあるの見て、思い出したんですが。本文フォントとロゴが同じなのがなんとなく落ち着かないので、こんな感じに変えた。: default: 本文
- Webフォントを非同期に読むテクニックはいくつかあるけど、その理由についてまとめられた文章は少ない。まだ今年のCSSスナップショットを読んでいない。ユアン・マクレガーがかなり良い感じなので、それだけでも見る価値がある気がする。上記のように@supports絡みでの利用が主なはずなので、@supportsが実装されていないIE11では些末な問題だろう。jQueryに文字列に含まれる特定の文字を文字参照へ変換するそのものずばりなメソッドは無い（よね？）が、ダミーの要素を作成し、text()で変換したい文字列をセットしてからhtml()で内容だけ取り出してやるとうまいこと変換することができる。ここまでくればPure CSSでもいけそうに思えるが、それはちょっと難しそうだ。: small: 章見出し、説見出し、整形済みテキスト
文字にx-heightという概念のない日本語で主に書かれているので、標準の行送りは少し多めに1.618にしています。文字サイズが大きかったり、伝統的に低めに設定されていたりする要素で、低くしています。
余白
- huge: 章見出しの上、説見出しの上、コンテンツの上、ヘッダーでのメタデータ表記の上、
nav要素でのメタデータ表記の上 - large: 項見出しの上、水平線の上下
- default: 段落など多くのグルーピング要素の上、整形済みテキストの左右内余白、引用の左内余白、リストの左内余白、表のセルの左右内余白、ボタンの左右内余白、アフィリエイトの画像の内余白、サムネイル一覧の項目の縦余白
- small: 整形済みテキストの上下内余白、表のセルの上下内余白、ボタンの上下内余白、ページの項目の右
隣接する要素との関連性を考慮して、決定しています。標準の高さは、標準の行送りと同じです。
レイアウト
幅に制限を加えた、中央寄せの1カラムです。大きい画面では、左に余白を大きめにとって、左寄せにしています。
カラムの最大幅は、以下のような計算式で決められており、およそ37remです。
1 / 1.272 * 1.272^16 = 36.9238237858
大きい画面における左の余白は、以下のような計算式で決められており、およそ9remです。
1 / 1.272 * 1.272^10 = 8.7173403377
色
| サンプル | コントラスト比 | キーワード | 使用箇所 |
|---|---|---|---|
- |
- |
background | ルート要素の背景、ボタン |
- |
- |
surface | 整形済みテキストの背景、画像の背景、表の背景 |
- |
- |
on-background | ルート要素 |
- |
- |
primary | アイコン、引用、図のキャプション、ボタンの背景 |
- |
- |
secondary | ハイパーリンク |
- |
- |
それぞれ対応する色と、コントラスト比を7以上確保しています。secondary色はハイパーリンクに使うため、backgroundと4.5以上、on-backgroundと3以上確保しています。
フォント
ルート要素にサン・セリフ、コード部分に等幅が使っています。特定のフォントは指定していないので、システム、ブラウザー、またはユーザーの設定がそのまま利用されるでしょう。
文書要素
rem単位を利用するため、文字サイズはこの要素で指定しています。他に背景色や文字色、フォント、行間もこの要素で指定しています。
文字サイズは、描画領域の幅に応じて、徐々に大きくなります。最低でもユーザーの指定した標準サイズ（デフォルトでは16px）が確保され、最大で135%です。
セクション
セクションを構成する要素についてです。
body要素
レイアウトはこの要素へのスタイルで実現しています。
章見出し
h1要素は、章見出しとみなし、文字をかなり大きくし、上にかなり大きく余白をとります。最重要な見出しで、おおむねtitle要素の中身と同じになるでしょう。
節見出し
h2要素は、節見出しとみなし、文字を大きくし、上にかなり大きく余白をとります。サブ・セクションの見出しに使われるでしょう。
項見出し
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/
長い行は、折り返せるなら折り返します。折り返せない場合は、カラム幅からはみ出さないようにします。
引用
というわけで、配信直後に停止。Captivate（旧製品名: RoboDemo)も楽しみ。が、双方共に幅1pxの画像を返します（つまり画像は無いということ）。少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。個人的には河内希望。そういうことができるライトウェイトな画像編集ソフトウェアと連携したりとかのが良さそうな気がしてきた。最後に鶴岡八幡宮を見にいって、鎌倉駅から帰途へ。そんなわけで、僕は非常に簡単なエラー処理無しの更新通知ping送信XML-RPCクライアントのPerlスクリプトでやってるんですが、こういったアナログなアプローチは、扱いやすいんじゃないかなと。
左にのみ枠線を引き、primary色にします。
序列付きリストと序列なしリスト
- あんまり融通が利かないスクリプトで悪かったなスミマセン。
- これまでいくつものスクロール制御の実装を作ってきたが、ひとつとして「あれは出来が良かった」と思えるものがない。
- そのためこういった引数を与えるというテクニックは使う場所が限られそう。
- 一番はJosh Homme。
余白以外のスタイルは指定しません。入れ子にした時に、余白が空きすぎないようにします。
- ベスト・プラクティスありそうな気がすると思って、netrwのNetrwHome()の実装とか見たらものすごくひどい感じだった……。
- Media Queriesバンザイ。
- しかしまたいっぱいにならない。
- HTTPリクエストの増加はユーザーに負担を求めることになるが、Google CDNのようなキャッシュが大いに期待できるものならなんとかメリットが上回りそう。
序列なしリストも同じです。
図のキャプション
図にキャプションがある場合は、文字を小さくし、primary色にします。
語・句・文単位での意味付け
組み込みスタイルシートを変更しているものは、ハイパーリンクや、強調と、引用元の表記（斜体がないこともあるため）、code fragmentとsample outputとuser input（フォント変更と文字サイズ修正のため）くらいです。
編集
デメリットをまったく説明されなかったので華麗にスルーした。残りの40%は、。けどなんかしっくり来なかった……。とresultsがqueryの子になっているが、JSONP-Xでは、。広告ドリブン・ウェブデザイン。その変更とはエラーの検知後は巡回頻度を徐々に下げていくと言うもので、正常に取得できた場合は一時間に一回というデフォルトの巡回頻度に戻ります。冗談ですが（5%くらいは本気かも）。いろいろ出来そうな。大山でも活躍してくれた。こうするとコールバック関数内でurls[0]を参照すれば、どのURLへのリクエストした結果として呼び出されたコールバック関数なのかすぐにわかる。
追加した部分が目立ち過ぎないよう、下線を削除します。
埋め込みコンテンツ
枠線を消し、カラムの幅から飛び出さないようにします。SVG画像では、既定で文字色と同じ色で塗られるようにします。
表
| 検索 | ぶっ壊れ気味 |
|---|---|
| ひどい | メイン |
| ここ | ポストする |
surface色で背景を塗り、セルの上下に枠線を付けます。ヘッダーのみ下線が太くなります。
| 机に収まらないくらい大きいか、逆に子供用で小さいか、というサイズ感で見送った。 | ただ、取得しているRSSファイルのリストがOPMLファイルだと、他のRSS Aggregatorに持っていくときに楽だなぁとか思っただけなのですよ。 |
|---|---|
| transformプロパティーではtranslate3d() (translateY()でも悪くはない）を使い、ドキュメント全体を動かす。 | SNSをやめる人がいる一方で、僕はソーシャル・ボタンを再設置した。 |
| 撮っていて気づくのは、急に寒くなるあたりで突然落ち始め、寒いピークにはあまり落ちていなくなるということだ。 | そしてその多くが受け入れがたいものだったことがこういった印象を抱かせることになった。 |
カラムの幅から飛び出さないようにします。
| ということで、 パンをお取り寄せした。 |
セル内で改行文字を使うと、改行できるようにします。
フォーム
ボタン
primary色で背景を塗り、文字を小さく、太くし、background色にします。
ラベルが長い場合は、折り返されるでしょう。
アフィリエイト
itemprop属性の値としてarticleBodyを持つ要素の先頭にあるaside要素は、アフィリエイト画像とみなし、常に幅いっぱいに表示します。要素の縦幅は13行分になります。画像そのものは縦横比を維持して拡大・縮小され、中央に寄せて表示されます。
アフィリエイト画像の多くは背景色が白のため、背景を白（white）で埋めます。
横長の画像でも、縦方向の中央に寄せられるでしょう。
署名欄
クラス名としてbylineを持つ要素は、署名欄とみなし、文字を太くします。
構文強調
// Comment, HTML doctype
function test() { // Keyword, HTML tag name, CSS type selector
const foo = 1; // Number, CSS ID selector
const bar = "bar"; // String, HTML attribute value, CSS class selector
const baz = false; // Literal, HTML tag and attribute name, CSS attribute and pseudo selector
}そのコンテンツの言語が明示されているcode要素は、コードとみなされ、HTMLファイルを作成する時にhighlight.jsを使って構文強調されます。動的に構文強調されることはありません。
ハイライトのカラー・スキームはSolarizedから借用しています。背景色が違うので、読みやすさは劣ります。
ロゴ
例はヘッダーを参照してください。
クラス名としてlogoを持つ要素は、ロゴとみなし、文字を太く、大文字にします。使われるフォントは環境に依存するでしょう。
メタデータ表記
クラス名としてmetalineを持つ要素は、メタデータ表記とみなし、文字を小さくし、行送りが詰められます。続く要素との余白を詰めます。
あってよかったレースのカーテン
ヘッダーで使われる場合は、上にかなり大きく余白をとります。
nav要素で使われる場合も、上にかなり大きく余白をとります。
ページ一覧
例はヘッダーを参照してください。
クラス名としてpagesを持つ要素は、ページ一覧とみなし、リストのブレットやインデントを削除し、文字を小さくします。
例はフッターを参照してください。
さらにクラス名としてonelineを持つ場合は、項目を横並びに配置します。カラム幅におさまらない場合は、折り返されるでしょう。
投稿一覧
クラス名としてpostsを持つ要素は、投稿の一覧とみなし、リストのブレットやインデントを削除します。
陳列棚
クラス名としてshowcaseを持つ要素は、陳列棚とみなし、グリッドに沿って画像が並べます。描画領域に応じて、1行につき1つから4つ、下端をそろえて表示されるでしょう。
さらにクラス名としてonelineを持つ場合は、常に1行につき3つだけ並べます。
append-next
This paragraph should be added after submitting the button.
This paragraph should be added again after submitting the button. There is no more button.
画像が多いページでは、ユーザーの明示的な操作による多段階読み込みを採用します。JavaScriptが無効だったり、利用しているAPIに非対応の場合は、残りのコンテンツを含むウェブページへのリンクを表示します。