RSS
 

Posts Tagged ‘CSS’

マイクロフォーマットってのが流行るらしいよ

15 7月

マイクロフォーマット(英語で書くとMicroformats)ってのが流行るそうです。
の割りには情報少ないけど。

「HTMLのタグで定義されていないけど、よく使う特定の要素には分かりやすく共通のタグ付けしようよ!」ってコンセプトのマークアップ規則の一種だそうです。

小難しく聞こえますが、

  • class
  • rel
  • rev

あたりを使って特定の意味を持つ要素に特定の名前をつけてマークアップするってだけです。

「メールアドレスだと<address>ってタグあるけど会社名ってタグ無いじゃん?だから<span class="fn org">ってのを会社名タグの代わりって言う共通認識を持とうよ!」みたいな感じ。

そうするとweb上の情報がもっと分かりやすく整理されて検索の精度が上がったりマッシュアップに使えたりして良くない?って話なんだって。

マイクロフォーマットで定義されている情報の種類は以下の通り。

リンク先の仕様書にマークアップ例も乗ってるので英語だけど見てみると良いかも。

hAtom
標準のHTML内にAtomフィードをつくる
hCalendar
イベント情報
hCard
連絡先情報
hReview
書評などのレビュー
hResume
履歴書
rel-directory
分散ディレクトリ
rel-tag
分散型のタギングフォークソノミー
xFolk
ソーシャルブックマーク
XFN
友人関係など社会的ネットワーク
XOXO
リストとアウトライン

と、能書きはググればいくらでも出てくる割に小難しくて正直良くわかりません。

どっちかっていうと使い方が知りたかったのですが、日本語の具体的な解説があんまり見つからなかったので、Wikipediaを参考に勉強がてらまとめてみました。

なお、このエントリーは英検5級が英語の仕様書を見て(読んでではないあたりが相当危険)適当に書いたエントリーなので導入の際は自己責任でおねがいします。
英検4級の試験に素で落ちている程度の英語力ですので要注意。

とりあえずソースの具体例をあげようかな。
以下、イベントの情報をテーブルタグでまとめようと思った時の例。


<table class="hCalendar">
<tr>
<th>イベント名</th>
<td class="summary">ホークス必勝祈願飲み会2007 〜プレーオフなんて全然怖くないんだからねっ!〜</td>
</tr>
<tr>
<th>開催日</th>
<td><span class="dtstart" titile="2007-07-15T18:30:00">2007年7月15日 18:30</span> 〜 <addr class="dtend" titile="2007-07-16T01:30:00">16日 01:30</addr></td>
</tr>
<tr>
<th>開催場所</th>
<td class="location">四谷あぶさん</td>
</tr>
<tr>
<th>URL</th>
<td><a href="http://www.hawks10-love-maman.com" class="url">http://www.hawks10-love-maman.com</a></td>
</tr>
</table>

簡単ではありますがソースの解説です。

まず、<table>タグを<table class="hCalendar">とします。
これは「こっから先はマイクロフォーマットのイベント情報です」って宣言を意味します。

次に、イベント名の<th>を<th class="summary">とします。「summary」がイベント名って意味のマイクロフォーマットです。

こんな感じで開催場所は「location」、イベントのホームページは「url」というクラス名でマークアップしていきます。

開始日は「dtstart」で終了日は「dtend」。これらは書き方にもう一工夫必要でクラス名の後に「title=”2007-07-15″」って感じで日付を書きます。

時間も書きたい時は18:30なら「title=”2007-07-15T18:30:00″」です。Tの後に時間を続けて書くだけ。工夫っつってもどってことないっしょ?

2007年7月15日 18:30〜16日 01:30に実施されるイベントの場合


<span class="dtstart" titile="2007-07-15T18:30:00">2007年7月15日 18:30</span> 〜 <addr class="dtend" titile="2007-07-16T01:30:00">16日 01:30</addr>

となる訳です。

割かしお手軽ですよね。小難しい理論解説の割には具体的な手法ははいたって単純です。
馬鹿としては何でもかんでも難しく言わないで欲しいと思うですよ。とっつきにくくなるだけだから。

使いどころがまだ浸透してないのでとりあえずマークアップだけ実装しておいてユーザーに使ってもらうのはもうちょい先って感じかな。

マイクロフォーマット専門の検索エンジンが英語だけど既にあります。Microformats Searchとか。
セミナーやイベントを主催してる会社のサイトとか、レビューやってる個人サイトなんかは導入すると新手のSEOになるって考え方もありかと思います。

レビューサイトだと早速Yahoo! Techが導入してるみたいですね。
個別製品ページのソースを「hReview」で検索してみると使用例が見れて分かりやすいですよ♪

イベント情報や連絡先情報はマイクロフォーマット対応のカレンダーソフトやアドレスソフトに一発で情報が登録出来たり、個人ユーザーレベルでも充分恩恵を享受出来るので実用的。気軽にこっそり試してみては如何でしょうか?
mixiのコミュイベントページに導入されたりとかしたら一気に流行りそうだなぁと思ってみたり。

