ホームページ作成 質問過去ログ

                                Page     666
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫   
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ▼罫線について。  にゃ。 04/6/15(火) 18:52
   ┣Re:罫線について。  らら 04/6/15(火) 20:17
   ┗Re:罫線について。  むむりく 04/6/15(火) 22:22
      ┗Re:罫線について。  にゃ。 04/6/15(火) 23:36
         ┗Re:罫線について。  むむりく 04/6/16(水) 0:36
            ┗Re:罫線について。  にゃ。 04/6/16(水) 8:48
               ┗Re:罫線について。  らら 04/6/16(水) 9:40
                  ┗Re:罫線について。  にゃ。 04/6/16(水) 11:33
                     ┗Re:罫線について。  らら 04/6/16(水) 11:34
                        ┗Re:罫線について。  らら 04/6/16(水) 12:10
                           ┗Re:罫線について。  むむりく 04/6/16(水) 15:13
                              ┣Re:罫線について。  Pid 04/6/16(水) 18:40
                              ┃  ┣Re:テーブルでメニューを作る  105 04/6/16(水) 20:20
                              ┃  ┗>> Pidさん  むむりく 04/6/16(水) 23:52
                              ┃     ┗Re: テーブルでメニューを作る(was: 罫線について)  Pid 04/6/17(木) 1:50
                              ┗Re:罫線について。  にゃ。 04/6/16(水) 19:12
                                 ┗Re:罫線について。  らら 04/6/16(水) 19:47
                                    ┗Re:罫線について。  にゃ。 04/6/16(水) 21:56
                                       ┗Re:罫線について。  らら 04/6/16(水) 23:19
                                          ┗Re:罫線について。  にゃ。 04/6/17(木) 10:35
                                             ┗Re:罫線について。  らら 04/6/17(木) 11:08
                                                ┗Re:罫線について。  にゃ。 04/6/17(木) 11:21
                                                   ┗Re:罫線について。  むむりく 04/6/17(木) 13:43

 ───────────────────────────────────────
 ■題名 : 罫線について。
 ■名前 : にゃ。
 ■日付 : 04/6/15(火) 18:52
 -------------------------------------------------------------------------
   こんにちわ。以前も何度となく質問させて頂いていた者です。
ハンドルネームを忘れてしまったので、新しくしました。

テーブルを使い、罫線を表現したいのです。横線は…

<TABLE width="100" cellpadding="1" cellspacing="1">
 <TBODY>
  <TR>
   <TD bgcolor="#666666"></TD>
  </TR>
 </TBODY>
</TABLE>

上の様にすれば、簡単に作成できます。しかし縦線の場合は…

<TABLE width="1" cellpadding="1" cellspacing="1" height="100">
 <TBODY>
  <TR>
   <TD bgcolor="#666666"></TD>
  </TR>
 </TBODY>
</TABLE>

上の様に幅を指定してやっても、横線の場合と線の太さが違います。
出来る限り縦線も補細くしたいのですが、どうすれば良いでしょうか?
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/15(火) 20:17  -------------------------------------------------------------------------
   スタイルシートでどうでしょうか?

<TABLE style="border-left:1px solid #666666 ;" cellpadding="1" cellspacing="1" height="100">
<TBODY>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>

できるだけ にゃ。さんのソースを崩さずに書いてみました。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : むむりく  ■日付 : 04/6/15(火) 22:22  -------------------------------------------------------------------------
   ▼にゃ。さん:
>上の様に幅を指定してやっても、横線の場合と線の太さが違います。
>出来る限り縦線も補細くしたいのですが、どうすれば良いでしょうか?
ららさんの仰る通り、border使えばいいのですが、
内容がどこにあるかによっていろいろ変わってきそうです。

より具体的なソースがあれば、具体的な回答ができますよ。

内容のないセルを作るのもなんですので、
横線もborderでやってみてはいかがでしょう。
    
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/15(火) 23:36  -------------------------------------------------------------------------
   どうも、お二方アドバイスありがとうございます。
もっと具体的な事を言いますと…

<TABLE cellpadding="0" cellspacing="0" width="600">
  
  <TR>
   <TD colspan="2" bgcolor="#666666"></TD>
  </TR>
  <TR>
   <TD colspan="2" align="center"></TD>
  </TR>
  <TR>
   <TD colspan="2" bgcolor="#666666"></TD>
  </TR>
  <tr>
   <TD align="center"><BR>
   <BR>
   <BR>
   <BR>
   <BR>
   <BR>
   <BR>
   </TD>
   <TD width="1" bgcolor="#666666"></TD>
  </tr>
  <tr>
   <TD colspan="2" bgcolor="#666666"></TD>
  </tr>
  <TR>
   <TD colspan="2" align="center"></TD>
  </TR>
  <TR>
   <TD colspan="2" bgcolor="#666666"></TD>
  </TR>
 
</TABLE>

上記の様なものを作成したいです。上記のままだと、スタイルを指定しなくても、縦線が同じ幅で表示されます。
しかし、文字を入力すると…

<TABLE cellpadding="0" cellspacing="0" width="600">
 
  <TR>
   <TD colspan="2" bgcolor="#666666"></TD>
  </TR>
  <TR>
   <TD colspan="2" align="center">サンプル</TD>
  </TR>
  <TR>
   <TD colspan="2" bgcolor="#666666"></TD>
  </TR>
  <tr>
   <TD align="center"><BR>
   <BR>
   <BR>
   <BR>
   <BR>
   </TD>
   <TD width="1" bgcolor="#666666"></TD>
  </tr>
  <tr>
   <TD colspan="2" bgcolor="#666666"></TD>
  </tr>
  <TR>
   <TD colspan="2" align="center">サンプル</TD>
  </TR>
  <TR>
   <TD colspan="2" bgcolor="#666666"></TD>
  </TR>
 
</TABLE>

縦線がぐっと太くなってしまいます。これを改善する方法はありますか?
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : むむりく  ■日付 : 04/6/16(水) 0:36  -------------------------------------------------------------------------
   ちなみに背景色の方法だと、
他のブラウザで見たら横線もないかも。

真ん中のセルの扱いが分からないので…
取り敢えずこんな感じで。

<table cellpadding="0" cellspacing="0" width="600" style="text-align:center;">
<tr>
<td style="border-top:#666 1px solid;border-bottom:#666 1px solid;">サンプル</td>
</tr>
<tr>
<td style="border-right:#666 1px solid;height:4em;">&nbsp;</td>
</tr>
<tr>
<td style="border-top:#666 1px solid;border-bottom:#666 1px solid;">サンプル</td>
</tr>
</table>

table内の<td>〜</td>以外の部分に、全角スペース使っちゃだめですよ。

ちなみにこれでも同じ。

<div style="text-align:center;
      width:600px;
      border-top:#666 1px solid;
      border-bottom:#666 1px solid;">
サンプル
<div style="border-color:#666;
      border-width:1px;
      border-style:solid solid solid none;
      height:4em;">
</div>
サンプル
</div>

やりかたはいろいろありそうなので、目的にあった方法で。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/16(水) 8:48  -------------------------------------------------------------------------
   どうもありがとうございます。

自分の思っている形に近づいてきました。
もう一つだけ、形にしたいのでお願いします。
絵に表すとこんな感じです。下手ですいません。

                      ┃
                      ┃
━━━━━━━━━━━━━━━┃
 ┃ ┃ ┃ ┃ ┃ ┃ ┃
━━━━━━━━━━━━━━━┃
                      ┃
                      ┃
                      ┃
━━━━━━━━━━━━━━━
     サンプル
━━━━━━━━━━━━━━━
                      ┃
                      ┃
                      ┃

教えていただいたソースを参考に近い形まではできました。

<TABLE cellpadding="3" cellspacing="0" width="650" style="text-align:center;">
 
  <tr>
   <TD style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
  </tr>
  <tr>
   <td style="border-top:#666 1px solid;border-bottom:#666666 1px solid;">サンプル</td>
  </tr>
  <TR>
   <TD style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
  </TR>
 
</TABLE>

しかし、サンプルと書かれた段の上にもう一つ段が欲しいのです。
しかも、10に区切られているのが作りたいのです。
大きくサンプルの段と異なることがあります。
サンプルの段は、上の横線と下の横線が別々に縦線と交わっていたのですが、新しく作成する10にくぎられたものは、=| の様にしたいのです。

かなり分かりにくいと思いますので、不明な点はおっしゃって下さい。
よろしくお願い致します。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/16(水) 9:40  -------------------------------------------------------------------------
   <TABLE cellpadding="3" cellspacing="0" width="650" style="text-align:center;">
<tr>
<TD colspan="10" style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</tr>
</table>

<TABLE cellpadding="3" cellspacing="0" width="650" frame="rhs"
style="text-align:center; border-top:#666666 1px solid; border-bottom:#666666 1px solid;">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</table>

<TABLE cellpadding="3" cellspacing="0" width="650" style="text-align:center;">
<tr>
<TD style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</tr>
<tr>
<td style="border-top:#666 1px solid;border-bottom:#666666 1px solid;">サンプル</td>
</tr>
<TR>
<TD style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</TR>
</TABLE>


---------------------------------------------------------

とりあえず作ってみました。
使用法がわからないので、
<table>を使う意味があるのか?(使わなければならないのか?)
<table>を分けていいのか?
など様々な疑問があります。

まだまだいくらでも改善の余地があります。
これでは使い勝手が悪そうです。
とりあえず形そのものがあってるかどうかご確認ください。

そして修繕点、改善点などを細かく仰って頂ければと思います。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/16(水) 11:33  -------------------------------------------------------------------------
   確認してみました。形そのものはぴったりです。
欲を言うと、テーブルは分けない方がいいです。
自分がしたいのは、10区切りにしたところをメニューとしてリンク領域を作成したいです。

なので、テーブルを使うことにしました。
これは可能でしょうか?
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/16(水) 11:34  -------------------------------------------------------------------------
   <TABLE cellpadding="3" cellspacing="0" width="650" style="text-align:center;">
<tr>
<TD colspan="10" style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</tr>
</table>

<TABLE cellpadding="3" cellspacing="0" width="650" frame="rhs"
style="text-align:center; border-top:#666666 1px solid; border-bottom:#666666 1px solid;">
<tr>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">01</div></a>
</td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">02</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">03</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">04</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">05</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">06</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">07</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">08</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">09</div></a></td>
<td onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">10</div></a></td>
</tr>
</table>

<TABLE cellpadding="3" cellspacing="0" width="650" style="text-align:center;">
<tr>
<TD style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</tr>
<tr>
<td style="border-top:#666 1px solid;border-bottom:#666666 1px solid;">サンプル</td>
</tr>
<TR>
<TD style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</TR>
</TABLE>


こんなのはどうでしょうか?
とりあえず にゃ。さんのイメージにあっているかどうかご確認ください。
URLや色、書き方などは仮のものです。
リンクの下線や文字も自由に変えてください。
本来ならばきっとスタイルシートか何かを使って
もっとエレガントに実現させるのでしょう。

他の皆さんが見たらなんて稚拙な書き方なのかと思うかもしれません。

しつこいようですが仮のソースです。
いくらでも改善点は改良点、修繕点は存在します。(←言い訳です。あんまり突っ込まないでください)
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/16(水) 12:10  -------------------------------------------------------------------------
   あれ?修正されましたね?

とりあえず一つのテーブル内に実現させて見ました。

