• ベストアンサー
  • 困ってます

背景画像で額縁のような表現をするには

よく、額縁や掲示板、黒板のような背景に文字を入れているサイトがありますが、 現在あれはどのように記述するのが適切でしょうか? 少し前はテーブルで9つに分割し、それぞれのセルの背景に 左上角・     上縁・     右上角 左縁・中央(ここに文章を入れる)・右縁 左下角・     下縁・     右下角 のようにしていましたが、 テーブルでサイトのレイアウトをするというのは現在適してはいないようなので、 CSSなどでうまく指定する方法があればお教えください。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数838
  • ありがとう数4

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

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

簡単なやり方で・・・ /*--CSS--*/ .box{ background-image:url(../img/in.jpg); background-repeat:repeat-y; padding:10px 0 10px 20px; } /*--HTML--*/ <img src="./img/top.jpg" /> <div class="box"> <p>aaaaa</p> <p>aaaaa</p> <p>aaaaa</p> <p>aaaaa</p> <p>aaaaa</p> <p>aaaaa</p> </div> <img src="./img/btm.jpg" />

共感・感謝の気持ちを伝えよう!

質問者からのお礼

なるほど、画像表示と背景を組み合わせて三分割すればよいのですね。 すごくすっきりとわかりやすいです。 ありがとうございました!

関連するQ&A

  • CSSで背景画像指定

    どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか?

    • ベストアンサー
    • CSS
  • CSSレイアウトで背景印刷ができない。

    CSSレイアウトで外注さんに制作していただいたのですが、画像のみのサイトな為、印刷したら白い紙しかプリントされません。 強制的に背景まで印刷するような、JavascriptもしくはCSSの記述はありませんでしょうか? 外注さんに「それならテーブルでくむしかない」といわれております。 誰か助けてください。。。

  • 中学の図の問題ですが…

    縦長の四角形ABCD(左上角をA左下角をB右上角をC右下角をD AB=8センチ AD=6センチ)があります。BCの延長線にEをおき、CEも6センチです。DC上にFをおき、DF=1/2FCとします。EとF、EとDを結び、DEとBFの延長線の交点をGとします。 (1)△FBEの面積は?これは32とわかりました。 (2)線分GFの長さは線分FBの長さの何倍か? これは、△BCEと△DEGが相似ということが証明できればいけると思ったんですが…相似が証明できず。どのように考えたらいいのでしょうか?

その他の回答 (2)

  • 回答No.3
  • 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に組み込むニクイ演出です。 ソースを見てみるなど、勉強になりました。

  • 回答No.2

イメージがつかめません。 <!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:"DFGクラフト墨W9","DFGブラッシュSQW9","DFPクラフト墨W9","DFPブラッシュSQW9",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> こんなのでよいだけだと簡単ですけど

共感・感謝の気持ちを伝えよう!

質問者からのお礼

説明下手ですみません。 でも、知らなかった指定方法などがあってとても勉強になりました。 ありがとうございました。

