- 締切済み
cssの幅の調整方法について
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
タイプミスがいくつかあるので・・ ・ポイントは、floatを使わないこと。 ・親コンテナブロックをrelativeにして、その子供をabsoluteで配置すること ・親コンテナブロックの幅を指定しmargin:0 autoれで置くこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} h1,h2,h3,h4{text-align:center;} div.header,div.section,div.footer,div.footer div.nav ol{ ＿width:90%;min-width:640px;max-width:900px;margin:0 auto;background-color:white; ＿/* このwidth/max-widthで自由に伸縮できる */ } div.section{min-height:400px;} div.section div.section{margin:0 180px;width:auto;min-width:0;} body>div>*{margin:0 auto;} div.section{position:relative;padding-bottom:5px;} div.section div.nav,div.section div.aside{ ＿position:absolute;top:5px;height:90%; ＿width:160px; ＿font-size:0.95em; } div.section div.nav{left:5px;} div.section div.aside{right:5px;} div.header{height:60px;margin-bottom:36px;} div.footer div.nav h3{display:none;} div.footer div.nav ol,div.footer ol li{list-style-type:none;margin:0;padding:0;text-align:center;} div.footer div.nav ol{ ＿display:block; ＿position:absolute;top:60px;line-height:28px;font-size:0.5em; } div.footer div.nav ol li{ ＿display:inline-block; ＿width:19%;border:outset 2px white; ＿border-bottom-width:6px; ＿border-bottom-color: rgb(255,180,0); ＿border-bottom-style:solid; ＿font-size:2em; ＿background:linear-gradient(rgb(200,200,200),white); } div.footer div.nav ol li+li{border-bottom-color: rgb(255,220,0)} div.footer div.nav ol li+li+li{border-bottom-color: rgb(160,255,0)} div.footer div.nav ol li+li+li+li{border-bottom-color: rgb(0,160,255)} div.footer div.nav ol li+li+li+li+li{border-bottom-color: rgb(160,0,255)} div.section div.nav{border:solid gray 3px;border-radius:8px;background-color:silver;} div.section div.nav h3{ ＿margin:0;line-height:1.6em;background-color:gray; ＿border-radius:4px 4px 0 0; } div.nav ol,div.nav ol li{display:block;} div.aside ol,div.aside ol li{display:block;list-style-type:none;margin:0;padding:0;} div.aside h3{text-align:left;} div.aside h3:before{content:"■";} --> ＿</style> </head> ＿<div class="header"> ＿＿<h1>ここは見出し</h1> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h2>ニュース</h2> ＿＿＿<p>・・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>目的で探す</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="xxx.html">CSSの適用</a></li> ＿＿＿＿<li><a href="xxx.html">セレクタ</a></li> ＿＿＿＿<li><a href="xxx.html">フォント</a></li> ＿＿＿＿<li><a href="xxx.html">テキスト</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside" id="picUp"> ＿＿＿<h3>ピックアップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="xxx.html">CSSのメリット</a></li> ＿＿＿＿<li><a href="xxx.html">Web標準とは</a></li> ＿＿＿＿<li><a href="xxx.html">CSSのバージョン</a></li> ＿＿＿＿<li><a href="xxx.html">HTML/XHTMLの基礎</a></li> ＿＿＿＿<li><a href="xxx.html">CSSの書き方</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<div class="nav"> ＿＿＿<h3>サイトマップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="a.html">Home</a></li> ＿＿＿＿<li><a href="b.html">Overview</a></li> ＿＿＿＿<li><a href="c.html">Property</a></li> ＿＿＿＿<li><a href="d.html">Tips</a></li> ＿＿＿＿<li><a href="e.html">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>
関連するQ&A
- cssはpタグの中にかけるのか。
http://www.htmq.com/css/overflow.shtml 上記サイトを見ていると、overflowプロパティをHTMLのｐタグの中に書き込んでいますが、こういう書き方って実際に可能なのでしょうか。
- 締切済み
- CSS
- cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- HTML
- cssについて
以下のサイトのCSSをベースにCSSについて勉強しているのですが、以下の点を実現する方法を教えてください。 ■cssベース ttp://www.s-hoshino.com/web2/responsive_006/index.html ■参考にさせて頂いているサイト ttp://www.htmq.com/csskihon/index.shtml ■実現したいこと。 1.ディスプレイがスマホサイズ表示（760未満）での上メニュー（メニュー一覧 表示する▼）を、 PCサイズ（950以上）のときのサイドメニュー（Site Menu）と同列に入れたい。 試したこと：g_navi、menu、gl_menuの名称を変えたコピーを @media screen and (min-width: 950px){配下に追記したが、フォームが崩れメニューの開閉が作動しなかった。 2.ディスプレイPCサイズ時の「コンセプト」を「採用情報」の下に入れたい。 試したこと：htmlのコンセプトを採用情報下にコピーしたが、h3部分が大きくなり失敗。
- ベストアンサー
- HTML
- ｃｓｓについて質問です。
ホームページ作成の勉強をしている者です。 分からないことがあるので質問させてもらいます。 http://www.htmq.com/csskihon/401.shtmlこのサイトのｃｓｓのソースに float:left; /*リスト項目を横に並べる*/ display:inline; /*リスト項目をインライン表示にする*/ こう書かれていました。 display:inline;ですでにリストが横になるので、float：ｌｅｆｔ；で横に並べる必要があるのですか？ 調べてもいまいち納得いく答えが見つからないので分かる人教えてください。
- 締切済み
- CSS
- ナビゲーションボタンの幅を、ページの幅に合わせたいと考えています。
ナビゲーションボタンの幅を、ページの幅に合わせたいと考えています。 例えば、ページの幅を800pxとってあり、8個のナビゲーションボタンを設置する場合は、1つ辺り100px。10個の場合ですと、80pxと、均一の幅で、かつページの幅一杯まで占めるような表示をしたいと考えています。 http://solidstate.jp/Navigation/DropdownMenu/script_50.html そこで、上記サイトよりサンプルとして配布されているソースを試しているのですが、widthなりpaddingなりでcss側で調整している状況となっています。 そこで質問なのですが、上記のよなサンプルソースの場合、widthは指定しなくても、ボタンの数に合わせて汎用的にページ幅に沿うようなものは出来ないのでしょうか？ サンプルソースのように、多階層が可能なドロップダウンを備えたナビゲーションが欲しく、やっと探し得たのですが、CSSの知識が乏しく困っている状態です。 お忙しいなか恐縮ですが、アドバイスなど頂戴出来れば幸いです。宜しくお願い申し上げます。
- ベストアンサー
- HTML
- CSSのh1,h2,h3の色付けをしたい
申し訳ありません。もう一度質問させてください。CSSのh1,h2,h3の色付けをしたい。文章の途中で色付けもしたいのですが。 現在４０００文字を超えるのでURLで質問します。public_htmlフォルダにつぎのURLのCSSを保存してサイト作成をしています。h1,h2,h3の色付けをしたいのと、文章の途中でも色付けをしたいのですができますか？ http://www.htmq.com/csskihon/401.shtml よろしくお願いいたします。
- ベストアンサー
- CSS
- 忍者ホームページにcssが反映されない
「忍者ホームページ」でサイトを作ろうとしています。 初心者なので下記サイトをみてほぼそのままやってみました⬇️ http://www.htmq.com/csskihon/401.shtml FTPはサーバーダックを使用しています。 htmlは反映されたのですが、cssをアップロードしても反映されません。 フォルダも分けてます。 因に、試しにDreamWeaverにこのhtmlとcssをコピペして入れてみたらプレビューのところには このサイトと同じように反映されてました。 ということは、サーバーダックにアップロードする時に問題があるのでしょうか？ 何か考えられる点があればご回答よろしくお願い致します。
- 締切済み
- CSS
- CSSでのデザイン崩れ改善方法
表示ファイル http://www.loplopland.com/newfile.html CSSファイル http://www.loplopland.com/sample_l_180_490.css この外部CSSで直したいところは １．フッターの上の部分に余白ができてしまったので消したい。 ２．メイン表示部分が下までバックグラウンドイメージを表示したい。 以上の２点を改善したいんですが、うまくいきません。 どのように直したらいいかご教授下さい。 おねがいします。
- ベストアンサー
- HTML
- CSSに詳しい方、修正方法のアドバイスをお願い致します。
CSSに詳しい方、修正方法のアドバイスをお願い致します。 ホームページを作成しているのですが どうしても表示の崩れを直す事が出来ずに 困っております。 具体的にはメニューの部分が 自動でコンテンツの幅調整がされずに フッダー部分に重なってしまい CSSについて色々調べながら修正をしてみたのですが 重なってしまうのがどうしても直らずに 困っています。 もしCSSに詳しい方がいらっしゃいましたら アドバイスをお願いできないでしょうか。 ファイル一式をダウンロード出来るようにしましたので もし宜しければご確認とアドバイスをお願い致します。 ダウンロードはこちらからお願い致します。 http://www.sokudoku-hyouban.com/sample.zip
- ベストアンサー
- その他（インターネット・Webサービス）
- ウインドウ幅に合わせて幅の変わるボタン
ホームページ作成のcssについて質問です。 このページのような、 http://xn--up-gd4a8cufa0d4zb5h.com/ ウインドウ幅に合わせて幅の変わるボタンは、どうやって作ったらいいですか？ まだ勉強しはじめたばかりで、よくわかりません。 cssでボタンを作るのは、自分でも調べてみて、こんな感じだとわかりました。 .sample { width:200px; font-size:24px; font-weight:bold; text-decoration:none; display:block; text-align:center; padding:8px 0 10px; color:#333; border:1px solid #333; } でも、これだと画面の幅を変えても、ボタンの幅が変わりません。 cssに詳しい方、教えていただけると助かります。
- ベストアンサー
- CSS