角の丸い「タブ」をHTMLとCSSで作る方法(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
リンクの角を丸くして「タブ」のようにデザインした例
リンクの角を丸くして「タブ」のようにデザインした例
ページ移動することなく内容を切り替えられる「タブ」機能の例
ページ移動することなく内容を切り替えられる「タブ」機能の例
まずは、タブを作るためのリンクをリストの形で記述しておく
まずは、タブを作るためのリンクをリストの形で記述しておく
Bootstrapで作れるタブ
Bootstrapで作れるタブ
リストの余白をすべてなくして、リスト項目を横方向に並べる
リストの余白をすべてなくして、リスト項目を横方向に並べる
各項目に枠線を付け、上側の角を丸くし、適当な余白を設けると、「タブ」に見えるようになる
各項目に枠線を付け、上側の角を丸くし、適当な余白を設けると、「タブ」に見えるようになる
各項目(タブ)の装飾を個別に指定する
各項目(タブ)の装飾を個別に指定する
タブの上にマウスを載せると、タブの配色が変化する
タブの上にマウスを載せると、タブの配色が変化する
タブが選択中であることを示す装飾を加える
タブが選択中であることを示す装飾を加える
タブに対応するボックスを加えると完成
タブに対応するボックスを加えると完成
横幅が狭くて、タブが多段に表示される例
横幅が狭くて、タブが多段に表示される例
この写真の記事を読む
リンクの角を丸くして「タブ」のようにデザインした例
ページ移動することなく内容を切り替えられる「タブ」機能の例
まずは、タブを作るためのリンクをリストの形で記述しておく
Bootstrapで作れるタブ
リストの余白をすべてなくして、リスト項目を横方向に並べる
各項目に枠線を付け、上側の角を丸くし、適当な余白を設けると、「タブ」に見えるようになる
各項目(タブ)の装飾を個別に指定する
タブの上にマウスを載せると、タブの配色が変化する
タブが選択中であることを示す装飾を加える
タブに対応するボックスを加えると完成
横幅が狭くて、タブが多段に表示される例
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます