• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:サイトによくある枠線の見出し画像について)

サイトによくある枠線の見出し画像について

このQ&Aのポイント
  • Webサイトでよく見かける枠線の見出し画像について、効果的な作成方法を考えています。画像を都度作成する手間を省くため、CSSと背景画像を組み合わせた方法を検討しています。
  • 質問1:CSSの設定を使って、(1)と(2)と(3)の要素を一つの画像に見せることは可能でしょうか?
  • 質問2:ブラウザの互換性を考慮すると、この方法は推奨されるものでしょうか?

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

  • ベストアンサー
回答No.2

1. できますよ 2. 多分推奨されないのはタグの扱いじゃないでしょうか。 やるとしたら <h3><span><span>ニュース</span></span></h3> h3{ background:url(A.jpg) no-repeat 0 0; } h3 span{ display:inline-block; padding:0; 10px; background:url(B.jpg) no-repeat right 0; } h3 span span{ height:30px; line-height:30px; background:url(C.jpg) repeat-x 0 0; } こんな感じの指定とかになると思いますが、あんまりスマートじゃないなぁと。 IE7以下を無視してもいい頃になれば:before、:afterが使えるのでシンプルにいけるんですけどね。

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

その他の回答 (1)

noname#140045
noname#140045
回答No.1

質問ですが、「新着情報」って無いですが・・・ □と■、違う画像はいいですが、何を言ってるの? □ニュース■ これも無いですが、「何から、どう」変わったら、という意味なのでしょうか。 ※私がわからないだけならば、特に放っておいて構いません。

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

関連するQ&A

  • 画像の枠線に色をつける方法を探しています。

    画像の枠線に色をつける方法を探しています。 現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ 画像の枠線が消えてしまいました。 入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。 色がついていないのか。枠線自体が表示されていないのか。分からず、 調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。 それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。 どう書けば枠線を表示できるのでしょうか。 希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。 勉強不足で申し訳ありません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • ある特定の表の枠線を消す方法は?

    ワードプレスでHPを運営しています。 以前使っていたホームページ・ビルダーは表の枠線を消すことが容易だったのに、 ワードプレスにしたら消えなくなってしまいました。 その固定ページの編集画面でどれだけ設定しても消えません。 スタイルシートでnoneとするとすべての表の枠線が消えてしまい、思うように操作できません。 表のプラグインはEditor Extenderを使っています。 ご回答お待ちしております。

  • gooブログの画像リンク

    gooブログで、画像からリンクをはると、画像の周りに黒い枠線が入ってしまいます。 その枠線が入らないように設定できませんか。 方法があったら教えてください、よろしくお願いします。

  • ワードで”スタイルと書式”がうまく使えない・・・(”見出し”の書式がずっと続く・・・)

    宜しくお願いします。 ワード2003を使用しています。 スタイルと書式で ================================ 5.タイトル(←見出し1とします) aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa ※aaaは本文 =================================== というような文章を作った場合、 本文のaaaのところにも(見出し1)の書式が適用されてしまいます。 本文の所(aaaaの部分)だけ選び”書式のクリア”や”本文”を適用させると、見出し1を適用させたい ”5.タイトル”の部分も”本文”のスタイルが適用され手しまいます。 どのようにすればうまくスタイルと書式が適用されるのでしょうか? また、本文(aaaの部分)を選択してルーラーでインデントを設定しようとすると、見出し1の部分(5.タイトル)の部分が動いてしまうのです どのようにすれば、見出しは見出し、本文は本文で、独立して動かせるようになるのでしょうか? 教えてください。宜しくお願いします。

  • Photoshopで切り抜いた画像にできる外枠線

    Photoshop(VerCS、Win版、OSはWinXP)で、地(背景)の部分が白いイラストが書かれたファイルを開き、「(長方形)選択ツール」で必要な箇所を選択し、[イメージ]→[切り抜き]した後、その画像をjpg保存すると、画像の外枠に枠線ができてしまいます(以前は、そうではありませんでした)。適用していないのに、[編集]→[境界線を描く]を施したときのような状態になってしまうのです。ソフトウェアのバグなのか、Photoshopの[切り抜き]コマンドにはそのような外枠線を「付ける・付けない」というオプション設定が可能なのを私が知らないだけなのか(それで勝手に設定変更してしまったのか)。どうしたらこの枠線がなくなるか、教えていただければ助かります。よろしくお願いいたします。

  • テーブルでセルの枠線を消す(CSS)

    表をつくり、下記の方法でセルの枠線を消しています。 <html> <head> <style type="text/css"> <!-- td{border-color:black;} --> </style> </head> <table border> <colgroup span=2 width=50></colgroup> <tr> <td>a</td> <td style={border-style:none;}>aa</td> </tr> <tr> <td>b</td> <td>bb</td> </tr> </table> </html> セルのタグ<td>内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、 先頭で設定するスタイルシートで<td>のボーダー設定をすると何故か消す事が出来ました。 なぜ<td>内の設定だけで消えないのか理由が分かる方、説明お願いします。

    • ベストアンサー
    • HTML
  • CSSで背景全体の設定方法とサイト本体の枠線がわかりません。

    はじめまして。 現在CSS勉強中でサイトを作成しています。 なんとか枠組み自体はおぼろげながら作ることができたのですが、背景の色や画像の設定方法や、サイトそのもの?の枠線や背景画像の設定方法がわからなく困っております。 http://www.rigna.com/ たとえばこちらのサイトですと、大理石?のような模様の背景に茶色がかったグレーがサイトそのものの背景色として指定されています。 今回私はサイトそのものに左右と下部分に枠線を設定したいのですが、やり方がわかりません・・・ どうか教えていただけないでしょうか?

    • ベストアンサー
    • HTML
  • gooブログにおける見出しの背景画像について

    gooブログを始めたばかりです。テンプレートカスタムブルーでCSSを編集し、下記のように見出しh1 h2 h3の後ろに背景画像を設定しようとしたのですが、画像の上に文字が乗りません。画像のポジションを調整することもできません。どうしてなのでしょうか? どなたかおわかりの方、ご教示ください。よろしくお願いします。 h3{ width: 640px; font-size: 1.1em; background-image : url(midashi13.png); background-position: 0px 0px; background-repeat: no-repeat; font-weight: bold; color: #007200; }

    • ベストアンサー
    • CSS
  • CSSで枠線の太さを変えるとき

    CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが1pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします(CSSは初心者程度のレベルです)。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================

    • ベストアンサー
    • CSS
  • Excelの列見出しが英字にできない・・・

    Excelのシート部分の上のほうにある、列見出しがなぜか数字になっていました。A・B・C・・・と変えたいのですが、手順を教えてください。