hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。
コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。
FacebookのLikeボタンやTwitterのTweetボタン、Googleの+1ボタン、はてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。
AdSenseまたはAmazonアソシエイトによる広告は常に最初のセクションの直後に挿入します。
ブラウザーのデフォルト・スタイルシートの差異の吸収のためにnormalize.cssをカスタマイズしたものを使用しています。
| 本文 | Open Sans |
|---|---|
| ロゴ | Crimson Text |
| 見出し | Open Sans |
| ボタン等 | Crimson Text |
| ナビゲーション | Terminal Dosis |
| コード | MonacoまたはConsolas |
Download Photoshop swatch file: colorscheme.aco
bodyサイズはスクリーンのサイズによって14-20pxで表示されます。日本語がメインなので行間は少し多めに1.778 (16/9)としました。
section, nav, article, and asideこれらの要素では何もスタイルを指定していません。ただし予期せぬ回り込み等を回避するためにclearfixだけは指定しておきます。
コンテンツ内の小見出しは記事見出しのh2に合わせてそのレベルを調節しています。
h4h5h6h4-h6を使うことはあまり無いですが、段落と混乱しない程度にはスタイルを追加しています。
段落は様々な所で使用されるので、他とバッティングしないように相殺可能なマージン以外のスタイルは指定していません。
水平線は主に暗黙のセクションの区切りに使用しています。
整形済みテキストは主にコードの表示に使用しています。主に英文になることから行間も1.25に落としてあります。視認性のために、少しインデントし、対応している場合は構文強調しています。構文強調にはgoogle-code-prettifyを使用しています。
#!/usr/bin/perl
use strict;
use warnings;
use RPC::XML::Client;
my $site = 'hail2u.net/blog';
my $site_title = 'hail2u.net - Weblog';
my $client = RPC::XML::Client->new("http://ping.feedburner.com/");
my $result = $client->send_request("weblogUpdates.ping", $site_title, "http://$site/")->value;
print $result->{message} . "\n";
構文強調を行う場合は以下のようにクラス名で、構文強調を行うこととその言語を明示しています。
<pre class="prettyprint"><code class="language-html">
...
</code></pre>
引用では内部で様々なスタイルが使用されるので、引用を示す引用符のマークを追加する以外のスタイルは指定しません。引用符のフォントはTrebuchet MSです。
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.
— 4.5.4 The blockquote element
引用元の表記はpとciteを組み合わせて行います。
双方共にデフォルトとあまり違わない形になるようにスタイルは最小限にとどめています。序列付きリストではアラビア数字をそのマークに使用します。
序列なしリストではデフォルトと同じくネストされるにつれそのマークが変化します。
関連リストもスタイルは最小限にとどめています。
通常はfigureを使っています。内容は画像とは限らないので、強いスタイルは指定していません。
例えばblockquoteに使うこともあります。
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
figure element画像の場合はpにimageというクラス名を付けて代用している場合もあります。
段落内で様々な意味づけを行うマークアップを使用しています。主に使うものはハイパーリンクを始め、強調やより強い強調であったり、出典元の明示やインラインでの引用
、WWW等の略語、<code>等のコード断片、Enterなどのキー入力、単なるマークなどをあまり逸脱しない形でスタイルしています。ただし強調においては日本には斜体の文化は無いので太字としています。ハイパーリンクは識別を容易にするため段落内でのみ下線を表示させています。
より良い編集履歴を残すため、インラインで追加した部分は二重線で強調し、削除した部分は取り消し線を加えています。単なる追記等の場合はそのことを明示するだけに留め、insでマークアップはしていません。
表では背景を少し暗くし枠線を付けるようにし、図と同じように本文と明確に区別ができるようにしています。
| Proin | Nunc | Sed |
|---|---|---|
| Erat | Eget | Quis |
| Moi | Donec | Ante |
印刷向けのスタイルシートは別に書いています。フォントはセリフ系を採用しています。他はなるべく白黒になるように調節しているだけです。
HTMLでは以下のようにして印刷とそれ以外でスタイルシートを切り替えています。
<link rel="stylesheet" media="not print" href="../styles/style.css">
<link rel="stylesheet" media="print" href="../styles/print.css">
これより後のセクションは様々な場所で局所的に利用されるウィジェットの例です。テキストやリンクには特に意味はありません。
Duis arcu nulla, blandit eget posuere laoreet, laoreet et elit. Quisque ullamcorper ullamcorper dapibus. Donec interdum, enim nec euismod commodo, felis lectus rhoncus mauris, eu gravida quam arcu dictum ipsum. Cum sociis natoque penatibus et magnis amet.
Fusce augue augue, bibendum sit amet ultrices a, eleifend at sem. Etiam arcu lacus, tempus ut lacinia nec, imperdiet vitae massa. Morbi vel metus libero. Nam egestas lacus ut libero rutrum consectetur. In tincidunt aliquet nunc. Pellentesque ac nisi amet.
Morbi eu facilisis justo. Praesent sagittis libero at lorem hendrerit aliquam. Sed tristique, mauris nec elementum pulvinar, sem diam accumsan lacus, vel porttitor mi justo quis mi. Aliquam interdum nibh a felis lacinia ultrices hendrerit elit massa nunc.
Mauris sapien augue, tincidunt ac porttitor vitae, dignissim non metus. Proin quis mauris eget neque tempor venenatis et eget erat. Curabitur malesuada rhoncus justo, quis consectetur est scelerisque eget. In tempor tempor luctus. Suspendisse a eros amet.
Fusce imperdiet rutrum luctus. Nulla iaculis neque at purus volutpat volutpat. Fusce consectetur blandit ante, fermentum interdum tellus venenatis sed. Cras sapien purus, ultrices quis ornare a, fringilla eget erat. Donec lectus justo, fringilla gravida mollis sed, scelerisque at dolor.
Aenean id lectus eget mi tincidunt pretium quis nec purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean consectetur, ipsum sit amet tristique fermentum, nisi nibh pulvinar erat, nec faucibus augue mi volutpat odio.
Proin blandit porta orci, pellentesque euismod nisl tincidunt eu. Sed ornare nisi in ligula elementum ultricies. Pellentesque dui nibh, ultricies vel mollis sed, rutrum in felis. Curabitur fermentum scelerisque imperdiet.