- ベストアンサー
CSSを用いた背景画像の表示方法
- CSSを使ってH1タグに背景画像を表示する方法について教えてください。
- HTMLファイルに直接背景画像を書き込む方法を知りたいです。
- H1タグに猫集まれという文字を含んだ背景画像を表示したいです。どうすればいいですか？
- nyan_nyanko
- お礼率92% (76/82)
- CSS
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2です。 真ん中あたり・・ <h1 style="background-image:url();text-indent:20em;width:120px;height:80px;">猫集まれ</h1> と書いてあります。 ^^^^^^^^^^^^^^^^^^^^^^^^ もちろん、 <h1><img src="" width="" height="" alt="猫集まれ"></h1> 急がば回れ・・・きちんと理解したうえで御利用ください。のほうがSEO的にもネットワーク負荷(早く表示される)と言う意味からも、より良いです。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ホームページ作成の初心者です。 ウェブサイト、ウェブページ(ドキュメント)でしょう。利用する分には問題ないですが、作る立場になると、「ホームページに戻る」ってどこ。「このページをホームページに登録する」って??となっちゃいます。(ホームページとはブラウザを起動したとき最初に表示されるページ、ホーム(基点)と言う意味) ＞H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、 重くはなりませんよ。画像はスタイルシートと同様、一度しか読まれませんから・・。スタイルシートから読んだって一緒です。画像を使う場合は、必ずalt属性で代替テキストを入れておかなければなりません。 見出しをスタイルシートで画像を指定するのは、 ・将来デザインを変更する時にHTMLを書き直さなくてすむ。 ・ユーザーエージェントごとにデザインを変えることができる。 印刷用にはテキストで、携帯端末にはシンプルでデータ量の少ない画像で・・ などが目的です。 ＞本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。 その目的は、プレゼンテーションに関わるものをHTMLには一切記述しないことで、HTMLがシンプルでメンテナンスが容易になり製作コストが低くなること。ひとつのスタイルシートを複数のページで利用するためネットワーク負荷が低減されることです。 「文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、」と矛盾してます。 ＞ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。 スタイルは、 ・外部スタイルシート ・HTMLの<head></head>内の<style></style>内 ・HTML要素のstyle属性 に記述できます。 <h1 style="background-image:url();text-indent:20em;width:120px;height:80px;">猫集まれ</h1> 最後の「HTML要素のstyle属性」は、他の記述とは異なる意味を持ちます。この記述は詳細度が[1,0,0,0]となり、他の場所での指定をすべて上書きしてしまいます。 スタイルシートを用いる最大の利点 ・ネットワークの負荷を低減する。 ・HTMLが簡略化され、製作や管理のコストが低減 ・スタイルシートを変更するだけで、すべてのページのデザインが変更できる ・CSS(カスケーディングスタイルシート)の最大の利点、カスケーディングが機能しない などの問題があります。 これを使うのは、特定のページの!!!特定の要素!!!のみ、他と異なるスタイルを指定したいときだけという極めて限定された用途にしか使いません。 ※すべてのページに同じスタイルを指定するのでしたら、外部スタイルシートにします。 特定のページだけなら、<head></head>内に記述します。(外部CSSの読み込み後) ※HTML要素内のstyle属性での記述は、<img src="" width="" height="" alt="">と比較して負荷は同じというより、逆に少し増えます。 HTMLをシンプルにして文書構造しか書か製作・メンテナンスコストを下げたい デザインが変更される可能性がある。スタイルシートで自由に変更したい 印刷用など複数のユーザーエージェントでデザインを変更したい 代替スタイルシートを使いたい ネットワーク負荷を下げたい などの文書構造とプレゼンテーションの分離というスタイルシートを用いる利点をすべて失うことになります。 ＞本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。 伝聞(という細切れの情報)ではなく、直接仕様書を確認しましょう。その理由も含めてすべて書かれています。 HTML4.01仕様書(邦訳)/14 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html )
お礼
どうもありがとうございます。
- play_with_you
- ベストアンサー率37% (112/301)
style属性の話かな？ https://www.google.com/search?q=style%E5%B1%9E%E6%80%A7 ちなみに。 ＞H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。 結局画像は読み込むのだからどっちでも同じ。 ＞本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。 ＞ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。 何故そうしたいのかは知らないが、HTMLソースが汚くなるので本当はやらないほうがいい(というか厳密に言えば違反)。
お礼
回答ありがとうございます。 > style属性の話かな？ はい、そうです。たぶんですけど。 > 結局画像は読み込むのだからどっちでも同じ。 そうでしたか。これは勉強になりました。どうもありがとうございました。 > 何故そうしたいのかは知らないが、HTMLソースが汚くなるので本当はやらないほうがいい(というか厳密に言えば違反)。 以下は、http://css.rakugan.com/css2.html の記述からです。 「内部スタイルシート 内部スタイルシートとは、HTMLの<head>～</head>内にスタイルシートを記述する方法です。 ＜中略＞ 上記の記述例を見ても分かると思いますが、インラインに記述した場合はページのレイアウトやデザインを変更しようとした場合、一つ一つのページを変更する事になりページ数が多ければ大変な時間と労力を費やしてしまいます。 また内部スタイルシートの場合もレイアウトやデザインの設定のみならず、各タグの設定（指定）が増えればおのずとHTML内への記述が増え、インライン同様に変更には時間と労力がかかるとともに、SEO上もあまりよくありません。（SEO対策に関しては別ページで説明）よって外部スタイルシートを利用する事をオススメします。外部スタイルシートの設定方法については下記を参考にして下さい。」 確かに、外部スタイルシートとしてファイル作成した方が上記の通り、ベストでしょう。 ただ、一箇所のみに（h1のみに）、これを適用することに対しては、別段不便には思いませんでした（適宜、修正等して使いまわしするのなら別ですが）。 で？？？ すみませんが、しつもんに対する回答の程、よろしくお願いします。
お礼
ご回等ありがとうございました。 SEO対策、つまりクローラーの巡回の面から？ こちらの方がいいのですね。 早速ためしてみたいと思います。 どうもありがとうございました。 厚くお礼申し上げます。