[WEB・ブログ]ブログを(内部的にガッツリと)リニューアルしてみた

密かに、このブログのリニューアルをした

見た目は今までとほとんど変わっていないが、 HTML5 でがっつり組み直したので内部的には全くの別物になっている。

確認したブラウザは以下。

  • Win Opera 12.16 build 1860
  • Win Chrome 32.0.1700.41 beta-m Aura
  • Win Firefox 25.0.1
  • Win IE8

旧デザインでは、 IE6,7 のために若干の CSS ハックを書いていたのだけど、続く IE8 でまさかのそのハックのせいで崩れまくっていたというね。

言うならば、「問題児に歩み寄ったら調子こいて更なる問題児出てきた状態」だったのだけど、今回のリニューアルで IE8 でもほぼ同じように表示されるようになった。 JavaScript 必須ではあるけど。


ところで HTML5 化するにあたって、意味や使い方が変わったタグを改めて確認してみた。気になったものもいくつかあったので、復習がてらその一部を簡単に列挙してみる。

気になった HTML5 タグ

(以下、全ての引用は HTML 要素 - HTML5タグリファレンス - HTML5.JP からリンクされた、それぞれのタグの個別ページより。マークは sima によるもの。)

blockquote 要素

引用の帰属があれば、それは blockquote 要素の外に置かなければいけません。

今まで、 blockquote 要素の中に引用元を書いていた。これからは外に書く!

dl 要素

dl 要素は関連リスト (記述リスト)を表し、定義リストという意味がなくなった

定義リストを書きたかったら、 dl 要素に加えて dfn 要素を使いマークアップする。


<dl>
  <dt><dfn>(用語)</dfn></dt>
  <dd>(定義)</dd>
</dl>

em, strong 要素

コンテンツの特定の部分が持つ強勢のレベルは、祖先の em 要素の数で表されます。
コンテンツの重要性の相対的なレベルは、祖先の strong 要素の数で表されます。それぞれの strong 要素は、そのコンテンツの重要性を増します。

つまり、


<strong>たいへんです。<strong>へんたい</strong>がたいへんです。</strong>

とマークアップすると、文章全体が重要なんだけどその中でも変態ということが更に重要だと表すことができなんだこの例文。…要は入れ子が可能になったと。

ちなみに、 em 要素は強勢強調、 strong 要素は強い重要性を表し、今までとは違う意味になっているのできちんとマークアップできるように気をつけたいものだ。

small, s, i, b, u 要素など

これらの要素は、上の em, strong 要素と同じように色々と意味が変わっている。一度、調べておくと良いと思う。まぁ、 b や u 要素なんかはほとんど使わないだろうけどね。

もう正確ではない、または、もう関連性がないコンテンツを表す s 要素はおもしろい。今後、機会があれば使っていきたい。

ちなみに s 要素とドキュメントからの削除を表す del 要素は、たいてい似たようなスタイルで表示される。しかしながら、 s 要素には訂正の意味はないため、混同してマークアップしないように注意したい。

img 要素

alt 属性についての説明が興味深かった。

img 要素が何を表すかは、src と alt 属性に依存します。

src 属性がセットされ、alt 属性が空文字列にセットされた場合

そのイメージは、以降のコンテンツの対して、装飾的もしくは補足的なものとなり、ドキュメントにある別の情報と重複したものとなります。

……

src 属性がセットされ、alt 属性が空文字列ではない値にセットされた場合

そのイメージは、そのコンテンツの重要な部分となります。alt 属性が、そのイメージに相当する、もしくは置き換えとなるテキストを提供します。

……

src 属性がセットされ、alt がセットされなかった場合

そのイメージはコンテンツの重要な部分となります。そして、そのイメージに相当するテキストはありません。

……

src 属性がセットされず、そして、alt 属性が空文字にセットされた、もしくは、alt 属性がまったくセットされなかったか、のいずれかの場合

この要素は何も表しません。

そうでなければ

この要素は、alt 属性で指定されたテキストを表します。

過去、 img 要素の alt 属性には必ず置き換えテキストを書いていたが、装飾的・補足的で別の情報と重複しており省略可能な画像については、それを空文字列にできると知った。

