CSS

デザインがもっとセマンティックになっていくということ

今年はスマホが普及してきたな、と思った。僕が初めてiPhoneに機種変したのは去年(2010年)で、iPhone4が出たばかりのタイミングでした。アプリはあんまり入れてないし、有料アプリはほとんど入れてない。iPhoneを買ってすぐは少し有料のフォルダ管理アプリとかを買ってみたけど、なぜだか100円ちょっとが高く感じる。これは今もそうだ。

ただ、アプリのレビューコメントが情弱ユーザが如実に現れてきたり、なんだか衆愚なアプリがランキング上位をとったりし始めたのが今年の秋。だいたいiPhone4Sがでた頃。あ、Android界隈の話はまったく知らないで書いてますよ。この頃から「スマホ初心者に優しいアプリやWEBサービスってどんな形だろう」と考えるようになってきた。とは言っても2,3ヶ月の話なんだけども。

デザインがセマンティックになっていくとは

いわゆるHTML5という文脈で語られるsection要素やらarticle要素やらアウトライン構造やらという話ではなくて、もっと見た目に近い部分で、そうなっていく。デザイン自体が言葉と同じ意味を主張し始めるようになる、と思ってる。
それはiPhoneだからとかスマホだから、ということじゃなくって、WEBアプリケーションが全体的にそうなっていく、と感じ始めた。結局それは牽引役がいるんだけど、FacebookやTwitterやGoogleがやっぱり代表格で、プラットフォームとしてはWindows8のMetro UIだったりする。

XHTML+CSSを覚えるために昔やったこと

以前、マークアップエンジニアだったときに僕がHTMLとCSSを覚えるためにやったこと(別にこれを意識してたわけじゃないけど)を挙げてみます。
今ではレイアウトのサンプルサイトがたくさんあって、そこからソースをDLしてきて「見て覚える」のが主流なのかもしれないんだけど、たとえばPhotoshopデータを渡されて「じゃあ、これレイアウトして」って言われたらどうするのか? ということです。
考え方としては、
1.画面デザインにどんな項目があるのかを理解する
2.項目を大まかに分類する
3.大まかな分類をブロックに分けて、ワイヤフレームを考える
4.ワイヤフレームを大まかに順序付けする
5.ワイヤフレームをXHTML+CSSで書く
6.ブロックの中身をマークアップする

CSSを多重継承してみる

りんごりらのエントリーで使ったCSS多重継承だけど、2コまでかなーと思ってたらそれ以上もいけるっぽい。

.text-red{
color:#c00;
}
.text-bold{
font-weight:bold;
}
.bdr-dbl{
border:3px double #999;
}
.w300{
width:300px;
}
.text-underline{
text-decoration:underline;
}

こういうスタイルを用意した上で、<div class="text-red text-bold bdr-dbl w300 text-underline">りんごりら2!!!!<div>と書いてみる。
予想では2重枠線で幅300pxのDIVのりんごりらが赤くて太字で下線が入っている、というものができるはずなんだけど…
で、結果は以下に続く!!