- ベストアンサー
背景画像にコメントを載せてタイトルとして表示する方法
- 背景画像にコメントを載せる方法について解説します。画像中にコメントを追加することで、タイトルとして目立たせることができます。
- 具体的な方法として、HTMLのbackground-imageプロパティを使用して画像を背景に表示し、<b>fontタグを使ってコメントを追加します。</b>コメントの文字サイズや色を調整することで、目立つタイトルとしてデザインすることができます。
- また、画像がPC画面の横幅に関係なく正しく表示されるように、<b>background-positionプロパティとbackground-repeatプロパティ</b>を指定することも重要です。これにより、画像が適切に配置され、繰り返し表示されないようにできます。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
htmlのルールを理解することから始める方がいいと思います。今の感じだとCSSを適用して画像を表示するのも安定しない可能性があります・・・ <html> <head> <head/> <body> </body> </html> これがhtmlの基本形です。bodyは一つのhtmlファイル内に一回しか記述できません。なので、質問者さんのソースのように背景画像を適用するたびbodyを記述するという方法はできません。CSSでの背景画像の指定はどの要素にもできるので、例えば <b style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;">コメントA</b> こんな感じにb要素に背景画像を指定したりできます。 一応質問者さんのソースでできるだけ変更なく画像の表示を実現するとこんな感じになります。(画像の高さを30pxと想定しています。) <font size="6" color="#ff0099" style="display:block; height:30px; line-height:30px; background:url('image.gif') center center no-repeat;"><b>コメントA</b></font> ： ： <font size="6" color="#ff0099" style="display:block; height:30px; line-height:30px; background:url('image.gif') center center no-repeat;"><b>コメントB</b></font> ： ： <font size="6" color="#ff0099" style="display:block; height:30px; line-height:30px; background:url('image.gif') center center no-repeat;"><b>コメントC</b></font> font要素にdisplay:block;を指定しているので前後に改行が入ります。なのでbr要素を消さないと改行が2回入ってしまいます。 これで実現できると言えばできるのですが、htmlがかなり無茶苦茶なのでhtmlの理解を深めることを優先されたほうがいいと思います。例えばですが、自分なら上と同じソースをだいたいこんな感じで書くと思います。 <h2 style="display:block; height:30px; line-height:30px; font-size:xx-large; color:#ff0099; background:url('image.gif') center center no-repeat;">コメントA</h2> ： ： <h2 style="display:block; height:30px; line-height:30px; font-size:xx-large; color:#ff0099; background:url('image.gif') center center no-repeat;">コメントB</h2> ： ： <h2 style="display:block; height:30px; line-height:30px; font-size:xx-large; color:#ff0099; background:url('image.gif') center center no-repeat;">コメントC</h2> htmlの最低限のルールとhtml、head、body、h1～h6、a、img、p、div、ul、liぐらいの要素は覚えるとサイト作りが楽になるんじゃないかな？と思います。
その他の回答 (3)
- syouchan33
- ベストアンサー率50% (4/8)
目的のページ（最初のURL貼り付けてあるページ）でのタイトル部分は、背景色を指定せず（透過）、多分body部分の背景画像が透けてみえるようにしてあるようです。 つまり、タイトル部分以外のところには背景色を白と指定し、タイトル部分は背景なし、にしてあるのではないでしょうか？
お礼
無事に問題が解決しました。 有難うございます。
- metametamu
- ベストアンサー率51% (153/295)
現在のhtmlソースや目的のレイアウト画像がわかればもう少し回答しやすくなると思うのですが、補足可能ですか？
お礼
無事に問題が解決しました。 有難うございます。
- zeff
- ベストアンサー率69% (137/198)
まず<body>を複数使ってはいけません。 ひとつのHTMLにひとつだけです。 そのようなことをする場合には<div>や<h1>～<h6>を使いましょう。 さらに言えばスタイルシートで行なってください。 一例です。画像ファイル名などは適当です。 <html lang="ja"> <head> <title>タイトル</title> <style type="text/css"> <!-- body { margin:0; padding:0; background-image: url('img0.gif'); background-position: center center; background-repeat: no-repeat; } h1,h2,h3{ margin:0; } h1{ background-image: url('img1.gif'); background-position: center center; background-repeat: no-repeat; width:500px; height:50px; font-size:200%;/*文字の大きさ*/ fonr-weight:bold;/*強調する*/ color:#ff0099;/*文字色*/ } h2{ background-image: url('img2.gif'); background-position: center center; background-repeat: no-repeat; width:400px; height:40px; font-size:150%;/*文字の大きさ*/ fonr-weight:bold;/*強調する*/ color:#ff0099;/*文字色*/ } h3{ background-image: url('img3.gif'); background-position: center center; background-repeat: no-repeat; width:300px; height:30px; font-size:120%;/*文字の大きさ*/ fonr-weight:bold;/*強調する*/ color:#ff0099;/*文字色*/ } --> </style> <body> <h1>大見出し</h1> <h2>中見出しA</h1> <h3>小見出しA-1</h3> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> <h2>中見出しB</h1> <h3>小見出しB-1</h3> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> </body> </html> かなりざっくりと書きましたが、 背景画像を設定したdivやh1などに対して、 画像の幅と高さと同じサイズを設定することで 画像がキッチリと入るようにします。 それから<font>やは使わないほうが良いです、非推奨タグですので。 <b>も使うとしても<strong>で。 http://w3g.jp/xhtml/dic/b もし「スタイルシートとはなんぞや？」という段階でしたら、 背景画像の前にもっと基礎的なことから覚えていかれるがよいでしょう。 いつも参考にしているリファレンスサイトを貼っておきます。 http://www.tohoho-web.com/www.htm http://www.htmq.com/ http://www.tagindex.com/index.html http://www.kanzaki.com/docs/html/lesson1.html
お礼
とても参考になりました。 有難うございます。
お礼
無事に問題が解決しました。 有難うございます。
補足
丁寧なアドバイス有難うございます。 htmlの最低限のルールとhtml、head、body、h1～h6、a、img、p、div、ul、li を優先して覚えるようにします。 作って頂いたhtmlを使わせてもらいました。 <h2 style="display:block; height:30px; line-height:30px; font-size:xx-large; color:#ff0099; background:url('sora313.gif') center center no-repeat;">コメントコメントコメントコメントコメント</h2> です。 しかし、自分が思い描いていたものとは違っていました。 画像が表示されず文字の上下が切れ、画面を狭めるとコメントが改行されてしまいます。 このhtmlは初心者には解決できませんか。