プロが教える店舗&オフィスのセキュリティ対策術

Divの中に設定したimgを、そのDivの幅のセンターに設定したいと思います。
どのようにすれば実現できるのでしょうか?

下記のHTML/CSSは、ウィンドウの幅を変化させると、myMenuもそれに応じて伸縮します。
テキストのセンターよりは実現できていますが、画像のセンターよりは実現しできていません。
宜しくお願い致します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
.myMenu {
width: 20%;
min-width: 150px;
background-color:dodgerblue;
}
</style>
</head>

<body>
<div class="myMenu">
<a href="#">
<p style="text-align:center;padding:0;margin:0;">xxxxx</p>
<img src="img1.JPG" alt="" width="140" height=auto />
</a>
<a href="#">
<p style="text-align:center;padding:0;margin:0;">YYYYY</p>
<img src="img2.JPG" alt="" width="140" height=auto />
</a>
</div>
</body>
</html>

A 回答 (5件)

見よう見まねではなく、最初からきちんと学び直したほうが、絶対に上達は早い。


<!doctype html><-- HTML5ですね-->
なら、<div class="myMenu">のようにdivを使ってはなりません。(HTML5の根幹に関わる重要な基本)
 20年前にHTML4.01が勧告されたとき以来、構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )が言われ続けてきて、その時にdivはidやclassを使って文書構造をマークアップするものとされました。文書のヘッダなら<div class="header">とか。それでもりかいされることが少なく、その反省からHTML5では、文書構造を示す要素(header,section,navなど)が追加され、divは、それらがない時以外は使わないことになりましたね。
Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )
 著者は他に適切な要素がない時の最後の手段としてdivを使うことが強く推奨される。

 また、HTMLの基本概念であるブロック要素/インライン要素の区別もできていない。
<a href="">
 <p>・・・・</p>
</a>
 は原則としてできない。(HTML5ではエラーにはならない)
 それでも、この場合は
<p>
 <a href=""></a>
</p>
とすべきです。
 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

まず、HTMLは率直にデザインは一切考えず、ひたすら文書構造だけをマークアップします。
★imageのheight属性の値にautoはありません。
★HTMLの場合、<img **** />ではありません。あってもよいがXHTMLだとややこしくなる

 あなたの場合
<body>
 <header>
  <h1>見出し</h1>
  <nav>
   <ul>
    <li><a href="">XXXX<img src="" width="" height="" alt=""></a></li>
だけでよい。こうしておけば、後でどうにでもデザインできるし、検索エンジンにも内容を伝えられる(SEO:検索エンジン最適化)し、メンテナンスがとても楽。

そのうえでスタイルシートでデザインする。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄好きにデザイン変えられる。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
を代替スタイルシートに対応しているIEかFirefoxで訪問して、[表示]メニュー→[スタイル(シート)]に進み、色々なスタイルを選択してごらんなさい。HTMLには、一切プレゼンテーションに関わることを書かないようにすると、好きにデザインできる。

サンプルです。たったこれだけ。HTMLにはフレゼンテーションに関わることは一切書かれていないために、どのようにでもデザインてきます。気が変わったらいつでも変更できる。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 の右上のDATAに貼りつけてチェックずみ
★タブは_に置換してあるので戻すこと。

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA">
<style media="screen">
<!--
html,body{margin:0;psdding:0;}
header{position:relative;}
header nav{position:absolute;z-index:1000;top:100%;
/* ここから */
width: 20%;
min-width: 150px;
background-color:dodgerblue;
text-align:center;/* 中央配置(継承される) */
}
header nav ul{
list-style-type:none;/* リストで表示しない */
margin:0;padding:0;/* リスト用余白を取り除き */
}
header nav ul li{
margin:0 auto;
position:relative;
width:140px;
}
header nav ul li a img{
width:140px;/* 元画像の幅に関係なく固定 */
height:auto;
}

-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#a">XXXXXX<img src="img1.JPG" alt="" width="140" height="80"></a></li>
____<li><a href="#b">YYYYYY<img src="img2.JPG" alt="" width="240" height="80"></a></li>
____<li><a href="#c">ZZZZZZ<img src="img3.JPG" alt="" width="140" height="120"></a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
__<aside>
___<h3>Something aside</h3>
__</aside>
_</section>
__<h3>A nice footer</h3>
_<footer>
_</footer>
</body>
</html>
    • good
    • 0
