- ベストアンサー
ｃｓｓでボックス内にテーブルのような要素を・・・
abrilの回答
ANo.6の補足を拝見しました。 > 目標の形のサンプル > この画像の左右反転が作りたいのです …であれば、やはり最初に回答したANo.2のサンプルの方が基本形が同じ（左に画像、右に見出しと説明、見出しと説明は画像の下に回り込まない）なので、あちらの方をベースに改良するのが妥当でしょうか。ただ、ANo.2では見出しの下に飾り罫のないデザインでしたので、やはりANo.3で示したサンプルの時と同様、この見出し用の飾り罫をどこかの要素の背景画像として適用してやる必要がありますね。 適用の仕方ですが、考え方はANo.3でのサンプルと同じで、見出しのテキストをマークアップしているdtの方には既にドロップシャドウ付上部角丸画像のbox_top.gifを背景画像に割り当ててしまっているので、現在背景用のプロパティを指定していないdd.descriptionの方に飾り罫用画像のh_line.gifを、幅を適切な値に短く（理由はわかりますよね？）加工し直した上で： ・backgroundプロパティで指定。描画開始位置は左上（初期値がそうなのでこの指定は省く事も可能）、リピートせず。 ・padding-topプロパティでdd内のテキストが重ならない様に飾り罫h_line.gifの高さ分の余白をとる。 ・margin-topプロパティにマイナス値を与えて飾り罫h_line.gifとdtのテキスト「セラピーカード・リーディング」の間を詰める。 ・position及びz-indexプロパティでdtとの重ね合わせの順番を調整する。 といった感じで修正すれば、ご希望のレイアウトになると思います。ただし、勿論ですがANo.2でのサンプルは、ANo.3のサンプルと違って実際のレイアウトの幅や使用する画像の大きさなどが異なる仮定条件で計算が合う様に作成したバージョンですから、まずはANo.2でのサンプルの各プロパティの値を実際の値に合致する様に計算をし直す方が先ですね（例：div.hoge_parentがwidth: 500px;となっているのをwidth: 480px;に修正…等々）。その再計算がちゃんと辻褄があって、表示がきちんと出来た後で、先に述べた「dd.descriptionの方に飾り罫用画像のh_line.gifを背景画像として適用」する作業を追加して下さい。 週明けまで実際のサンプルを作成して検証する事ができませんので、今回は修正作業のアドバイスのみさせて頂きました。もしそれで上手く行かない様なら、また補足して頂いてもいいのですが、レスは週明け以降になります。 ※蛇足ですが、ポイントの発行は質問を締め切った時点でできる様です。下記ガイドにそう書いてありますね。 http://oshiete.goo.ne.jp/ask/guide/question/close.html
関連する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
お礼
abril様 ありがとうございます。 教えていただいた上記の方法で、試行錯誤してみます。 何度も丁寧なサンプル作成と検証までしていただいて感謝してます。