(HTML,CSS,JavaScript)角の丸い「タブ」をHTMLとCSSで作る方法(4ページ目)左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。リスト項目ごとに配色を変えて、よりタブらしく見えるよう装飾するHTMLソースを記述した際に、タブ(=li要素)1つ1つに対して個別のid名を割り振ったのは、タブのデザインを別々に指定できるようにするためです。それを利用して、タブごとに配色を変えてみましょう。以下のようにCSSソースを記述します。}特定のid名を割り振ったタブ(リスト項目)に対して、背景色(background-color)・文字色(color)・枠線色(border-color)を加えています。先頭の1つに対しては、横幅(width)の指定も加えています。上記のCSSを加えてブラウザで表示すると、下図のように見えます。実際に表示を確認したい場合は、サンプルページ3Aをご覧下さい。各項目(タブ)の装飾を個別に指定する上図のように、タブごとに装飾を変更すると、より分かりやすくなるでしょう。ここでは色と幅しか指定しませんでしたが、望みのプロパティを加えれば、他の装飾も自由に追加できます。タブの上にマウスが載った際に、タブの配色が変わるようにするタブの上にマウスポインタが載った際には、タブの配色が変化するように作っておくと、操作しやすいタブになります。以下のようにCSSソースを記述します。}リンクの上にマウスポインタが載った際に装飾を変更するには、「:hover」疑似クラスを使います。上記のCSSを加えてブラウザで表示すると、下図のように見えます。実際に表示を確認したい場合は、サンプルページ3Bをご覧下さい。タブの上にマウスを載せると、タブの配色が変化する上図のように、マウスポインタが載った際に配色を変更すると、どこを選択しようとしているのかが明確になり、分かりやすく使いやすいタブになるでしょう。タブを使ったデザインでは、「選択中の(=今表示している)タブ」と「未選択(=今は隠れている)タブ」の2種類を視覚的に分ける必要があります。そこで次に、タブの選択状態を表す装飾を加えましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。