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

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

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

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

CSS

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

解決済

position:absoluteを使うと次のブロックが重なってしまう

tacchan
tacchan

総合スコア60

HTML

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

CSS

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

2回答

0評価

2クリップ

78147閲覧

投稿2016/02/22 11:55

編集2016/02/22 12:06

以下のhtml、cssのコードで問題があります。
わかっている人にしたら基本的な問題なのだと思いますが、いつになっても解決しないので質問させてください。

問題点は二つです。
1、見たままなのですが、tabboxの部分が上に重なってしまい上手く表示されません。
2、わかりにくい箇所ですが、ボタンの部分がhoverするとき、外側の部分(marginの部分)にカーソルを持っていくだけで、hoverが発生してしまう。

1に関して、distinctiveのposition:absoluteに問題があると思うのですが、これを消すとdistinctive-leftとrightの部分が消えてしまい緑の帯のような表現が出来なくなってしまうので出来ることなら消したくありません。
distinctive-left、center、rightを一つのdivにまとめてしまうことも考えたのですが、レスポンシブの関係でまとめたくはありません。

制限があり、コードも長くわかりづらいとは思いますがよろしくお願いします。

(追記)ウインドウの幅を狭くしていくと、ボタンがずれる瞬間があるのでこれも直したいです。(追記終了)

html

<!DOCTYPE html> <html lang="ia"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } </script> </head> <body> <div id="mainContents"> <div id="distinctive"> <div id="distinctive-left"></div> <div id="distinctive-main"> <h2>タイトル</h2> <ul id="distinctive-first"> <li> <h3>見出し1</h3> <p>あああああああああああああああああああああああああああああああああああああああああああ</p> </li> <li> <h3>見出し2</h3> <p>あああああああああああああああああああああああああああああああああああああああああああ</p> </li> <li> <h3>見出し3</h3> <p>あああああああああああああああああああああああああああああああああああああああああああ</p> </li> </ul> <ul id="distinctive-second"> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> </ul> </div> <div id="distinctive-right"></div> <div id="distinctive-bottomleft"></div> <div id="distinctive-bottomcenter"></div> <div id="distinctive-bottomright"></div> </div> <div class="tabbox"> <p class="tabs"> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">タブ1</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">タブ2</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">タブ3</a> </p> <div id="tab1" class="tab"> <p>(タブ1の中身。何でも記述できます。)</p> </div> <div id="tab2" class="tab"> <p>(タブ2の中身。HTMLタグも記述可能です。)</p> </div> <div id="tab3" class="tab"> <p>(タブ3の中身。いくつでも増やせます。)</p> </div> </div> </div> <script type="text/javascript"> // デフォルトのタブを選択 ChangeTab('tab1'); // </script> </body> </html>

css

*{ margin: 0px; padding: 0px; } body{ background: gray; } #mainContents { overflow:hidden; width: 100%; max-width: 960px; height: auto; margin: 0 auto; background-color: rgb(255,255,255); } #distinctive { position: absolute; } #distinctive-left { background: #aacf53; margin-top: 10px; margin-left:-20px; width: 20px; height: 237px; float: left; } #distinctive-main { background: #aacf53; margin-top: 10px; color: #fff; text-align: center; width: 100%; max-width: 960px; float: left; } #distinctive-main h2 { margin: 10px 0px 10px 0px; padding-top: 10px; text-shadow: 1px 1px 3px #000000; } #distinctive-first li { position: relative; float: left; width: 33%; text-align: center; list-style: none; } #distinctive-first li:nth-child(2) { border-left: 1px dotted #ffffff; border-right: 1px dotted #ffffff; } #distinctive-main h3 { margin: 10px 0px 10px 0px; text-shadow: 1px 1px 3px #000000; } #distinctive p { display: block; margin: 10px 20px 10px 20px; } #distinctive-second li { position: relative; float: left; width: 33.33%; text-align: center; list-style: none; } #distinctive-second li a{ margin-top: 20px; margin-bottom: 20px; margin-left: 25%; display: block; padding: 16px 0; width: 50%; background-image: linear-gradient(180deg,#2d5434 0%,#29905e 100%); color: #ffffff; font-size: 14px; font-weight: normal; line-height: 1; text-decoration: none; text-shadow: 1px 1px 3px #000000; } #distinctive-second > li:hover > a{ background-image: linear-gradient(180deg,#29905e 0%,#2d5434 100%); } #distinctive-right { background: #aacf53; margin-top: 10px; margin-right:-20px; width: 20px; height: 237px; float: left; } #distinctive-bottomleft { clear: both; background-image: linear-gradient(26.565051145046deg,transparent 49%,#86aa30 50%,#86aa30 100%); margin-left:-20px; left: 0px; float: left; width: 20px; height: 10px; } #distinctive-bottomcenter { background-image: linear-gradient(180deg,#969696 0%,#ffffff 100%); float: left; width: 100%; height: 10px; } #distinctive-bottomright { background-image: linear-gradient(153.434948694794deg,#86aa30 49%,transparent 50%,transparent 100%); margin-right:-20px; right: 0px; float: left; width: 20px; height: 10px; } /* 表示領域全体 */ div.tabbox { margin: 0px; padding: 0px; width: 400px; } /* タブ部分 */ p.tabs { margin: 0px; padding: 0px; } p.tabs a { display: block; width: 5em; float: left; margin: 0px 1px 0px 0px; padding: 3px; text-align: center; border-radius: 12px 12px 0px 0px; /* 角を丸くする */ } p.tabs a.tab1 { background-color: blue; color: white; } p.tabs a.tab2 { background-color: #aaaa00; color:white; } p.tabs a.tab3 { background-color: red; color: white; } p.tabs a:hover { color: yellow; } /* タブ中身のボックス */ div.tab { height: 150px; overflow: auto; clear: left; } div#tab1 { border: 2px solid blue; background-color: #ccffff; } div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; } div#tab3 { border: 2px solid red; background-color: #ffcccc; } div.tab p { margin: 0.5em; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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