DW 罫線を極細にする方法
- DreamWeaverでテーブルなどを極細にする方法について教えてください。
- CSSを使用して罫線を細くする方法や、他の方法についても知りたいです。
- 特定のサイトが細い線で囲まれているようなデザインを実現している方法についても知りたいです。
- ベストアンサー
DW 罫線を極細にする方法 教えてください！
またお世話になります。 いまDreamWeaverでテーブルなどを極細にしたいのですが ************************************************************************************************************************************************** <body> <table width="538" border="0" cellpadding="0" cellspacing="1" bgcolor="#009900"> <!--DWLayoutTable--> <tr> <td height="60" colspan="2" valign="top" bgcolor="#FFFFFF"> ************************************************************************************************************************************************** こんな感じにborder=0にし、cellspacing=1にして、bgcolorを指定し、その中のテーブルを白で指定するとできることは わかったのですが、これ以外にCSSで出来る方法があるようなのですが、教えてください。 ＯＫでも検索しましたら 「CSSで設定できます。デザイン→CSSスタイルから、新規CSSスタイル（右下4つのマークの左から２番目）を選択して新しいCSSを作ります。 カテゴリの中から「ボーダー」を選んで、幅、カラーなどを設定できます。（上下左右とも１ピクセルにすれば１ピクセルの細い囲み罫ができます）」 のようなものを見つけたのでやってみたのですが、 実線などで上下左右を1ピクセルや1mm指定してもできません。どうやるのでしょうか。 それから同様なのですが、http://www.surf-for-life.net/ こちらのサイトも 極細で作っているのですが、c.gifというような細い線で囲まれているようなのです。 これはFIREWORKSか何かで枠を作ってペーストするとこのように出来るのでしょうか？ どうぞよろしくお願いいたします！
- kommatta
- お礼率90% (147/163)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞「CSSで設定できます（略）１ピクセルの細い囲み罫ができます）」 というのは、それで新しくCSSを作成してボーダーの幅・色・スタイルを指定した後に、 適当な文章などを選択して、そのCSSを適用しましたか？ （上手く説明できなくてごめんなさい） ただ、このやり方だと、テーブルの罫線を指定すると言うよりも 任意の部分（選択して適用した部分）の文字やテキストを細い線で囲むだけなので、 「テーブルの罫線を全て細くしたい」という場合はまた違ったやり方になると思います。 ちなみにそのURLのサイトのc.gifは、いわゆるスペーサーgifというやつですね。 htmlが分かるならソースを見てみるか、 保存してDreamweaverで開いてみると分かるのですが 赤い枠線に見えるところも幅が1pxのセルになってます。 で、そのセルの背景に赤い色を指定しています。 ただ、セルが空だと（文字や画像が入っていないと）背景自体が表示されなかったりするので それを防ぐためにc.gifという1px×1pxの透明なgif画像を入れているのです。 #ホントはこういうレイアウトをする場合は #テーブルを使わずに、CSSで組むべきなんですけどね。 #例えばブログで記事などが細い線で囲まれているのは #テーブルを使っているわけではないのです。 スタイルシートが分からない場合は、この方法か kommattaさんが書いていらっしゃるソースの方法が現実的じゃないかと思います。 もしkommattaさんの方法で、いちいちセルの背景色を指定するのが面倒な場合は 「そのページのテーブル全てが、同じ枠線になって構わない」ということが前提ですが ちょっとだけCSSを使って、<head></head>の中に <style type="text/css"> <!-- table { background-color:#009900} td { background-color: #FFFFFF} --> </style> と入れておくと、テーブルやセルにbgcolorの指定をしなくても済みます。 #borderなどの指定はこれまで通り必要です。 #一部だけセルの色を変えたければ #そこだけ今までのようにテーブル自体にbgcolorを指定すればかえられます。
関連するQ&A
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- テーブル内のテーブルの高さを揃えたい。
CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?
- ベストアンサー
- HTML
- テーブルの上下線を消したい
タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか？ 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P> </P><p> </p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。
- ベストアンサー
- HTML
- margin の指定のしかた
ホームページの見せ方として、左右に余白を入れたいのですが、以下の２つのやり方は結果として、どのような違いが出てきますか？ その１ body { margin: 1em 10%; のようにＣＳＳで定義する。 その２ ページ全体をテーブルに入れて、 <table width=710 border=0 cellspacing=0 cellpadding=0 height="10"> のように定義する。 または、２の代わりにＣＳＳで％ではなくピクセルで指定する。 自分のＨＰの見え方がＰＣ（というかディスプレイの大きさ）によってかなり違って見えます。 よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML
- テーブル内にスペースができてしまうのはなぜ？
テーブル内にさらにテーブルを入れた際、一部のセルだけ上部にスペースが空いてしまい 困っています。 下記のhtmlですが、左はテーブル内にテーブルを入れてもスペースができませんが 真ん中だけどうしても上にスペースが空いてしまいます。 全角スペースが隠れていないか確認しましたが無理でした。 ネットでもいろいろ調べましたが分かりませんでした・・・。 これは何が原因なのでしょうか？ よろしくお願いします。 --------------------------------------------------------- <html> <head> </head> <body> <table border="1" width="750"> <tr><td width="150" valign="top"> <table border="1" cellspacing="0" cellpadding="0" width="140"> <tr align="center"><td bgcolor="#green">menu</td></tr> </table> </td> <td valign="top" width="480"> <table border="1" cellspacing="5" cellpadding="0" width="480"> <tr><td bgcolor="#d8de97" height="15" align="left" colspan="2">見出し</td></tr> <tr><td bgcolor="#FFFFCC" width="240">項目名</td> <td bgcolor="#FFFFCC" width="240">項目名</td></tr> <tr><td bgcolor="#FFFFCC" width="240">項目名</td> <td bgcolor="#FFFFCC" width="240">項目名</td></tr> </table> </td> <td width="120" valign="top">広告部分</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- tableをcssで表記したい
下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか？ tableの種類が一つの場合はできるのですが・・・ ＜table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"＞ ＜tr＞ ＜td width="30" bgcolor="#FFFFFF"＞a＜/td＞ ＜td "＞b＜/td＞ ＜/tr＞ ＜/table＞ ＜br＞ ＜table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"＞ ＜tr＞ ＜td width="25" bgcolor="#CCCCCC"＞c＜/td＞ ＜td＞d＜/td＞ ＜/tr＞ ＜/table＞
- 締切済み
- HTML
お礼
とても分かりやすくおこたえいただきありがとうございます！なるほど～、ちょっと試してみます！それからスぺーサーと背景の関係のことにつきまして、とても感謝ですm(__)mそういう何気ない情報を解説本などでけっこう見落としてしまっているようで、、、とても参考になりました。だから1×1の画像いれて背景にしているのですね！これはやってみたらできました！1pxlの罫線のようなものが出現してこまかく1本づつ罫線をいれていく感じで表もできました。これでやるとメイン部分の真ん中が、そもそもが背景白になるので、その中に小さめにレイアウトテーブルを配置していけるのでバッチリですね！どうも私のやりかたでやると背景色があるので、その背景色を隠すように真ん中に満杯に白のレイアウトテーブルを配置すると下に何故か余白が出て背景色が出てしまい困っていたんですよ、、、タグではブランクもないのに。。。どうもレイアウトテーブル同志か、横のレイアウトセルなどと相互に影響しあってしまうようなのです。スぺーサー入れると相互にあまり影響もしなくなるようですね。背景を白にしてさらにレイアウトセルをいれたかったので、これで解決できそうです！もう一日ほどまって締め切りいたします！ありがとうございました！