- ベストアンサー
テーブルを使わずにコーディングをしたい
ORUKA1951の回答
色が背景色の場合。もっと簡単かな <!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{position:relative;width:80%;min-width:600px;max-width:900px;margin:0 auto;} div div{width:26%;} div div div{width:100%;} div.column{position:absolute;left:0;top:0} div.column div{padding:0.5em 1em;} div.n2{left:33%;} div.n3{left:66%;} div.column div p{padding:0 1em;} div.column div.product p{background-image:url(./images/blue.gif);} div.column div.books p{background-image:url(./images/green.gif);} div.column div.note p{background-image:url(./images/orenge.gif);} div div div p{width:100%;line-height:30px;margin:0;text-indent:1em;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="section"> ＿＿<form action="./"> ＿＿<div class="column n1"> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<select name="m1" tabindex="1"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<select name="m2" tabindex="2"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿<div class="column n2"> ＿＿＿<div class="books"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<select name="m3" tabindex="3"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<select name="m4" tabindex="4"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿<div class="column n3"> ＿＿＿<div class="note"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<select name="m5" tabindex="5"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<select name="m6" tabindex="6"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿</form> ＿</div> </body> </html>
関連するQ&A
- 円形の配置にするコーディングについて
sample.gifのような形をつくりたいのですが うまくいかず詰まっています。 1つ１つの青い四角はボタンです。 ※アニメーションgifで さらにロールオーバーボタンにする予定です；_； 大きくdivで囲って(赤い四角) それをそれをposition:relativeに。 さらに１つ１つのボタン(青い四角)をdivで囲って 各ボタンをposition: absoluteで 位置を設定。 というやり方は間違っていますか？ １つの親ボックスの中に複数のabsoluteがあると ダメなのでしょうか？ まだまだ初心者に毛が生えた程度なので position: absoluteをよく分かっておらず ネットで調べて見よう見まねでやっています。 もしこっちのやり方の方が良いよ。というような やり方があれば、よければそちらも教えてください。 こんな形にしたのを後悔しているのですが 決まってしまったので、何とか作りたいのですが… よろしくお願いします。
- ベストアンサー
- CSS
- HTMLの画像の位置の指定
HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、ＣＳＳやジャバスクリプトで使用している、 position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置（指定しない場合はこれ） position:fixed; 上のようなポジションタグを使う事は可能ですか？ できれば、そのサンプルのようなものを書いてもらえると 助かります。
- ベストアンサー
- HTML
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- cssによるプルダウンメニューの不具合
宜しくお願いします。 フリーのcssをカスタマイズ使用してプルダウンメニューを作っていますがうまくいきません。便宜上、外部スタイルを内部に記述しています。 製品紹介のボタンだけがプルダウンです。 （ケースA） http://nasu-exnet.info/pull-down2.html DIV#menu{ top:; left:; width:100%; position:absolute; z-index:100; } こちらは、position:absolute;を入れています。これを入れるとボタンの位置がずれてしまいます。 （ケースB） http://nasu-exnet.info/pull-down1.html DIV#menu{ top:; left:; width:100%; 123position:absolute; z-index:100; } こちらは、position:absolute;を無効にしてあります。ポジションは敵適正位置になりますが、プルダウンすると、全体がずれてしまいます。 どうすれば、適正位置でなおかつプルダウン時にずれなくなるでしょうか？ 宜しくお願いします。
- 締切済み
- HTML
- 可変画像の下にdivを後続で配置させるには？
http://www.jormungand.tv/ 上記サイトのトップページで、ソースを見ると「<img id="index"＞」をCSSにて「position:absolute; width:100%;」とすることにより、画像を背景画像のようにしてウィンドウサイズに合わせて拡大縮小させているようです。 そこまではわかるのですが、そのあと「<div id="footer">」が、その可変画像の下に続いているのが、どうやってやっているのかわかりません。 上記サンプルサイトのように、 「position:absoluteの可変画像」の下に、「divなどブロック要素を後続で続けて配置する」方法を教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- アメブロｃｓｓ 画像を好きなところに配置
アメブロをやっています。 新cssを使用しているんですが、画像を好きなところに配置（添付画像の水色のハートの位置とかに）しようとするため各サイトをまわり、探しています。 画像はリンクなし、固定にしたいです。 新ｃｓｓ用の画像を好きなところに配置するタグを見つけて実行したんですがF５を押しても、何回やっても画像の半分が記事欄の後ろに行きます。 そこから位置をいじっても動きません。 貼り付けているのはこのタグです。 ｃｓｓへは↓ /* ------------------------------------------------------- */ /* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */ /* ------------------------------------------------------- */ .skinFrame2{ width:1000px;/* コンテンツ幅を設定 */ margin:auto;/* 自動中央寄せ */ position:relative;/* 起点指定 */ } #bk001{ position:absolute; top:220px; left:200px; z-index:99;/*重なりの順序*/ } #aifurex1{ position:absolute; top:220px; left:200px; width:130px; height:150px; overflow:auto; background-color:transparent; z-index:100;/*重なりの順序*/ } フリースペースには↓ <img src="画像のＵＲＬ" id="bk001"> <div id="aifurex1"> 文章 </div> 画像URLはアメブロの画像フォルダ→画像URLをコピーからペーストしています。 今までいろんなタグでやってきましたがいい加減できないので詳しく教えていただけると助かります。
- 締切済み
- ブログ
- ＣＳＳについて 初心者です。positionについて
勉強中です。 すいません。教えてください。 「親要素を基準に子要素の位置を指定するには、 親要素に position: relative を指定し (absoluteにする理由があるならそちらでも良い)、 子要素に position: absolute を指定すればよいと言うことになる。」 となりますが、この概念がさっぱりわかりません。 確かに、子要素の位置をposition: absoluteで配置しようとした際に、 親要素にposition: relative（しかも、値はなし）で設定しないとうまく行きませんでした。 ネットで調べても全く意味がわかりませんでした。 なぜ子要素の位置をposition: absoluteで配置しようとした際に親要素に、position: relativeをしかも値なしで設定しないと、うまくいかないのか 詳しく教えていただけないでしょうか？m(..)m
- ベストアンサー
- HTML
- レイアウトはテーブルよりＣＳＳですか？
今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをＣＳＳに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ ご意見・ご回答いただきたく、どうぞよろしくお願いします。
- ベストアンサー
- CSS
- お叱りを受けるような質問なのですが・・・
ＣＳＳをかじって１年位なのですが、ＨＰ作ってふと疑問に思うことがあるのです。 CSSは、主に文書のレイアウトやデザインの為の言語ですよね。で、その目的で使う分については、テキストの位置、画像の位置すべてposition.relativeで思うようにできると思うのですがそれでは、だめなのですか？ paddingやfloatとかdivとか使わなくても・・・と思うのですが・・・。 グループで分業してやってるわけではないから、すべてposition,relativeでレイアウトしてもいいと思うのですが、どうなんでしょう？
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 非常に勉強になりました。