中央寄せ、縦並びに配置出来ない【画像あり】

中央寄せ、縦並びにならなくて困っています。
ただし、listの画像は横並びにしたいです。
教えていただけると幸いです。
※他のCSSが効いてしまっているのかもしれないですがさっぱりわからず、、、

html
1<div id="menuPage">
2  <ul id="menuList">
3	  <li><img src="images/20.png" /></li>
4	  <li><img src="images/22.png" /></li>
5	  <li><img src="images/23.png" /></li>
6  </ul>
7  <img id="menuName" src="images/08.png" />
8  <img id="clickMenu" src="images/menu1.jpg" />
9</div>

css
1#menuPage {
2  width: 960ox;	
3  margin-left: auto;
4  margin-right: auto;
5}
6
7#menuList li{
8  float: left;
9}
10
11#menuName {
12　clear: both;
13}
14
15#clickMenu {
16  clear:both;
17  width: 500px;
18  height: 453px;
19}

yambejp

2018/07/12 05:35

本文中に先頭文字を「#」にするとカテゴリになるので注意。画像サイズによって結果は微妙なので全体的なイメージ図を画像としてはると良いでしょう

kei344

2018/07/12 05:37

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

harebareyukai

2018/07/12 05:40

失礼しました。コード文を修正します。

kei344

2018/07/12 06:05

「中央寄せ」は何をどこの中央に置くのでしょうか。

harebareyukai

2018/07/12 06:20

参考画像を追加いたしました。

kei344

2018/07/12 06:24

画像とHTMLが違いますので、現状のHTML/CSSを提示するほうがよいですよ。

dit.

2018/07/12 06:29

floatではなくflexboxの利用は検討事項に入りますか？参考→ http://xn--web-oi9du9bc8tgu2a.com/css-basis-flex/ また、とりあえず現状で気になったところを指摘しておきます。#menuPageのwidthがpxではなくoxになっている。#menuNameのclear: both;の前の空白が全角になっている。

harebareyukai

2018/07/12 06:30

確認したところこのHTML/CSSが最新のようなのですが、どのあたりが違っていますでしょうか；

kei344

2018/07/12 06:32

アルゴリズムがどうとか書かれている文言はHTMLに画像かテキストで書かれていて、後続の要素に影響を与えていますよ。

harebareyukai

2018/07/12 10:07

＞kei344さん　「アルゴリズム〜」は別アプリの不具合で画面上に残ってしまっているものです。混同させてしまい申し訳ありません。

harebareyukai

2018/07/12 10:07

＞dit.さん　指摘有難うございます！

行動規範の内容に同意します

回答5件

ベストアンサー

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8"/>
5    <style>
6      *{
7        margin: 0;
8        padding: 0;
9      }
10      #menuPage{
11        border: 1px solid blue;/*確認用ボーダー*/
12        margin: 0 auto;
13        width: 80%;
14        display: flex;
15        flex-direction: column;
16      }
17      #menuList{
18        border: 1px solid red;/*確認用ボーダー*/
19        display: flex;
20        justify-content: center;
21        list-style: none;
22      }
23      #menuList li{
24        margin: 0 3px;
25      }
26      #menuName{
27        border: 1px solid red;/*確認用ボーダー*/
28        margin: 0 auto;
29        width: 100%;/*画像の元の大きさにしたい場合は消す*/
30      }
31      #clickMenu{
32        border: 1px solid red;/*確認用ボーダー*/
33        margin: 0 auto;
34        width: 100%;/*画像の元の大きさにしたい場合は消す*/
35      }
36    </style>
37  </head>
38  <body>
39    <div id="menuPage">
40      <ul id="menuList">
41        <li><img src="images/20.png" /></li>
42        <li><img src="images/22.png" /></li>
43        <li><img src="images/23.png" /></li>
44      </ul>
45      <img id="menuName" src="images/08.png" />
46      <img id="clickMenu" src="images/menu1.jpg" />
47    </div>
48  </body>
49</html>

