シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 Tabs with Round Out Borders デモページ [ad#ad-2] HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#three">Four</a></li> </ul> classのactiveは、現在のタブを明示するものです。 リスト要素をどのように角丸のタブにするか、イラストでご紹介。
デモページ:垂直スライスでウェーブ状 Sliceboxの実装 HTML 画像をdiv要素で内包します。 <div id="sb-slider" class="sb-slider"> <img src="images/1.jpg" title="Creative Lifesaver"/> <img src="images/2.jpg" title="Honest Entertainer"/> <img src="images/3.jpg" title="Brave Astronaut"/> <img src="images/4.jpg" title="Affectionate Decision Maker"/> <img src="images/5.jpg" title="Faithful Investor"/> <img src="images/6.jpg" title="Groundbr
cssの小技的な内容です。さほど使う機会は無さそうなんですけど、JavaScriptを使うほどでも無いようなものなのでcssだけでやって見た、みたいな記事。リンクにマウスを乗せるとそのリンク先のURLをツールチップとして表示させます。 対応ブラウザはモダンブラウザとIE8以上です。:afterを使うのでIE7以下は対応できません。 cssでリンク先のURLを表示する まずはcssのみでリンク先のURLを表示させます。 マークアップは以下で固定。 <a href="/">かちびと.net</a> HTMLはこのままで、cssのみでリンク先のURLをマウスオーバーによるツールチップで表示させます。 URLを表示させる まずはURLを表示させます。 a[href]:after { content: attr(href); } これはよく印刷用のcssで用いられる手段で、印刷する際に、URLも表示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く