<TABLE cellpadding="3" cellspacing="0" width="650" style="text-align:center;">
<tr>
<TD colspan="10" style="border-right:#666666 1px solid;height:4em; border-bottom:#666666 1px solid;">&nbsp;</TD>
</tr>
<tr>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">01</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">02</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">03</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">04</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">05</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">06</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">07</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">08</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">09</div></a></td>
<td style="border-right:#666666 1px solid;"
onmouseover="bgColor='#9999FF'" onmouseout="bgColor='#FFFFCC'" bgcolor="#FFFFCC">
<a href=""><div style="width: 100%; ">10</div></a></td>
</tr>
<tr>
<TD colspan="10" style="border-right:#666666 1px solid;height:4em; border-top:#666 1px solid;">&nbsp;</TD>
</tr>
<tr>
<td colspan="10" style="border-top:#666 1px solid;border-bottom:#666666 1px solid;">サンプル</td>
</tr>
<TR>
<TD colspan="10" style="border-right:#666666 1px solid;height:4em;">&nbsp;</TD>
</TR>
</TABLE>

-----------------------------------------------------------

前のレスのソースは忘れてください。無駄なcolspan="10"などがありました。

それにしても書き方がひど過ぎますね……。

何方かもっと簡潔にスッキリとしたソースをかける方
どうかフォローをお願い致します。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : むむりく  ■日付 : 04/6/16(水) 15:13  -------------------------------------------------------------------------
   ▼ららさん:
a と div が逆ですよん。

空白セルの扱いに困りつつ、ぼくも書いてみた。

</head>の手前に以下。

<style type="text/css"><!--
table{
text-align: center;
}
.blank_space{
width: 600px; height: 4em;
border-right: #666 1px solid;
}
tr#links td{
width: 57px;
border-style: solid solid solid none;
border-width: 1px; border-color: #666;
}
td#sample{
border-style: solid none;
border-width: 1px; border-color: #666;
}
--></style>

body に以下。

<table cellpadding="0" cellspacing="0" width="600">
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
<tr id="links">
<td><a href="#">01</a></td>
<td><a href="#">02</a></td>
<td><a href="#">03</a></td>
<td><a href="#">04</a></td>
<td><a href="#">05</a></td>
<td><a href="#">06</a></td>
<td><a href="#">07</a></td>
<td><a href="#">08</a></td>
<td><a href="#">09</a></td>
<td><a href="#">10</a></td>
</tr>
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
<tr><td id="sample" colspan="10">サンプル</td></tr>
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
</table>
    
    
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : Pid  ■日付 : 04/6/16(水) 18:40  -------------------------------------------------------------------------
    皆様,お初にお目にかかります。Pid と申します。
むむりくさん,こんにちは。いつもお世話になっております。

さて,Mozilla,Opera 向けならこんな記述で良いかも。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>…のページ</title>

<style type="text/css">
h2 {
 margin: 0;
 padding: 0.2em;
 border-width: 1px 0;
 border-color: #666;
 border-style: solid;
 text-align: center;
}
h1 + h2 {    /* h1 直後の h2 は表示しない*/
 display: none; /* IE は対応せず */
}
p {
 margin: 0;
 padding: 1em;
 border-right: 1px #666 solid;
}
ul.menu {
 margin: 0;
 padding: 0;
 border-right: 1px #666 solid;
 display: table; /* IE は対応せず*/
 width: 100%;
 text-align: center;
}
ul.menu li {
 margin: 0;
 padding: 0.2em;
 display: table-cell; /* IE は対応せず */
 background-color: #ffc;
 list-style-type: none;
}
ul.menu li:hover { /* IE は対応せず */
 background-color: #99f;
}
</style>

<h1>…のページ</h1>

<h2>メニュー</h2>

<ul class="menu">
 <li><a href="01.html">01</a></li>
 <li><a href="02.html">02</a></li>
 <li><a href="03.html">03</a></li>
 <li><a href="04.html">04</a></li>
 <li><a href="05.html">05</a></li>
 <li><a href="06.html">06</a></li>
 <li><a href="07.html">07</a></li>
 <li><a href="08.html">08</a></li>
 <li><a href="09.html">09</a></li>
 <li><a href="10.html">10</a></li>
