サイト上で実現したいタブを見つけサンプルを見ましたが実装はされず、実装の為の記述も見当たらなかったのでどのように記述を追加すればいいのか知りたいです。
参考URL:https://allabout.co.jp/gm/gc/23970/7/
サンプルのソース
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>角の丸いタブを作る</title></head> <body><style type="text/css"><!-- /* -------------------------- */ /* リストを横方向に並べる装飾 */ /* -------------------------- */ ul.menulist { margin: 0px; /* リスト周囲の余白を削除 */ padding: 0px; /* リスト周囲の余白を削除 */ /*width: 100%;*/ /* 横幅一杯に広げる */ } ul.menulist li { list-style-type: none; /* 先頭記号を消す */ float: left; /* リスト項目を横方向に並べる */ margin: 0px; /* 各項目周囲の余白 */ padding: 0px; /* 枠線と内容の距離をゼロに */ height: 30px; /* ★タブの高さ */ } /* ---------------------------------------- */ /* メニュー項目内のリンクをタブに見せる装飾 */ /* ---------------------------------------- */ ul.menulist li a { text-decoration: none; /* 下線を消す */ display: block; /* ブロックレベルとして表示 */ padding: 5px 0px; /* ★内側の余白量 */ width: 5em; /* ★タブの横幅 */ height: 60px; /* ★十分な高さを指定しておく(※タブが2段組・3段組になったときのために数倍にしておくと良いかも) */ text-align: center; /* ★ラベル(文字列)を中央寄せ */ font-weight: bold; /* ★ラベル(文字列)を太字にする */ background-color: #ffffcc; /* ★タブの背景色 */ border: black solid 1px; /* ★タブの枠線 */ border-top-left-radius: 12px; /* ★タブの左上の角を丸くする */ border-top-right-radius: 12px; /* ★タブの右上の角を丸くする */ /* タブよりもタブページ側を上に重ねるための指定 */ position: relative; z-index: 0; } /* ---------- */ /* タブの配色 */ /* ---------- */ ul.menulist li#mhome a { background-color: #ccffcc; color: #008000; border-color: #008000; } ul.menulist li#minfo a { background-color: #ffcccc; color: #800000; border-color: #800000; } ul.menulist li#mdiary a { background-color: #ffffcc; color: #808000; border-color: #808000; } ul.menulist li#mbbs a { background-color: #ccccff; color: #000080; border-color: #000080; } ul.menulist li#mlink a { background-color: #ccffff; color: #008080; border-color: #008080; } /* ---------------- */ /* 選択中タブの配色 */ /* ---------------- */ ul.menulist li#mhome a.selected { background-color: #008000; color: white; border-bottom: 1px solid #008000; } ul.menulist li#minfo a.selected { background-color: #800000; color: white; border-bottom: 1px solid #800000; } ul.menulist li#mdiary a.selected { background-color: #808000; color: white; border-bottom: 1px solid #808000; } ul.menulist li#mbbs a.selected { background-color: #000080; color: white; border-bottom: 1px solid #000080; } ul.menulist li#mlink a.selected { background-color: #008080; color: white; border-bottom: 1px solid #008080; } /* ------------------------------ */ /* マウスが載ったときのタブの配色 */ /* ------------------------------ */ ul.menulist li#mhome a:hover { background-color: #008000; color: #ccffcc; } ul.menulist li#minfo a:hover { background-color: #800000; color: #ffcccc; } ul.menulist li#mdiary a:hover { background-color: #808000; color: #ffffcc; } ul.menulist li#mbbs a:hover { background-color: #000080; color: #ccccff; } ul.menulist li#mlink a:hover { background-color: #008080; color: #ccffff; } /* ------------------------------ */ /* タブの中身(タブページ)の装飾 */ /* ------------------------------ */ div.box { clear: left; /* 回り込みを解除 */ height: 100px; /* ★高さを指定*/ padding: 0.5em; /* ★内側の余白量 */ background-color: #ffcccc; /* ★背景色 */ border: solid #800000 10px; /* ★枠線 */ position: relative; /* z-indexを指定するために必要 */ z-index: 10; /* 他の要素より前面に表示させる */ } --></style>
</body> </html><h1>角の丸いタブを作る</h1> <p> 角の丸いタブを、HTML+CSSで作成した例です。<br> </p> <ul class="menulist"> <li id="mhome"><a href="#" onclick="return false;">ホーム</a></li> <li id="minfo"><a href="#" onclick="return false;" class="selected">新着</a></li> <li id="mdiary"><a href="#" onclick="return false;">日記</a></li> <li id="mbbs" ><a href="#" onclick="return false;">BBS</a></li> <li id="mlink"><a href="#" onclick="return false;">リンク</a></li> </ul> <div class="box"> ▲角の丸いタブ群 </div> <p> ※ここでは、「タブのように見える装飾」を作っているだけなので、クリックしてもタブとしては機能しません。 </p> <hr /> <p> <a href="http://allabout.co.jp/gm/gc/23970/">解説記事に戻る</a> </p>
よろしくお願いします。