左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。文宏ホームページ作成ガイド角の丸い「タブ」デザインを、HTMLとCSSで(画像なしで)作成するHTMLとCSSで、上側の角を丸くした「タブ」を作るリンクをCSS(スタイルシート)で装飾して、「角の丸いタブ」に見えるデザインを作ってみましょう。単純な長方形よりも、上側の角を丸くしている方が「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能になります。今回は、画像は使わずに、HTMLとCSSだけで「タブに見えるデザイン」を作る方法をご紹介致します。■フレームワークは使わずに、1から記述する方法を解説Bootstrapで作れるタブ機能の例Bootstrapなどのように、タブを(デザインだけでなく機能も含めて)簡単に作ってしまえるフレームワークも多々あります。本記事では、HTMLソースとCSSソースを自力で1から記述して作成する方法を解説致します。その方が、自分流にデザインした望みのタブを作成しやすいでしょう。本記事では、下図のようなタブを作成する方法を例にして解説します。必要な記述を5つのステップに分割し、各ステップに表示例とサンプルページを用意しています。先頭から順に読み進めるだけで、簡単に「角丸タブ」が作成できるはずです。上記のサンプルでは5つのタブを作っています。それぞれのタブの装飾(配色やサイズなど)は個別に指定できます。タブのラベル(文字列)はテキストですし、タブの配色や角丸の半径はCSSで指定しています。したがって、必要なだけソースをコピーして列挙するだけの簡単な編集手順で、望みのデザインの角丸タブを、いくつでも作成できます。■タブ機能を作るJavaScriptについてはページ移動することなく内容を切り替えられる「タブ」機能の例タブ(の形に見えるリンク)をクリックすることで表示内容を切り替える機能(つまり「タブ機能」)は、JavaScriptを使うと作成できます。その方法は、記事「ページ移動せずに内容を変更するタブを作る」で解説しています。先の記事では、タブの角は丸くしていませんでした(右図参照)。今回の「角丸のタブ」を作るCSSと組み合わせると、より「タブ」らしく見えて、分かりやすくなるでしょう。(画像を使わずに角丸を実現)本記事は、2008年8月12日に初版を公開し、2014年12月に改訂したものです。初版の記事では、タブの角を丸くする目的で画像を使用していました。今回の改訂版では、画像を一切使わずに、角丸をCSSだけで実現する方法に変更しています。柔軟で、より簡単に角丸のタブを実現できます。それでは、具体的な作り方を見ていきましょう。以下の5ステップに分けて解説しています。1から順に読んでみて下さい。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。