- 締切済み
特殊なカラムのデザイン設定について
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すべてを説明するのは大変です。 私は、それらをすべて仕様書や、HTML5 Doctor( http://html5doctor.com/ )から手に入れました。本はかって携わったこともあるので私自身が使った事はありません。なぜなら、仕様書にすべて書いてあるものを、わざわざ本にするのは仕様書を詳しく知らないときしか恥ずかしくて書けない。無知なうちしか本にしようとは思わない。原稿を書き始めて２ヶ月近くかかります。書店に並ぶ頃には頃には古くなっている。 ＞カラムのレイアウトについて書籍や参考サイトでdivを主に使用していますが、こちらは止めておいた方が良いのでしょうか。 これがその典型ですね。仕様書のどこにもDIVをデザインのために使うとは書かれたことはない。HTML5では明確に否定されている。!! 好意的に解釈すると、スタイルシートで右に配置するという説明のために書いてあるだけで、実際に適用するときは<div class="aside">ここは本文とは直接関係ない記事群</div>とマークアップすれば良いのです。 将来、あなた自身が、あるいは他人が内容を変更したり、デザインを変更する時にclass名はその文章の構造を示す物のほうが楽です。 ＞sectionを用いればメイン部分もなんとか要素のみで組めそうです。 いいえ、ここはとっても難しい部分でして 4.3.3 The section element( http://www.w3.org/TR/html5/sections.html#the-section-element ) "NOTE:The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline." section要素は、汎用コンテナ要素ではありません。スタイリングの目的やスクリプトのために必要になったときには、sectionではなくdiv要素を使用することを推奨する。section要素は、その内容が、文書のアウトラインとして明示的にリストされる時に限って使用すべきです。 および、 4.4.13 The div element( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) "NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors." 他により適切な要素がないときの最後の最後の手段としてdiv要素を表示することをお勧めします。div要素の代わりにより適切な要素を使用すると、読者にはより良いアクセス性を、著者にはより容易な保守性を与える。 ＞などの『大なり小なり』についてどのような意味はあるのでしょうか？ 小なりはないです。(^^) " "(半角スペース)は、子孫セレクタ その要素の子々孫々の代まで ">"(大なり)は、子供セレクタ 直接の子供だけ "+"(プラス)隣接セレクタ それに続く並列な要素 section>h3+first-letter { font-size: 200%; font-style: italic; float: left } 英語サイトでよく見かけるこれは、section 内の直接の子供であるh3要素に続くp要素の最初の文字はドロップキャップする。 CSS2.1の 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) は、プロパティ弄くるより先に、しっかりと身につけないとスタイルシートきれいにかけません。 ＞【border-boxについて】 例えば 20文字程度は並べたい時に、width:22em;。あるいは一番大きな画像が360px幅なのでwidth:400px;としても、外サイズから決められると不都合ですよね。 これは昔から、内容の幅＝widthだったのですが、悪名高きIEだけは外をwidth幅としていました。そのため世の中ウェブ標準(内容の幅=width)であってもIEだけ、互換モードとして引きずってきました。デザイナーを悩ませてきたいわゆる互換モードです。 私がサンプルでsection{mon-width:630px;padding:5px;}としているのは、外周は640pxと言うことと同義です。borderをどんな幅にしてもかならず内容は630px確保されます。そのほうが楽なはずです。 ＞header部分などのボックスがスライドされませんでした。 文書構造上・・・内容・意味的に、ある要素の動作によってそれより前にある要素が影響を受けることはありえない。たとえそれをしてもユーザビリティー上もまずいでしょう。 この場合、最も良いのはheaderはnavの前面に置き、nav olはheaderの高さ分下から開始するのが良いでしょう。 巷には、本当におかしな参考書やサイトが氾濫しています。どれがまっとうかを判断するのはとても難しいです。そんなときは常に仕様書をチェックする。それだけで、無駄を省けると思います。
関連する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
お礼
ご返事ありがとうございます。 私がやりたかったこと似たサイトを見つけました。jQueryでの実装ですが、動きはこのような感じです。 この動きをCSS3を使用して作ってみたいと考えていました。 http://webkaru.net/jquery-plugin/sources/mmenu/demo.html ＞レイアウトについて なるほど・・・確かに無駄なIDクラスを定義するより要素を使用した方が修正変更する上で分かりやすいと感じました。書籍のようにボックスの中から配置していくという考えでは無く、各パーツをパズルのように繋げて一つのWEBを作っていくという感じなのでしょうか。 確かにそう考えるとABCという並びをCBAに変える際にCSS部分を変えれば良さそうです。 CSSの設定については、じっくりと勉強してみます。 内容が濃く勉強になりました。