- 締切済み
特殊なカラムのデザイン設定について
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんな難しいものではないので、簡単なサンプルを上げておきます。 HTML5ですが、HTML5はDIVを（原則）使わない。それぞれの要素には厳格に使い道が定められているなど難しいのでHTML4.01strictにされたほうが良いと思います。 ナビゲーションにhoverでサイズが変えたい理由がわからないのですが、一応想像で・・ あえて、navはheaderにもsectionにも入れていません。 ★HTMLには文書構造しか書かれてないのでシンプルで分かりやすいですね。 たったこれだけです。 ★当然、その文書構造にしたがって記述するスタイルシートも簡単になります。 たったこれだけ。分かりやすいと思う。 ★スマホから幅広ディスプレイに対応(センターには寄せていません) ★またデザインに関するものはHTMLにありませんので、将来デザインは自由に変更できます。 ★HTMLさえ、きちんと書ければ後は好きになります。デザインのためにHTML書かない。そのための構造とプレゼンテーションの分離です。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> <style media="screen"> <!-- html,body{margin:0;padding:0;} header,section,footer{padding:5px;} body>header,body>section,body>footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;position:relative;z-index:10;} body>header{height:200px;} nav{position:fixed;top:0;left:0;height:100%;} nav>ol{position:relative;top:0;width:200px;height:100%;z-index:20;margin:0;padding:0 5px;font-size:0.8em;} body>header>*,body>section>*,body>footer>*{margin-left:215px;} nav:hover ol{width:300px;font-size:1em;} nav:hover+section>*,nav:hover+section+section>*,nav:hover+section+section+footer>*{margin-left:315px;} body section{min-height:400px;} body{background-color:gray;} header{background-color:aqua;} section{background-color:silver;} footer{background-color:lime;} nav>ol{background-color:yellow;} --> </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿</header> ＿<nav id="contentTable"> ＿＿<ol> ＿＿＿<li>コンテンツ１</li> ＿＿＿<li>コンテンツ２ ＿＿＿＿<ol> ＿＿＿＿＿<li>サブコンテンツ</li> ＿＿＿＿＿<li>サブコンテンツ</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ol> ＿</nav> ＿<section> ＿＿<h2>コンテンツ２</h2> ＿＿<p>CSS3のbox-sizing: border-box;は、よほどのことがない限り使わない。かっての互換モードを彷彿とさせる仕組みです。</p> ＿</section> ＿<section> ＿＿<h2>コンテンツ２</h2> ＿＿<p>本文はsectionでマークアップします。階層はsectionの階層で示されます。</p> ＿＿<section> ＿＿＿<h3>サブコンテンツ</h3> ＿＿＿<p>以前のHTMLはh1の数字で階層を指定していましたが、HTML5では、sectionの階層で文書のアウトラインを構成しますので、すべてh1で見出しをマークアップしても良い。</p> ＿＿</section> ＿＿<section> ＿＿＿<h3>サブコンテンツ</h3> ＿＿＿<p>sectionは一つだけ見出しを持つと期待されます。</p> ＿＿</section> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿</footer> </body> </html>
関連するQ&A
- ３番目のBoxだけずれる
CSSとHTMLは以下の様に幅などを注意して書いたつもりで、微妙にそれぞれの幅などを調整しても、三番目だけが、なぜか下にずれちゃいます。何か勘違いしているようにも思いますが、原因を教えてください。 単に二個だとうまく行くんですけどね。 よろしくお願いします。 HTML <div id="mainR1"> <div id="box1" > box1 </div> <div id="box2" > box2 </div> <div id="box3" > box3 </div> </div> CSS #mainR1 { float: left; width: 480; background-color: #ffffff; border: dotted 1px #9d9d9d; } #box1{ float: left; width: 138; height: 138; background-color: #ffcfff; border: dotted 1px #9d9d9d; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; } #box2{ margin-left: 160; width: 138; height: 138; background-color: #ffffff; border: dotted 1px #9d9d9d; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; } #box3{ float: right; width: 138; height: 138; background-color: #ffcfff; border: dotted 1px #9d9d9d; -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; }
- ベストアンサー
- CSS
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- カラム落ちの対処法について
独学でＨＴＭＬ５とＣＳＳ３を勉強中で、教本を読みながら以下のようなＣＳＳを書いたところ、Ｆｉｒｅｆｏｘ、Chrome、Ｓａｆａriではきちんと描画しますが、ＩＥ９とOperaではカラム落ちしてしまいます。 横幅の合計も間違っていないと思いますし、数値を減らしても変わりません。 本によるとIE9は対応しているようなんですが、「flote」で書かないとダメなのでしょうか。 それと、ベンダープレフィックスの書き方ですが、「プロパティ」と「値」のところのどちらに書くのが正しいのでしょうか、それともどちらでも構わないのでしょうか。 本によって異なるので。 #contentwrapper { width: 980px; display:-webkit-box; display:-moz-box; display:-o-box; display:-ms-box; display:box; } #box01 { border: solid 1px; margin: 4px 0px; padding: 8px; width: 760px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: -o-border-box; box-sizing: -ms-border-box; box-sizing: border-box; } #box02 { border: solid 1px; margin: 4px 0px 4px 10px; padding: 6px; width: 210px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: -o-border-box; box-sizing: -ms-border-box; box-sizing: border-box; } 以上、２点の回答宜しくお願い致します。
- 締切済み
- CSS
- IE10でのbox-sizingの書き方
IE10で、box-sizing:border-boxが効かなくて困ってます。 例えば、以下のようなソースのhtmlを書いた場合です。 <!DOCTYPE html> <html> <head> <style type="text/css"> *{ margin: 0px; } html, body{ height: 100%; width:100%; } #container{ padding-bottom: 24px; height: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #box{ height:100%; width:100%; background-color: blue; } </style> </head> <body> <div id="container"> <div id="box"> </div> </div> </body> </html> 以上のように書くと、chromeやSafariでは、blueの#boxの下側に24pxの隙間ができて、border-boxが効いているのがわかるのですが、IE10では、隙間が出来ません。 いろいろボックスの位置とか変えて試しましたが、IE10でbox-sizingが効くことがない様子だったので、根本的にbox-sizingの書き方が間違ってるのか、他に何か大事な設定が抜けているのか、それとも仕様変更があったのか、わからないのです。 ネットで調べても、それらしい答えは見当たりませんでした。 どなたか、ご教授願います。
- ベストアンサー
- CSS
- ３列コラムのデザインがブラウザによって崩れてしまう
３列コラムのヘッダーフッター構成でページを作ったのですが ＩＥ８では問題なく表示されるのですが…（Firefox３でも問題なく表示されます）ＩＥ８以下のバージョンのブラウザでは、デザインが崩れてしまうのです… どこがおかしいのか分からず…ＣＳＳを書き出してみますので、アドバイスよろしくお願いいたします。 デザイン： ●Topページのみ３列コラムで、その他は２列コラムになっています その為、センター部分を.centと.cent2で分け、横幅を変えて調整しました。。 ●フッター部分はナビ部分とコピーライト部分と２つになっています。 .head { background-color: #ffffff; width: 100%; height: 113px; } .main （コラム全体） { width:100%; background-color: #ffffff; border: 0px; } .left （左コラム） { float:left; width:170px; background-color: #ffffff; padding-right: 10px; } .cent （センターコラム topのみ） { float:left; width:421px; padding: 0px 10px 10px 15px; } .cent2 （右コラム 他ページ） { float:left; width:591px; padding: 0px 15px 10px; } .right （右コラム topのみ） { float:left; width:175px; } .foot_menu （フッターナビ部分） { width:100%; clear:both; background-color: #FFFFFF; } .foot （フッターコピーライト部分） { clear:left; height: 42px; background-image: url(コピーライト用画像); background-repeat: no-repeat; } その他補足が必要な場合はおっしゃって下さい。 よろしくお願いいたします
- ベストアンサー
- HTML
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- 縦型 レスポンシブ対応 多階層プルダウンウンリスト
www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定（可変でも可）、右は可変 にしたい。 ＜HTML＞ <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> ＜ＣＳＳ＞ ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1）これだと2階層目が上から下までの全幅にならない 2）画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。
- ベストアンサー
- CSS
- float:leftを使用して全体を中央寄せしたい
html勉強中のものです。 float:leftを使用したdivすべてbody全体の中央寄せにしたいです。 下記のソースから教えて下さい。 html -------------- <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="shift_jis"> <title>Director Blog</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header> <hgroup> <h1 id="header">Why not?</h1> </hgroup> <ul class="header"> <li>menu</li> <li>info</li> <li>list</li> </ul> </header> <div class="float left"> <div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150"> </p> <h1 class="float left"> Miyuki Yamanaka</h1> <p class="float left"> Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p> </div> </body> </html> -------------- css -------------- charset "utf-8"; /* ---------------------------------------------- This style definition is initiarize. ------------------------------------------------- */ body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td { margin-right: 0 auto; margin-left: 0 auto; padding: 0 auto; } div.float left{ float:left; } div.cc { width:200px; background: #FAFAD2; float: border-style: none; margin-right: auto; margin-left: auto; padding: 20px; position: relative; overflow: hidden; layout-grid-line:200px; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px #000; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } -------------- よろしくお願いします！
- 締切済み
- CSS
- ヘッダ部分のメニューを固定
下記CSSでヘッダ部分のメニューを固定にした場合、 コンテンツの写真がメニューの上に来てしまうのですが メニュー部分を上にしてコンテンツの写真をスライドするにはどうすればいいのでしょうか？ <!DOCTYPE html> <html> <head> <style type="text/css"> <!-- .viewsort-control { display: block; width: 100%; height: 35px; border-bottom: solid 1px #FF69b4; } .viewsort-control li { margin: 2px 0 0 0; display: block; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; height: 33px; overflow: hidden; border: solid 1px #bcb08a; -webkit-border-radius: 0px; border-radius: 0px; background: transparent; -webkit-box-shadow: 0px 1px 3px rgba(192, 178, 139, 0.5); box-shadow: 0px 1px 3px rgba(192, 178, 139, 0.5); font-size: 130%; height: 31px; color: #13131e; font-weight: bold; line-height: 32px; text-align: center; } .viewsort-control li.selected-default { width: 19%; margin-left: 1%; border-bottom: solid 1px #ffffff; -webkit-background-size: 2px 38px; background-size: 2px 38px; } div.imagebox { border: 1px dashed #0000cc; /* 1.枠線 */ background-color: #eeeeff; /* 2.背景色 */ } p.image, p.caption { text-align: center; /* 3.中央寄せ */ margin: 0px; /* 4.余白・間隔 */ } p.caption { font-size: 80%; /* 5.文字サイズ */ position: absolute; left: 0; bottom: 3px; color: #fff; margin: 0; padding: 5px 0 5px 3%; width: 97%; background: #000; filter: Alpha(opacity=70); opacity: 0.7; } div.imagebox { border: 1px dashed #0000cc; /* 枠線 */ background-color: #eeeeff; /* 背景色 */ float: left; /* 左に配置 */ margin: 5px; /* 周囲の余白 */ } .image_area { text-align : center ; } .image_table { margin-left : auto ; margin-right : auto ; border:none; } .image_td { width: 50%; position: relative; } .image_set { width: 100%; } .fixed { position: fixed; width: 100%; } --> </style> </head> <body> <div class="fixed"> <ul class="viewsort-control"> <li class="selected-default"> <a> <mark>割引マップ</mark> </a> </li> <li class="selected-default"> <a> <mark>割引マップ</mark> </a> </li> </ul> </div> <div class="image_area"> <table class="image_table"> <tr> <td class="image_td"> <p class="image"><img src="./photo.jpg" alt="海の写真" class="image_set"></p> <p class="caption">キャプションですよ</p> </td> </tr> </table></div> </body> </html>
- ベストアンサー
- CSS
補足
ORUKA1951様いつもありがとうございます。 早速頂いたソースで色々動きを見てみました。 希望している動きについてはanimetionを使用する点以外はある程度同じ動作でしたが、私が抱えている問題はクリアできておりませんでした。（あつかましくて申し訳ないです。） 例えば nav{position:fixed;top:0;left:0;height:100%;}にz-indexで最前面に配置します。 マウスオーバーでnavをスライドさせたりブラウザの横幅を拡大縮小すると、header部分などのボックスがスライドされませんでした。 上記の問題を解決するためにnav部分にstaticとfixedボックスを重ねてみましたが、どうやら最前列が優先されてしまう様で失敗しました。 また、どうして文字だけ動いたのか調べてみました。hover時にmargin-left:315pxでボックスごと動かず文字のみ動きました。 p要素などのボックスは動きましたが、外のボックスは動きませんでした。それで下記部分をテストで追加したら、内部ボックスについてはスライドしました。 section p#test{ width: 200px; height: 500px; background-color: #FFFFFF; } <p id="test">CSS3のbox-sizing: border-box;は、よほどのことがない限り使わない。かっての互換モードを彷彿とさせる仕組みです。</p> </section> 絶対位置と絶対位置と相対位置のみではどんな手段を使っても上記仕様は不可能なのかもしれません。 しかし絶対位置と（相対位置+相対位置）のように二重に設定すると上記仕様の対応できるかもしれません。 スマートではない上、二重にボックスを用意するので複雑になってしまう点はかなり問題な気がします。 何か良い解決策があればご教示頂けると大変助かります。 【border-boxについて】 border-boxはレイアウトする際にpaddingやmarginなどで動かした分も含めた幅で設定されて配置する際に便利、 とお聞きしたので使用してみましたがそうではないのでしょうか？ すみません、よく分かってないです(-_-;) 【その他】 [1] nav:hover+section>*,nav:hover+section+section>*,nav:hover+section+section+footer>*{margin-left:315px;} などの『大なり小なり』についてどのような意味はあるのでしょうか？ 見た感じnav部分をhoverした際、section、2つ目のsection、Footer部分のmarginをleftにする。となっているとイメージしています。しかし『大なり小なり』がどんな意味を持っているのか分かりませんでした。 [2] カラムのレイアウトについて書籍や参考サイトでdivを主に使用していますが、こちらは止めておいた方が良いのでしょうか。 <div id="my_body"> <div id="my_header">ヘッダー</div> <div id="my_main"> <div id="my_navigation">ここにナビゲーション</div> <div id="my_contents">ここにメインコンテンツ</div> </div> <div id="my_footer">フッター</div> </div> sectionを用いればメイン部分もなんとか要素のみで組めそうです。 ただ、どうしても<div id="my_body">のように各カラムを囲う部分は作れませんでした。 カラムを囲むより各ボックス毎を配置した方が作りが良いのでしょうか？ 以上です。 お手数おかけしますがご返事頂けると幸いでございます。