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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

1回答

1644閲覧

タブ式のコンテンツに関して

mikio

総合スコア38

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

2クリップ

投稿2015/05/11 11:35

タブで切り替えるコンテンツを作成しておりますが、
行き詰ってしまったので、ご質問させて頂きます。

今回作成したいコンテンツとしては、
タブで内容を切り替えられるコンテンツです。

※簡単な仕様に関しては、
下記画像をご確認ください。
![イメージ説明]WIDTH:595

途中まで自力で組んでみたのですが、
どうしてもタブの位置と下の内容の位置がずれてしまいます。

現時点でのHTMLは下記の通りです。

lang

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<!--[if lt IE 9]> 7<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 8<![endif]--> 9<style type="text/css"> 10*{ 11 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic"; 12 color:#444; 13 font-size:0.95em; 14 text-decoration:none; 15 list-style: none; 16} 17#List_Group { 18 width:100%; 19} 20ul#tab { 21 position:relative; 22 left:0; 23 width:100%; 24 height:100px; 25 margin:0; 26 padding:0; 27 background-color:#000000; 28} 29#tab li { /* タブ */ 30 width:19.8%; 31 float: left; 32 margin:0 1px 0 0; 33 padding:10px 0 10px 0; 34 list-style: none; 35 cursor: pointer; 36 text-align:center; 37 background: #eee; 38 border:1px solid #ADADAD; 39 border-bottom:0; 40 -webkit-border-top-left-radius: 5px; /* Safari+Chrome:左上 */ 41 -webkit-border-top-right-radius: 5px; /* Safari+Chrome:右上 */ 42 -moz-border-radius-topleft: 5px; /* Firefox専用:左上 */ 43 -moz-border-radius-topright: 5px; /* Firefox専用:右上 */ 44 border-top-left-radius: 5px; /* 左上 */ 45 border-top-right-radius: 5px; /* 右上 */ 46 behavior: url(css/border-radius.htc); /* IE */ 47} 48#tab li.select { /* 選択済み */ 49 background:#727272; 50 color:#FFFFFF; 51} 52.hide { /* 非表示 */ 53 display: none; 54} 55.content_wrap { /* コンテンツ */ 56 /*clear: left;*/ 57 width: 100%; 58 height: 500px; 59 margin:0 auto; 60 padding:0 0 0 1%; 61 font-size: 20px; 62 background: #ccc; 63 color: #fff; 64} 65h1{ 66 font-size:16px; 67 font-weight:bold; 68 margin:0 0 5px 0; 69} 70/* ▼グレー▼ */ 71a:link{/*テキストリンクに使用*/ 72 text-decoration:none; 73 color:#4D4D4D; 74} 75a:hover{/*テキストリンクに使用:マウスオーバー*/ 76 text-decoration:underline; 77 color:#575757; 78} 79a:visited{/*テキストリンクに使用:訪問済みリンク*/ 80 text-decoration:none; 81 color:#4D4D4D; 82} 83 84.content_wrap ul{ 85 width:100%; 86 height:auto; 87 position:relative; 88 margin:0; 89 padding:0; 90 background-color:#AFC0FF; 91} 92.content_wrap li { 93 font-size:14px; 94 float:left; 95 margin:0 10px 0 0; 96 padding:0 0 0 10px; 97 list-style: none; 98 background: url("img/marker.gif") 0% 50% no-repeat; 99} 100 101</style> 102</head> 103<body> 104 105<div id="List_Group"> 106 107 108<ul id="tab"> 109 <li class="select">タブ1</li> 110 <li>タブ2</li> 111 <li>タブ3</li> 112 <li>タブ4</li> 113 <li>タブ5</li> 114</ul> 115 116<div style="clear:both;"></div> 117<div class="content_wrap"> 118 <h1>texttext</h1> 119 <ul> 120 <li>texttext</li> 121 <li>texttexttexttext</li> 122 <li>texttext</li> 123 <li>texttexttexttext</li> 124 <li>texttext</li> 125 <li>texttexttexttext</li> 126 <li>texttext</li> 127 <li>texttexttexttext</li> 128 <li>texttext</li> 129 <li>texttexttexttext</li> 130 </ul> 131 <div style="clear:both;"></div> 132 <h1>texttext</h1> 133 <ul> 134 <li>texttext</li> 135 <li>texttexttexttext</li> 136 <li>texttext</li> 137 <li>texttexttexttext</li> 138 <li>texttext</li> 139 <li>texttexttexttext</li> 140 <li>texttext</li> 141 <li>texttexttexttext</li> 142 <li>texttext</li> 143 <li>texttexttexttext</li> 144 </ul> 145 146 147</div> 148<div class="content_wrap hide">内容2</div> 149<div class="content_wrap hide">内容3</div> 150<div class="content_wrap hide">内容4</div> 151<div class="content_wrap hide">内容5</div> 152 153 154</div><!-- //#List_Group --> 155 156 157 158 159 160 161 162 163 164 165 166 167<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 168<script type="text/javascript"> 169//<![CDATA[ 170$(function() { 171 $("#tab li").click(function() { 172 var num = $("#tab li").index(this); 173 //$(".content_wrap").addClass('hide'); //クリックされた以外を非表示 174 //$(".content_wrap").eq(num).removeClass('hide'); //クリックされた以外を非表示 175 $(".content_wrap").hide(); //フェードイン+フェードアウトの処理 176 $(".content_wrap").eq(num).fadeIn(); //フェードイン+フェードアウトの処理 177 $("#tab li").removeClass('select'); 178 $(this).addClass('select') 179 }); 180}); 181//]]> 182</script> 183 184 185 186</body> 187</html>

上記HTMLをどのように修正すれば添付画像の様な、
仕様にできるのでしょうか。

お詳しい方是非、ご教授頂けましたら幸いです。

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

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

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

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

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

guest

回答1

0

なかなか力作ですね。もうあと少しですよね。
動くようにしてみました。

lang

1.content_wrap { /* コンテンツ */ 2 /* 3 margin:0 auto; 4 padding:0 0 0 1%; /* ここの1%がずれの根源 */ 5 */ 6 margin:0; 7 padding:0; 8} 9ul#tab { 10/* heightの設定不要 */ 11/* height:100px; */ 12}

というわけで、まず content_wrapの margin/paddingを0にします。
理由は、"%"指定は 数px単位で位置合わせするには大変すぎるからです。
これで、.content_wrap はベースに収まることになります。

lang

1function tab_regularize() { 2 // grp_width : ベースの横幅 , cnt_tab:タブの数 , spacing: タブ間の目指す間隔 3 var grp_width = $("#List_Group").width(), 4 cnt_tab = $('#tab li').length, 5 border_width = 1, 6 spacing = 5, 7 tab_width = Math.floor((grp_width - (cnt_tab - 1) * spacing - cnt_tab * 2 * border_width) / cnt_tab); 8 $("#tab li").width(tab_width).css({ 9 marginRight: spacing + "px" 10 }); 11 //右端のタブだけ、右端によせ、余りの 数px だけ 幅を余分にとるようにします。 12 $("#tab li:nth-child(" + cnt_tab + ")").css({ 13 marginRight: "0px", 14 marginLeft: (grp_width - cnt_tab * (2 * border_width + tab_width) - (cnt_tab - 1) * spacing) + "px" 15 }); 16} 17 18$(function () { 19 tab_regularize(); 20 $(window).resize(tab_regularize); 21 //以下変更なし 22 $("#tab li").click(function () { 23 //blurblurblur 変更なし 24 }); 25});

で、tab_regularizeというfunctionを作って pixel単位に計算して
1つひとつの大きさを設定する作業をしています。
これを load時と window resize時に行います。

おそらく パーセンテージ設定をしていたのは、windowの横幅が変わっても
追随するように、ということだと思いますが、それはそれでいいのですが、
どうしても数pixelのずれが生じて是正できないことが多い。
ならば、できるだけきちんと計算して、余りが出たら、一番右のタブだけ
必ず 右端に寄るようにすればいいじゃないか、ということです。

投稿2015/05/11 12:22

okayu3

総合スコア200

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

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

mikio

2015/05/14 01:54

okayu3さん コメント頂き誠にありがとうございます。 またご返信が遅くなってしまい申し訳ございません。 無事に動くようになりました。 しかしどうしてもタブ同士の隙間が均等ではない部分が気になるのですが、 この部分に関しては、どうしても改善はできない部分になるのでしょうか? また1点お伺いしたい点がございますので、 下記にて記載させて頂きます。 【 確認事項 】 ・中央部分のコンテンツ部分へ設置する内容で  下記の様にboxを横並びにしてこちらもウィンドウサイズによって  配置を入れ替えるなどの処理をしたいと思っているのですが、  こちらは実現可能なのでしょうか。 ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃   ┃ ┃   ┃ ┃   ┃ ┃   ┃ ┃   ┃ ┃   ┃ ┃   ┃ ┃   ┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ 大変ご多忙の中お手間をお掛け致しますが、 ご確認頂き、ご教授頂けましたら幸いです。 以上、宜しくお願い致します。
okayu3

2015/05/14 02:46

では わたしは タブ幅の話について。 タブの隙間が均等でないのを解消するためには、タブ幅を均等でないことを許す、という方向しかないですね。あなたの仕様ではタブ幅が固定であることが明示されています。 隙間の均等性を改善するには、 3,3,3,5 → 3,3,4,4 というように指定した隙間幅と違うものを複数設ける、ということで改善しますね。 結局は 整数値なので、均等に割り振ろうとしても 余りが出てしまうというところは どうしようもないでしょう。
mikio

2015/05/14 03:22

ShunsukeIzuiさん 参考URLの添付ありがとうございます。 こちらも参考にしてみたいと思います。
mikio

2015/05/14 03:26

okayu3さん 早速のご返答ありがとうございます。 それでは、反対にスペースをなくし、 各タブの横幅を20%で5等分にする方法はいかがでしょうか? その際には上記でご教授頂いております、 スクリプトの部分は修正する必要があるのでしょうか。 ちなみに「 spacing = 0, //タブ同士のスペース 」の様に タブ同士のスペースをなくそうとしましたが、 どうしても一番右のタブの左側だけスペースが空いてしまうのですが、 この部分以外にも修正箇所がございましたら、 ご教授頂けましたら幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問