-PR-
omiyage

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

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

    • 2002-07-29 22:44:24
    • 回答No.4
    liq

    「枠に色のついた細い線を使ったもの」というのが立体感のない枠線のことでしたら、「入れ子を駆使した」やり方が正攻法です。

    外側のテーブルの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
    -PR-
    -PR-

    その他の回答 (全6件)

    • 2002-07-29 21:37:25
    • 回答No.2
    私自身Dreamweaverは持っていないのですが、おそらく、作ったページのソースをみたり、そこに直接書き込んだりすることが出来ると思います。(できなかったら、ごめんなさい) ソースを出したら、はじめの方に <BODY></BODY> というタグがあるはずです。その中で、テーブルを作りたいところに<TABLE>タグを挿入します。 下の見本は青を貴重とし ...続きを読む
    私自身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
    • 2002-07-29 21:35:45
    • 回答No.1
    スタイルシートを使ってできます。 Dreamweaverは使ったこと無いのでわかりませんが、 スタイルシートの設定はできるはず… 参考URLを見てくださいね。詳しく説明されています。 ソースをコピーして改造するのも手ですよね? ...続きを読む
    スタイルシートを使ってできます。
    Dreamweaverは使ったこと無いのでわかりませんが、
    スタイルシートの設定はできるはず…

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

    テーブル・タグに、以下の属性を記入すれば可能。 bordercolor="color"枠線の色を指定します。 bordercolordark="color"立体的な枠線の暗い部分の色を指定します。 bordercolorlight="color"立体的な枠線の明るい部分の色を指定します。 ...続きを読む
    テーブル・タグに、以下の属性を記入すれば可能。

    bordercolor="color"枠線の色を指定します。
    bordercolordark="color"立体的な枠線の暗い部分の色を指定します。
    bordercolorlight="color"立体的な枠線の明るい部分の色を指定します。
    お礼コメント
    ご回答ありがとうございます!
    もしかして、
    暗い部分と、明るい部分を同じ色にすれば、
    立体的に見えないフチ線ができるのかな!?
    投稿日時 - 2002-07-30 20:59:40
    • ありがとう数0
    • 2002-07-29 22:54:27
    • 回答No.5
    No.2につけたし 例の終わりの二行がぬけていました **例はじめ** <table border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#000000"><td> <table border=" ...続きを読む
    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
    • 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& ...続きを読む
    スタイルシートを使うと簡単です。
    下のタグを<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
    • 2002-07-30 15:19:23
    • 回答No.7
    Dreamweaverで出来ます。 まずは見本を見てください。 と言っても、HTML文章を書くだけですが、 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Sh ...続きを読む
    Dreamweaverで出来ます。
    まずは見本を見てください。
    と言っても、HTML文章を書くだけですが、

    <html>
    <head>
    <title>無題ドキュメント</title>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

    </head>

    <body bgcolor="#FFFFFF" text="#000000" >

    <table width="400" border="5" cellspacing="0" cellpadding="0" height="400" bordercolor="#000000">
    <tr>
    <td>
    <table width="400" border="1" cellspacing="0" cellpadding="0" height="400" bordercolor="#FF0000">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
     </td>
    </tr>
    </table>
    </body>
    </html>

    上に書いたものが「Dreamweaver」で簡単なテーブルを作ってしたものです。
    上にあるものを「Dreamweaver」上で開いてみてください。
    それでは解説を。

    解説

    1). まず、テーブルを作ります。「オブジェクトウィンドウ」→「一般」→「テーブルの挿入」をクリックして、テーブルを作ります。

    2). 次に、テーブルの設定をします。「行数」(縦の枠数)と「列数」(横の枠数)を決め、「セル内余白」と「セル内間隔」は「0」にして、「幅」を、設定します。その後、「ボーダー」と有りますが、これがテーブルの枠線の元です。それを、決めた後、「OK」をクリックします。

    3). 次に、そのテーブルが選ばれた状態にします。普通、2).の状態からそのまま来た場合は、そのままで、別の場所をクリックしてはなれたら、テーブルの縁の部分をクリックしてから「プロパティウィンドウ」で、「テーブル」となっているはずですから、空白になっている高さを入れます。(これは後ででも出来ます。)
    それから、「プロパティウィンドウ」の下の方に「ボーダーカラー」と言うのが有りますから、その横の白い箱になっている(左下の方に黒い▼がついている)部分をクリックして、「ボーダーカラー」を選びます。
    そうすると、縁になりました。

    ちなみに、上のものをHTMLで表示すると分りますが、外側にあるテーブルが、黒で、内側にあるテーブルが赤となっています。

    それぞれに、「ボーダー」の幅を変えて見ましたが、どうですか。

    まだ分らない事があれば、補足でもいいですから書いてください。
    私の知っている「Dreamweaver」のテクニックなら教えてあげましょう。

    では、いいホームページが出来上がります様に。
    以上
    お礼コメント
    ご丁寧な回答たいへんありがとうございます!
    まだ試してはいないのですが、
    Dreamweaverでuduki4さんのご講義のとおりやって試してみようと思います。
    様々なやり方があるのですねー。
    本当にためになります。
    ありがとうございます!
    投稿日時 - 2002-07-30 21:15:46
    • ありがとう数0
    • 回答数7
    • 気になる数1
    • ありがとう数3
    • ありがとう
    • なるほど、役に立ったなど
      感じた思いを「ありがとう」で
      伝えてください
    • 質問する
    • 知りたいこと、悩んでいることを
      投稿してみましょう
    こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
    このQ&Aにはまだコメントがありません。
    あなたの思ったこと、知っていることをここにコメントしてみましょう。

    関連するQ&A

    -PR-
    -PR-

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

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

    特集


    成功のポイントとは?M&Aで経営の不安を解決!

    -PR-

    ピックアップ

    -PR-
    ページ先頭へ