質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1003閲覧

タブを実装できるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/12/21 11:09

サイト上で実現したいタブを見つけサンプルを見ましたが実装はされず、実装の為の記述も見当たらなかったのでどのように記述を追加すればいいのか知りたいです。

イメージ説明

参考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>
<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>
</head> <body>
<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>
</body> </html>

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dice142

2018/12/21 11:12

現状どこまでできていてどこで詰まっているのでしょう? 見た感じ参考にされたページと同じ動きになっている用に見えますが。
mepon

2018/12/21 11:15

実装とは具体的に何をしたいのでしょうか タブにリンクをつけたい? アラートを出したい? 様々あると思いますが、そこも質問に追記してください。
退会済みユーザー

退会済みユーザー

2018/12/21 11:40

実装って表現が紛らわしかったですね。他のタブをクリックしてもボックスが切り替わらないので切り替わるようにしたいです。
退会済みユーザー

退会済みユーザー

2018/12/21 12:50

コードは``` ```で囲みましょう
guest

回答1

0

実装の為の記述も見当たらなかったので

提示されたコードにある記事リンクから、下記記事へのリンクが見つかりました。
既に諦めたのか退会されていますが、もしこのページを見たら確認してみてください。

【ページ移動せずに内容を切り替えるタブ機能の作り方 [ホームページ作成] All About】
https://allabout.co.jp/gm/gc/23969/

【色が変化するタブ機能をHTML+CSSだけで作る方法 [ホームページ作成] All About】
https://allabout.co.jp/gm/gc/24001/

投稿2018/12/21 17:40

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問