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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

500閲覧

画像の上にdl dtで作成した文字を配置したい

-ice-

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/12/27 09:33

2×3の表のような画像があり、その上に文字を配置したいのですが上手くいきません。
また、AAA~CCCは横並びで、折り返してDDDをAAA、EEEをBBB、FFFをCCCの下に来るように配置したいです。(下部画像参照)
コードは考えていてわからなくなってしまったので、途中になっています・・・。
HTML、CSSを勉強し始めたばかりなのでわからないことが多くて知識不足ですが、回答していただけるとありがたいです。
よろしくお願いします。

HTML

1   <div class=×××> 2 <img src="image/×××" width="×××" height="×××" alt="×××"> 3 <dl> 4 <dt>AAA</dt> 5 <dt>BBB</dt> 6 <dt>CCC</dt> 7       <dt>DDD</dt> 8 <dt>EEE</dt> 9 <dt>FFF</dt> 10 </dl> 11 </div>

CSS

1.×××{ 2 position: relative; 3} 4 5.××× img{ 6 margin: 0px 40px 0px 40px; 7 height: 250px; 8 width: 600px; 9} 10 11.××× dl{ 12 overflow: hidden; 13 margin: 0; 14 padding: 0; 15} 16 17.××× dl dt{ 18 font-size: 20px; 19 font-weight: bold; 20 float: left; 21 text-align: center; 22 margin: 0; 23 padding: 0; 24} 25```![イメージ説明](6f05481b823b2e302d164b0dd3d9b304.png)

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

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

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

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

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

yoshinavi

2018/12/27 09:57

imgを、子要素に使用しないで、親要素の背景ではダメなのでしょうか?
kei344

2018/12/27 10:36

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。
-ice-

2018/12/28 06:08

yoshinaviさん ご回答ありがとうございます。 最近HTML、CSSの勉強を始めたばかりで知識が浅く、こうしたら良い、良くない等わかっていないことが多い為、その発想に至っていませんでした。 親要素の背景で作ってみたいと思います。
-ice-

2018/12/28 06:12

kei344さん わかりにくい質問で申し訳ないです。 ネットで調べながらやっていたのですが、色々上手くいかず何がダメでどうして上手くいかないのだろうと混乱してしまってわかりにくい質問となってしまいました。 次回質問する際は気を付けたいと思います。 ありがとうございました。
guest

回答3

0

CSS

1.××× dl { 2 position: absolute; 3 top: 0; 4 left: 40px; 5 box-sizing: border-box; 6 margin: 0; 7 padding: 50px 80px; 8 width: 600px; 9 height: 250px; 10 display: grid; 11 grid-template-columns: repeat(3, 1fr); 12 gap: 10px 10px; 13}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

投稿2018/12/28 06:43

x_x

総合スコア13749

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

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

-ice-

2018/12/28 08:18

ご回答ありがとうございます。 試してみましたが、上手くいきませんでした・・・。 自分のやり方が悪いのだと思います。 折角教えて下さったのに申し訳ないです。
guest

0

ベストアンサー

position:absolute で実現はできるけど...。

なぜ画像である必要があるのか、なぜdtタグである必要があるのかが不明なので、適切な回答になっているかが不明。

tableタグでよいのでは?

投稿2018/12/27 10:00

kasa0

総合スコア578

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

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

-ice-

2018/12/28 06:03

ご回答ありがとうございます。 例の画像では青い部分は何もありませんが、実際使う画像は柄が入ったものだったので画像を使用する形で作成しようと思っていました。 dtタグにこだわっているわけではないのですが、ネットで調べていた時にdtで作成するというのを見かけたので・・・。 tableタグで作ってみようと思います。 ありがとうございました。
kasa0

2018/12/28 07:35

それならば、border=0のテーブルで、marginやpaddingで調整して、画像と重なるように表示するのが分かりやすいように思います。
-ice-

2018/12/28 08:20

tableタグで作成してみたところ、dtタグより作成しやすかったです。 画像と上手く重ねられるよう、調節してみたいと思います。 ご回答ありがとうございました。
guest

0

画像に載せるならsvgなどそれ用にきちんと処理した方が良いと思います

投稿2018/12/27 09:48

yambejp

総合スコア114581

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

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

-ice-

2018/12/28 05:59

ご回答ありがとうございます。 画像はillustratorで作成したものを、pngで書き出して使用しています。 そういう知識もまだまだ勉強不足なので、参考にしたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問