- ベストアンサー
画像をセンター配置にする方法
- 画像を中央に配置する方法について説明します。
- HTMLとCSSを使用して、画像をセンターに配置する方法を解説します。
- 具体的なコードと共に、中央配置の実装方法を詳しく紹介します。
- justin_shingo
- お礼率100% (10/10)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
これでどうですか <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題</title> <link href="css/common.css" rel="stylesheet" type="text/css" /> </head> <body> <!--▼▼ヘッダーここから▼▼--> <div id="header"> <p>ヘッダー</p> </div> <!--▲▲ヘッダーここまで▲▲--> <!--▼▼メインここから▼▼--> <div id="main"> <ul> <li id="main_site01"> <p class="center">aaa01</p> <p><img src="images/site01.jpg" width="300" height="200" alt="01" /></p> <p class="center">aaa01</p> </li> <li id="main_site02"> <p class="center">aaa02</p> <p><img src="images/site02.jpg" width="300" height="200" alt="02" /></p> <p class="center">aaa01</p> </li> <li id="main_site03"> <p class="center">aaa03</p> <p><img src="images/site03.jpg" width="300" height="200" alt="03" /></p> <p class="center">aaa01</p> </li> </ul> </div> <!--▲▲メインここまで▲▲--> <!--▼▼フッターここから▼▼--> <div id="footer"> <p>フッター</p> </div> <!--▲▲フッターここまで-▲▲--> </body> </html> ************************************************* @charset "utf-8"; /*******************/ /* リセットcss */ /*******************/ * { margin: 0; padding: 0; list-style-type: none; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } img { border: none; } /*******************/ /* コンテンツ */ /*******************/ body { background-color: #000; } #header { height: 100px; margin-top: 50px; font-size: 18px; background-color: #fff; } #main{ width:990px; margin:0 auto; } #main ul li { color: #FFF; text-align: center; float: left; width:300px; margin: 0 15px 15px; } .center { margin-top: 15px; } #footer { height: 100px; font-size: 18px; color: #000; clear: both; background-color: #fff; }
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的には同じもの。HTML/CSSの説明は、先の回答にあるので省く。CSSをHTML内に書いたもの。HTMLさえデザインに引っ張られず、文書構造にしたがって、きちんと書けば、HMLもCSSも極めて簡単になるが、画像間の空白文字を消すためHTMLに<!-- -->が追加してある。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 ★＿はタブに戻すこと!! <!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=utf-8"> ＿<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" media="screen"> <!-- html,body{margin: 0;padding:0;} body{ ＿line-height: 1.6em;background-color: #000;color:white; ＿font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } a img {border: none;} div.header,div.footer,div.section{ ＿width: 90%;min-width:770px;margin:0 auto; ＿text-align: center; } div.header{margin-top:50px;} div.header,div.footer{ ＿background-color: white;color:black; ＿height: 100px; } div.header h1,div.footer h2{ ＿font-size:18px; ＿margin:0; } div.section{padding-top:15px;} div.section p,div.header p,div.footer p{text-align:left;margin:0 1em;text-indent:1em;} div.section h2{display:none;} /* 画像を並べて中央に配置 */ div.section div.nav ul{ ＿display:block; ＿width:100%;margin:0 0 10px 0;padding:0; } div.section div.nav ul li{ ＿display:inline-block; ＿width:250px;margin:0; ＿background-color:gray;/* テスト */ } div.section div.nav ul li+li{margin-left:10px;} /* ここまで */ /* おまけ */ div.section div.nav ul li{position:relative;} div.section div.nav ul li:hover:after{ position:absolute;top:100px;left:20px;width:200px;padding:1ex 1em; text-align:left; background-color:yellow;font-size:0.8em;color:red; text-indent:1em;line-height:1.4em; content:"この<li>要素は、display:block; text-align:centerに指定してある<ul>内で、display:inline-block;に指定してある。"; border:solid 1px red; -moz-border-radius: 1em; -webkit-border-radius: 1em; -o-border-radius: 1em; -ms-border-radius: 1em; -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -o-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); -ms-box-shadow: 10px 10px 10px rgba(0,0,0,0.4); } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ヘッダー</h1> ＿＿<p> ＿＿＿以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。 ＿＿</p> ＿＿<p> ＿＿＿<p><img><img><img></p>の場合には、中央配置されることでわかるように、ブロック要素内の行内要素にすればよいことがわかります。 ＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>aaa01<a href="./""><img src="images/site01.jpg" width="250" height="400" alt="01">aaa01</a></li><!-- ＿＿＿＿--><li>aaa02<a href="./diary""><img src="images/site02.jpg" width="250" height="400" alt="02">aaa01</a></li><!-- ＿＿＿＿--><li>aaa03<a href="./profile"><img src="images/site03.jpg" width="250" height="400" alt="03">aaa01</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<p> ＿＿＿text-align:centerは、ブロック要素内のテキスト(インラインブロック要素を含む)を中央配置する。float:(left|right)を設定すると、それは独立したブロックになるので、floatさせたものをセンター配置することは矛盾した要望なので原理的に出来ない。 ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h2>フッター</h2> ＿</div> </body> </html>
お礼
貴方の回答が調査中？みたいな表示で昼頃から見られませんでしたので、返答が遅くなり失礼しました。 先の回答の内容とも照らし合わせながら今後の勉強にさせていただきます。 細やかなご返答ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
テキストエディタでのHTML作成ですね。それでしたら、この掲示板より 「HTML - 教えて！goo ( http://oshiete.goo.ne.jp/category/252/#google_ads1 )」などのほうが良いでしょう。 (ご利用のサービスによって、サイトは異なります。トップ→[技術者向] コンピューター → プログラミング → HTML ) さて、現在、HTML4.01transitionalで作成されているようですが・・ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "・・・ HTML4.01の勧告(1999/12)以来、transitonalは非推奨です。いまだに多く使われていますが・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ・・・【中略】・・・ 推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書/4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より 現在、数年後の勧告を目指して策定中のHTML5(2011/5月最終草案→勧告案→勧告)では、strictそのものの改定となります。そのうえで、HTMLとスタイルシートを書き換えてみました。(XHTMLの必要はないのでHTMLです。XHTMLの場合もstrictかXHTML1.1にしましょう。) きちんと書けば・・ ・HTMLもCSSも意外に簡単に書けること。 ・HTMLには文書構造しか書かれていないため、検索エンジンでも誰でも文書の構成がわかる(class="header,section,footer"はgoogleも理解してくれるHTML5の要素名です) ・HTMLにデザイン的に物がないため、スタイルシートでどのようにも変更できる。先でデザインをまったく変えるときもHTMLは書き直さなくてもよい。 注意) colorに薄い色を指定するときは、必ずスタイルシートでメディアタイプをscreenと指定しておかないと、印刷しても読めなくなる。 HTMLに重大なミスがたくさんあります。書いたら必ずAnother HTML-lintでチェックしてみましょう。ミスを指摘してくれる。 ★画像サイズと図示されたサイズが異なるので図に合わせてある。 [HTML]★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )で検証済み <!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=utf-8"> ＿<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 href="css/common.css" rel="stylesheet" type="text/css" media="screen"> ＿<link rel="START" href="../index.html"> </head> <body> ＿<div class="header"> ＿＿<h1>ヘッダー</h1> ＿</div> ＿<div class="section"> ＿＿<ul><!-- ulにはliがひとつ以上以外入れることは出来ません。div,pもだめ --> ＿＿＿<li>aaa01<img src="images/site01.jpg" width="250" height="400" alt="画像が読み込まれないことも考えて詳しく書く">aaa01</li> ＿＿＿<li>aaa01<img src="images/site02.jpg" width="250" height="400" alt="02">aaa01</li> ＿＿＿<li>aaa01<img src="images/site03.jpg" width="250" height="400" alt="03">aaa01</li> ＿＿</ul> ＿＿<p>過去ログを検索したのですが、同じような方法が載っていなくて質問させていただきます。</p> ＿＿<p>以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。</p> ＿＿<h2>floatを指定すると、</h2> ＿＿<p> ＿＿＿他と独立したブロックとなるからtext-alignは意味がない。ulをブロックにして、その中のliをインラインブロックにすると、当然text-alignが利く。これはHTML的には<p><inline-block><inline-block><inline-block></p>なのでね。inline-blockの巾が画像巾しかなければ、当然前後のテキストは改行される。 ＿＿</p> ＿</div> ＿<div class="footer"> ＿<h2>フッター</h2> ＿</div> </body> </html> [CSS]★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )で検証済み @charset "utf-8"; html,body{ ＿margin: 0;padding: 0; } /* 全称セレクタ*でmarginやpaddinを消さない */ body{ ＿line-height: 1.6em;/* 必ず単位をつける */ ＿font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; ＿background-color: #000; } div.header,div.footer{/* 共通なプロパティはセレクタをグループ化して記述する */ ＿height: 100px; ＿background-color:white;color:black; ＿height: 100px; } div.header { ＿margin-top: 50px; } div.header h2,div.footer h2{ ＿font-size:18px; } a img{ ＿border: none; } div.section{ ＿color: white; ＿width: 990px; ＿margin:0 auto; } div.section p{ ＿margin:0 1em; ＿text-indent:1em; } div.section ul{ ＿display:block; ＿padding:0;margin:0; ＿text-align: center; } div.section ul li{ ＿display:inline-block; ＿margin: 15px 0;/* 必ずサイズは1個,2個,4個 */ ＿width:250px;/* 画像の巾 */ }
お礼
貴方の回答が調査中？みたいな表示で昼頃から見られませんでしたので、返答が遅くなり失礼しました。 まず「HTML - 教えて！goo」の方は今後も参考にさせていただきます。 本文の内容ですが、検証サイトと照らし合わせながらも今後は作成したいと思います。 しかしながら言わんとすることはある程度理解できたのですが、内容がまだ私の頭では理解が難しく何度も復読してみることにします。 細かいご指摘ありがとうございました。
お礼
ありがとうございます、早速コードを入れ替えたところ無事に配置できました。 今から両方を見比べて、どこが違ったのかなどを検証して勉強したいと思います。 早速の回答非常に助かりました。