この回答へのお礼

ORUKA1951様、ありがとうございます。
スクリーンリーダーで読み上げる時を想定して、HTMLを構築するということ、理解しました。
非常にありがたい情報を数多くいただきました。ありがとうございます。
インライン要素、ブロック要素について理解しました。画像もテキストもinline要素であることを分かっておりませんでした。

サンプルにて、1つ質問があります。
<h2>A smaller heading</h2>
<h3>Something aside</h3>
<h3>A nice footer</h3>
が表示されません。
これは、どうすれば表示されるようになるのでしょうか?

ここでサジェスチョン下さった事柄をすべて理解するのには、まだ、時間が必要です。
まずは、お礼を申し上げます。

お礼日時:2017/03/07 21:07

ANo2です



> 小生の問題は、テキストではありません。画像です。
少し思い違いをなさっているようです。

参考に挙げたサイトをご覧になればわかると思いますが、画像もテキストもinline要素ですので、alignに対しての挙動は同じになります。

対象がblock要素の場合は方法は異なりますが、それも含めて記載されていたはずです。
参考で挙げたサイトはあくまでも一例ですので、ご自分で検索なさってみれば、似たようなCSSの紹介サイトが数多くヒットするはずです。
    • good
    • 0
この回答へのお礼

fujillin様、ありがとうございます。
画像も、テキストも同じインライン要素であることを、全く、理解しておりませんでした。
感謝します。
今回の質問の件は、解決しました。ありがとうございます。

ただ、貴兄の以下の部分が、きちんと理解できていません。
「inline要素が対象であるなら、その親要素(block)に text-align: center; を設定しておけば良い」

img要素をP要素の中に入れた時は、上記の文章通りであるので分かるのですが、P要素内のテキストが対象である場合、上記の文章通りではありません。P要素内のテキストは、テキストだけで、inline要素と捉えるべきなのでしょうか?

以上、よろしくお願い致します。

お礼日時:2017/03/07 21:23

#1ですが、簡単に書くとこうですがどうでしょ?


まぁbrがいやなら別の方法を考えないといけませんが・・・

<div class="myMenu">
<p style="text-align:center;padding:0;margin:0;">
<a href="#">
xxxxx<br>
<img src="img1.JPG" alt="" width="140" height=auto />
</a>
</p>
<p style="text-align:center;padding:0;margin:0;">
<a href="#">
YYYYY<br>
<img src="img2.JPG" alt="" width="140" height=auto />
</a>
</p>
</div>
    • good
    • 0
この回答へのお礼

yambejp様、ありがとうございます。
画像も、テキストも同じインライン要素であることを、全く、理解しておりませんでした。
感謝します。
今回の質問の件は、解決しました。ありがとうございます。

お礼日時:2017/03/07 21:24

こんにちは



inline要素が対象であるなら、その親要素(block)に text-align: center; を設定しておけば良いはずです。

他にもいろいろ方法はあるようですが、検索すれば容易に見つかるものと思います。
例えば、
https://creatorclip.info/2014/05/css-layout-cent …
http://taneppa.net/css_center/
    • good
    • 0
この回答へのお礼

ありがとうございます。

しかし、 小生の問題は、テキストではありません。画像です。
Textに対しては、既に text-align:center; は、織り込み済みです。
---------
img2.jpgをdivのセンターに持ってきたいのです。

お礼日時:2017/02/27 19:40

>テキストのセンターよりは実現できていますが



テキストだってpに入れているからセンタリングされているだけですよね?
imgも同様にpに入れればいいのでは?

もしくは
.myMenu {text-align:center;}
とするか
.myMenu img{display:block;margin:auto;border:1px solid;}
としてください
    • good
    • 0
この回答へのお礼

ありがとうございます。

.myMenu img{display:block;margin:auto;border:1px solid;}
これを、Styleの中に記述しましたが、うまく行きませんでした。
テキストはセンターに持って来れても、画像は不可能ということになりますか・・・

お礼日時:2017/02/27 19:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!