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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Q&A

解決済

2回答

790閲覧

文字を画像の中央に重ねることができない。

wkou4627

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

0グッド

1クリップ

投稿2022/12/11 15:03

前提

progateのレッスンで、ウェブページを作っています。
見本通りに画像と文字を重ねることができません。

実現したいこと

画像上段は、自分が作っているページです。
下段が、見本になります。
4つの画像の中央に、それぞれ文字を重ねたいです。

イメージ説明

該当のソースコード

HTML

1 2<section class="second-wrapper"> 3 <div class="container"> 4 <h2>Learn Where to Get Started!</h2> 5 6<div class="lesson"> 7 <figure> 8 <img class="icon" src="https://prog-8.com/images/html/advanced/html.png"> 9 <p class="name">HTML & CSS</p> 10 <figcaption class="icon-directon"> 11 ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。 12 </figcaption> 13 </figure> 14 15 <figure> 16 <img class="icon" src="https://prog-8.com/images/html/advanced/jQuery.png"> 17 <p class="name">jQuery</p> 18 19 <figcaption class="icon-directon"> 20 素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。 21 </figcaption> 22 </figure> 23 24 <figure> 25 <img class="icon" src="https://prog-8.com/images/html/advanced/ruby.png"> 26 <p class="name">Ruby</p> 27 28 <figcaption class="icon-directon"> 29 オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。 30 </figcaption> 31 </figure> 32 33 <figure> 34 <img class="icon" src="https://prog-8.com/images/html/advanced/php.png"> 35 <p class="name">PHP</p> 36 37 <figcaption class="icon-directon"> 38 HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。 39 </figcaption> 40 </figure> 41 42 </div> 43 </div> 44 </section> 45

CSS

