- 締切済み
特殊なカラムのデザイン設定について
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞それではjQueryを使用するのと変わらないため解決にはなりません。 まったく違いますよ。jQueryは、javascriptを使用しています。mediaqueryはスタイルシートです。良く似てますね。 混同されるのも分かりますが・・ ＞他には頼らずCSSのみで実装できるのか知りたい、 それが、この方法です。 media別スタイルシートは、CSSの機能です。 media別スタイルシートはCSS2/HTML4.01の機能です。 ⇒HTML4.01strict 14.2.4 出力メディア型( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 ) ⇒HTML4.01strict 6.13 出力メディア( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-media-descriptors ) ⇒CSS2.1 7 メディアタイプ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/media.html ) スタイルシートに @media handheld{ section nav,div.section aside{ position:static; } } mediaqueryは、CSS3の機能です。 ⇒Media Queries( http://www.w3.org/TR/css3-mediaqueries/ )
関連する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
補足
すみません、よく分かっていないのですがMedia Queriesを使用すれば横スライドした場合にGooleのスマホ版みたいに画面もスライドされるのでしょうか？ 目的としてはGoogleみたいな動作をしたいのですが、話が難しくなってきてついていけないです。 調べたところGoogleもCSS3のみで横スライドさせているとの事で解説サイトもいくつかあるのですが、いずれもスライドされた場合に画面のスライドができませんでした。