- ベストアンサー
cssでボックス内にテーブルのような要素を・・・
こんにちは。はじめまして。 CSS超初心者なのですが、バックグラウンド画像を使用して、例えば 外枠を影付き角丸ボックスを作り、さらにそのボックスの中に、 左側に写真、右側に小見出し&説明文の欄を作りたいのですが、 どうやればいいのか、困っています。(ボックスのサイズは幅500高さ 150くらいのと幅220高さ150くらいの2種類作りたいのです。 cssを1から作成する能力はないので、cssテンプレートサイトなどか ら、角丸ボックステンプレをダウンロードして使用させてもらって、そ のボックスの中に無理矢理(?)dl,dt,ddで左右横並びテーブルのよう なものを作ってみたのですが、ボックスの角丸枠とテーブルの間にもの すごい余白ができてしまったり、テキストが変に回り込んだりと、思う ようにレイアウトできません。 なにしろ、様々なcssタグの説明やhtmlタグの説明ホームページなどか ら、サンプルなどを引用させてもらっているので、当然なのかもしれま せんが(;_;)すみません・・・。 目標にしている数々のHPを閲覧していると、div要素ですべて配列して いるものもあって、、やはり自分のしているのは邪道なのかなぁと凹ん でいます。 外枠ボックスとテーブル(?)の間の余白が調整できないばかりでなく ボックス内のレイアウトがうまくできなくて困っています。 しかし、どれにしろcssの作成ができないので、途方に暮れています。。。 そんなこんなで、もう数週間パソコンにかじりついて、タグの勉強HPを 見ているんですが、なかなかわかりつらくて。 どうか助けてください。よろしくお願いします。 こんな感じのボックスが作りたい!というのは、あるんですが、他所様 のHPのURLを勝手に記載していいのやらで、わかりづらい文章ですみま せん。 (記載してもよろしければ、URL書かせていただきます)
- みんなの回答 (7)
- 専門家の回答
関連する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;」を記載してテーブルの幅が固定になるように設定しています。 設定していますが、ブラウザの幅を狭めると テスト1|テスト2|テスト3 と表示されていたものが テスト1 テスト2 テスト3 と、レイアウトが崩れてしまいます。 <table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。 幅や高さ等も指定していますが、何かが足りないのでしょうか。
- ベストアンサー
- CSS
- CSS&HTML
はじめまして、こんばんは ご質問です。 今htmlとCSSを使いHPを作成いたしています。 二段コラムの雛型にあてはめています。 メインコラムに ボックスを指定いたしたいのですが 上手く作成できません。<div id=main> </div>の中にタグは入れられますか? mainはCSS HTML記述が終わっています。 幅 200 高さ100ぐらいのBOXボーダーラインで囲み 作成いたしたいのですがどうすれば出来ますか ボックスのタイトルをH3にしたいのですが CSSHTMLどう記述すれば いいのでしょうか ご指導ください 私がやりますとレイアウトが崩れます。
- 締切済み
- その他(インターネット・Webサービス)
- CSSでのレイアウト
私の今作っているHPはテーブルでレイアウトしているのですが、 あるところで『テーブルでレイアウトするのはお勧めできない。』と書いてありました。 よく読むと『テーブルでレイアウトするよりCSSでレイアウトする方がよい』ということでした。 具体的にCSSでテーブルのようにレイアウトするとはどうすればいいのでしょうか。 また、テーブルでのレイアウトの利点、CSSでのレイアウトの利点はどんなところでしょうか。 教えてください。お願いします。
- ベストアンサー
- HTML
- CSSレイアウトってなぜこんなに難しいのか?
個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか?? みなさん、テーブルレイアウトと比べて異常に難しく感じませんか? 今の調子ではHP作成の仕事が請けられなくなっています。(涙) 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス?のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか? ■今まで2~3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、 いっこうに進歩しません。(ここに本の題名書き出すとマズイですよね?) ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか? HPビルダーとかなら、もっと簡単に出来るのでしょうか? ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 (メニューや、商品スペック、写真並べなども、テーブルで。) それが精一杯ですが、これで通用するのでしょうか? HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSSレイアウトについて
今まで参考書を見ながら参考書どおりにHPを作っていましたが、 それでは自分どおりのHPが作ることができないと思い、 タグ辞典などを見ながら自分でHP作成を行うことにしたのですが、 CSSにて5個のボックスを作成して5個それぞれで 色分けしたあとにpositionにて位置を指定しましたが うまくいきません。 自分が考えているレイアウトは 1個目のボックスはタイトルで一番上にあり 2個目のボックスは左メニューで左側にあります。 3個目のボックスはメインスペースで中央にあります。 4個目のボックスは右メニューで右側にあります。 5個目のボックスはコピーライトで一番下にあります。 どなたか解決できる方のご回答をお待ちしております。 またこの場にて簡単なタグを記載していただければ幸いです。
- ベストアンサー
- 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に興味ある方や詳しい方がいらっしゃいましたらご教授願います。 お答えの際にはHTMLソースを希望します。
- ベストアンサー
- HTML
お礼
abril様 ありがとうございます。 教えていただいた上記の方法で、試行錯誤してみます。 何度も丁寧なサンプル作成と検証までしていただいて感謝してます。