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

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

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

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

CSS

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

Q&A

解決済

2回答

1138閲覧

HTMLレスポンシブ対応で画像の上に文字を乗せたい

boze07

総合スコア13

HTML

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

CSS

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

1グッド

0クリップ

投稿2019/02/16 01:43

編集2019/02/16 02:39

###背景の上に文字が乗っている画像があるのですが、要望として文字を選んでコピペしたいそうです。

実現するために背景をimgタグで表示して、position: absolute;でpタグを表示させました。
現時点で、うまく表示できているようにみえます。

レスポンシブ対応したいということで%を駆使して書いたのですが、そもそもこのような書き方でいいのか疑問がでてきました。
もっと良い書き方があるのでは…とググったのですが、いまいち「これ!」というのがありませんでした。

codepenで公開したので、このように書いたほうがいいなどアドバイスをいただけると幸いです。
https://codepen.io/rk2019/pen/exQzxo

ありがとうございます。
コードが書けるのですね。質問するのが初めてで知りませんでした。
教えていただき感謝です。

html

1 <div class="body-box"> 2 <div class="bd-cont-4c"> 3 <div> 4 <img src="http://super-healthylife.com/sample/sample-image/toiawase-2-bar.png"> 5 <p class="left-4c">abcde@abcstore.com</p> 6 <p class="right-4c">タイトル:ご依頼の件</p> 7 </div> 8 </div> 9 </div>

css

1.body-box { 2 max-width: 731px; 3 margin: 0 auto; 4} 5 6.bd-cont-4c > div { 7 position: relative; 8 margin: 0 auto; 9 text-align: center; 10} 11 12.bd-cont-4c > div p { 13 position: absolute; 14 font-weight: bold; 15 top: 50%; 16 left: 50%; 17 -ms-transform: translate(-50%,-50%); 18 -webkit-transform: translate(-50%,-50%); 19 transform: translate(-50%,-50%); 20} 21 22.bd-cont-4c .left-4c { 23 top:50%; 24 left:25%; 25 width:45%; 26} 27 28.bd-cont-4c .right-4c { 29 top:50%; 30 left:65%; 31 width:55%; 32} 33
bochan2👍を押しています

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

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

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

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

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

yoshinavi

2019/02/16 02:26

画像の大きさはいくつですか?
boze07

2019/02/16 02:29

594x39です。
guest

回答2

0

ベストアンサー

レスポンシブ対応をするのであれば、一つの画像に二つの文字列を無理やり並べるよりは、画像も2つに分けて(特にご提示のデザインならできるだけ画像ではなくHTMLとCSSで)それぞれに文字列を入れていく、というほうが安定感のあるレイアウトになるかなと思います。

でも上の方もおっしゃっている通り決まったやり方があるわけではないので、いろいろ試して自分なりのベストプラクティスを見つけるのも楽しいですよ!

投稿2019/02/16 04:27

yu-smc

総合スコア610

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

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

boze07

2019/02/19 12:37

画像を使わないでDIVを並べる方法にしました。 ありがとうございました!
guest

0

もっと良い書き方があるのでは…とググったのですが、いまいち「これ!」というのがありませんでした。

レイアウトはデザインによる部分が大きいですし、レイアウト手法も状況により「十人十色」的な部分があるので、一概に、「コレはこの方法!」ってのはあまり気にしなくて良いかと思います。

※codepen等がダメではありませんが、質問時のコードはなるべく「コードブロック」で皆に提示する形が良いかと思います。

投稿2019/02/16 02:33

yoshinavi

総合スコア3521

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

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

boze07

2019/02/16 02:41

ありがとうございます。 確かにそうですね。 文字列が左右に分かれているので強引に%で合わせている感じなので、もう少しスッキリかけないものかと思いまして…。
yoshinavi

2019/02/16 02:59

テキストの位置として ①画像の下側に、テキストの高さ半分が掛かるような感じでしょうか? ②画像端からの距離は左右のテキストは揃えるのでしょうか?それとも画像半分の中心に来るような感じでしょうか?
boze07

2019/02/16 03:17

ベストなのは ・画像と文字が上下中央揃え ・画像端からの距離が左右のテキストが揃っている です。 ですが、そこまでできなくてもセオリーというか書き方のお作法があれば知りたいです。 レスポンシブサイトを作り始めたばかりなので…。
yoshinavi

2019/02/16 03:27

レスポンシブだと基本的に「可変」単位の使用が前提になる場合が多いかと思います。 各要素の基準位置も「左上」「中央」だけではなく、状況によって「右上・右下」等必要になります。「基準位置」をしっかりと把握することで、表現の幅が広がると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問