- ベストアンサー
ｃｓｓでボックス内にテーブルのような要素を・・・
abrilの回答
- abril
- ベストアンサー率69% (388/560)
> 外枠を影付き角丸ボックスを作り、さらにそのボックスの中に、左側に写真、右側に小見出し＆説明文の欄を作りたい > ボックスのサイズは幅500高さ150くらい 上記の様な感じのレイアウトであれば、 > dl,dt,ddで左右横並びテーブルのようなものを作ってみた という考え方で基本、可能です。むしろ、 > 目標にしている数々のHPを閲覧していると、div要素ですべて配列しているものもあって …というマークアップよりもより適切だと思います。 以下は、下記の条件で検証してみたサンプルです。 ・ボックスの幅は500px、高さは最低で150px以上を確保して、内容量によって自動的に伸びる。 ・ボックス内の写真及びテキストはボックスの上下左右の淵から10pxの余白をとる。 ・ボックスの背景画像のドロップシャドウ付上部・下部角丸画像部分の高さは10px ・ボックスの背景画像の上部・下部角丸画像部分以外は縦方向にシームレスにリピート可能な画像とする。 ・写真のサイズはW100px×H100px ・見出し及び説明文は、写真の右端から10pxの余白をとる。 ・見出しと説明文の間には1行程度の余白をとる。 ・見出しはボールドにして説明文より大きめのサイズにする。 ・テキストは写真の下に回りこまない。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <link href="css/sample.css" type="text/css" rel="stylesheet" media="all"> </head> <body> （前の要素、省略） <div class="hoge_parent"> <dl class="hoge_child"> <dt>小見出し…</dt> <dd class="photo"><img src="images/photo.jpg" alt="写真" width="100" height="100"></dd> <dd class="description">説明文説明文…</dd> </dl> </div> （後の要素、省略） </body> </html> ---------------------------------------------------------------------- 【CSS】 ・back_top.gif…ドロップシャドウ付上部角丸画像：W500px×H10px ・back_bottom.gif…ドロップシャドウ付下部角丸画像：W500px×H10px ・back.gif…ドロップシャドウ付繰り返し部分画像：W500px×H任意 ---------------------------------------------------------------------- div.hoge_parent { width: 500px; margin: 0; padding-bottom: 10px; background: url(images/back_bottom.gif) no-repeat left bottom; } dl.hoge_child, dl.hoge_child dt, dl.hoge_child dd { margin: 0; padding: 0; } dl.hoge_child { position: relative; width: 500px; min-height: 150px; _height: 150px; background: url(images/back.gif) repeat-y; } dl.hoge_child dt { margin-bottom: 1em; padding: 10px 10px 0 120px; background: url(images/back_top.gif) no-repeat left top; font-size: 14px; font-weight: bold; line-height: 140%; } dl.hoge_child dd.photo { position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; } dl.hoge_child dd.description { width: 370px; margin-left: 120px; font-size: 12px; line-height: 140%; } ---------------------------------------------------------------------- IE6/7、Firefox2/3、Safari3、Opera9.61でほぼ同様の表示結果を得られております。 前後の要素（見出しや段落などのブロック）に角丸画像の上端もしくは下端を振り分けられる様な構成であれば、外側のdivは取り外す事も可能です。 また、リピートさせてよい部分がドロップシャドウ等がなくテクスチャもないプレーンな単色塗りであれば、その場合は背景色としてdlに併せて指定できるので、やはりdivで入れ子にしなくても可能になりますが。 いかがでしょうか？意図しているレイアウトと異なる様でしたら、具体的に詳細を補足して下さい。
関連するQ&A
- 角丸テーブルのCSS化？
既存のテーブルレイアウトのサイトを、 CSSレイアウトに変更しようと思っています。 大体は大丈夫なのですが、問題は角丸テーブル。 縦横自由伸張の(影付き)角丸テーブルなので、 一番単純な部分でも9個のtdがある状態です。 これはどういうふうにしたら良いでしょうか。 9個のDIVというのは複雑すぎますし… 何か良い案があればアドバイスをお願いします。
- ベストアンサー
- HTML
- cssで凝った角丸ボックスを作りたい。
以下の条件を満たしたボックスをスタイルシートで作りたいのです。 ●ほぼ全てのブラウザに対応させたい。 ・化石のようなブラウザは結構ですが、 IE、FireFox、ネスケ、Operaには 崩れる事なく表示できるようにしたいです。 ●tableタグを使用したくない。 ・tableを使用せずにこのボックスを実現したいのです。 ●幅や高さは固定ではなく％で指定したい。 ・ブラウザのウィンドウサイズによって変化させたいのです。 ●角を丸く、その外側は透過させたい。 ・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、 丸くさせた角の外側を透過させる必要があります。 参照1はかなり近いイメージなのですが、 角丸の外側が透過していません。(bodyのカラーと同じ色にしている) ちなみにこれを透過させると上下のバックグラウンドカラーや 左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。 （参照1）http://www.sovavsiti.cz/css/corners.html ●左から右へとグラデーションをかけたい。 ・希望しているボックスがグラデーションの為、 参照2の黄色の縦線のように太くしたボーダーではできない。 （参照2）http://phrogz.net/CSS/roundcorner.html ●影を付けたい。 ・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。 ●画像はcssで表示させたい。 ・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、 cssでバックグラウンドカラーなどで表示させたいと思っています。 ※これは変更・妥協可。 ●ボックスの中には文字などが入ります。 調べても考えても糸口が見つかりません。 もしご存知でしたら是非教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- 表をcssでデザインする場合
css初心者です。宜しくお願いします。 テーブルの各セル幅のサイズを指定してセルの背景やセル内の文字をcssで装飾したいのですが、こういう場合、セル幅はhtmlタグで指定しておくべきなのでしょうか？ またセル内に余白を設けたい場合はhtmlタグとcssのどちらで指定すればいいのでしょうか？ cssが効かないブラウザで見た時のことを考えると幅サイズや余白をhtmlタグで指定した方がセルがくっつかず見やすいのかな～？と思ったのですが。 アホな質問でしたらすみません。 宜しくお願いします。
- ベストアンサー
- CSS
- テーブル幅が固定できない
cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。 設定していますが、ブラウザの幅を狭めると テスト１|テスト２|テスト３ と表示されていたものが テスト１ テスト２ テスト３ と、レイアウトが崩れてしまいます。 <table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。 幅や高さ等も指定していますが、何かが足りないのでしょうか。
- ベストアンサー
- CSS
- CSS＆HTML
はじめまして、こんばんは ご質問です。 今htmlとCSSを使いHPを作成いたしています。 二段コラムの雛型にあてはめています。 メインコラムに ボックスを指定いたしたいのですが 上手く作成できません。＜div id=main> </div>の中にタグは入れられますか？ mainはCSS HTML記述が終わっています。 幅 ２００ 高さ100ぐらいのBOXボーダーラインで囲み 作成いたしたいのですがどうすれば出来ますか ボックスのタイトルをH3にしたいのですが CSSHTMLどう記述すれば いいのでしょうか ご指導ください 私がやりますとレイアウトが崩れます。
- 締切済み
- その他（インターネット・Webサービス）
- CSSでのレイアウト
私の今作っているHPはテーブルでレイアウトしているのですが、 あるところで『テーブルでレイアウトするのはお勧めできない。』と書いてありました。 よく読むと『テーブルでレイアウトするよりCSSでレイアウトする方がよい』ということでした。 具体的にCSSでテーブルのようにレイアウトするとはどうすればいいのでしょうか。 また、テーブルでのレイアウトの利点、CSSでのレイアウトの利点はどんなところでしょうか。 教えてください。お願いします。
- ベストアンサー
- HTML
- CSSレイアウトってなぜこんなに難しいのか？
個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか？？ みなさん、テーブルレイアウトと比べて異常に難しく感じませんか？ 今の調子ではＨＰ作成の仕事が請けられなくなっています。（涙） 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス？のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか？ ■今まで2～3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、 いっこうに進歩しません。（ここに本の題名書き出すとマズイですよね？） ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？ HPビルダーとかなら、もっと簡単に出来るのでしょうか？ ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 （メニューや、商品スペック、写真並べなども、テーブルで。） それが精一杯ですが、これで通用するのでしょうか？ HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳレイアウトについて
今まで参考書を見ながら参考書どおりにＨＰを作っていましたが、 それでは自分どおりのＨＰが作ることができないと思い、 タグ辞典などを見ながら自分でＨＰ作成を行うことにしたのですが、 ＣＳＳにて５個のボックスを作成して５個それぞれで 色分けしたあとにpositionにて位置を指定しましたが うまくいきません。 自分が考えているレイアウトは １個目のボックスはタイトルで一番上にあり ２個目のボックスは左メニューで左側にあります。 ３個目のボックスはメインスペースで中央にあります。 ４個目のボックスは右メニューで右側にあります。 ５個目のボックスはコピーライトで一番下にあります。 どなたか解決できる方のご回答をお待ちしております。 またこの場にて簡単なタグを記載していただければ幸いです。
- ベストアンサー
- HTML
- CSSで角丸テーブル
CSSでDIV要素を使って入れ子し、角の丸いテーブルを作っているのですが、なぜか誤差が出てしまいます。 CSSのソースは次のようなものです。 table（2）.gifは角丸テーブルの画像です 画像サイズ：横440px 縦11px .box-center-start { width: 440px; background: url(image/table.gif); background-repeat: no-repeat; } .box-center { width: 440px; background-color: white; margin: 20px 10px 20px 8px; float: left; } .box-center2 { width: 440px; background-color: white; padding: 0px 10px 10px 10px; border-right: 1px solid gray; border-bottom: 1px dashed gray; border-left: 1px solid gray; } .box-center3 { width: 440px; background-color: white; padding: 10px 10px 0px 10px; border-right: 1px solid gray; border-left: 1px solid gray; } .box-center-end { width: 440px; background: url(image/table2.gif); background-repeat: no-repeat; } このように記述し、HTMLに <DIV class="box-center"> <DIV class="box-center-start"></DIV> <DIV class="box-center2"> ～内容 </DIV> <DIV class="box-center3"> ～内容 </DIV> <DIV class="box-center-end"></DIV> と打ってもなぜか綺麗に表示されません。 クラス「box-center-start（end）」の下に、少し余白が入ってしまうのです。（10pxほどの） 何方か助言お願いしますm( _ _ )m
- 締切済み
- HTML
- このテーブルをCSSで書くとどうなりますか？
画像を参照願えますでしょうか。 左側100pxの右側は400pxで合計幅500pxあります。 （右側1行左側3行です。） これをテーブルレイアウトではなく、divとcssで書くとどんなhtmlになりますか？ 現在段組を色々やってますが、自問自答してもこのパターンだけが解決できないので・・・ 同じようにＨＴＭＬに興味ある方や詳しい方がいらっしゃいましたらご教授願います。 お答えの際にはＨＴＭＬソースを希望します。
- ベストアンサー
- HTML
補足
具体的かつ詳細で丁寧な回答、本当にありがとうございます。 そのままを使わせていただいたところ、少し思っているのとは 違っていたので、教えていただいたCSSを私なりに少しいじって みましたところ、かなり近いものができあがりました。 疑問点がいくつかあるのですが、重ねてご質問してもよろしい でしょうか？あつかましいお願いですみません。 かなり、具体的で込み入った質問になってしまうので、もし よろしければご返答くだされば幸いです。 もちろん込み入った部分までお時間が取れないという場合もおありで しょうから、その際は今回の質問コーナーを締め切らせていただいて お礼のコメントを再度アップいたしますね。 本当にありがとうございます。