背景画像にコメントを載せてタイトルとして表示する方法
- 背景画像にコメントを載せる方法について解説します。画像中にコメントを追加することで、タイトルとして目立たせることができます。
- 具体的な方法として、HTMLのbackground-imageプロパティを使用して画像を背景に表示し、<b>fontタグを使ってコメントを追加します。</b>コメントの文字サイズや色を調整することで、目立つタイトルとしてデザインすることができます。
- また、画像がPC画面の横幅に関係なく正しく表示されるように、<b>background-positionプロパティとbackground-repeatプロパティ</b>を指定することも重要です。これにより、画像が適切に配置され、繰り返し表示されないようにできます。
- ベストアンサー
背景画像にコメントを載せて、タイトルとして表示する方法
背景画像にコメントを載せて、タイトルとして表示する方法 http://chaichan.web.infoseek.co.jp/src/htmtable.htm ↑の基礎講座ページのような項目別のタイトルに文字入り画像を表示したいです。 項目別のタイトルというのは、 その基礎講座ページの「はじめに」「テーブルサンプル」「サンプルソース」などのタイトルのことです。 今自分が作っているページは項目別のタイトルの表示の仕方が、 色を付けた文字を太く大きくしただけのものなので見た目がさえません。 それで、基礎講座ページのようにできればなと思いました。 ・画像の中にコメントを入れられる ・PC画面の横幅に関係なく画像がちゃんと表示される http://allabout.co.jp/internet/hpcreate/closeup/CU20030623A/ ↑のページの通りにしましたが、何も変化がありません。 <body style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;"> <font size="6" color="#ff0099"><b>コメントA</b></font><br> ： ： <body style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;"> <font size="6" color="#ff0099"><b>コメントB</b></font><br> ： ： <body style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;"> <font size="6" color="#ff0099"><b>コメントC</b></font><br> ： ： と初心者なりにこんな感じでやったのですが、 どうすれば基礎講座ページのように表示することができますか？
- orehatens
- お礼率89% (76/85)
- HTML
- 回答数4
- ありがとう数15
- みんなの回答 （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
お礼
とても参考になりました。 有難うございます。
関連するQ&A
- リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ list-style-type:none; padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { display:inline; padding:0; margin:0px; float:left; } #headerMenu a { display:block; text-decoration:none; text-indent:-5000px; height:25px; } #home { display:block; background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; width:63px; background-position:0px 0px; } #home a:hover { background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; background-position:0px -25px; } #sitemap { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; width:90px; background-position:0px 0px; } #sitemap a:hover { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; background-position:0px -25px; } #recruit { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #recruit a:hover { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; background-position:0px -25px; } #contact { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #contact a:hover { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; background-position:0px -25px; }
- 締切済み
- CSS
- ネスケで背景色が表示されない
ＷＩＮＸＰ ＩＥ６ ネスケ７.１ 外部ｃｓｓで td.bottom{ height: 30px; background:url(img/cr.gif); background-repeat:no-repeat; background-position: center; background-color: #fff76b; } と指定し、 ＨＴＭＬに <TD colspan="4" align="center" class="bottom"></TD> というタグを書いています。 ＩＥで見るとちゃんと表示されますが、 ネスケだと色がまったく表示されません。 理由がまったく分からず困っております。 どなたかアドバイス下さい！
- ベストアンサー
- HTML
- IE,Firefoxでbodyの背景画像が表示されません。
IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 （width や position をいれるなど） 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- ヤフ－の検索にかからなくなりました。
ヤフ－の検索にかからなくなりました。 以下そのページのソースですが、不都合があるでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <titl>***************</title> <meta name="keywords" content="*****************************"> <meta name="description" content="*******************************"> <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("ind_back.gif"); background-repeat: repeat-x; background-position: bottom; background-attachment: fixed; } --> </STYLE> </head> <body bgcolor="*********************"> <br> <br> <!-- ロゴ --> <div Align="center"> <img src="a.gif" border="0" alt="ロゴ"> <br><br><br><br> <!-- 写真と説明文 --> <img src="main_photo2.jpg" border="0" alt="**********"><br> <span style="font-size: 13px;line-height:150%"> （***********************） </span> <br><br><br> <span style="font-size: 16px;line-height:150%"><font color="#000099" face="MS UI Gothic"> <b>******</b>***************************<br> </font></span> <br><br> <A href="top/top.htm"><img src="1.gif" onmouseover="this.src='2.gif'" onmouseout="this.src='1.gif'" border="0" alt="入口"></a></div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- 背景画像にロゴを重ねる方法を教えてください。
ＣＳＳで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。
- ベストアンサー
- HTML
- 時間帯によって背景画像を変える
タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・？どのようにすればうまくいくでしょうか？JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。
- ベストアンサー
- JavaScript
- 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- 背景画像がNetscapeでは表示されない
<HEAD>タグ内に下記の方法で背景画像を中央に表示させています。 IE5.5では正常に表示されますが、ネスケ4.7で確認すると背景画像のみ表示されません。 <BODY>タグ内の文字は正常に表示されます。 どうしたら良いでしょうか？ <STYLE type="text/css"> <!-- table#base { background-image: url("img/bg.jpg"); background-repeat:no-repeat; background-position: center center; } --> </STYLE> 宜しくお願いします。
- ベストアンサー
- HTML
- グラデーション背景と画像固定背景
こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> （省略） </HEAD>
- ベストアンサー
- ホームページ作成ソフト
- ブログのTOP画像表示方法（悩んでます）
どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか？？ ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }
- ベストアンサー
- ブログ
お礼
無事に問題が解決しました。 有難うございます。
補足
丁寧なアドバイス有難うございます。 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は初心者には解決できませんか。