CSSでのレイアウトの仕方
- CSSを使用して、HTMLの要素を配置・スタイリングする方法を教えてください。
- index.htmlとstyle.cssという2つのファイルを使用して、レイアウトを調整します。
- 具体的には、タイトルとリストを特定の配置で表示させる方法を教えてください。
- ベストアンサー
cssでのレイアウトの仕方
次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。
- aki-kun
- お礼率68% (75/109)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞style.cssの方を修正する方法で できなくはないけど、大変煩雑で文字数が変わったりすると崩れてしまいます。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ( http://jigsaw.w3.org/css-validator/#validate_by_input )』と書かれているように、HTMLを正したほうが良いです。ずっと楽ですし、先々も苦労しません。 ＿<div class="section"> ＿＿<dl class="notice"> ＿＿＿<dt>タイトル</dt> ＿＿＿<dd><p>→一覧</p></dd> ＿＿＿<dd> ＿＿＿＿<ul> ＿＿＿＿＿<li>リスト１</li> ＿＿＿＿＿<li>リスト２</li> ＿＿＿＿</ul> ＿＿＿</dd> ＿＿</dl> ＿</div> [CSS] dl.notice{ width:240px;line-height:2em; border:solid 3px black;background-color:aqua; position:relative; } dl.notice,dl.notice dt,dl.notice dd,dl.notice dd p, dl.notice dd ul,dl.notice ul li{ margin-top:0;margin-bottom:0;padding:0; } dl.notice dt{border-bottom:solid 2px black;padding-left:1em;} dl.notice dd{position:absolute;right:0;top:0;padding-right:1em;} dl.notice dd+dd{position:static;line-height:1.4em;}
関連するQ&A
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSでレイアウトをセンターにしたい
CSSで製作したのですが、デザインが右端によってしまいます。 作成している会社のモニターでは真ん中でちゃんとみれるのですが、 家で確認したところ右寄せになっていました。 Centerにもっていくにはどうすればよいでしょうか？ お教えくださいませ(困) 他にもおかしなところがあればお教えくださいませ。 body{ background-color: #000000; background-image: url(../imgs/back.gif); cursor: crosshair; margin: 0; padding: 0; } P{ margin: 0; text-align: center; font-family: DejaVuSans; font-size: 9pt; color: #C0C0C0; } h1{ font-family: serif; font-size: 3pt; color: #000000; } #wrapper{ width: 800px; margin-left: 450px; margin-right: auto; margin-top: 100px; } #logo{ width: 300px; float: left; padding-right: 5px; } #hako { margin-top: 80px; line-height:50px; padding-bottom: 15px; float: right; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../imgs/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 20px; } #hako li{ font-family: DejaVuSans; font-size: 80%; } #hako li a{ color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover{ color:#66FFFF; border-bottom:solid 2px #CC0000; } #lightbox{ padding: 20px; width: 100%; text-align: center; background-repeat: no-repeat; }
- 締切済み
- HTML
- cssで枠の中に複数の罫線を引く方法
よろしくお願いします。 枠を作成するためにcssに以下の記述をしました。 【css】 border-top:3px solid #339900; border-left:3px solid #339900; border-right:3px solid #339900; border-bottom:3px solid #339900; padding: 0px; background-color:#ffff00; これにより外枠のみに罫線が引かれましたが、枠の中に縦線や横線 その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSS IEとfirefoxおなじレイアウトにしたいのですが
初心者です。↑質問ですが IEでレイアウトはみれてもfirefoxでは崩れてしまいそれの 対処で困ってしまっています。 どなたかアドバイスください。 ↓のCSSなのですが、途中混乱したままの投稿となってしまっていますが おわかりなられるかた助けてください！ ロゴがメイン画像にのっかったりと崩れがたえません。 body{ margin-top: 60px; padding: auto; background-color: #000000; background-image: url(../image/back.gif); color: #000000; cursor: crosshair; } P{ margin: 0; } h1{ font-family: serif; font-size: 5pt; color: #000000; } /*imgDIV↓*/ #lightbox{ width: 100%; z-index: center; text-align: center; background-repeat: no-repeat; } /*toplogo*/ #wrapper{ position: relative; width: 100%; margin: auto; margin-bottom: 20px; margin-left: auto; margin-right: auto; } #logo{ padding-top: 50px 50px 50px 50px; position: absolute; left: 410px; } /*グローバルナビ*/ #hako { margin-top: 150px; line-height:50px; padding-left: 900px; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../image/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 17px; } #hako li{ font-family: DejaVuSans; font-size: 12px; } #hako li a { color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover { color:#FFFF66; border-bottom:solid 1px #CC0000; }
- 締切済み
- HTML
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- cssを用いる表の作り方
いつもいつもお世話になっております。 cssを用いた表の作り方で迷っています。 dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>てすと</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> </style> </head> <body> <dl id="sample3"> <dt>施設名</dt> <dd>あああああああああああああああ</dd> <dt>所在地</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいい</dd> <dt>職員体制</dt> <dd>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</dd> <dt>アクセス</dt> <dd> <ul> <li>・えええええええええええええええええええええええええ</li> <li>・おおおおおおおおおおおおおおおおおおおおおおおおお</li> <li>・かかかかかかかかかかかかかかかかかかかかかかかかか</li> </ul> </dd> <dt>総居室数</dt> <dd>３室</dd> <dt>居室面積</dt> <dd>２０平米</dd> <dt>電話番号</dt> <dd>12-3456-7890</dd> <dt>FAX番号</dt> <dd>12-3456-7890</dd> </dl> </body> </html> dl#sample3 { width: 600px; } dl#sample3 dt{ border-top: 1px solid #fff; float: left; width: 6em; padding: 10px; background-color: orange; } dl#sample3 dd{ border-left: 1px solid #fff; border-top: 1px solid #fff; margin-left: 115px; padding: 10px; background-color: silver; } ul { list-style-type: none; margin: 0 auto; padding: 0; } 各セルに色をつけたいのですが、説明が２行以上に渡ると項目名が対応されないのと、 "電話番号""FAX番号"のような説明が短いセルは幅を短くして、横に並べることが出来ないところで悩んでいます。 もちろん、それらのセルを別classにすれば対応可能ではありますが、テンプレートとして使用する必要があるため、汎用性の高い構成にする必要があるのです。 ご存知の方、どうぞどうぞご教示お願いいたします。
- ベストアンサー
- CSS
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
ご回答ありがとうございました。 思い通りに表示できました。 もっと勉強しようと思います。