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件)
- 最新から表示
- 回答順に表示
No.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>
ORUKA1951様、ありがとうございます。
スクリーンリーダーで読み上げる時を想定して、HTMLを構築するということ、理解しました。
非常にありがたい情報を数多くいただきました。ありがとうございます。
インライン要素、ブロック要素について理解しました。画像もテキストもinline要素であることを分かっておりませんでした。
サンプルにて、1つ質問があります。
<h2>A smaller heading</h2>
<h3>Something aside</h3>
<h3>A nice footer</h3>
が表示されません。
これは、どうすれば表示されるようになるのでしょうか?
ここでサジェスチョン下さった事柄をすべて理解するのには、まだ、時間が必要です。
まずは、お礼を申し上げます。
No.4
- 回答日時:
ANo2です
> 小生の問題は、テキストではありません。画像です。
少し思い違いをなさっているようです。
参考に挙げたサイトをご覧になればわかると思いますが、画像もテキストもinline要素ですので、alignに対しての挙動は同じになります。
対象がblock要素の場合は方法は異なりますが、それも含めて記載されていたはずです。
参考で挙げたサイトはあくまでも一例ですので、ご自分で検索なさってみれば、似たようなCSSの紹介サイトが数多くヒットするはずです。
fujillin様、ありがとうございます。
画像も、テキストも同じインライン要素であることを、全く、理解しておりませんでした。
感謝します。
今回の質問の件は、解決しました。ありがとうございます。
ただ、貴兄の以下の部分が、きちんと理解できていません。
「inline要素が対象であるなら、その親要素(block)に text-align: center; を設定しておけば良い」
img要素をP要素の中に入れた時は、上記の文章通りであるので分かるのですが、P要素内のテキストが対象である場合、上記の文章通りではありません。P要素内のテキストは、テキストだけで、inline要素と捉えるべきなのでしょうか?
以上、よろしくお願い致します。
No.3
- 回答日時:
#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>
yambejp様、ありがとうございます。
画像も、テキストも同じインライン要素であることを、全く、理解しておりませんでした。
感謝します。
今回の質問の件は、解決しました。ありがとうございます。
No.2
- 回答日時:
こんにちは
inline要素が対象であるなら、その親要素(block)に text-align: center; を設定しておけば良いはずです。
他にもいろいろ方法はあるようですが、検索すれば容易に見つかるものと思います。
例えば、
https://creatorclip.info/2014/05/css-layout-cent …
http://taneppa.net/css_center/
ありがとうございます。
しかし、 小生の問題は、テキストではありません。画像です。
Textに対しては、既に text-align:center; は、織り込み済みです。
---------
img2.jpgをdivのセンターに持ってきたいのです。
No.1
- 回答日時:
>テキストのセンターよりは実現できていますが
テキストだってpに入れているからセンタリングされているだけですよね?
imgも同様にpに入れればいいのでは?
もしくは
.myMenu {text-align:center;}
とするか
.myMenu img{display:block;margin:auto;border:1px solid;}
としてください
ありがとうございます。
.myMenu img{display:block;margin:auto;border:1px solid;}
これを、Styleの中に記述しましたが、うまく行きませんでした。
テキストはセンターに持って来れても、画像は不可能ということになりますか・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンの選択リストの中に...
-
ボタンをセル内一杯に表示させ...
-
画像とテーブルの隙間をなくす。
-
htmlで画像を2個ずつ並べていき...
-
XML画像データををHTMLで簡単に...
-
footerの背景が切れて、背景画...
-
ホームページの一番下に配置し...
-
cssで、チェックボックスの画像...
-
XSL変換したが画像が表示できま...
-
レスポンシブ対応のHTML・CSS(...
-
チェックボックスの影
-
写真とキャプションを横並びに...
-
画像のサイズが変わらない
-
機種依存文字、m2(平方メート...
-
リンクをつけた画像をクリック...
-
htmlの文字が縦書きになる
-
div要素が重なってします
-
htmlのolやulなどlistにtitleや...
-
CSSのクラス名・ID名の指定でワ...
-
初心者html・CSS ウィンドウを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
UDP通信を使うチャットプログラ...
-
画像をクリックして元に戻すには
-
HTMLタグのDL DT DDを使ってli...
-
画像の場合のみ、下線を消す方...
-
画像のサイズが変わらない
-
htmlで画像を2個ずつ並べていき...
-
XML画像データををHTMLで簡単に...
-
プルダウンの選択リストの中に...
-
HTMLのIMAGEに。。
-
Javascriptで画像の大きさを%指...
-
inputタグでサーバにデータを送...
-
リンク画像のマウスオーバー時...
-
水面の波紋
-
cssでrowの中で高さの違う左右...
-
ポップアップウィンドウのサイ...
-
同一URLの連続アクセス方法
-
ホームページタグ打ち。サイズ...
-
画像を縦に並べたら隙間ができ...
おすすめ情報