質問: ### 背景の上に文字が乗っている画像があるのですが、要望として文字を選んでコピペしたいそうです。 実現するために背景をimgタグで表示して、position: absolute;でpタグを表示させました。 現時点で、うまく表示できているようにみえます。 レスポンシブ対応したいということで%を駆使して書いたのですが、そもそもこのような書き方でいいのか疑問がでてきました。 もっと良い書き方があるのでは...とググったのですが、いまいち「これ!」というのがありませんでした。 codepenで公開したので、このように書いたほうがいいなどアドバイスをいただけると幸いです。 https://codepen.io/rk2019/pen/exQzxo ありがとうございます。 コードが書けるのですね。質問するのが初めてで知りませんでした。 教えていただき感謝です。 ``` abcde@abcstore.com タイトル:ご依頼の件 ``` ``` .body-box { max-width: 731px; margin: 0 auto; } .bd-cont-4c > div { position: relative; margin: 0 auto; text-align: center; } .bd-cont-4c > div p { position: absolute; font-weight: bold; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .bd-cont-4c .left-4c { top:50%; left:25%; width:45%; } .bd-cont-4c .right-4c { top:50%; left:65%; width:55%; } ```
回答: > > もっと良い書き方があるのでは...とググったのですが、いまいち「これ!」というのがありませんでした。 > > > レイアウトはデザインによる部分が大きいですし、レイアウト手法も状況により「十人十色」的な部分があるので、一概に、「コレはこの方法!」ってのはあまり気にしなくて良いかと思います。 ※codepen等がダメではありませんが、質問時のコードはなるべく「コードブロック」で皆に提示する形が良いかと思います。