- ベストアンサー
背景画像で額縁のような表現をするには
よく、額縁や掲示板、黒板のような背景に文字を入れているサイトがありますが、 現在あれはどのように記述するのが適切でしょうか？ 少し前はテーブルで9つに分割し、それぞれのセルの背景に 左上角・ 上縁・ 右上角 左縁・中央（ここに文章を入れる）・右縁 左下角・ 下縁・ 右下角 のようにしていましたが、 テーブルでサイトのレイアウトをするというのは現在適してはいないようなので、 CSSなどでうまく指定する方法があればお教えください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- DrFell
- ベストアンサー率55% (305/551)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <STYLE TYPE="text/css"> <!-- div.message{ background:url(http://weblogjapan.com/img_d/2008/03/03/2.jpg) no-repeat; width:557px;/*画像の大きさから40px×2引いたもの*/ height:406px;/*画像の大きさから40px×2引いたもの*/ margin:0px; padding:40px;/*上の説明の40pxの根拠*/ color:#ffffff; } .message strong{ color:#ffccff;} div div{border:2px solid #ffccff;margin:0;padding:0 20px;} --> </STYLE> </head> <body> <div class="message"><!--このdiv内を黒板背景の上に書きます--> <div><p><strong>注意</strong><br /> この黒板は説明に使っただけで画像の素材ではありません。絶対にこの画像をご自分のサイトでは使わないでください。</p></div> <p>表ではありませんので、単一の背景画像としています。大きさが決まっていれば、無理に、左上などと分解する必要はありません。適用したいボックスの背景にするだけです。</p> <p>具体的な見本にしたいサイトがあれば、そのサイトのソースを覗いてみることをお勧めします。</p> </div><!--ここまで--> </body> </html>
お礼
ありがとうございます。 回答の文面をHTMLに組み込むニクイ演出です。 ソースを見てみるなど、勉強になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
イメージがつかめません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- div.section{width:300px;margin:auto;border:ridge yellow 6px;padding:0; font-family:"ＤＦＧクラフト墨W9","ＤＦＧブラッシュＳＱW9","ＤＦＰクラフト墨W9","ＤＦＰブラッシュＳＱW9",fantasy;} div.section div{margin:0;border:ridge rgb(200,200,0) 4px;background-color:rgb(0,60,0);color:white;padding:1em;} div.section div h2{margin-top:0;} --> </style> </head> <body> <h1>サンプル</h1> <div class="section"> <div> <h2>お品書き</h2> <p>アジのたたき</p> <p>レンコンの辛し和え</p> </div> </div> </body> </html> こんなのでよいだけだと簡単ですけど
お礼
説明下手ですみません。 でも、知らなかった指定方法などがあってとても勉強になりました。 ありがとうございました。
お礼
なるほど、画像表示と背景を組み合わせて三分割すればよいのですね。 すごくすっきりとわかりやすいです。 ありがとうございました！