総ありがとう数 累計4,289万(2014年10月31日現在)

毎月4,000万人が利用!Q&Aでみんなで助け合い!

-PR-
omiyage

ホームページ制作初心者のものです。
Dreamweaver4でHPを作ろうと思い、様々なページを見ながら勉強中の者です。
最近よく見かけるのですが、テーブルで組んだと思われる枠に色のついた細い線を使ったものが多くみられるのですが、あれはどのようにしているのでしょうか??
テーブルの枠線といったら、あのグレーの物しかできないものと思っていたのですが...。
自分なりに考えて、テーブルの入れ子を駆使しして作ることはできたのですが、どうやら違ったやり方があるような気がします。
もしかして、とっても簡単なことなのかもしれませんが、ご存知の方、どうかお教えください。
Dreamweaverでできるのでしょうか?
  • 回答数7
  • 気になる数1

Aみんなの回答(全7件)

質問者が選んだベストアンサー

  • 2002-07-29 22:44:24
  • 回答No.4
「枠に色のついた細い線を使ったもの」というのが立体感のない枠線のことでしたら、「入れ子を駆使した」やり方が正攻法です。

外側のテーブルのbgcolorを枠線にしたい色にし、内側のテーブルでcellspacingで枠線の太さ、セルの背景色は<td>でbgcolorを指定します。bgcolordで色をつけないと背景が透けてみえるtableの性質を利用し、枠線は下の色を見せているわけです。

**例**
<table border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000"><td>
<table border="0" cellspacing="5" cellpadding="0">
<tr><td bgcolor="#999999">セル1</td><td bgcolor="#999999">セル2</td></tr>
<tr><td bgcolor="#999999">セル3</td><td bgcolor="#999999">セル4</td></tr>
</table>
お礼コメント
ご回答ありがとうございます。
「入れ子を駆使」するやりかたもやっぱり、
”あり”なんですね。
なるほどー。セルスペーシングで線の幅がきまるんですね。
タグの勉強はほとんどしていないので、
これを機会に少し頭にいれてみようと思います。
ご回答ありがとうございました!
投稿日時 - 2002-07-30 21:04:31
  • 同意数0(0-0)
  • ありがとう数0

その他の回答 (全6件)

  • 2002-07-29 21:37:25
  • 回答No.2
私自身Dreamweaverは持っていないのですが、おそらく、作ったページのソースをみたり、そこに直接書き込んだりすることが出来ると思います。(できなかったら、ごめんなさい)

ソースを出したら、はじめの方に
<BODY></BODY>
というタグがあるはずです。その中で、テーブルを作りたいところに<TABLE>タグを挿入します。
下の見本は青を貴重とした陰影のあるものになっています。
「BORDER」のところでテーブルの枠線の太さを
「CELLPADDING」のところでテーブル内のスペースを
「BORDERCOLORLIGHT」のところで左と上の枠の色を
「BORDERCOLORDARK」のところで右と下の枠の色を
指定することができます。

<HTML>

<HEAD>
<TITLE>○○○</TITLE>

</HEAD>


<BODY>
○○○○…

<TABLE BORDER=5 CELLPADDING=5 BORDERCOLORLIGHT="deepskyblue" BORDERCOLORDARK="dodgerblue">
<TR><TH><NOBR>○○名</NOBR></TH><TH>◆◆日時</TH><TH>△△時間</TH><TH>◎◎項目</TH><TH>□□の方法</TH>
<TR>
<TD>○○○</TD>
<TD>◆◆◆</TD>
<TD>△△△</TD>
<TD>◎◎◎</TD>
<TD>□□□</TD>

</TABLE>

○○○○…

</BODY>
</HTML>

分からないことがありましたら、補足してください。
お礼コメント
ご回答ありがとうございました!
実は私の質問は、立体的ではない、細い線のことを
いっていたのですが、これを試してみて
おどろきました。
こんなコトも可能なのですねー!
これも使ってみたいです。
投稿日時 - 2002-07-30 20:42:04
通報する
  • 同意数0(0-0)
  • ありがとう数0
  • 2002-07-29 21:35:45
  • 回答No.1
スタイルシートを使ってできます。
Dreamweaverは使ったこと無いのでわかりませんが、
スタイルシートの設定はできるはず…

参考URLを見てくださいね。詳しく説明されています。
ソースをコピーして改造するのも手ですよね?
お礼コメント
ご回答たいへんありがとうございます。
参考URL少し拝見しました。
破線の囲み枠なんかも可能なんですねー!
詳しく読んで試してみようかと思います。
ありがとうございました。
投稿日時 - 2002-07-30 20:37:37
通報する
  • 同意数0(0-0)
  • ありがとう数0
  • 2002-07-29 22:17:09
  • 回答No.3
noname#3546

テーブル・タグに、以下の属性を記入すれば可能。

bordercolor="color"枠線の色を指定します。
bordercolordark="color"立体的な枠線の暗い部分の色を指定します。
bordercolorlight="color"立体的な枠線の明るい部分の色を指定します。
お礼コメント
ご回答ありがとうございます!
もしかして、
暗い部分と、明るい部分を同じ色にすれば、
立体的に見えないフチ線ができるのかな!?
投稿日時 - 2002-07-30 20:59:40
通報する
  • 同意数0(0-0)
  • ありがとう数0
  • 2002-07-29 22:54:27
  • 回答No.5
No.2につけたし
例の終わりの二行がぬけていました

**例はじめ**

<table border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000"><td>
<table border="0" cellspacing="3" cellpadding="0">
<tr><td bgcolor="#999999">セル1</td><td bgcolor="#999999">セル2</td></tr>
<tr><td bgcolor="#999999">セル3</td><td bgcolor="#999999">セル4</td></tr>
</table>
</td></tr>
</table>

**例おわり**
通報する
  • 同意数0(0-0)
  • ありがとう数0
  • 2002-07-30 00:28:28
  • 回答No.6
スタイルシートを使うと簡単です。
下のタグを<head>の直後あたりに入れておきます。

<STYLE TYPPE="text/css">
<!--
td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #ff0000;}
-->
</STYLE>

そのあと普通にtableを使って、border=0 にしておけば細い赤線で枠ができます。
1pt 1pt 1pt 1pt のところにいろいろの数値を入れますと、影のようになって、立体的に見えたりします。

お試しください。

わたしのブラウザはIEは5.5でNNは6.22です。両方ともうまくできます。
お礼コメント
ご回答たいへんありがとうございます。
これはとっても簡単そうですねー!
まだ試してはいないので早速やってみようと思います。
投稿日時 - 2002-07-30 21:09:54
通報する
  • 同意数0(0-0)
  • ありがとう数0
6件中 1~5件目を表示
  • 回答数7
  • 気になる数1
  • ありがとう数3
  • ありがとう
  • なるほど、役に立ったなど
    感じた思いを「ありがとう」で
    伝えてください

関連するQ&A

その他の関連するQ&Aをキーワードで探す

別のキーワードで再検索する

あなたの悩みをみんなに解決してもらいましょう

  • 質問する
  • 知りたいこと、悩んでいることを
    投稿してみましょう
-PR-
-PR-
-PR-

特集

専門医・味村先生からのアドバイスは必見です!

関連するQ&A

-PR-

ピックアップ

  • easy daisy部屋探し・家選びのヒントがいっぱい!

-PR-
ページ先頭へ