- 締切済み
画像の大きさに合わせて文字の大きさを変えたい
画像の上にテキストを置きたいのですが、以下の条件の場合にどのようにcssを書けばいいのかわからないので教えてください。 1. 画像サイズがウインドウの大きさに合わせて可変する 2. 画像の垂直中央にテキストを配置する 3. 画像の大きさに合わせて相対的にテキストのサイズも同様に可変する ネットでいろいろ検索したり書籍を見たのですがなかなかこういう場合の手法が探せませんでした。 1.の画像サイズをウインドウの大きさに合わせるのはわかりましたが、2.はテーブルを使わずにできないでしょうか？ また、3.は検討もつきませんでした。やはりjavascriptなどを使わないと実現できないでしょうか？ やりたいことはスマホ用サイトで、スマホを縦にしたり横にしたりした場合に、画像の大きさはウインドウ横幅に合わせて変えられるのですが、文字の大きさまで変えたり、中央に配置するのがわかりませんでした。 html5+css3です。お手数ですがよろしくお願い致します。
- suffre
- お礼率76% (2013/2633)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （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> のような感じです。 テーブルを使えば簡単なのでしょうが、どうやら昨今ではテーブルレイアウトは推奨されていないみたいなので質問させて頂きました。 すみませんがよろしくお願い致します。
関連するQ&A
- 可変幅でabsolute指定で中央配置できません
可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか？困っています、どなたかお助けください。 例えば画像が固定のサイズであれば width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500ｐｘとはなりません。 よろしくお願い致します。
- ベストアンサー
- CSS
- 画像にテキスト文字
あるホームページに画像を貼り付け、そこにHTMLでテキスト文字を入れたのが添付画像です。 私はテキスト文字を中央に配置したいのですが、そのやり方がわかりません。 画像にHTMLでテキスト文字を入れるとき、その配置方法はどうするのでしょうか？ 例えば、イラストレーターでは、中央配置にしたり、座標で正確な位置を決めれます。同じようなことは、HTMLでは無理なんでしょうか？ よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- スマートフォンサイトのナビ部分画像の可変について
いつもお世話になっています。 今スマホサイトを構築中なのですが、添付画像のように画像をfloatさせて並べたいのですが、iphoneで確認しているのですが縦にした場合と横向きにした場合では横幅が変わるように配置がしたいんですが。。。実際は添付の上の様な状態になってしまいます。 スマホで可変のナビを作られている方はどのようにfloatさせているのでしょうか？？
- ベストアンサー
- CSS
- CSSで文字と画像の配置方法は・・・
HTML+CSSで書いています。 画像とテキストを配置しようとしています。 画像は位置固定にして、 テキストは回り込みではなく、その上にかぶさる感じにしたいの ですが、画像は画像、テキストはテキストに分離してしまいます。 （画像を背景みたいに扱いたいのですが、すでに背景はCSSで 指定されてしまっています。。。。） どのようにCSSを記述すればいいのでしょうか？
- 締切済み
- HTML
- CSSで画像を中央配置（センタリング）する方法について伺います。
CSSで画像を中央配置（センタリング）する方法について伺います。 ※ボックスのセンタリングではなくて、ボックス内の画像のセンタリングです。 単純に text-align:center; で中央配置されましたが、テキストが入っていないボックスでも、このタグで文法的には問題ないのでしょうか？ header内にphoto.gif画像が入っている場合。 CSS #header{text-align:center;} HTML <div id="header"> こんな単純で良いのでしょうか？ 初心者なので、とんちんかんな質問だったら申し訳ありません。
- ベストアンサー
- HTML
- firefoxとIEの背景画像の位置を合わせる
背景画像の中央にテキストがくるよう指定するのに、CSSでline-heightで調整しています。 firefoxではピタリと中央にきますが、IEだと少しずれます。 paddingで調整するとIEだと中央にきますが、firefoxだと少しずれます。 両ブラウザー共にテキストを中央配置する方法を教えてください。 よろしくお願いします。
- 締切済み
- HTML
- テキストと画像の縦の中央揃えの質問です
下記の参考サイトのサイトマップをホームページ作成の練習として作成中です http://lolipop.jp/home/sitemap/ テキストリンクの左右に画像が配置されております。 左の画像は<dd>の背景画像。 右の画像は<img>でテキストリンクの右横に配置されてます(html)。 <dd><a>テキスト</a><img></dd> 左は上手くいくのですが、右の星型の画像が上手く配置されません。 <img>にvertical-align：middleを指定するのですが、各ブラウザでばらつきがあり、均一になりません。 テキストリンク、画像が縦に中央配置されません。 求めていることは、<dd>の中で、テキストリンク、画像を縦に中央配置させたいと思っております。 <dd>の高さは26px フォントサイズは13px <img>は、高さ17px、幅17px が希望です。 どのように、html、ｃｓｓを指定すれば各ブラウザで均一に表示されるでしょうか？
- ベストアンサー
- CSS
- 可変画像の下にdivを後続で配置させるには？
http://www.jormungand.tv/ 上記サイトのトップページで、ソースを見ると「<img id="index"＞」をCSSにて「position:absolute; width:100%;」とすることにより、画像を背景画像のようにしてウィンドウサイズに合わせて拡大縮小させているようです。 そこまではわかるのですが、そのあと「<div id="footer">」が、その可変画像の下に続いているのが、どうやってやっているのかわかりません。 上記サンプルサイトのように、 「position:absoluteの可変画像」の下に、「divなどブロック要素を後続で続けて配置する」方法を教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- ＷＯＲＤ2000でオートシェイプやテキストボックス内の文字配置について
こんにちは ＷＯＲＤ2000でオートシェイプやテキストボックスに文字を入力して文字の配置をするとき、左右方向には中央揃えができますが垂直方向にはできません。 文字が垂直方向の中央に揃うように、テキストボックスのサイズを変えたり、 テキストボックスの書式設定で、文字列の間隔を変えたりするしか方法が ないんでしょうか？ 実際、地図など作成する時に、とても困ってしまいます。 何か知っている方、教えてください。お願いします。
- ベストアンサー
- オフィス系ソフト
- 画像とテキストを一列に並べる。高さを画像の真ん中に
Wordで画像とテキストを一列に並べて書く際、 添付画像のようになってしまいます。 画像の下辺に合わせた位置にテキストが配置されます。 そうではなく、高さ的に画像の中央にテキストを配置したいのですが、可能でしょうか？ アドバイスよろしくお願い致します。
- ベストアンサー
- Word（ワード）
お礼
何度もありがとうございます。 記述してくださったコードをそのままスマートフォンで表示してみましたが、ダメでした。 スマートフォンを縦と横にしてもどちらも画像と文字がそのままの大きさ・配置で画面が切り替わる（回る）だけでした。 ちなみにスマートフォンはandroidです。iPhoneだと文字の大きさが画面に合わせるのかもしれないですが、持っていないので確認できません。 それと、記述してくださった方法だと画像がウインドウ幅に合わせてサイズが変わりませんでした…。 いろいろとありがとうございました。他の方法を考えてみようと思います。