関連するQ&A

  • テーブルレイアウトしてしまっている後でCSSの背景を適用したいです。

    私HPをつくっているのですが、 テーブルレイアウトをしているのですが、 最近CSSを勉強しだしまして、 テーブルレイアウトのうしろの背景色を設定しようと思っております。テーブルはすべて中央揃えにしておりまして、 そのテーブル以外の部分に背景色を設定したいと思っております。 どのようにしたいかというと 参考HPをあげておきます。 http://www.neutrals.jp/works.html http://www.kekkon-navi.org/ http://www.plusmoney.jp/ この用な感じにメニューや本文の部分は白くて、 それ以外のところの背景が色をついている状態にしたいです。 外部CSSで全ページに適用していこうと思っているのですが、 CSSにはどのように記述したらよろしいでしょうか? お詳しい方よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Safari、Googleマップ拡大が出来ない

    PCの mac/OS X 10.8.5/Safari6.0.5上でGoogleマップの右下角に表示される筈の+-、右上角のログイン表示、左下角に表示されるEarthの小さなアイコン(?)が、いつのまにか表示されなくなり、特に拡大縮小が出来ないので困っています。特にどこかを触った記憶も無いのですが。 ちなみにchromeでは表示されます。 調べても表示されるのはスマホのケースばかりで分かりません。よろしくお願いいたします。

    • 締切済み
    • Mac
  • 背景画像を配した海外のサイトのようなものを作りたい

    タイトルの通り、海外のサイトのような技術を身につけたいです。 Photoshopでデザイン→ドリームウィーバーでCSS&htmlにより作っています。独学で習得してきたので、何が「正しい作り方」なのか、いまいち自身がありません。テーブルレイアウトのみ、xhtmlとcssコーディングはできません。 そこでたとえば http://www.designwalker.com/2008/06/bg-inspiration.html に紹介されているような、背景画像とコンテンツが一枚の絵になったような、綺麗なサイトが作れるようになりたいと切望しています。 デジ○リなど、著名な学校もありますが、一方で行っても基本のみで大したことは教えてもらえない、という話も聞きますし、確実にマスターできる方法を知りたいのです。 上記サイトを作るようになれるための学校、もしくは通信教育、はたまた留学しかない、など、どの様な学校で学べば良いのか、教えてください。

  • テーブルの背景画像のみ透明化

    http://css-happylife.com/archives/2007/0106_1500.php 上記サイトのように、背景画像のみを透過させたいと考えています。 例えば、 body{ background-image : url(./background.png); } table{ filter:Alpha(opacity=70,finishOpacity=70,style=3); } とした場合は、テーブル内の全てのコンテンツが透過されてしまいます。 透過されているテーブルの上に透過されていないテーブルを重ねて表示させる方法もネット上に掲載されていましたが、その場合、上記サイトのように動的にテーブルサイズが変わる場合は、実装が難しいように感じます。 しかし上記サイトでは背景のみが透過されているようです。 スタイルシートを見てみましたが、自分の知識では解析できませんでした。 実現方法を教えていただけると大変助かります。

    • ベストアンサー
    • HTML
  • レイアウトはテーブルよりCSSですか?

    今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをCSSに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか? ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか? ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか? ご意見・ご回答いただきたく、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • 左右の背景を別にする

    http://www.kyoei-ss.co.jp/index.html では背景を使ってますが左は右側に落ち込む感じ、右は左側に落ち込む感じになっており違っています。どうしたらこのような背景を作れますか。ウェブデザイナーですcssを使えます。 よろしくお願いします。

  • 背景の画像を左上に一つ固定する方法

    いつもお世話になっております。 web初心者です。環境はMac OS 9.2、Dreamweaver 4です。 タイトルの通り、背景の画像を左上に一つ固定する方法をどなたか教えてください。 ●左上に背景画像として各ページごと違う画像を入れたい。(大きさは同じ) ●テーブルやセルで画像を入れることはNG(背景画像なので) ●リピートはしたくない。 下の方法をネットで得たのですが、 できればCSSを使わずに作成したいのですが。 また、下の方法であればURLは相対パスでもできるのでしょうか。 <style type="text/css"> <!-- body{ background:url(画像のURLを記入) no-repeat fixed; } --> よろしくお願いします。 </style>

    • ベストアンサー
    • HTML
  • ホームページのcssでの3段列作りのレイアウト

    cssを使ってトップ一つと左、真ん中、右と3列にレイアウトをしたいのですが皆様どのようにされていますか? テーブルを使ってやっている方が多いのですがそれを使わない方法がありましたら教えてください。 標準ではあまりテーブルは使わないようになっていたので知りたいです。 backgroundをXとYで指定すればいいのかとはうっすら思っています。それでいいのでしょうか?

  • 画像を使ったテーブルで隙間ができてしまいます

    画像を枠に使ったテーブルをHTMLで作成し、FC2ブログに載せています。 Chrome上ではうまく表示されるものの、IE、Firefoxでは Rowの上に隙間ができてしまい、枠画像が正しく表示されません。 ----------Tableの基本構造---------- <table cellspacing="0" cellpadding="0" border="0" width="x" height="y" bgcolor="#FFFFFF"> <tr><td><img src="左上角"></td> <td><img src="上部"></td> <td><img src="右上角"></td></tr> <tr><td width="15"><img src="左1列目"></td> <td style="color:# … ;"> 内容1</td> <td width="15"><img src="右1列目"></td></tr> <tr><td width="15"><img src="左2列目"></td> <td style="color:# … ;"> 内容2</td> <td width="15"><img src="右2列目"></td></tr> <tr><td><img src="左下角"></td> <td><img src="下部"></td> <td><img src="右下角"></td> </tr></table> -------------以上-------------- 上記のものよりも実際は行と列を増やしておりますが、基本的に増殖しているだけです。 1行目と2行目の間に隙間ができて縦の画像枠が細切れになっています。 隙間ができているのは行の下ではなく、上の部分のように見えます。(背景色の見え方などから) テーブルのみの上記コードは、ローカル環境ではIEでも正しく表示されるため、 ブログにアップした際乱れるのは、スタイルシートの影響かと考えております。 自分でそれらしいところをいろいろ設定をいじりましたが改善しません。 ということで、 ≪スタイルシートの設定で、画像を枠に使ったテーブルの隙間に影響を与えうる要素≫ が何が考えられるか教えて頂ければと存じます。 なお、使っているStyle Sheetは以下のものですが、 http://blog-imgs-30-origin.fc2.com/w/m/k/wmks/wm_gienah_R.html TableにかかわるStyle部分はコメントアウトしましたので、テーブル自体のスタイルは 適用されていないはずです。

    • ベストアンサー
    • CSS
  • CSSの重なり順って指定できますでしょうか?(画像です)

    現在CSSをコツコツと勉強中なのですが、壁にぶつかってしまいました・・・。 CSSで背景画像を指定したのですが、これらの画像の重なり合う順番って構うことは出来ますでしょうか? 例えばですが、右に犬小屋の画像、左に犬の画像がありCSSで背景として重なり合わせた場合、犬小屋の上に犬が乗っかるようにしたいのです。(物凄い例ですのでCSSを使わなかったらとは言わないで下さいね) サイトをウロウロとしていたところ、Zインデックスという存在を知ったのですが、使い方がよく分からないというか、これで指定できるものなのでしょうか? 当たり前の質問で申し訳ないのですが、ご存知に方がおられましたらアドバイスいただけたら幸いです。 宜しくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう