• ベストアンサー

画像の上に文字を重ねる（高さ自動調整）

HTML5 CSS2.1でホームページを作成しています。 http://allabout.co.jp/gm/gc/23824/3/ 上記サイトなどを参考に画像の上に文字を重ねたいのですが 文字の量に応じて画像の高さのサイズを自動的にぴったりに 調整することは可能でしょうか？ ご回答くださいましたら幸いです。

  • CSS
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

次のように書きます。 ポイント (1)置換インライン要素は、置換される内容(画像)自身のサイズを参照しますが、ブロック要素はそれを内包する親ブロックのサイズを参照します。 (2)テキストを上に乗せるのでしたら、背景ですから本来は背景とするべきです。ただ、その場合CSS2.1には画像サイズを指定するプロパティがありませんからCSS3のbackground-sizeを使用します。 補足) ★画像のようなインライン要素は必ずブロック要素の内部にしか書けません。 ★下記サンプルは、HTML4.01strictです。transitionalは非推奨なので・・ ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス[オプションCSS3] ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) にて検証済み ☆＿はタブに戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.section p{ ＿font-size: 24pt; color:red; ＿width: 400px;margin:20px auto; ＿position:relative; ＿z-index:100; ＿background-size: 100% 100%; /* CSS3 background-size:cover|contain|auto */ ＿background-repeat: no-repeat; } div.section p img{ ＿display:block; ＿position: absolute; top: 0;left: 0; ＿width:100%; ＿height:100%; ＿z-index:-10; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>画像の伸縮</h2> ＿＿<p>CSS2.1</p> ＿＿<p> ＿＿＿<img src="images/sample01.jpg" width="480" height="360" alt=""> ＿＿＿あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やいゆえよ、らりるれろ、わゐうゑを ＿＿</p> ＿＿<p> ＿＿＿<img src="images/sample02.jpg" width="480" height="360" alt=""> ＿＿＿あいうえお、かきくけこ、さしすせそ、たちつてと、 ＿＿</p> ＿＿<p> ＿＿＿<img src="images/sample03.jpg" width="480" height="360" alt=""> ＿＿＿あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、 ＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>CSS3のbackground-sizeプロパティを使用する</h2> ＿＿<p style="background-image:url(images/sample01.jpg)"> ＿＿＿あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やいゆえよ、らりるれろ、わゐうゑを ＿＿</p> ＿＿<p style="background-image:url(images/sample01.jpg)">2 ＿＿＿あいうえお、かきくけこ、さしすせそ、たちつてと、 ＿＿</p> ＿＿<p style="background-image:url(images/sample03.jpg)"> ＿＿＿あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、 ＿＿</p> ＿</div> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

CSS3でしたら、背景画像を伸縮できます。 CSS2.1でしたら、置換インライン要素の画像はblockに変換してから、内容に合わせて伸縮させることになります。 　画像を伸縮させない(表示領域を変えるだけ)なら、背景にしましょう。

timespace
質問者

補足

<img width="400px" alt="画像" src="hoge.png" style="display: block" /> <p style="margin: auto; font-size: 24pt; color:#FFFF00; width: 400px; position: absolute; top: 0px; left: 0px;"> あいうえおかきくけこさしすせそたちつてと・・・・・・ </p> 上記のようにしましたが画像は伸縮しませんでした。難しいですね。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ホームページ内の画像のサイズの自動調整について

    ホームページを作成していますが、閲覧する側の画面サイズに合わせて画像の高さ等を調整する方法等はありますでしょうか？ 全画面表示にした時に画像を自動的に大きくみせるなど調整をしたいのですが・・・縦フレームに設定している画像が通常時は画面内にぴったり収まってるのですが全画面表示にすると、一番したが白抜けの状態になってしまいます。 スクリプトを使用する方法ではなさそうなのですが・・ http://www.bonjovi.com/bonjovi/　のサイトのように画像を自動調整したいのです。 どうか教示願います。

  • 背景画像の自動調整

    ホームページの背景画像についての質問です。 自分なりに調べてはみたのですが、 よい答が見つからなかったため質問させていただきます。 http://jamaikaumarenorasutaneko.web.fc2.com/ 上記のようなホムペを作っているのですが、 トップ画面の背景がブラウザによっては画像のサイズが足りず右側に白い空白ができてしまいます。 また、逆に画像が大きく全てを表示しきれないケースもあると思います。 お気に入りを常に表示させている場合はもちろん後者のケースにあたると思います。 もちろんブラウザによって表示が異なってしまうのは承知しているのですが、 それをタグやれスタイルシートやれで自動調整はできないものでしょうか？ 希望としては、 画面サイズの異なるPCで表示させたとき、 指定した画像の全てがどのPCでも表示させられる。 例えば「Microsoft Office Picture Manager」で画像の編集（サイズの変更）をしたときの、拡大＆縮小を画面サイズに合わせて自動で行ってくれる、 そんなタグを探しています。 欲を言えば「お気に入り」を表示していてもそれすら自動調整されるといいです。 かなり分かりにくい説明になってしまってすみません。 ご教授よろしくお願いします。

  • HP 画像と文字の位置

    ホームページを作り始めたのですが、全くの初心者です。 CSSやHTMLなど調べながらやっていますが、それでも分からない事があったのでココで質問させて頂きます。 画像リンクの左横に文字を書きたいのですが、どうやったらいいですか？？ 一応調べてやってみましたが、私のやり方だと画像リンクも文字も1番右端にいってしまいます。 1番左端に文字、そのすぐ横に画像にするにはどうしたらいいでしょうか？？ 初心者の為、難しい言葉だと理解できないかもしれませんので、分かりやすく教えて頂ければ幸いです。

  • この画像を

    この画像と同じホームページを作成するHTMLとｃｓｓを教えてください。

  • 画像のソースはどう打ち込めばいいのですか？

    こんにちは。 ホームページビルダー16を使ってホームページを作っています。 で、ランダムに画像を表示したいと思い http://allabout.co.jp/gm/gc/23805/　を参考にしようと思ったのですが。。。 赤字の部分の書きかえってどう打てばいいのかわかりません。 画像名.jpg　とかでいいんですかね？ 初歩的な質問ごめんなさい＾＾； ご回答お待ちしています。

  • 画像ファイルの上に文字を入れるには？

    画像ファイルとしていれると上から文字をいれることができません。何か方法がありますか？フォトショップとかであらかじめ文字をいれるしかないのでしょうか・・・。ちなみにビルダーを使ってホームページを作ってます。HTMLの知識はちょこっとだけです(^^ゞ

  • PHPで読み込んだ画像をHTMLで表示するには？

    http://allabout.co.jp/gm/gc/47434/ こちらのサイトを参考に、PHPで画像を表示するプログラムを組みました。 そのPHPの結果を、HTMLに組み込んで、表示したいのですが、どのようにすればよろしいでしょうか？ 回答よろしくお願いします。 ※サーバーはロリポップを使っております

    • ベストアンサー
    • PHP
  • アイコン画像の上に文字を重ねる方法について

    ホームページ作成の際に文中のアイコンに文字を重ねて表示するにはどのようなCSSを書けばよいのでしょうか？

  • 【HTML5、CSS2.1】imgのalign

    HTML5、CSS2.1でホームページを作成しています。 http://www.tagindex.com/html_tag/img/img_align.html このサイトを参考に画像の右中央に文字を配置したいのですが HTML5ではalign属性が認められていません。 どのように対処すればよいのか教えていただけましたら幸いです。

    • ベストアンサー
    • HTML
  • ＨＰ上で文字サイズを変更できるようにするには・・・・。

    実は視覚障害者や弱視の方を対象とした ホームページを作ろうと取り組んでいるのですが、 下記のサイトのようにJavaScript＋ＨＴＭＬ＋ＣＳＳで 文字サイズなどを変更できる機能を作りたいのです。 何か参考になるサンプル・書籍・ＨＰなどございましたら教えていただければ幸いです。 またこの場で教えてくれる方がいれば助かります。 http://www.ssct.co.jp/

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する