質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1111閲覧

fiexタグで横並びにしたレイアウトを一部縦並びのレイアウトにしたい

let

総合スコア41

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/04/08 08:31

編集2019/04/08 09:16

前提・実現したいこと

ここにより詳細な情報を記載してください。
flexで横並びのメニューで一部を縦並びにしたい

ul、liでメニューを作成しました。
画像を2個をセットにして作成しています。
メニューの中で電話番号とFAX番号は画像を横並びに、他のメニューは画像の下に来るように作りました。
その中で電話番号とFAX番号の横並びにしたまま縦並びにしたいのですがうまくいきません。
gazou1とgazou2の下にgazou3とgazou4を上下に並べたいです。
申し訳ありませんが皆さまお力をかしてください。
宜しくお願い致します。

<ul class="menu">  <li><p><img src="a.png" alt="ロゴ"></p></li>  <li><p><img src="gazou1.png" alt="a"></p></li>  <li><p><img src="gazou2.png" alt="a2"></p></li></div> <li><p><img src="gazou3" alt="a3"></p></li>  <li><p><img src="gazou4.png" alt="a3"></p></li></div>  <!-- ここまでは画像横並び -->  <li><p><img src="gazou5.png" alt="~"></p><img src="gazou6.png" alt="a4"></li>  <li><p><img src="gazou6.png" alt="~"></p><p><img src="gazou7.png" alt="a5"></p></li>  <li><p><img src="gazou8.png" alt="~"></p> <p><img src="gazou9.png" alt="a6"></p></li>  <li><p><img src="gazou10.png" alt="~"></p><p><img src="gazou11.png" alt="a7"></p></li>  <li><p><img src="gazou12.png" alt="~"></p><p><img src="gazou13.png" alt="a8"></p></li>  <!--ここまで子要素縦改行--> </ul>

CSSコード

1div{ 2 max-width: 1000px; 3 margin-right:auto; 4 margin-left:auto; 5} 6 7.menu{ 8 display: -webkit-flex; 9 display:flex; 10 justify-content: center; 11 align-items:start; 12 flex-wrap: wrap; 13 14} 15li{ 16 list-style-type:none; 17 18} 19p{ 20 align-items:start; 21 margin:0; 22} 23 24h1,h2,footer{ 25 text-align:center; 26} 27img{ 28 max-width: 100%; 29 display:block; 30 margin-right: auto; 31 margin-left: auto; 32} 33ul{ 34 padding: 0; 35 36} 37

試したこと

divタグを入れてgazou3とgazou4をdisplay:inline-blockをCSSで指定したんですが、レイアウトが壊れてしまいしました。
align-selfで設定できるかなと考えていたのですがgazou3とgazou4を横並びに指定したままgazou1とgazou2の下にレイアウトする方法を調べたのですが
見つかりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/04/08 08:40

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

2019/04/08 09:09

<code>で囲みました。 そうやって質問しないといけないんですね、勉強になります。 ありがとうございます。
guest

回答1

0

ベストアンサー

質問者さんの実現したいことは、以下のように行えると思います(動作確認用リンク)。

HTML

1<ul class="menu"> 2 <li> 3 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=a.png" alt="ロゴ"></p> 4 </li> 5 <li> 6 <ul> 7 <li> 8 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou1.png" alt="a"></p> 9 </li> 10 <li> 11 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou2.png" alt="a2"></p> 12 </li> 13 </ul> 14 <ul> 15 <li> 16 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou3" alt="a3"></p> 17 </li> 18 <li> 19 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou4.png" alt="a3"></p> 20 </li> 21 </ul> 22 </li> 23 <!-- ここまでは画像横並び --> 24 <li> 25 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou5.png" alt="~"></p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou6.png" alt="a4"></li> 26 <li> 27 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou6.png" alt="~"></p> 28 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou7.png" alt="a5"></p> 29 </li> 30 <li> 31 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou8.png" alt="~"></p> 32 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou9.png" alt="a6"></p> 33 </li> 34 <li> 35 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou10.png" alt="~"></p> 36 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou11.png" alt="a7"></p> 37 </li> 38 <li> 39 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou12.png" alt="~"></p> 40 <p><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=gazou13.png" alt="a8"></p> 41 </li> 42 <!--ここまで子要素縦改行--> 43</ul>

CSS

1div { 2 max-width: 1000px; 3 margin-right: auto; 4 margin-left: auto; 5} 6 7.menu { 8 display: -webkit-flex; 9 display: flex; 10 justify-content: center; 11 align-items: start; 12 flex-wrap: wrap; 13} 14li { 15 list-style-type: none; 16} 17p { 18 align-items: start; 19 margin: 0; 20} 21 22h1, 23h2, 24footer { 25 text-align: center; 26} 27img { 28 max-width: 100%; 29 display: block; 30 margin-right: auto; 31 margin-left: auto; 32} 33ul { 34 padding: 0; 35} 36 37li > ul { 38 display: flex; 39} 40

投稿2019/04/08 08:47

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

let

2019/04/08 09:08

ulにulを入れ子しているという事になるんでしょうか?
s8_chu

2019/04/08 09:09

その理解でも問題ないと思います。
let

2019/04/08 09:14

imgにURLが組み込まれてますがこれは一例って事ですか? それとも、画像の前にいれて置かないと正常に作動しないですか?
s8_chu

2019/04/08 09:17 編集

> imgにURLが組み込まれてますがこれは一例って事ですか? はい、一例として組み込んでいます。 今回は、実行結果がどのようになるかを確認しやすくするため、`img`要素の`src`属性に URL を指定していますが、質問者さんが用意したものと置き換えても動作すると思います。
let

2019/04/08 09:22

HTMLの5行目の<li>には何も項目が入っていませんがこれは</li>で閉じずにいるのにはどういう効果があるんでしょうか?質問ばかりで申し訳ありません。
s8_chu

2019/04/08 09:25

> HTMLの5行目の<li>には何も項目が入っていませんが いいえ、`ul`要素が入っています。 先ほど上で「ulにulを入れ子しているという理解で問題ない」と書きましたが、正確には`li`要素内に`ul`要素を入れています。
let

2019/04/08 09:30

liにulを入れ子してるのですね。 本当に勉強になります。 早速試してみます。
s8_chu

2019/04/08 09:57

> 早速試してみます。 頑張ってください。 もし問題が解決した場合は、質問を解決済みにしておいてください。
let

2019/04/08 09:59

思い通りにできました。 本当にありがとうございます。 色々調べて、色々試してレイアウトが崩れてを繰り返していたので本当に感激です。 liにulを入れ子とかそんな発想もでませんでした、もっともっと勉強しないといけないといけないですね。 本当にありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問