アプリ版：「スタンプのみでお礼する」機能のリリースについて

背景画像にコメントを載せて、タイトルとして表示する方法

解決済

  • 質問者：orehatens
  • 質問日時：
  • 回答数：4件

背景画像にコメントを載せて、タイトルとして表示する方法

http://chaichan.web.infoseek.co.jp/src/htmtable. …
↑の基礎講座ページのような項目別のタイトルに文字入り画像を表示したいです。
項目別のタイトルというのは、
その基礎講座ページの「はじめに」「テーブルサンプル」「サンプルソース」などのタイトルのことです。

今自分が作っているページは項目別のタイトルの表示の仕方が、
色を付けた文字を太く大きくしただけのものなので見た目がさえません。
それで、基礎講座ページのようにできればなと思いました。


・画像の中にコメントを入れられる
・PC画面の横幅に関係なく画像がちゃんと表示される



http://allabout.co.jp/internet/hpcreate/closeup/ …
↑のページの通りにしましたが、何も変化がありません。






<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>
　　　　：
　　　　：
と初心者なりにこんな感じでやったのですが、
どうすれば基礎講座ページのように表示することができますか？

通報する

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

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： metametamu
  • 回答日時：

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ぐらいの要素は覚えるとサイト作りが楽になるんじゃないかな？と思います。

この回答への補足

丁寧なアドバイス有難うございます。
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は初心者には解決できませんか。

補足日時：2010/05/08 11:37
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

無事に問題が解決しました。
有難うございます。

通報する
お礼日時：2010/12/31 01:39

No.4

  • 回答者： syouchan33
  • 回答日時：

目的のページ（最初のURL貼り付けてあるページ）でのタイトル部分は、背景色を指定せず（透過）、多分body部分の背景画像が透けてみえるようにしてあるようです。



つまり、タイトル部分以外のところには背景色を白と指定し、タイトル部分は背景なし、にしてあるのではないでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

無事に問題が解決しました。
有難うございます。

通報する
お礼日時：2010/12/31 01:25

No.3

  • 回答者： metametamu
  • 回答日時：

現在のhtmlソースや目的のレイアウト画像がわかればもう少し回答しやすくなると思うのですが、補足可能ですか？

    • good
    • 0
    • 件
通報する
この回答へのお礼

無事に問題が解決しました。
有難うございます。

通報する
お礼日時：2010/12/31 01:38

No.2

  • 回答者： zeff#1
  • 回答日時：

まず<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
    • good
    • 0
    • 件
通報する
この回答へのお礼

とても参考になりました。
有難うございます。

通報する
お礼日時：2010/12/31 01:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報