画像の大きさに合わせて文字の大きさを変えたい

締切済

質問者：suffre
質問日時：2011/10/30 14:27
回答数：3件

画像の上にテキストを置きたいのですが、以下の条件の場合にどのようにcssを書けばいいのかわからないので教えてください。

1. 画像サイズがウインドウの大きさに合わせて可変する
2. 画像の垂直中央にテキストを配置する
3. 画像の大きさに合わせて相対的にテキストのサイズも同様に可変する

ネットでいろいろ検索したり書籍を見たのですがなかなかこういう場合の手法が探せませんでした。

1.の画像サイズをウインドウの大きさに合わせるのはわかりましたが、2.はテーブルを使わずにできないでしょうか？

また、3.は検討もつきませんでした。やはりjavascriptなどを使わないと実現できないでしょうか？

やりたいことはスマホ用サイトで、スマホを縦にしたり横にしたりした場合に、画像の大きさはウインドウ横幅に合わせて変えられるのですが、文字の大きさまで変えたり、中央に配置するのがわかりませんでした。

html5+css3です。お手数ですがよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2011/10/31 16:10

いえ、・・・スマートフォンのブラウザは、ウインドウ巾に合わせて縮小されるので、サイズを決め打ちすると、伸縮するはずです。

<!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">

＿</style>
</head>
<body>
＿<article>
＿＿<div>
＿＿＿<h1>サンプル</h1>
＿＿＿<p>ここ短い文章</p>
＿＿</div>
＿</article>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

何度もありがとうございます。
記述してくださったコードをそのままスマートフォンで表示してみましたが、ダメでした。
スマートフォンを縦と横にしてもどちらも画像と文字がそのままの大きさ・配置で画面が切り替わる（回る）だけでした。

ちなみにスマートフォンはandroidです。iPhoneだと文字の大きさが画面に合わせるのかもしれないですが、持っていないので確認できません。

それと、記述してくださった方法だと画像がウインドウ幅に合わせてサイズが変わりませんでした…。

いろいろとありがとうございました。他の方法を考えてみようと思います。

通報する

お礼日時：2011/11/02 02:57

No.2

回答者： ORUKA1951
回答日時：2011/10/31 00:01

すみません。

文字のこと忘れてました。
文字は、コンテンツの巾が450px以上の場合は、画面に収まるよう縮小されるはずです。

　ブラウザが背景画像のサイズを指定するCSS3のbackground-sizeに対応していないと思われます。CSS2.1で書き直します。文字サイズはCSS3でも、変えられません。スマホの独自の機能に頼るしかないかも。

- 0
- 件

通報する

この回答へのお礼

再度のご回答ありがとうございます。
なかなか難しいのですね。文字は質問の画像にあるように画像の幅を超えるほどの文字数ではないのです。

javascriptかPHPで画面の横幅から文字の大きさを割り出しての対応を考えてみたいと思います。

通報する

お礼日時：2011/10/31 01:00

No.1

回答者： ORUKA1951
回答日時：2011/10/30 19:11

スマホでしたら、文字サイズも自動調整されるはずです。

<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>

のような感じです。

テーブルを使えば簡単なのでしょうが、どうやら昨今ではテーブルレイアウトは推奨されていないみたいなので質問させて頂きました。
すみませんがよろしくお願い致します。