dit.さんの言われているフレックスボックスでの一例置いていきます。
レイアウト中はボーダーを仮で書き込むと便利ですよ|ーﾟ)

投稿2018/07/12 13:35

退会済みユーザー

総合スコア0

harebareyukai

2018/07/13 17:04 編集

flexの使用方法を具体的に教えてくださったharu_himeさんをベストアンサーとしたいと思います。また、確認用ボーダーを使うことも覚えておきます。ありがとうございました。

行動規範の内容に同意します

ざっくり

CSS
1#menuPage {
2  width: 960px;
3  text-align: center;
4}
5#menuList li{
6  display: inline;
7}
8#menuName {
9}
10#clickMenu {
11  width: 500px;
12  height: 453px;
13}

HTML
1<img id="menuName" src="images/08.png" /><br />
2<img id="clickMenu" src="images/menu1.jpg" />

floatはブロック要素を横に並べる為だけに使わない方が良いです。
他の方も言ってますが、imgはインライン要素(文字と同義)なので、普通に置いただけだと横に並んでしまうので<br>を入れました。imgふたつをdiv要素で囲ってあげると取り回し易くなるかもしれません。
この方法はいささか強引な方法なので、要素間に隙間ができたりします。ぴったりさせたい場合はflexboxの使用を検討すると良いかもしれません。

手書き画像でもアウトラインを示して貰うと結果が分かりやすくていいですね。がんばってください。

投稿2018/07/12 13:26

efcode

総合スコア422

harebareyukai

2018/07/13 03:27 編集

ありがとうございます。初心者なので分からないことも多いのですが、できるだけ分かりやすい質問するように心がけたいです。 <br>を入れるのも手だと覚えておきます。

行動規範の内容に同意します

皆さまありがとうございました。
参考にさせていただき、最終的にこのような記述にしました。
flexboxはfloatよりも使いやすいですね。
これから積極的に使いこなせていければと思います。

css
1      #menuPage{
2        /*border: 1px solid blue;/*確認用ボーダー*/
3        width: 960px;
4	margin-left: auto;
5        margin-right: auto;
6        display: flex;
7        flex-direction: column;
8      }
9      #menuList{
10        /*border: 1px solid red;/*確認用ボーダー*/
11        display: flex;
12        justify-content: center;
13      }
14      #menuList li{
15        margin: 0 3px;
16      }
17      #menuName{
18        /*border: 1px solid red;/*確認用ボーダー*/
19		display: flex;
20		justify-content: center;
21      }
22      #clickMenu{
23        /*border: 1px solid red;/*確認用ボーダー*/
24        display: flex;
25		justify-content: center;
26      }

投稿2018/07/13 03:36

harebareyukai

総合スコア15

自分ならどう書くかな？と遊んでみました。
画像はダミー、画像やタイトルの装飾もCSSでやっているので余計な記述もあります。
※タイトル下の装飾はこちらを参考にしました。

css
1img{
2  max-width:100%;
3  height:auto;
4}
5#menuPage{
6  background-color:#eee; /* 確認用背景 */
7  width:960px;
8  margin:0 auto;
9  text-align:center;
10}
11ul , li {
12  list-style: none;
13  margin:0;
14  padding:0;
15}
16ul#menuList{
17  display: -webkit-box;
18  display: -ms-flexbox;
19  display: flex;
20  -webkit-box-pack: center;
21  -ms-flex-pack: center;
22  justify-content: center;
23}
24#menuList li{
25  padding:10px;
26}
27#menuList li img{
28  border-radius: 50%;
29  -webkit-border-radius: 50%;
30  -moz-border-radius: 50%;
31  border:solid #74b026 4px;
32}
33#menuName h1{
34  position: relative;
35  display: inline-block;
36  margin-bottom: 15px;
37}
38#menuName h1:before {
39  content: '';
40  position: absolute;
41  bottom: -5px;
42  display: inline-block;
43  width: 100px;
44  height: 5px;
45  left: 50%;
46  -moz-transform: translateX(-50%);
47  -webkit-transform: translateX(-50%);
48  -ms-transform: translateX(-50%);
49  transform: translateX(-50%);
50  background-color: #74b026;
51}
52#menuName p{
53  text-align:left;
54  width:500px;
55  margin:0 auto;
56}

