背景色を下まで表示して画像を常に真ん中に配置したい

2013/06/20 12:00

このQ&Aのポイント

HTMLとCSSを使用して、背景色を下まで表示して画像を常に真ん中に配置したい場合、以下の設定を行います。
HTMLの要素には、背景色を指定するためのIDを追加し、CSSでそのIDに関連するスタイルを設定します。
また、画像を中央に配置するために、floatプロパティを使用して要素を左右に配置します。

tobimori
お礼率85% (102/120)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/20 19:59 回答No.2

まず、基本を守ること。 HTMLにはデザイン(プレゼンテーション)に関わることは書かない。率直に文書構造だけマークアップすれば、デザインは自由自在になるはずです。将来デザインを変えるときもHTMLには手を加えなくてすみます。そして、なによりもHTMLもCSSもわかりやすくなります。 [HTML]のサンプル・ナビゲーションの画像は要はナビゲーションの見出しですから<h2></h2>でマークアップしておけば良いですね。検索エンジンを含めどんなユーザーエージェントも理解してくれる。・ナビゲーションは単純な順不同リスト ※タブは＿に置換してあるので戻すこと。 class名は、文書構造を示すものにしてあります。 HTML5の場合はそれぞれ<div class="header"></div>⇒<header></header>になります。増えても減っても追随します。 <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ul> ＿＿＿＿<li>アイウエオかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿＿<li>自由に項目を増やしたり減らしたり・・</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿＿<li>XXXXXXXXXXXXX</li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> [CSS]HTMLの文書構造に基づいて、セレクタを書いていきます。たったこれだけで良いです。決して難しいことはしてません。 div.header div.nav{ /* headerのnav */ border:2px dotted #433832; width: 650px; margin: 0 auto;/* 中央配置 */ position:relative; } /* header内のnavの見出し */ div.header div.nav h2{/* 見出しはテキストを消して代わりに画像 */ margin:0; background:#392D0D url(img/XXX.gif) no-repeat 50% 50%;/* 上下左右中央配置 */ height:100%;width:150px;/* 高さはnavの高さにあわせる */ position:absolute;/* 絶対配置位置や高さは(relativeな)navを基準 */ top:0;left:0; text-indent:-100em;overflow:hidden;/* テキストは消す */ } /* header 内のnavのul */ div.header div.nav ul{ min-height:140px;/* 最低限画像のサイズの高さは確保 */ list-style-image:url(../img/icon.gif);/* リストマーク */ margin-left:160px; width:420px; } ポイント:構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 　それさえ出来ていれば、決して難しいことではありません。頑張ってね、

質問者

お礼 2013/06/21 20:07

ご回答いただきありがとうございました。参考になりましたです。納得することばかりで勉強になりました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/21 10:08 回答No.3

No.2です。スタイルシート下記のほうがよいかも・・リキッドなのでスマホでも幅広でも対応可能(ウィンドウサイズを変えてみる) div.header div.nav{ border:2px dotted #433832; width: 60%;min-width:480px;max-width:800px; margin: 0 auto; position:relative; } div.header div.nav h2{ margin:0; background:#392D0D url(img/XXX.gif) no-repeat 50% 50%; height:100%;width:150px; position:absolute; top:0;left:0; text-indent:-100em;overflow:hidden; } div.header div.nav ul{ min-height:140px; list-style-image:url(../img/icon.gif); margin: 10px 20px 10px 160px; width:auto; }

ログインすると、全ての回答が全文表示されます。

warpspace
ベストアンサー率56% (83/147)

2013/06/20 14:09 回答No.1

１例です。アレンジしてどうぞ。 <style type="text/css"> .case05 { background:green; width:355px; } .case05 img { display: inline-block; vertical-align: middle; } .case05 .txt { display: inline-block; vertical-align: middle; width:250px; background:yellow; } </style> <div class="case05"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img" alt="img" height="100" width="100"> <span class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキスト</span> </div>