少しずつ自サイトを、HTML5+CSS3に近づける。

2013年4月10日
 sukima

iPhoneの生みの親ジョブス氏がFlashをサポートしない理由を説明したapple公式ページThoughts on Flashには、HTML5という単語が七つも出てくる。ここにあることを簡単に言えば、フラッシュは閉じている、未来的ではない、全員が勝者になるべきなのにそうならない。だから、フラッシュがやることはHTML5が行うべき。

と、だいたいそういう事を言っている模様だ。（参照：iPhone OSがFlashをサポートしない6つの理由 – ジョブズ氏が説明）

Thoughts on Flashが書かれたのは2010年4月とすでに3年も前なのだが、いよいよここへきて機が熟したということなのか、世は一大HTML5ブームになった。端的には日本の人気ポータルサイトはてぶのデザインがHTML5に乗ってしまったことで旧来のファンに多大な違和感を味合わせしめている事象は、現在進行形だ。（参照：どうしてはてなブックマークが使いづらくなったのかを真剣に考えた*ホームページを作る人のネタ帳 , お洒落を目指して、使いづらくなるサイトが多い件。 : ひろゆき＠オープンSNS）

当分の間、このタイプの違和感はあちこちで発生するのではないかと思われる。
が、今あらためてはてぶを見ると、お洒落になったのは見た目よりも、扱われる内容の落としどころの画一化のように見受けられる。みんななんだかNAVERまとめ、みたいだ。本日203ユーザーから支持を集めるお金持ちに大量に触れて初めて気づいた8の共通点に興味を惹かれ読んだが、なんじゃこりゃあという無難で非闘争的な内容だった。

それはそれで事実なんだろうし、何が何でも敵視する相手をみつけねばならないって事もないけども。

そういった漂白化作用など善し悪しはあるにしても、兎にも角にも、流行に乗り遅れるのがkiraiな当方、やっぱ少しは取り入れてみようと研究したので、その成果をここに発表する。

リンク

便利そうなタグ pic up

■<header>
従来div id=”head”とかid=”header”と、人それぞれ任意にdivを名付けていたヘッダー部に、正式タグができた。

■<nav>
こちらも同様、div id=”navi”とかdiv id=”menu”と、人それぞれ任意に名付けていたサイト内ナビゲーションが、正式にタグ化された。

■<aside>
メインの文章や画像動画に対して、余談という意味あいらしい。余談なので脚注用というわけでもないらしい。何か書いていると真面目な記事でもつい脱線したくなるものだが、そういう時用スペースといえそうだ。

■<mark>ここ、マーク。</mark>→ここ、マーク。
従来、strongやbで、装飾なのか、意味としてのマーク付けなのか曖昧なまま強調していたセンテンスに、はっきりと「マーク」というタグができた。

■なんと、メーターがタグだけで出る。
<p>この記事の出来具合: <meter value =”3″ min=”1″ max=”5″ title=”score”> 3 </p>

→この記事の出来具合: 3

今年は残すところ　 265日

■記事には、のちの訂正や追加がつきもの。delやtimeというタグができた
<ul>
<li>皿を洗う</li>
<li><del datetime=”2013-04-11T01:25-07:00″>ご飯を炊く</del></li>
<li><del datetime=”2013-04-10T23:38-07:00″>ほうれん草をゆでる</del></li>
<li>ゴマをする</li>
</ul>

やる事リスト

  • 皿を洗う
  • ご飯を炊く
  • ほうれん草をゆでる
  • ゴマをする

■今まで振りたくても振れなかったルビがふれるようになった。○○と書いて××と読む、が実装だ。
<p>
<ruby>陽炎<rt>かげろう</ruby>が揺れている。のであった！！
</p>

陽炎かげろうが揺れている。のであった！！

他の例→好敵手ライバルで無頼アウトローな荒木 経惟あらき のぶよしさんに、揺れる腕の脂肪にくのれんを劇写はーとしてほしいと頼んだら一蹴さなぐられたｗ
（うーーん微妙むり…）

■引用タグ全体に引用元のurlをマークアップ。引用内にフッターを付けて明示するなど、いろいろできる

<blockquote cite=”http://sukimablue.seesaa.net/article/96421721.html”>
<p>このシーンこそが、「人類の祖先は武器を手にしたことで進化した」といったイメージを深く植え付け、さらに、「人類が戦争したり核兵器を開発するのは、原初に定められた『本能』なのだ」とする人間観を、人々の心に定着せしめた、と語る.</p>

<footer>— <a href=”http://sukimablue.seesaa.net/article/96421721.html” target=”_blank”>暴力はどこからきたか / media:書籍: 日々のsukima</a>
</footer>
</blockquote>

このシーンこそが、「人類の祖先は武器を手にしたことで進化した」といったイメージを深く植え付け、さらに、「人類が戦争したり核兵器を開発するのは、原初に定められた『本能』なのだ」とする人間観を、人々の心に定着せしめた、と語る.

以上、まだまだタグはたくさんあるので、紹介したリンク先などをみて下さい。

このように明晰に論理的になることで、アクセシビリティ、ユーザービリティが向上し、さまざまなプラットフォームに対応。さらに、近未来にはamazonの奥地に居る人がスマホやタブレット端末でamazonに注文する際、筋道たっていて使いやすい、はず…
文明がどこにでも入り込むことの善し悪しはともかく、いざその時に備えまっしょ。

 

 

sukima
  • sukima
小ネタ