html
1<div id="menuPage">
2  <ul id="menuList">
3    <li><img src="http://placehold.jp/8c815b/ffffff/120x120.png?text=menu1" alt="menu1"></li>
4    <li><img src="http://placehold.jp/8c815b/ffffff/120x120.png?text=menu2" alt="menu2"></li>
5    <li><img src="http://placehold.jp/8c815b/ffffff/120x120.png?text=menu3" alt="menu3"></li>
6  </ul>
7  <div id="menuName">
8    <h1>クロワッサン</h1>
9    <p>
10      生地にフレッシュバターを贅沢に使用。<br>
11      バターの風味豊かなクロワッサン。
12    </p>
13  </div>
14  <div id="clickMenu">
15    <img src="http://placehold.jp/c4ae66/ffffff/500x453.png?text=croissant" alt="クロワッサン">
16  </div>
17</div>

投稿2018/07/13 02:16

dit.

総合スコア3235

harebareyukai

2018/07/13 03:41 編集

ありがとうございます。勉強になりました。画像容量も考えてCSSで出来る装飾はCSSでやるのが一般的なのでしょうか？

dit.

2018/07/13 04:03

一般的かどうかはわかりませんが、ちょっとだけ文字が変わったり、ちょっとだけ画像が変わったりしたときにいちいち画像編集するのが面倒なので、私の場合できる部分はCSSでやってます。プロの方が見たら笑っちゃうような書き方をしてる可能性もありますが…。また、タイトルや説明を画像化してしまうとSEO的によろしくない…という情報もありますので、写真やロゴ以外の部分はできるだけ画像化したくない　というのもあります。 https://webnaut.jp/direction/647.html

harebareyukai

2018/07/13 17:03 編集

安易に画像化するのも良くないのですね‥‥。さくっとCSSで装飾出来るように頑張ります。参考記事も添付してくださり、ありがとうございました。

行動規範の内容に同意します

<img>タグはちゃんとしたブロック要素ではないので、ブロック要素で囲ってあげるのが一般的かと思います。フロートクリアもブロック要素につけちゃいましょう。

 <p id="menuName"> <img src="images/08.png" /></p>
 <p> <img id="clickMenu" src="images/menu1.jpg" /></p>

上記だとid、clickMenuのクリアはいらなくなります。

#clickMenu {
  width: 500px;
  height: 453px;
}

投稿2018/07/12 07:19

i_sugiyama_tomo

総合スコア85

harebareyukai

2018/07/12 14:57

有難うございます。imgタグに対するidにはclear:both;が効かないのでしょうか。menuNameをpタグにつけかえるとうまくいきました。 #menuName { 　clear: both; }

harebareyukai

2018/07/12 15:19

すみません、そんなこともありませんでした。

i_sugiyama_tomo

2018/07/12 23:57

何が起こりました？教えていただけますと私も助かります

harebareyukai

2018/07/13 03:25

ソースを色々と書き直している中で勘違いしました。失礼しました！ imgタグはｐタグで囲むのが通常なのでしょうか？

i_sugiyama_tomo

2018/07/13 05:14

HTMLタグには大きく2分類あって、画面上の構成要素となる「ブロック要素」とブロック要素を修飾するための「インライン要素」になります。ややこしいのですがimgタグで画像を表示する場合はインライン要素として表示されます。こうなると自動で次の行に送られません。これを回避する方法としては2つあって一つはプロック要素のｐタグやdivタグなどで囲って「ブロック要素の中身」として表示する方法。もう一つはCSSで「display:block」をつけてあげて「ブロック要素として表示」する方法です。私自身はimgタグに「display:block」をつけるのはあまり見たことがないです。

harebareyukai

2018/07/13 17:05 編集

よく分かりました。 imgタグをブロック要素としたいときはpタグやdivタグで囲むようにします。ご丁寧にありがとうございました。

行動規範の内容に同意します

あなたの回答