- 締切済み
画像の大きさに合わせて文字の大きさを変えたい
画像の上にテキストを置きたいのですが、以下の条件の場合にどのようにcssを書けばいいのかわからないので教えてください。 1. 画像サイズがウインドウの大きさに合わせて可変する 2. 画像の垂直中央にテキストを配置する 3. 画像の大きさに合わせて相対的にテキストのサイズも同様に可変する ネットでいろいろ検索したり書籍を見たのですがなかなかこういう場合の手法が探せませんでした。 1.の画像サイズをウインドウの大きさに合わせるのはわかりましたが、2.はテーブルを使わずにできないでしょうか？ また、3.は検討もつきませんでした。やはりjavascriptなどを使わないと実現できないでしょうか？ やりたいことはスマホ用サイトで、スマホを縦にしたり横にしたりした場合に、画像の大きさはウインドウ横幅に合わせて変えられるのですが、文字の大きさまで変えたり、中央に配置するのがわかりませんでした。 html5+css3です。お手数ですがよろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえ、・・・スマートフォンのブラウザは、ウインドウ巾に合わせて縮小されるので、サイズを決め打ちすると、伸縮するはずです。 <!DOCTYPE html> <html lang="ja"> <head> ＿<meta charset="UTF-8"> ＿<title>Untitled</title> ＿<meta name="author" content="IRUKA"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:black;} article{ ＿width:640px;height:480px; ＿margin:0 auto; ＿background: black url(./images/sample03.jpg) no-repeat 50% 50%; ＿background-size:cover; ＿color:white; ＿position:relative; } article div{ ＿width:50%;height:50%; ＿position:absolute;top:30%;left:20%; ＿text-align:center;font-size:200%; } --> ＿</style> </head> <body> ＿<article> ＿＿<div> ＿＿＿<h1>サンプル</h1> ＿＿＿<p>ここ短い文章</p> ＿＿</div> ＿</article> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すみません。文字のこと忘れてました。 文字は、コンテンツの巾が450px以上の場合は、画面に収まるよう縮小されるはずです。 ブラウザが背景画像のサイズを指定するCSS3のbackground-sizeに対応していないと思われます。CSS2.1で書き直します。文字サイズはCSS3でも、変えられません。スマホの独自の機能に頼るしかないかも。
お礼
再度のご回答ありがとうございます。 なかなか難しいのですね。文字は質問の画像にあるように画像の幅を超えるほどの文字数ではないのです。 javascriptかPHPで画面の横幅から文字の大きさを割り出しての対応を考えてみたいと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スマホでしたら、文字サイズも自動調整されるはずです。 <body> <header> </header> <section> <h2>見出し</h2> <p>文章</p> </section> <footer> </footer> </body> body>section{ width:80%; min-width:450px;/* スマホはこのサイズまで縮めた後リサイズする */ max-width:960px; background-image:url(); background-size:cover; }
お礼
ありがとうございます。 試して見ましたが文字がリサイズされないし、画像の中央に来ないです。 さらに画像の縦の高さが文字の高さ分しか表示されませんでした。
補足
ちなみにサイトの構成ですが、サイトトップ画面で、 <header>サイト名のある画像</header> があり、その下にサイトの趣旨を示した画像と、その画像の上に文章を書きたいと思っています。 例えば、 <section> <img src="images/main.jpg" /> <h2>このサイトは○○○です</h2> </section> のような感じです。 テーブルを使えば簡単なのでしょうが、どうやら昨今ではテーブルレイアウトは推奨されていないみたいなので質問させて頂きました。 すみませんがよろしくお願い致します。
お礼
何度もありがとうございます。 記述してくださったコードをそのままスマートフォンで表示してみましたが、ダメでした。 スマートフォンを縦と横にしてもどちらも画像と文字がそのままの大きさ・配置で画面が切り替わる（回る）だけでした。 ちなみにスマートフォンはandroidです。iPhoneだと文字の大きさが画面に合わせるのかもしれないですが、持っていないので確認できません。 それと、記述してくださった方法だと画像がウインドウ幅に合わせてサイズが変わりませんでした…。 いろいろとありがとうございました。他の方法を考えてみようと思います。