ppworks.jpppworks.jp2012-01-28jQueryとHTML5とCSS3でタブメニューを作ってみよう(1)この記事は、知り合いにjQueryを教える際に作成したjsdo.itに投稿したコードの補足です。今回は、よくあるタブメニューの見た目をjQueryとCSS3で表現してみます。cssはhtml5doctorでresetしておきます。jQueryは1.7.1を使います。class="menu"><li>moco</li><li>toco</li><li>loco</li><li>rico</li><li>coco</li><li>aru</li></ul></nav>タブは複数の項目を並べたものと考えた場合の文書構造をHTMLで表現するには、ulタグが適切と考えられます。タブの項目に順序付けとしての意味が含まれる場合にはolタグを選択することもあると思います。大事なのは、HTMLによる表現は幾通り今表現したい文書構造とマッチしいているかということです。今回はタブをナビゲーションとして捉えましたのでnavタグで囲っています。*/}タブの下の線はulタグ全体に対する線と考えられるのでulに対して指定しました。*/}liには各タブに対する線を描写するための指定をします。ポイントはmargin-bottomをマイナスに指定することによってタブが浮いてるような印象となることを回避している点です。このときマイナスにするピクセル数は先のulに指定した先のピクセルと一致させます。liはブラウザのデフォルトスタイルでは箇条書きのように縦に要素が並ぶのでこれを横に並べるために、displayにinline-blockを指定しています。このとき、要素間に隙間が開いてしまうので親要素であるulタグのfont-sizeを0としliでfont-sizeを明示しなおし隙間を埋めます。これは親要素においてletter-spacingをマイナスに指定し子要素でletter-spacingをnormalなどに戻すことでも対応可能です。#fff;}liタグをクリックした際にクリックしたタブが選択されたことを表現してみます。具体的には、liタグをクリックした際に、selectedというclassを割り当てることにします。classを外します。classを適用します。classを書いておくjQueryで任意のタブをクリックさせるなどが考えられます。今回は後者のjQueryで表現してみました。以上、今回はタブの見た目の表現に焦点を当ててみました。次回は、実際にタブを選択するとコンテンツが変わるような処理を書いてみます。10注目記事-->引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。