1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21/* ここからCSSを書いていきましょう */ 22 23.second-wrapper { 24 background-color: #f7f7f7; 25 height: 580px; 26} 27 28.container { 29 width: 1170px; 30 margin: 0 auto; 31 } 32 33h2 { 34 text-align: center; 35 color: #5f5d60; 36 font-weight: normal; 37 padding: 80px 0 50px 0; 38} 39 40.lesson { 41 display: flex; 42 width: 100%; 43 44} 45 46figure { 47 width: 80%; 48 position: relative; 49 50} 51 52figcaption { 53 padding-top: 15px; 54} 55 56.icon { 57 58} 59 60.name { 61 /*color: white;*/ 62 position: absolute; 63 top: 90px; 64} 65 66.icon-directon { 67 color: #b3aeb5; 68 font-size: 13px; 69 padding-top: 15px; 70} 71

試したこと

.name に right: を設定してみましたが、うまく中央に揃えることができませんでした。

補足情報(FW/ツールのバージョンなど)

「基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる」
と勉強したのですが、文字の位置を調整する前は、画像の左上に表示されるのではなく、
以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。
イメージ説明

.name {
/color: white;/
position: absolute;
top: 90px;
}
の場合、文字が下に90px動くと思いましたが、意図せず画像の縦中央におさまりました。

これは、私のposition: relative;の定義の認識が間違っているのでしょうか。
それともコードがおかしいがために、このように動いてしまうのでしょうか。

あわせて回答いただけると、とても助かります。

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

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

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

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

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

Cocode

2022/12/11 15:06

HTMLの構造的に厳しいのですが、HTMLは書き換えてもいいのでしょうか?
guest

回答2

0

ベストアンサー

「基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる」
と勉強したのですが、文字の位置を調整する前は、画像の左上に表示されるのではなく、
以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。

position: absolute;を設定した要素は、top, bottom, left, right で位置指定しなければ、元の位置に配置されます。つまり、img要素の下に配置されます。
top: 90px;を指定した時点で、基準点(親要素の左上)から90pxの位置に配置されます。

.name に right: を設定してみましたが、うまく中央に揃えることができませんでした。

下記のようにすれば中央に配置できます。

css

1figure { 2 width: 80%; 3 position: relative; 4 text-align: center; /* 追加 img要素, .nameのテキストを中央寄せ */ 5} 6 7figcaption { 8 padding-top: 15px; 9} 10 11.name { 12 /*color: white;*/ 13 position: absolute; 14 top: 90px; 15 width: 100%; /* 追加 */ 16} 17 18.icon-directon { 19 color: #b3aeb5; 20 font-size: 13px; 21 padding-top: 15px; 22 text-align: left; /* 追加 */ 23}

追記

position: absolute;で位置決めするというのはどちらかというと古い手法です。
今ならflexとかgridでレイアウトを決めるのが、いいでしょう。シンプルにできるし、レスポンシブ対応も楽です。

flexだとHTMLを修正する必要がありますが、gridならHTMLの修正は必要ないです。
flexのサンプルは他の方から既に出てますので、gridを使ったコード例を提示しておきます。

css

1figure { 2 width: 80%; 3 display: grid; 4 grid-template-rows: max-content auto; 5} 6.icon, .name { 7 grid-column-start: 1; 8 grid-row-start: 1; 9 justify-self: center; 10 align-self: center; 11}

投稿2022/12/12 02:04

編集2022/12/12 03:20
hatena19

総合スコア33620

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

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

wkou4627

2022/12/12 12:35

私のコードを元に手直しして下さった回答、基礎知識部分の疑問の解決、さらに別の手法まで教えてくださり、全てがスッキリしました!progateで使っている手法は少し古いものもあるということなのですね。。。gridやflexは複雑に思えて苦手意識がありますが、これを機にしっかり勉強に取り組んでみます。
guest

0

HTMLの構造的に実現が厳しいので、HTMLから変えます。
以下はProgateが提供してくれている公式のHTMLから少し変えています。

HTML

(参考:https://prog-8.com/html/dojo/3/1)

html

1 <div class="lessons"> 2 <div class="lesson"> 3 <div class="lesson-icon"> 4 <img src="https://prog-8.com/images/html/advanced/html.png"> 5 <p class="lesson-language">HTML & CSS</p> 6 </div> 7 <p class="lesson-description">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 8 </div> 9 10 <!-- 省略 --> 11 12 </div>
CSS

css

1.lessons { 2 display: flex; 3 width: 100%; 4} 5 6.lesson { 7 width: 25%; 8} 9 10.lesson-icon { 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 width: 100%; 15 aspect-ratio: 1 / 1; 16 position: relative; 17} 18 19.lesson-icon img { 20 width: 100%; 21 height: 100%; 22 position: absolute; 23 top: 0; 24 left: 0; 25 object-fit: contain; 26} 27 28.lesson-description { 29 padding-right: 10%; 30 padding-left: 10%; 31}

こんな感じはいかがでしょう?
実際にブラウザで確認していないのでできるかどうかわかりませんが…


「HTMLの構造的に実現が難しい」とコメントいただきましたが、具体的にどの部分が難しくしてしまっていたのでしょうか?

画像とHTML&CSSの2つを(水平・垂直方向両方を)中央寄せにしたければ、「その2つだけ」を囲むタグ(containerやwrapperと呼ばれます)が必要です。
ところが質問者様のHTMLでは、その2つにだけを囲うタグは存在せず、<figcaption>も含めて3つを囲う<figure>しかありませんでした。

# ✅ 理想 コンテイナー   画像   HTML&CSS コンテイナー閉じ 本文 # 🚫 質問者様のコード コンテイナー  画像  HTML&CSS  本文 コンテイナー閉じ

投稿2022/12/11 15:24

編集2022/12/12 03:23
Cocode

総合スコア2314

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

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

Cocode

2022/12/11 15:37

うまくいきませんでしたらご連絡ください。修正します。
wkou4627

2022/12/12 02:02

ご回答ありがとうございます。早速試してみたところ、HTML & css という文字が消えてしまいました。自分なりにいじってみたところ、画像の裏に重なっているようでした。 .lesson-language{ z-index:1; } を加えてみたところ、うまく中央に表示することができました!
wkou4627

2022/12/12 02:15

修正前ですと、「HTMLの構造的に実現が難しい」とコメントいただきましたが、具体的にどの部分が難しくしてしまっていたのでしょうか?もしお時間ありましたら、ご指摘いただけるとさらに勉強の励みになります。 HTMLは少しずつかけるようになってきたかな?と思ってしまっていたので、基礎を見直すきっかけとなりました。ありがとうございました。
Cocode

2022/12/12 02:27

z-index失礼いたしました!ご自身で調整していただいてありがとうございますm(_ _)m HTMLの構造に関しては回答を更新して追加させていただきますね。 今しばらくお待ちください。
Cocode

2022/12/12 03:25 編集

更新しました! 補足ですが、HTML&CSSを top: 90px で無理やり縦方向中央にもっていってますが、あまりおすめしません! レスポンシブにして画像のサイズが変更になった時を考慮したさらなる調整が面倒だと思います。 数値と目分量で中央っぽいところにもっていくのではなく、きちんと中央に配置するほうがおすすめです。
wkou4627

2022/12/12 13:04

HTMLの構造についても回答していただきありがとうございます!どこからどこまでを囲み、どうcssに対応させるかまで考えられていないレベルに自分はいるのだと気が付くことができました。メインの質問に対する回答のレベルに自分が到達しておらず、まだ理解が足りていませんが、勉強を進めて、見返した時に「ああこういうことだったのか!」となれるように頑張ります!本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問