• ベストアンサー

線が極端に細いテーブルで、特定の方向の線だけ表示させたい

tableでは、frameを使用して特定の方向だけ線を表示させることが可能ですよね。 また、二つ重ね合わせることで極端に細い線のテーブルを作ることもできます。 ああいった細いテーブルで、さらに特定の方向の線のみを表示させる方法はあるでしょうか。 下だけとか上だけとか左右だけとか。 前に、画像などを使用せずにそんなことをしているページを見たことがあるので、不可能ではないと思うのですが……色々やってみても、できませんでした。 この方法を知りたいので、知っている方がいましたらぜひお教えください。 スタイルシートでもかまいません。 よろしくお願いします。

  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
回答No.2

私も「スタイルシートでしょ」と思いましたので，No.1のdoconimoさんのアドバイスで充分かと考えましたが，まぁ，こういう方法もありますよ・・・と言うことで・・・。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>お試し</TITLE> <STYLE type="text/css"> <!-- .line0{ border-bottom-width : 1px; border-bottom-style : dotted; border-bottom-color : blue; } .line1{ border-bottom-width : 3px; border-bottom-style : double; border-bottom-color : #0000ff; } .line2{ border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : blue; } .line3{ border-left-width : 1px; border-left-style : solid; border-left-color : #0000ff; border-right-width : 1px; border-right-style : solid; border-right-color : #0000ff; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" width="263" class="line0"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="263" class="line1"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="263" class="line2"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <P>わかりにくいので文字と＜P＞タグを入れているだけです</P> <TABLE border="0" width="263" class="line3"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="263" class="line2"> <TBODY> <TR> <TD class="line2"><BR> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 一応，下のみにラインを表示させています。 「bottom」をそれぞれ「top」に変えれば，上のみのラインになります。 同じ要領で，左右については，No.1のdoconimoさんのアドバイスを参照してください。 また，左右に・・・と言うことですと，line3のように指定しなければなりません。 私が紹介した方法ですと，いくつも同じテーブルを作るとき，1回の指定で済むようになります。 また，長さが違いますが，最後のように別々のタグでも指定可能になります。 なお，line0は点線，line1は二重線（二重線として表示させるためには，必ず，3px以上にしてください），line2は実線（No.1のdoconimoさんが紹介したのと，まったく同じになります）です。 また，この方法で指定するためには，場所が肝心ですので，ページのソースすべてを載せています。

ikazuti
質問者

お礼

回答、遅くなって申し訳ありません。 できました。詳しいソース、ありがとうございます。

その他の回答 (1)

noname#10926
noname#10926
回答No.1

>tableでは、frameを使用して特定の方向だけ線を表示させることが可能ですよね。 意味不明ですが、ままいっか。 >スタイルシートでもかまいません。 て、言うかスタイルシートでしょ。 例 1.下だけ <TABLE border="0" style="border-bottom-width : 1px;border-bottom-style : solid;border-bottom-color : blue;"> <TBODY> <TR> <TD width="118"><BR> </TD> <TD width="145"><BR> </TD> </TR> <TR> <TD width="118"><BR> </TD> <TD width="145"><BR> </TD> </TR> </TBODY> </TABLE> 2.上だけ style="border-top-width : 1px;border-top-style : solid;border-top-color : black;" 3.右だけ style="border-right-width : 1px;border-right-style : solid;border-right-color : lime;" 4.左だけ style="border-left-width : 1px;border-left-style : solid;border-left-color : red;"

ikazuti
質問者

お礼

回答が遅くなって申し訳ありません。 これで、できました。 ＞て、言うかスタイルシートでしょ。 いや、そのサイトでは確かスタイルシートを使ってなかったような気がするんですよね。 まあ、できたんでよいですが。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 特定のテーブルの中に特定の画像を背景として入れる

    dreamweaver４をつかっています。 テーブルの中に背景を入れるところでつまづいてしまいました。 それはあるHTMLの中に複数のテーブルがあり、その中の特定のテーブル（テーブル１とする）には特定の背景画像（画像１とする）を右下に一回だけ固定して表示したい。 同様に、他の特定のテーブル（テーブル２とする）には別の特定の画像（画像２）を右下に一回だけ固定して表示したい。 過去の質問などをみたのですが、スタイルシートで設定してまうと全部のテーブルで有効になってしまったり、１種類しか指定できなかったりするようなので、質問させていただきました。 テーブル１には画像１をテーブル２には画像２を右下に固定して表示する方法はありますでしょうか？

  • 線の表示

    ジオを使ってサイトやろうとしていて思ったのですが スタイルシート（ボックスの縦線を使って）で1番上から1番下まで縦の線を1本入れたのですがページ上部に表示される広告の位置で線の上の部分が消えてしまいます。 ＊広告は上部真中で線は広告とかぶらない左端にあります。 　　　　　　　　　　　　＿＿＿＿＿ 　　　　　　　　　　　　｜　　　　　｜←広告 　ココで消える→　　　－－－－－ 　　　　　　　　　　｜ 　　　　　　　　　　｜ 　　　　　　　線→｜ 　　　　　　　　　　｜ 　　　　　　　　　　｜ 線をすべて表示させる方法あれば教えてください。 よろしくお願いします。

    • 締切済み
    • CSS
  • テーブルの特定のセル背景非スクロールについて

    テーブルで文章を書いているのですが、 そのテーブル内の文章がちょっと長めで、 どうしてもブラウザがスクロール(縦)してしまう作りになっています。そのテーブルに背景を入れようと思うのですが、スクロールしてしまうほど長い縦テーブルな故に背景も繰り返してしまいます。 背景画像は壁紙のような整列された画像ではなく、一枚の写真を使用したいとおもっております。 縦長の大きい背景を作るというのも一つの手ですが・・・それではなくタグ命令で固定できればと思います。 通常のページ背景ですと背景固定は ◆bodyタグで bgproperties="fixed" ◆スタイルシートで <STYLE type="text/css"> <!-- BODY{background-image:url("■.jpg"); background-color:#背景色; background-position:背景の位置; background-repeat:no-repeat; background-attachment:fixed;} --> </STYLE> って出来るのですが、 テーブル内部の特定のセル背景固定というのは どのようにしたら出来るのでしょうか? ジャバスクリプト、スタイルシート、通常のタグ どのような方法でもかまいません。 テーブル内の特定のセル背景非スクロールについて、 ご教授いただければ幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブルの線を極細にしたい

    テーブルの線を細くしたいのですが、borderを1にしてもかなり太いです。 これはやはりスタイルシートでやるしかないのでしょうか？ また、どのように記述すればいいのでしょうか？ ＨＰ作成初心者のため、できるだけわかりやすく回答いただけると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HTML TABLE内に他サイト表示することできますか？

    はじめて質問させていただきます。 フレーム使用で左に目次、右に外部レンタルBBSやブログなど表示する方法はわかるのですが、フレームを使わないものを作ろうと思っております。 スタイルシートを使って一枚を2画面に別れたように表示させています。 で、画面左に項目(目次)、右側にブログなど他サイトを表示させる事は可能でしょか？ イメージ的には、右側に大きなTABLEをつくり、そこに表示できたらいいな～と思っておりますが… 可能であればソースを教えていただけたら。と思います。 よろしく御願いいたします。

    • ベストアンサー
    • HTML
  • テーブルの線を立体じゃなく普通の線にしたい

    普通にテーブルで表を作ると線が立体的になってしまいますよね。 これを、特定のテーブルだけを普通の罫線だけで作られたような表にしたいと思っています。 テーブルを立体でなく罫線にするには、 【例1】 <STYLE type="text/css"> <!-- td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000;} --></STYLE> というスタイルシートを<head>内に書く。 【例2】 <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="0"> <tr><td> <table border="0" cellspacing="1" cellpadding="0"> <tr><td bgcolor="#ffffff">セル１</td><td bgcolor="#ffffff">セル２</td></tr> <tr><td bgcolor="#ffffff">セル３</td><td bgcolor="#ffffff">セル４</td></tr> </table> </td></tr> </table> という入れ子状態にする。 概ねこの２種類の方法が一般的だと思います。 が、【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。 【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。 これを、個々のテーブルに対して例1のようなスタイルシートを使用して作れないものでしょうか？ <span>を使って出来そうな気がするのですが、いろいろ試すもののどうもうまくいきません。こういう場合の合理的な方法をご存知でしたら教えていただけますか。

    • ベストアンサー
    • HTML
  • テーブル内に貼るリンクについて教えて下さい。

    HP作成に関する疑問です。 左右２つにわけたテーブルの左にある画像にリンクをはって、 右のテーブルにその結果（リンク先のページ）を表示したい場合、使うのはCGIでしょうか？Javascriptでしょうか？ それとも、それは普通にHTMLでできることなのでしょうか？ フレームでそういった表示方法を使ったことはあるのですが、今回はテーブルの中で使いたいのです（が、何を学んだらいいのかわからずに困っています） 初歩的な質問で申し訳ありませんが、教えて下さい。

    • ベストアンサー
    • CGI
  • トップページを表示した時に特定の画像を表示するＣＳＳ

    トップページに訪問者が来た時に、 特定の画像を表示させたいんです。 それをスタイルシートで設定できないでしょうか。 どなたか心当たりがあればお教えください。 よろしくお願いします。

  • ボックスをテーブルを使わず中央に表示する方法

    こんにちは。 さっそく質問ですが、ボックスをテーブルを使わずスタイルシートで中央に表示する方法はないでしょうか？ marginの指定では左右しか中央揃えされず、悩んでおります。 同じような質問がいくつもありましたが、テーブルを使っての方法でした。 テーブルを使わずどうしてもボックスを中央に表示したいのですが、やはり正確に中央に表示することは無理なのでしょうか？ 画面サイズを変えても中央に表示されるようにしたいのですが…。 何か方法があればよろしくお願いします。

    • ベストアンサー
    • HTML
  • cssでテーブルで細い線

    スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線（td？）が二重になってしまいます 一線にするのにどのようにすればイイですか？ ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する