</ul>

<p>当サイトでは…を扱っています。</p>

<h2>サンプル</h2>

<p>まずはサンプルをご覧下さい。</p>

<p>これは…です。</p>


しかし,実際問題として IE に対応しないと使い物にならないので,以下は IE のためだけのスクリプト(WinIE4 以下は未考慮)。

<script type="text/javascript">
window.onload = function() {
  if (window.navigator.userAgent.match(/MSIE/)) {
    // h1 + h2 { display: none; } の代わり
    //document.getElementsByTagName('h2')[0].style.display = 'none';
    document.all.tags('h2')[0].style.display = 'none';
    
    // ul[class="menu"] を table に置き換え
    table_style = 'border-right: 1px #666 solid; width: 100%; text-align: center;';
    td_style = 'background-color: #ffc;';
    td_mouseover = 'this.style.backgroundColor = \'#99f\';';
    td_mouseout = 'this.style.backgroundColor = \'#ffc\';';
    
    //var oUL = document.getElementsByTagName('ul');
    var oUL = document.all.tags('ul');
    var n = oUL.length;
    for (var i = 0; i < n; i++) {
      if (oUL[0].className == 'menu') {
        var s = oUL[0].outerHTML;
        s = s.replace(/<ul/ig, '<table summary="メニューです。" style="' + table_style + '"><tr');
        s = s.replace(/<\/ul/ig, '<\/tr><\/table');
        s = s.replace(/<li/ig, '<td style="' + td_style + '" onmouseover="' + td_mouseover + '" onmouseout = "' + td_mouseout + '";');
        s = s.replace(/<\/li/ig, '<\/td');
        oUL[0].outerHTML = s;
      }
    }
  }
}
</script>


※ネタとして (^^;)。IE 向けなら最初から table を使う方が楽でしょう。
 ───────────────────────────────────────  ■題名 : Re:テーブルでメニューを作る  ■名前 : 105  ■日付 : 04/6/16(水) 20:20  -------------------------------------------------------------------------
   みなさま、こんばんは。
サンプルで盛り上がってまいりましたので
ふらふらと私もサンプルをひとつ。テーブルのメニュー部分だけです。

テーブルとCSS併用です。例によってブラウザ互換には弱いです。


<head>内に

<style type="text/css">
<!--
table.menubox {
    border: 1px solid #999999;
    background: #C6D0B5;
    width: 650px;
}
table.menubox td {
    background: #FBFEF8;
    text-align: center;
}
table.menubox td a{
    width: 100%;
    display: block;
}
table.menubox td a:hover{
    width: 100%;
    background: #CC3333;
    color: #FFFFFF;
}
-->
</style>


<body>内に

<table class="menubox">
<tr>
<td><a href="#">01</a></td>
<td><a href="#">02</a></td>
<td><a href="#">03</a></td>
<td><a href="#">04</a></td>
<td><a href="#">05</a></td>
<td><a href="#">06</a></td>
<td><a href="#">07</a></td>
<td><a href="#">08</a></td>
<td><a href="#">09</a></td>
<td><a href="#">10</a></td>
</tr>
</table>


--------------------------------

こうやって見ると、同じ物作るにしても
人によって個性があって面白いですね。

私の場合、ひたすら簡単に作ることしか
頭になかったりしますので、あまり参考にならないかも。

※Pidさんのテクニカルなソースな後で、恥ずかしいのは内緒。
 ───────────────────────────────────────  ■題名 : >> Pidさん  ■名前 : むむりく  ■日付 : 04/6/16(水) 23:52  -------------------------------------------------------------------------
   ▼Pidさん:
> 皆様,お初にお目にかかります。Pid と申します。
>むむりくさん,こんにちは。いつもお世話になっております。
こんにちは。こちらこそお世話になりっぱなしで…

