- ベストアンサー
【ウェブ構築】DIVの背景を斜め線で２分割したい
ウェブサイトの構築方法について質問です。 DIVをCSSで -webkit-gradientなどを用いれば、正方形内でグラデを使って斜めに背景色を２分割できる知識はあるのですが、これを長方形でどうにかしてやりたいのですが、どうも方法が見つかりません。CSSでなくても良いので、画像を使わず、また、例えば座標値をパーセントなどで指定し、リキッドレイアウトに対応した背景を作る方法をご存知の方いらっしゃいましたら、教えていただけますか？
- flattaildesign
- お礼率0% (0/1)
- CSS
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- divの背景画像を、徐々に表示させるには？
トップページに、２つのdivボックスを設置し、 それそれの背景画像をcssで、リピートさせるようにします。 さらに、それぞれのdivの背景画像が、 徐々に表示されるようにしたいのですが、 cssや、javascriptで可能でしょうか？ （最初は真っ白→だんだん背景画像） 可能でしたら、その方法を御教えいただけますでしょうか！ Flash使用は、考えておりません。 よろしくおねがいいたします。
- ベストアンサー
- JavaScript
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
- CSS使用時のDIVにおける背景指定について
現在ホームページの作成でＣＳＳをメインに練習を行なっております。 テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-top" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-cate" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ ｜ ｜ ｜ ｜ ｜ ｜DIV ｜ DIV ｜ ｜id="index"｜ id="main" ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="footer" ｜ －－－－－－－－－－－－－－－－－－－－－－ 上記のようなありがちなレイアウトのＨＰを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン（w123*h40）を６つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li> ・ ・ ・ </ul> </DIV> </DIV> </body> ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- ＣＳＳの背景色について
ＨＴＭＬにＣＳＳを挿入して、背景色で、グラデーションを作っていますが、その背景色を、画面の真ん中から上のみに設定したいんですが、 そのようなタグはなく、どうしても、そのような設定を考えているんですが、何かいい方法はありませんか？ 私が作ったタグです、 <style type="text/css"> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#7A99EE',endcolorstr='#FEFFD7',gradienttype='0' ) } --> </style> 何かいいアイディアがあったらお願いします
- ベストアンサー
- その他（プログラミング・開発）
- CSSで背景に角丸長方形を置く方法
CSSで背景に角丸長方形を置く場合はどのようにすればいいのでしょうか？ テーブルだと一番上と一番下、さらにその他の部分と分けて背景をつければ大丈夫だと思いますが、CSSだとどのようにして作るのでしょうか？ やっぱり3つのdivで分けて作成するしかないのでしょうか？ http://www.takasu.co.jp/about_operation/price/index.html また、上記の参考サイトのようになあにテーブルが入っている場合はどうすればいいのですか？ テーブルを途中で区切るわけにもいかなそうですし・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- Illustrator CS2で等間隔斜め線の背景の作成方法
書籍を参考にやってみたのですが肝心なとこが 掲載されていないため質問させていただきます。 細かい斜め線の背景を作りたいと思ってます。 書籍には正方形（5x5cmくらい）を書いて斜線が等間隔に並んだ パターンを書いていくと書いてあるのですが、 斜線を等間隔に並べる方法がわかりません。 （とりあえず横線を等間隔にして斜めにして作って見ました） 次に上記で作成したパターンをスウォッチパネルに 登録するのですがA4サイズの背景でで使用するときに 5ｘ5ｃｍのものしか表示されず全体的に表示すると 隙間ができてしまいます。 うまく背景で使える方法を教えてください。 よろしくお願いいたします。
- ベストアンサー
- グラフィックソフト
- ブログのバナーの背景に2つ画像を入れたい
seesaaブログで小粋空間さんのテンプレートを使用しています。リキッドレイアウトです。 バナーの部分に背景となる画像をCSSで指定しています。 そしてバナーの左端にはブログのタイトルと説明があります。 ここからが質問なのですが、右端にバナーと同じ高さの画像を配置したいのですが どのような方法があるでしょうか？背景画像を二つ指定して重ねることなんて出来るのでしょうか？ もしくはバナーを左右で二つに区切ったりしなければいけないのでしょうか？ ご教授よろしくお願いいたします。
- ベストアンサー
- CSS
- xhtml+cssでdivをdivで内包する
xhtml+cssでウェブサイトを作成しています。 その際、 <div id="a"> <p>題名</p> <div class="b">内容</div> <div class="b">内容</div> </div> のようにdiv要素内にdiv要素を内包したいと思っています。 しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。 ｃｓｓハックを使用する方法が http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/ に掲載されていましたが、ＩＥ７とＩＥ－ＭＡＣが対象のようです。 これと同じような効果が得られるもので、ＩＥ６以降、Ｆｉｒｅｆｏｘ２以降、Ｆｏｄｏｒａそれぞれに対応している方法はありますでしょうか？ 私がどうしたいのか少しわかりにくいかもしれませんが、上記ＵＲＬでどうしたいのかはわかると思います。 アドバイスお願い致します。
- ベストアンサー
- CSS
- フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- VBAを使用して、UTF-8（bom無し）形式でテキストファイルに書き出す方法を修正したい。
- 現在のコードでは、Shift-JIS形式で書き出されてしまうため、UTF-8（bom無し）形式に変更したい。
- 参考になりそうな方法として、ADODB.Streamオブジェクトを使用する方法がある。
