- ベストアンサー
背景画像で額縁のような表現をするには
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
簡単なやり方で・・・ /*--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" />
その他の回答 (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:"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
- HP作成で、背景画像をページとはしとはしをあわせるには?
説明分かりづらくてスイマセン;; つまり、背景画像をそのページの端(右上・右下・左上・左下)に ピッタリとあわせるタグをおしえてください!
- ベストアンサー
- その他(インターネット・Webサービス)
- 背景を四隅に固定する
背景の画像を右上、右下、左上、左下の全てに固定したいと思います。 過去の質問(http://oshiete1.goo.ne.jp/qa1871874.html)を見て右下と左下には固定できたのですが、 あとの2つをどうやればいいか分かりません。 どうすれば良いのでしょうか?
- ベストアンサー
- HTML
- ☆背景画像を2箇所に固定☆
異なる背景画像を、ウィンドウの 右上と左下に、それぞれ固定表示 させる方法って、ありませんか?? 1箇所に固定するCSSなら、 検索で見つけたんですけど。 それの右上用と左下用を 一緒に使っても駄目でした☆ やはり、壁紙には1つの画像しか 使えないものなのでしょうか…
- ベストアンサー
- CSS
- CSSで背景画像設定
ページ自体はテーブルで位置を特定しています。 中央に750ピクセルのテーブルを配置しその中にコンテンツを入れています。 さて、背景画像を固定にしたいと思っています。 場所なのですが、ブラウザサイズに左右されない下部分・中心から375右の位置が右端になるようにしたいんです。 いわゆる「中央に750ピクセルのテーブルを配置しその下部分に画像を配置」した状態で、なおかつ固定としたいんです。 このような言い回しでわかっていただけたでしょうか? CSSで右下に配置ってのはやったことがあるのですが、「中央から375ピクセルの位置が右端」なんてことが可能なのでしょうか? 方法があれば教えてください。
- ベストアンサー
- HTML
- テーブルレイアウトしてしまっている後でCSSの背景を適用したいです。
私HPをつくっているのですが、 テーブルレイアウトをしているのですが、 最近CSSを勉強しだしまして、 テーブルレイアウトのうしろの背景色を設定しようと思っております。テーブルはすべて中央揃えにしておりまして、 そのテーブル以外の部分に背景色を設定したいと思っております。 どのようにしたいかというと 参考HPをあげておきます。 http://www.neutrals.jp/works.html http://www.kekkon-navi.org/ http://www.plusmoney.jp/ この用な感じにメニューや本文の部分は白くて、 それ以外のところの背景が色をついている状態にしたいです。 外部CSSで全ページに適用していこうと思っているのですが、 CSSにはどのように記述したらよろしいでしょうか? お詳しい方よろしくお願いいたします。
- ベストアンサー
- HTML
- レイアウトはテーブルよりCSSですか?
今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをCSSに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか? ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか? ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか? ご意見・ご回答いただきたく、どうぞよろしくお願いします。
- ベストアンサー
- CSS
- サイトは中央配置、背景に画像、または色をつける
css初心者です。 サイト(すみませんこの言葉でいいでしょうか?)を ブラウザ画面の中央に配置したいとき cssでbodyを中央配置にしています。 その両サイドにも、色または画像をつけたいのです。 テーブルを使用せず 下記のページのように サイトは中央に配置、背景に色や画像をつけるには cssでどのように指定すれば よろしいでしょうか? http://www9.nhk.or.jp/umechan/ http://www.nikoand.jp/ よろしくお願いいたします。
- ベストアンサー
- CSS
- ブログの背景画像が崩れます。
ブログのテンプレートにCSSで左上・右下と、背景画像を2枚固定しました。 しかし全画面表示の時には問題ないのですがブラウザの大きさを変えると背景画像も一緒に動いてしまい画像が重なり合ってとても見づらくなってしまいます。 ブラウザが小さくなったら、下部に横スクロールを出して背景、コンテンツを固定したままにしたいのですがどうすればいいのでしょうか。 うまく説明出来なくて申し訳ありません。 宜しくお願い致します。
- ベストアンサー
- ブログ
- CSSで背景画像指定
どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか?
- ベストアンサー
- CSS
- CSSレイアウトで背景印刷ができない。
CSSレイアウトで外注さんに制作していただいたのですが、画像のみのサイトな為、印刷したら白い紙しかプリントされません。 強制的に背景まで印刷するような、JavascriptもしくはCSSの記述はありませんでしょうか? 外注さんに「それならテーブルでくむしかない」といわれております。 誰か助けてください。。。
- 締切済み
- その他([技術者向] コンピューター)
お礼
なるほど、画像表示と背景を組み合わせて三分割すればよいのですね。 すごくすっきりとわかりやすいです。 ありがとうございました!