h1とh2の右側のスペースに画像を表示させたい

色々とタグを入れ替えてためしてみましたが、うまくいきません。
リストが右側によったりと私がイメージしているようにはいきません。
ご教授お願い致します。

HTML
1<body>
2	<div class="wrapper01">
3/*省略*
4<main>
5		<h1>*************</h1>
6		<div class="box-text">
7		<div class="box-img01">
8	<img src="images/**********.jpg" alt="***">
9</div>
10		<h2>*****************！！<br>**********************************！！</h2>
11		<div class="menu">
12		<h3>&lt;*******&gt;</h3>
13		<ul>
14			<li>***********</li>
15			<li>********************</li>
16			<li>******/li>
17		</ul>
18	</div>
19<div class="float-claer02">
20</div>
21</div>
22<div cladd="box-text02">
23	<h1>************ ********</h1>
24	<h2>********************************！！</h2>
25	<h3>&lt;*****&gt;</h3>
26	<ul>
27		<li>**********</li>
28		<li>***************</li>
29		<li>*******************</li>
30		<li>************************</li>
31
32
33
34
35
36
37</main>

CSS
1@charset "utf-8";
2
3.menu{
4display:flex;
5justify-content:space-between;
6}
7h1{
8	font-size: 30px;
9	margin-top: 65px;
10}
11h2{
12	font-size: 25px;
13	margin-top: 24px;
14}
15h3{
16	font-size: 20px;
17	margin-top: 15px;
18	margin-bottom: 5px;
19}
20.box-img01{
21    text-align: right;
22    margin-bottom: 0.5em;
23 }
24 .box-img{
25 	margin-top: 10px;
26 	margin-right: 0px;
27 	margin-bottom: 0.5em;
28 	vertical-align: baseline;
29 }
30.float-claer{
31    overflow: hidden;
32    text-align: right;
33}
34ul{
35    list-style-type:-2em;
36    font-size: 16px;
37}
38.menu li{
39    font-size: 22px;
40    text-indent: 2em;
41    line-height: 1.5;
42}

CSS
1html, body, div, span, object, iframe,
2h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3abbr, address, cite, code,
4del, dfn, em, img, ins, kbd, q, samp,
5small, strong, sub, sup, var,
6b, i,
7dl, dt, dd, ol, ul, li,
8fieldset, form, label, legend,
9table, caption, tbody, tfoot, thead, tr, th, td,
10article, aside, canvas, details, figcaption, figure, 
11footer, header, hgroup, menu, nav, section, summary,
12time, mark, audio, video {
13    margin:0;
14    padding:0;
15    border:0;
16    outline:0;
17    font-size:100%;
18    vertical-align:baseline;
19    background:transparent;
20}
21
22body {
23    line-height:1;
24}
25
26article,aside,details,figcaption,figure,
27footer,header,hgroup,menu,nav,section { 
28    display:block;
29}
30
31nav ul {
32    list-style:none;
33}
34
35blockquote, q {
36    quotes:none;
37}
38
39blockquote:before, blockquote:after,
40q:before, q:after {
41    content:'';
42    content:none;
43}
44
45a {
46    margin:0;
47    padding:0;
48    font-size:100%;
49    vertical-align:baseline;
50    background:transparent;
51}
52
53/* change colours to suit your needs */
54ins {
55    background-color:#ff9;
56    color:#000;
57    text-decoration:none;
58}
59
60/* change colours to suit your needs */
61mark {
62    background-color:#ff9;
63    color:#000; 
64    font-style:italic;
65    font-weight:bold;
66}
67
68del {
69    text-decoration: line-through;
70}
71
72abbr[title], dfn[title] {
73    border-bottom:1px dotted;
74    cursor:help;
75}
76
77table {
78    border-collapse:collapse;
79    border-spacing:0;
80}
81
82/* change border colour to suit your needs */
83hr {
84    display:block;
85    height:1px;
86    border:0;
87    border-top:1px solid #cccccc;
88    margin:1em 0;
89    padding:0;
90}
91
92input, select {
93    vertical-align:middle;
94}

hatena19

2020/12/02 00:02

ご希望のレイアウトが言葉だけでは伝わらないので、画像で提示できませんか。また、HTMLを変更してもいいですか。

FKM

2020/12/02 01:10

htmlが色々不備あるのでは？もちろん、原本のままではないでしょうが。ulの閉じタグがなかったり…

let

2020/12/02 01:27

HTMLは変更していただいて構いません。エクセルで作った図を添付いたします。

FKM

2020/12/02 01:32

CSSの制御問題はCSS側だけでなく、htmlにも起因することが多い（構造やhtmlタグの不備によってCSSの制動が変わる）ので、こっちで勝手に補完してもしょうがないですよ。なので、極力、依頼側が解決に協力する姿勢を向けてくれない限り、他の方もアドバイスのしようがないです。

let

2020/12/02 01:39

申し訳ありません。図のイメージ通りにタグを設置できないので図の形で表示させていただきました。 ul-liの横のスペースにはご教授いただき設定出来たのですが同じやり方ではリスト部分も右に移動してしまい思い通りにできませんでした。

FKM

2020/12/02 01:43

たとえば、box-text02直下のulタグは閉じてないですが、最初からそうなっていますか？

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

回答2件

ベストアンサー

HTMLは、
h1 h2 menu をdivで囲む。
box-img01 をその後に配置。
上記を<div class="wrapper">で囲む。

CSSは、
.wrapperにflexを設定して子要素を横並びに。

html
1<main>
2  <div class="wrapper">
3    <div class="box-text">
4      <h1>h1 *************</h1>
5      <h2>h2*****************！！<br>**********************************！！</h2>
6      <div class="menu">
7        <h3>&lt;h3*******&gt;</h3>
8        <ul>
9          <li>li***********</li>
10          <li>li********************</li>
11          <li>li******</li>
12        </ul>
13      </div>
14    </div>
15    <div class="box-img01">
16      <img src="https://placehold.jp/150x150.png" alt="***">
17    </div>
18  </div>
19
20<!-- 略 -->
21
22</main>

css
1@charset "utf-8";
2/* 以下挿入 */
3.wrapper {
4 display:flex;
5 justify-content:space-between; 
6}
7
8/* 削除 ここから 
9.menu{
10display:flex;
11justify-content:space-between;
12} 
13ここまで */
14
15/* 中略 */
16
17.box-img01{
18    text-align: right;
19    margin-bottom: 0.5em;
20    margin-top: 65px; /* 追加 画像の位置合わせ 適宜調整 */
21}

投稿2020/12/02 01:54

編集2020/12/02 01:55

hatena19

総合スコア34073

let

2020/12/02 02:04

cllass=wapperは、box-img01で一度閉じてしまって、box-img02で再度wapperで囲む形の認識で問題ないですか？

hatena19

2020/12/02 02:12

やってみて問題がなければ問題ないです。あれば、どこが問題か説明してください。

let

2020/12/02 02:21

今タグを打ち直ししましたが、ul-liのリストの横のスペースに画像がいています。これをもう少し上に上げたいですが難しいですか？

hatena19

2020/12/02 02:34

.box-img01 の margin-top の値を小さくすれば上に移動すると思います。

let

2020/12/02 02:43

出来ました。ありがとうございましたまた何かありましたらお願い致します

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

こんにちは。

サンプル

css
1.box-text {
2	display: grid;
3	grid-template: auto auto / auto auto;
4}
5.box-img01 {
6	grid-column: 2;
7	grid-row: 1 / span 2;
8}
9h2 {
10	grid-column: 1;
11	grid-row: 1;
12}

投稿2020/12/02 01:44

Lhankor_Mhy

総合スコア36928

let

2020/12/02 02:44

初めてみるタグなのでまたの機会にためしてみたいと思います。お答えいただきありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

h1とh2の右側のスペースに画像を表示させたい

関連した質問