文字サイズ

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

行送り

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

余白

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

レイアウト

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

レイアウトのデバッグを切り替え

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

文書要素

背景色を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にします。

ヘッダーとフッター

文字サイズを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にします。

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

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

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

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

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

編集

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

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

埋め込みコンテンツ

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

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

表

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

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

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

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

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

ページ内アンカー

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

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

構造

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";
}

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

ページ一覧

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

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

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

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

• Internet Explorer

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

投稿一覧

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

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

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

陳列棚

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