HTML5のタグ(9)

出納帳や名簿に貼られているタグシール。このタグシールをボタンにしてデザインしているウェブページをよく見かけるが、今まではこれをCSSで作ろうとしても角丸で表現できなかったために画像データを使わざるを得なかった。しかしCSS3からはborder-radiusプロパティが加わり、画像データを使わずにこの表現が可能になった。例えば<style type="text/css">.tab{font-size:12px;background-color:#82e8d1;border-top-left-radius:10px;border-top-right-radius:10px;-moz-border-top-left-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;border:3px solid #08c092;padding:5px;color:#ffffff;}.tab:hover{background-color:#fbec6b;}</style>といった具合だ。hoverを使うことでJavaScriptを使わずにロールオーバーのリンクボタンにもなる。bodyのほうは例えば<div style="position:absolute;top:5px;left:5px"><a class="tab" href="xxx.html">PRODUCT</a><a class="tab" href="xxx.html">COMPANY</a><a class="tab" href="xxx.html">CONTACT</a></div>とする。


ウェブデザイナの苦言

そうは言ってもまだまだ分かってない人たち

あるクライアントの会社から社長が怒りの電話。「我が社の名前が検索しても出てこないじゃないか！いちいちアドレスを打ち込まないといけないいんじゃ誰も見てくれないしホームページを作った意味がない！」といった具合だ。そもそもGoogleやYahoo! Japanにあなたの会社はカネはらってるのか？リアルな店舗に例えればこちらは店を作っただけ。客が来ないのはあなたが何も広報活動をしないからである。「◯◯社はすぐにYahoo! Japanで出るようになっただろう！」って、◯◯社のホームページは1998年に公開したわけで、今とはホームページの数が3桁違うのだが。」と言ったところで社長は納得しない。会社が可愛いのは分かるが、世の中の変化を少しは理解して欲しいものだ。

HTML5のタグ(8)

tableの背景色を使って画面全体に色をつけたりする代わりにCSS3からboxという値が加わった。これを使うことで画面の一部、または全体をカラム状に分割して背景色を変えることができる。例えば<style type="text/css">#wrapper{width:100%;dispaly:box;display:-moz-box;display:-webkit-box;}#leftColumn{height:500px;background:#badb9d;box-ordinal-group:1;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;}#centerColumn{width:500px;height:500px;background:#9ddbb2;box-ordinal-group:2;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}#rightColumn{width:200px;height:500px;background:#9ddadb;box-ordinal-group:3;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}</style>とすることで背景が縦に3色の帯で分割されることになる。box-flexはブラウザ画面の幅を変えたときに可変する部分だ。各カラムの中に入れる要素は<div id="wrapper"><div id="leftColumn"><article>LEFT</article></div><div id="centerColumn"><article>CENTER</article></div><div id="rightColumn"><article>RIGHT</article></div></div>というように書く。


ウェブデザイナの苦言