まだ仕様が固まってなくて一部不確定な要素があるフォーマットなのでそのへんの情報収集が今後必要かと思います。

マイクロフォーマット用の可愛いアイコンなんかも配布されています。
ぶっちゃけこれが可愛いから興味持ったってだけなんですがね。そのうちこのブログでも使わせてもらおっと〜♪

突っ込み大歓迎。英語分かる人で日本語も上手い頭のいい人もっとちゃんとまとめて下さい。よろしくです。

 

音声ブラウザへの対応

23 5月

ウチはマークアップが終わった段階でデザイン的に表示させたく無い所=音声ブラウザのために書いてるテキストはCSSでdisplay:noneを使って非表示にしてます。

text-indent:-9999px;で画面外に飛ばしても良いんですが、飛ばしたテキストが本来表示されるスペースはそのまま空白として残るのでfont-size:1pxも併記しなくちゃなので面倒くさい…。

ただdisplay:noneとすると音声ブラウザは読み上げてくれないんですよね。
音声ブラウザのために書いてるテキストなのに駄目じゃん!

って事で…。

音声ブラウザ用にaural.cssというCSSファイルを1つ用意してdisplay:noneにした部分をリストアップ。
display: blockまたはdisplay: inlineに指定しなおしてHTMLのCSS読み込みの一番最後の部分に
<link rel="stylesheet" media="aural" href="aural.css" type="text/css" />
って書くようにしてみました。

ドリとかテキストエディタの検索機能を使ってCSSフォルダ内でdisplay:noneを検索して拾うだけだしそんなに手間はかからないかなぁと。
これなら今後音声ブラウザがdisplay:noneも読んでくれるようになったらaural.cssをサクッと削除すれば良いのオーケイじゃね?とか思ったり。どうかな?駄目?

 

CSSで背景に透明PNGを使う時のポイント

21 5月

アルファチャンネルPNGとか言った方がそれっぽいんでしょうか?
英語が嫌いなので透明PNGって言ってますが。

ここ2・3日こいつの処理に頭悩まされてます。
要約するとIE死ねって事です。
特に6。

透明PNGをimgタグで表示する方法は色々見つかったのですが、自分は主に背景表示に使う事が多かったです。こちらは若干情報が少なかったのでメモしときます。

Firefox、オペラ、Safariは良い子なので普通にbackgroundで指定して終わりなんだけど、IE6以下はそうはいきません。
IE6以下のブラウザで透明PNGを背景表示させるには3つのポイントがあるみたいです。

背景に使いたい時はIEの独自拡張フィルタを使う


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Src='●画像パス●',sizingMethod='●表示方法●');

画像パスはhtmlファイルから見た相対パスなので注意。
/から書いちゃうのが手っ取り早くて良いです。

表示方法は以下の3種類から選べます。

image
画像の大きさに要素を拡大縮小。
width・heightは無視される。
デフォルト値
scale
要素の大きさに合わせて画像を拡大縮小。
要素<画像の時はwidth・heightが指定されていればそれに合わせる。
要素>画像の時は画像が拡大されて表示される。
backgroundのrepeat-y・repeat-xに似た働きをする。
crop
そのまま貼付ける。
backgroundのno-repateと同じ。

表示位置の指定は出来ない

独自拡張フィルタで画像を標示させる場合、CSSのbackgroundと違って座標で表示位置の指定は出来ません。
サイズが大きくなければ画像自体に余白を作るのが手っ取り早いです。

背景にPNGを敷いたエリアに内包されているリンクが腐る

フィルタで背景にPNGを敷いたエリアに内包されているリンクが効かない場合があります。
透過PNGに蓋された状態なので要素を上に出す為CSSに


* a , form * { position: relative ; }

と書くと良いです。

ここ数日で何となく分かって来た事なので、この仕事が終わったらあらためてまとめたエントリーを書こうと思います。

今の事務所に入った時、コーディングをメインで振って下さいって言ってあったので、デザインは別の人が作ってくれます。
ありがたや。

今組んでるデザインは、背景に画像のパターン(しかも縦にグラデーションが入ってて色味が均一じゃない)+角丸+シャドウが満載というコーダー泣かせな代物で、透明PNGに頼る以外は忠実に再現する方法がありません。

第一印象は最悪……。
でも色がビビットですっごい可愛いデザインなので俄然やる気超出まくり!なツンデレデザインです。

ずっと避けて回ってた透明PNGの処理もとうとう年貢の納め時……。
情報収集だけはしていたので(いや、してたから面倒臭そうで余計に避けてたんだけどね……。)何か不具合が起きてもピンとくるので一安心。

自分が組むと分かっていてデザインをすると、どうしても甘えが出てCSSで組みやすいデザインをしがちです。
なのでCSSを全然知らない位のデザイナーさんが作ったデザインの方が勉強になります。
だって、こんなの絶対自分じゃやらない。
自分に甘いから。