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

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

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

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

CSS

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

Q&A

解決済

html 画像 文章重ね

yassaba_56
yassaba_56

総合スコア1

HTML

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

CSS

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

1回答

0グッド

1クリップ

204閲覧

投稿2022/11/25 00:14

前提

あるページの一部にリンクを誘導するための画像を作成している。
文章をまとめたスプレッドシートから文章を抜き出し、配列に収納してHTMLを渡す構造にしている。
pickData=[画像のアドレス][画像クリック時のリンク先][要素①(テキスト)][要素②(テキスト)]
上記の配列をhtmlに返して(return)作成している。
画像の読み込みはうまくいったが、文章の配置がイメージ通りにならず、重なる。

実現したいこと

・添付画像参照イメージ説明
・画像の右上から少し離れた位置に、要素①要素②が上下に連なる文章を表示させたい
・位置調整はピクセル単位ではなく、%で調整したい
・そのためのコードやタブの分け方について質問したい。

発生している問題・エラーメッセージ

・要素①要素②が同じ位置で重なりあっている。
(一部コードは参考サイトから引用しているため、意味のないコードもあることは認識しているが、取捨選択が出来ない。)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <base target="_top"> 5 <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> 6 7 </head> 8 <body> 9 <ul class = "item_wrapper rank2"> 10 <div class = "box"> 11 <a href="<?= pickData[1] ?>" target="_blank" rel="noopener"><img src="<?= pickData[0] ?>"></a> 12 <a href="<?= pickData[1] ?>" target="_blank" rel="noopener"><p><?= pickData[2] ?></p></a> 13 <a href="<?= pickData[1] ?>" target="_blank" rel="noopener"><p><?= pickData[3] ?></p></a> 14 </div> 15 </ul> 16 </body> 17</html>

CSS

1<style> 2html, 3body { 4 font-size: 12px; 5 height: 100%; 6 margin: 0; 7} 8 9.box{ 10 position: relative; 11 12} 13 14.box a{ 15/* height: 600px; */ 16width: 40%; 17 18} 19 20.box p { 21 position: relative; 22 color: white; 23 text-shadow: 24 2px 2px 10px #777 , 25 -2px 2px 10px #777 , 26 2px -2px 10px #777 , 27 -2px -2px 10px #777; 28 font-family :Quicksand, sans-serif;/*Google Font*/ 29 top: 20%; 30 left: 20%; 31 -ms-transform: translate(-50%,-50%); 32 -webkit-transform: translate(-50%,-50%); 33 transform: translate(-50%,-50%); 34 margin:0; 35 padding:0; 36} 37 38 39.box img{ 40 width: 50%; 41 height: auto; 42 43} 44 45.item_wrapper { 46 list-style-type: none; 47 display: -ms-flexbox; 48 display: flex; 49 flex-wrap: wrap; 50 padding: 0; 51 margin: 0 1vw 1vw; 52} 53 54.item_wrapper li { 55 width: calc(100% / 3 - 2 * 1vw); 56 margin: 1vw; 57} 58 59.item_wrapper img{ 60 vertical-align: bottom; 61 /* 画像の位置情報について。今回はbottomに配置*/ 62} 63 64.rank2 li { 65 counter-increment: rank; 66 position: relative; 67 overflow: hidden; 68} 69 70</style>

試したこと

<li>タブをpickData2,3に着けたが解決しない。

<a>タブのリンクを消したが対応できない。

同じdiv = "box"でまとめているから出来ないのではと考えているが、divを分ける+要素重ねの参考サイトを自分で検索したが、カンがなく思った情報を見つけられない。

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

配列はGASで作成。

お手数をおかけしますが、ご相談よろしくお願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

テキストをそれぞれ別のclassにし、位置を制御して解決しました。

投稿2022/12/02 01:46

yassaba_56

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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