Pidさんの書かれた script は、いつも調べたりしつつ、
勉強させていただいてます。
密かに収集してたり……
    
 ───────────────────────────────────────  ■題名 : Re: テーブルでメニューを作る(was: 罫線について)  ■名前 : Pid  ■日付 : 04/6/17(木) 1:50  -------------------------------------------------------------------------
   To: むむりくさん
密かにとんでもないバグや勘違いが含まれていることがありますので,御注意下さい (^^;)。昔書いたスクリプトを見直して「何じゃこりゃ」と思うことは数知れず…。

To: 105 さん
ソースとても参考になりました。特に a を display: block; するあたり,さすがです。

私の場合,「他人が行ったマークアップに対して,私がスタイルを当てる」という時期があったため,たとえ div を一つ足せば済みそうな場面でも,わざわざ CSS で(時には JavaScript まで動員して)何とかするというのが癖になってしまいました。まあ HTML が簡便なら全て良し,ということで (^^;)。

いろいろな方々のソースを拝見するのは本当に面白いですね。私もテーブルメニューについてもう少し考えてみます(…質問者さんと回答者さんの邪魔にならないよう気を付けます…)。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/16(水) 19:12  -------------------------------------------------------------------------
   お三方、色々とありがとうございます。

イメージ通りになっています。後は、メニュー部(10区切りの箇所)の上をヘッダーとしたいです。
実際に画像をはめ込んでみましたが、レイアウトが崩れてしまいます。
これを改善する方法はありませんか?

お忙しいとは思いますが、よろしくお願い致します。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/16(水) 19:47  -------------------------------------------------------------------------
   どこにどのような大きさの画像をどのようにはめ込んだのでしょうか?

ある程度の情報は共有していますが、
どのようにレイアウトが崩れたのかなど、
こちらには伝わらない部分もあります。

にゃ。さんが書いた、
その周辺部分のソースを載せてみてください。

また、どのような完成図を思い浮かべているのかも
説明して頂けると助言しやすいかと思います。

-------------------------------------------------------

むむりくさんの書かれたソースの場合は
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
の&nbsp;の部分に

私のソースの場合は
<TD colspan="10" style="border-right:#666666 1px solid;height:4em; border-bottom:#666666 1px solid;">&nbsp;</TD>
の&nbsp;の部分に

<img src="画像のパス" width="" height="" alt="">を代わりに入れるか、
セルの背景として入れるかどちらかだと思います。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/16(水) 21:56  -------------------------------------------------------------------------
   画像のサイズは600×130です。場所は一番上です(10区切りの上)。

むむりくさんのソースを利用しているのですが、一番上のセルの高さは指定できないのでしょうか?
画像のサイズと同じ130に合わせたいのですが、こちらでは高さは変わりません。

最終的には画像をはめ込み、10区切りの下に色々と書き込むような形式を目指しています。
そして、10区切りはメニューとし、一番下はコピーライトを書こうと思っています。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/16(水) 23:19  -------------------------------------------------------------------------
   よくソースを読んでみましょう。

.blank_space{
width: 600px; height: 4em;
border-right: #666 1px solid;
}

の部分が
class="blank_space"
で指定されているセルのスタイルシートです。
ここのheight: 4em;
というのが、セルの高さです。
ですからここを130pxにすれば良いのですが、
それだけだと下方にある他の
class="blank_space"指定されているセルの高さも変わってしまいます。

ですから新たにclass指定をしてスタイルシートを加えてみるのはいかがでしょうか?

.ab{
width: 600px; height: 130px;
border-right: #666 1px solid;
}

これを加えて、
10区切りの上の部分の
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
だけを
<tr><td class="ab" colspan="10"><img src="画像のパス" width="600" height="130" alt=""></td></tr>
と変えてみてはいかがでしょうか?
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/17(木) 10:35  -------------------------------------------------------------------------
   ありがとうございます。できました。
むむりくさんのソースで、横幅を680pxにしたい場合は…

</head>の手前