つまり、挿絵的な画像には、空文字列 alt 属性をセットすれば良いということだ。いいね。

と、他にもまだ気になったものはあったものの、とりあえずここまで。

今回のリニューアルでは HTML5 マークアップの他にも、いらない js ファイルを取り除いたり、画像の最適化もしたため、読み込みが早くなった…かな。

ブログの記事を書くことと、ブログの環境を整えること、どちらが楽しいかと聞かれたら即答で後者なんだけれども、環境はまぁひと通り整って気分よくなったことだし、今後は記事を書くことも楽しくなっていけたら良いね。

[Vim]補完モードを開始するマッピングを書く

マッピングで補完モードを開始するにはどうしたら良いかを考えてたところ、 wildcharm というオプションを発見した。

そもそも コマンドラインで、ワイルドカードを展開するために打ち込まなければならない文字wildchar で設定でき、 Vim での規定値は Tab である。しかしながら、 その文字はマクロ内では認識されない

マクロ内でも認識させたいときは、代わりに wildcharm を設定し使うと良いらしい。

set wildcharm=<M-Tab>

普通、ユーザが実際に wildcharm で指定されたキーを打ち込むことはない とあったので、適当に上のように設定した。

nnoremap <expr> <F1> ':<C-u>new ~/' . (&wildcharm ? nr2char(&wildcharm) : '')

その上で、例えばこのようにすると、キーを押して即、補完を開始した状態になるため便利だ。

nnoremap <F1> :<C-u>new ~/<M-Tab>

このように設定するよりも、補完の開始したさが表れるので良いかなと思う。

初 Vim 記事。

ときどき Vim の設定でこれで良いのかと悩むことがあるので、そのようなときツッコミが来ることを期待して、ちょいちょい記事を書いていこう。

プロフィール

sima

ガジェット大好き。おもしろアイテム大好き。いろいろとまぁ物欲を刺激するモノが多いけど、なかなか手に入れることができないでいる。いつかは自分の部屋を、自分が気に入ったモノだけで埋め尽くしたいものだなぁ。…あっ、これ将来の夢ね。

Twitter はフォロー大歓迎なのでよろしく。よく蚊と戦ってるよ。

最新記事

  1. OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開 (05月25日)
  2. シカ成分を補充したら幸せになった (04月24日)
  3. ブログを(内部的にガッツリと)リニューアルしてみた (12月10日)
  4. 補完モードを開始するマッピングを書く (10月25日)
  5. アボカドを育ててみた…かった (07月23日)
  6. 正規表現クロスワードを完全クリアしてみた (07月19日)
  7. Gmail バックアップソフトの Gmvault が動かないときの解決法 (07月14日)
  8. Google アカウントが消える前に! Gmail フルバックアップのススメ (06月30日)
  9. 厳選して使っているポイントサイト2つ (03月27日)
  10. Tumblr で画像を Lightbox 表示!(しかも何も導入せずに) (03月21日)

カテゴリ

アーカイブ

コメント

Gmail バックアップソフトの Gmvault が動かないときの解決法
dsfds (03月31日)
OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開
sima (06月26日)
you (11月30日)
you (11月30日)
sima (10月28日)
HTML ソースの改行を半角スペースにしない方法
ok (06月21日)
sima (05月28日)
edvakf (05月28日)
英数字・記号を並べてみる
ふぁ (11月25日)
コメハチ (11月02日)
OperaでもっとTumblrる!(OpeTumblrをまたまた改良)
you (05月09日)
sima (05月07日)
you (05月04日)
chikuwa (12月12日)

トラックバック

20代で知っておくべき週番号のこと
full of universe (05月16日)
UKTenkiを自動巡回させてみる(MortScript)
なんとなくすばらしい日々の戯れ言 (01月31日)
新着メールを一気に開くMortScriptを改良!
PDAと私生活 (11月07日)
PDAと私生活 (11月02日)
コイツはすごい!Windows Live Writerでブログ投稿をラクラクに
シーサーイーサー (10月31日)
Willcom03で新着メールを一気に開く!(MortScript)
PDAと私生活 (10月10日)

のカレンダー