プレビューとか
マークアップ例とか
雑多な決まりごととか
マークアップはHTMLのソースを、スタイルについてはこのページで参照されている非圧縮のCSSファイルを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはプレビューを作る上でのやむを得ない事情によるものです。
レイアウトの位置確認のために、空いているところをダブルクリックするとグリッドと要素のアウトラインをトグルすることができます。グリッドはCSSグラデーションを利用した簡単なもののため、描画領域の幅によっては数ピクセル程ずれることがあります。
また、最初の見出しをクリックすることでホームでのスタイルへの切り替えを、日付をクリックすることでアイキャッチ画像の切り替えを、それぞれ行うことができます。
必要のないものを隠し、適切な位置で改行されるように調節しています。
このページ、およびこのページから参照されているCSSやJavaScriptファイルは最小化されていません。
ロゴとほぼ同じ画像を正方形にしたSVGフォーマットの画像から生成されています。PNGフォーマットへ変換したものや、更にそのPNGフォーマットの画像をアイコン形式にまとめたものがブラウザーによって適宜使われます。
| 本文 | San FranciscoまたはSegoe UI |
|---|---|
| The quick brown fox jumps over the lazy dog. | |
| The quick brown fox jumps over the lazy dog. | |
| コード | MenloまたはConsolas |
| The quick brown fox jumps over the lazy dog. | |
| The quick brown fox jumps over the lazy dog. |
コンテンツのおさまり具合によってレイアウトが切り替わります。ブラウザーの大きさを変更したりすると、その様子が確認できるでしょう。
広い画面でのカラム比は1:1.7になっています。この比率は広い画面での行間と同じです。
また、レイアウトが変わるタイミングで適切に文字サイズも変わります。ただしフルHD以上で表示された場合には適切な文字サイズを選定するのが難しい（または面倒くさい）ため、描画領域の横幅から自動生成しています。
Lorem ipsum dolor sit amet, consectetur adip*iscing elit. Suspendisse moll*is elementum leo sed feugiat.
直前の段落のアスタリスクは45文字目と75文字目に打ってあります。一行の文字数は45–75文字（line-height: 1.5の場合）と言われているので、このアスタリスクが行をまたいでいると適切な文字数で折り返されているということになります。
HTML5が定義するところのセクションを構成する要素についてです。
文字はブラウザーの初期設定のまま（通常は16px）で表示されます。行間はx-heightという概念のない日本語がメインなので少し多めに1.7としています。
セクションを作成する、section、nav、articleとaside要素では、特に何もスタイルを指定していません。
セクションの見出しはh1要素でマークアップされます。
<h1>...</h1>
セクション内の小見出しでもh1要素を使います。必ずsection要素を組み合わせることで、CSSでスタイリングできるようにしています。
<section>
<h1>...</h1>
</section>
コンテンツで使われる基本的な要素についてです。
様々な所で使用されるので、他とバッティングしないように相殺可能なマージン以外のスタイルは指定していません。
<p>...</p>
主に暗黙のセクションの区切りが挿入される所に恣意的に使用しています。線の代わりに表示されるアスタリスクはテキストです。
<hr>
主にコードの表示やコマンドラインでの操作例に使用しています。主に英文になることから、ブラウザーの慣習に従ってフォントサイズを1段階落としてあります。また、本文とのバランスをとるため、pre要素の3行が本文の2行に相当するようにしてあります。
$ mkdir example $ cd example/ $ git init $ touch README.md $ git add README.md $ git commit -m 'Initial commit' $ git remote add origin https://github.com/hail2u/example.git $ git push -u origin master
<pre><samp>$ <kbd>mkdir example</kbd>
$ <kbd>cd example/</kbd>
$ <kbd>git init</kbd>
$ <kbd>touch README.md</kbd>
$ <kbd>git add README.md</kbd>
$ <kbd>git commit -m 'Initial commit'</kbd>
$ <kbd>git remote add origin https://github.com/hail2u/example.git</kbd>
$ <kbd>git push -u origin master</kbd>
</samp></pre>
内部で様々なスタイルが使用されるので、ブロックの左端に縦線を引く以外のスタイルは指定しません。字体に斜体を採用すべきところですが、メイリオが和文部分に斜体を持っていないのでそれを考慮して無指定にしています。マークアップは通常、全体をfigure要素で括り、引用元の表記はfigcaptionとcite要素を組み合わせて行います。
The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.
If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g. by server-side scripts collecting statistics about a site's use of quotations), not for readers.
blockquote element<figure>
<blockquote>
<p>...</p>
</blockquote>
<figcaption>— <cite>...</cite></figcaption>
</figure>
双方共にデフォルトとあまり違わない形になるようにスタイルは最小限にとどめています。序列付きリストではアラビア数字をそのマークに使用します。
<ol>
<li>...
<ol>
<li>...</li>
</ol>
</li>
</ol>
序列なしリストではデフォルトと同じくネストされるにつれそのマークが変化します。
<ul>
<li>...
<ul>
<li>...</li>
</ul>
</li>
</ul>
内部、特にdd要素内で様々な要素が使われたり使われなかったりすることから、スタイルは最小限にとどめています。
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
通常はfigure要素を使っています。既にblockquote要素で使われているように内容は画像とは限らないので、強いスタイルは指定していません。figcaption要素は必須ではありませんが、使う場合はfigure要素の最後に置きます。
<figure>
<img alt="..." height="..." src="..." width="...">
<figcaption>...</figcaption>
</figure>
段落内では様々な意味づけを行うマークアップを使用しています。主に使うものはExample.comなどのハイパーリンクを始め、痛いなどの強調やとても痛い！などのより強い強調、Wikipediaなどの出典元の明示、"HTML5" is widely used as a buzzword
などのインラインでの引用、WWWなどの略語、<code>などのコード断片、fooなどの変数、Hello World!などのプログラム出力、Enterなどのキー入力、注意を向けさせたいなどの単なるマーク、これらをあまり逸脱しない形でスタイルしています。
ただし、ハイパーリンクは多くの場合本文以外では下線を消しています。また、強調においては日本には斜体の文化は無いので太字としています。
より良い編集履歴を残すため、インラインで追加した部分は特に何もせず、削除した部分は取り消し線を加えています。単なる追記等の場合はそのことを明示するだけに留め、ins要素でマークアップはしていません。
画像や動画はfigure要素を使って参照します。
<figure>
<img alt="..." height="..." src="..." width="...">
</figure>
図と同じように本文と明確に区別ができるように、下線を付けるようにしています。ヘッダーのみ下線は少し太くなります。
| Proin | Nunc | Sed |
|---|---|---|
| Erat | Eget | Quis |
| Moi | Donec | Ante |
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
横に長くはみ出す場合は、横スクロールバーが自動的に表示されます。
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Nulla interdum nibh a pretium gravida | Nullam id justo ultricies lectus aliquam molestie nec non turpis | Nunc adipiscing massa non urna tincidunt egestas |
|---|---|---|---|
| Donec sollicitudin purus quis vulputate euismod | Sed non ligula eu eros venenatis varius a sit amet risus | Mauris a purus varius, aliquet elit quis, blandit nisi | Fusce imperdiet justo eget dignissim sodales |
| Aliquam non enim sollicitudin, rhoncus sapien ac, luctus nisl | Fusce accumsan risus id turpis congue luctus | Quisque feugiat neque suscipit nisi dictum pretium | Donec id quam nec turpis pharetra viverra. |
特別なマークアップの必要はありません。
Phasellus erat libero, vestibulum nec efficitur in, blandit sit amet magna. Aliquam eros arcu, mattis id augue nec, fermentum sollicitudin mauris. Cras blandit massa nisl, id consequat massa aliquam a. Etiam erat turpis, laoreet pulvinar elementum vitae, dictum a ligula. Vestibulum egestas neque quis velit consequat, a sodales urna scelerisque. Phasellus tempus tortor at fringilla tincidunt. Vestibulum sed libero elit.
Duis augue nunc, facilisis at diam eget, laoreet blandit eros. Nulla varius auctor metus, id mattis ante efficitur in. Nullam nec eros eu est maximus iaculis. Aliquam ac blandit felis. Suspendisse bibendum nisi a nisi congue, id pellentesque dolor placerat. Fusce eu eros mi. Suspendisse potenti. Duis ex mi, dictum vitae lectus et, porta vehicula sem.
<figure class="displace">
<img alt="..." src="...">
<figcaption>...</figcaption>
</figure>
Ut at sapien id tortor mattis pharetra in nec felis. In dapibus gravida eleifend. Vestibulum viverra vulputate molestie. Nullam auctor hendrerit rhoncus. Nulla rutrum, arcu eget hendrerit dignissim. Donec scelerisque lacus eu dui posuere gravida. Nulla venenatis bibendum risus et fringilla. Vivamus sed arcu a lacus iaculis efficitur. Curabitur pellentesque pellentesque tempus. Maecenas consectetur commodo leo ut sagittis.
<figure class="fill">
<img alt="..." src="...">
<figcaption>...</figcaption>
</figure>
<ul class="flat">
<li>...</li>
</ul>
Vestibulum ultricies urna risus. Duis vitae fringilla velit. Etiam vestibulum, tortor nec vehicula mattis, magna ligula scelerisque risus, sed viverra orci ligula nec purus. Vivamus eleifend, magna id fermentum malesuada, orci lorem tincidunt ipsum, ut elementum purus mauris at est.
Mauris sagittis tellus magna, sit amet sodales sem bibendum sit amet. Nam pharetra vulputate leo vitae faucibus. Praesent ac semper augue, ut dignissim dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean fermentum dui sit amet leo auctor suscipit. Nulla nulla lacus, elementum convallis aliquet eget, tincidunt quis diam. Donec id dictum justo, at blandit ex.
<figure class="hang">
<img alt="..." src="...">
</figure>
Praesent quis erat sed ex dictum elementum ac vitae magna. Morbi tempus est vitae enim rutrum, vel volutpat nisi rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vestibulum nisi mi, accumsan bibendum dui condimentum ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
見出しに使うこともできます。
<h1 class="hang">...</h1>
Dolor proident pariatur incididunt voluptate laborum reprehenderit consectetur et id incididunt. Reprehenderit aliquip ullamco cillum ipsum eiusmod proident sunt ex in elit velit magna. Occaecat velit nulla occaecat elit in occaecat consequat deserunt quis. Velit est proident anim pariatur consequat. Exercitation veniam non voluptate ipsum fugiat adipisicing.
aside要素に使うと傍注のような体裁になります。
<aside class="hang">
<p>...</p>
</aside>
<ol class="posts">
<li>
<time datetime="...">...</time>
<a href="...">...</a></li>
</ol>
以下はマークアップやスタイル、スクリプトにおけるコーディング規約もどきです。
id属性class属性style属性role属性とaria-*属性）data-*属性）item*属性）marginやpadding、 borderプロパティーに限って使うことがありますlinear-gradient()等の複雑なものに限って行を分けて書くことがあります&を使ったネストでモディファイアーを表現します