<style type="text/css"><!--
table{
text-align: center;
}
.blank_space{
width: 600px; height: 4em;
border-right: #666 1px solid;
}
tr#links td{
width: 57px;
border-style: solid solid solid none;
border-width: 1px; border-color: #666;
}
td#sample{
border-style: solid none;
border-width: 1px; border-color: #666;
}
--></style>

body に以下

<table cellpadding="0" cellspacing="0" width="600">
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
<tr id="links">
<td><a href="#">01</a></td>
<td><a href="#">02</a></td>
<td><a href="#">03</a></td>
<td><a href="#">04</a></td>
<td><a href="#">05</a></td>
<td><a href="#">06</a></td>
<td><a href="#">07</a></td>
<td><a href="#">08</a></td>
<td><a href="#">09</a></td>
<td><a href="#">10</a></td>
</tr>
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
<tr><td id="sample" colspan="10">サンプル</td></tr>
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
</table>

上のソースを…
</head>の手前に以下。

<style type="text/css"><!--
table{
text-align: center;
}
.blank_space{
width: 680px; height: 4em;
border-right: #666 1px solid;
}
tr#links td{
width: 57px;
border-style: solid solid solid none;
border-width: 1px; border-color: #666;
}
td#sample{
border-style: solid none;
border-width: 1px; border-color: #666;
}
--></style>

body に以下。

<table cellpadding="0" cellspacing="0" width="680">
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
<tr id="links">
<td><a href="#">01</a></td>
<td><a href="#">02</a></td>
<td><a href="#">03</a></td>
<td><a href="#">04</a></td>
<td><a href="#">05</a></td>
<td><a href="#">06</a></td>
<td><a href="#">07</a></td>
<td><a href="#">08</a></td>
<td><a href="#">09</a></td>
<td><a href="#">10</a></td>
</tr>
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
<tr><td id="sample" colspan="10">サンプル</td></tr>
<tr><td class="blank_space" colspan="10">&nbsp;</td></tr>
</table>

とすれば大丈夫ですよね。

tr#links td{
width: 57px;
border-style: solid solid solid none;
border-width: 1px; border-color: #666;
}

上の57pxというのは触れなくて良いのでしょうか?
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : らら  ■日付 : 04/6/17(木) 11:08  -------------------------------------------------------------------------
   やって(実験して)みるというのもとても大事です。
修復可能な範囲で数値を変え、
どのような変化があるのかを見極めれば
どのソースがどのように対応しているのかがわかるようになります。


>tr#links td{
>width: 57px;
>border-style: solid solid solid none;
>border-width: 1px; border-color: #666;
>}
>
>上の57pxというのは触れなくて良いのでしょうか?

このスタイルシートは10区切りになっている場所のものです。
width: 57px;というのは一区切り分の横幅です。
全体の幅を広げる場合は、それに応じて
いくらかの変化はさせるべきでしょう。
600から680にするということは80px分増える訳ですが、
それを10で割ると10区切りの各セルごとに8px分増えることになるので
65pxにすれば良いかと思います。
(テーブルの枠の幅などもあるので微調整が必要かも)
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : にゃ。  ■日付 : 04/6/17(木) 11:21  -------------------------------------------------------------------------
   アドバイスありがとうございます。
自分の理想とする形になりました。
残りの作業は自分の力でできる範囲なので、頑張ります。

たくさんの方に教えて頂いたので、自分も少しは知識が付いたかと思います。
また、お世話になるかもしれませんがよろしくお願いします。
今回は本当にありがとうございました。
 ───────────────────────────────────────  ■題名 : Re:罫線について。  ■名前 : むむりく  ■日付 : 04/6/17(木) 13:43  -------------------------------------------------------------------------
   テーブルの幅(width="680")があるので、
CSSのwidthはなくてもいいかも。

cellpaddingとか、cellspacingをなしにして試していたので、
そのときのを消し忘れちゃってました。

>自分の理想とする形になりました。
>残りの作業は自分の力でできる範囲なので、頑張ります。
よかった。がんばってください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━    通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━                                 Page 666