ホームページビルダーでセル(テーブル、枠)についてのQ&A

Q:
ホームページの枠の線がはっきりした表(細線の枠)の作り方を教えて! 下に示す変更後の表みたいに。
A:
まず表を作る→表の中の任意の場所をクリック→編集メニュー→属性の変更→表(タブの名前)→背景(欄の名前)→黒(例)にする(枠の色になる)→枠表示にチェックを入れる(通常は初めからチェックが入っている)→枠表示をゼロピクセルにする→罫線の幅を1ピクセルにする→OK(確認のため)→今作っているセル(厳密に言うと、セル群が入ったテーブル全体)が黒くなる(もし、黒くならなくてもこのまま続けてください)→黒の枠をまとめて選択(反転)→編集メニュー→属性の変更→セルのタブ→色→白にする→OK→できあがり

(もし、これでダメの場合は、前述の「今作っているセルが黒くなる」はずが、黒くなっていないはず。正常ならば今作っているセルが黒くなる(普通はセルが複数入っているテーブルなので、厳密に言うと、「テーブル全体が黒くなる」)。
で、そういう場合は→前述の「できあがり」の段階の状態のままで → ソースの
<table frame="VOID" cellspacing="1" COLS="40" rules="NONE" border="0" bgcolor="#000000">(←例です)を
<table cellspacing="1" border="0" bgcolor="#000000"> にする。 (<と>はここでは全角ですが、入力時は半角にしてください )  → 表の中の任意の場所をクリック→編集メニュー→属性の変更→表(タブの名前)→背景(欄の名前)→黒(例)にする(枠の色になる)→枠表示にチェックを入れる(通常は初めからチェックが入っている)→枠表示をゼロピクセルにする→罫線の幅を1ピクセルにする→OK → これでできあがるはず。

変更前(例):

取引時間 気配 →→→→→ →→ 約定! 2ch
マネックスナイター 17:30〜23:59 買い未成立 売り未成立 取引成立
カブドットコム 18:30〜23:59 3 5
7 9
1  3  5
  7  9
ジャパンネクスト 19:00〜23:50 1 3 5
7 9
1  3  5
 7 9


変更後(例):

取引時間 気配 →→→→→ →→ 約定! 2ch
マネックスナイター 17:30〜23:59 買い未成立 売り未成立 取引成立
カブドットコム 18:30〜23:59 3 5
7 9
1  3  5
  7  9
ジャパンネクスト 19:00〜23:50 1 3 5
7 9
1  3  5
 7 9




ttttttt(2016-10-25の追記 ここから)


各セルの高さがやや高いなら、ぴったりにできる(やや下に示す「解説 G」を参照)。その方法は下記のようにする。
「「「
<td height="28" align="LEFT" bgcolor="#FFFFFF">西暦2015年</td>
上記ソースを下記ソースに変更する。
<td align="LEFT" bgcolor="#FFFFFF">西暦2015年</td>
なお、全セルについてこのように変更する。置換機能を使えば簡単にできる。すなわち、
置換前:
td height="28" align
置換後:
td align
という風に置換する。
」」」


ーーーーーーー 解説 G ここから ーーーーーーー
置換前:

西暦2015年 平成27年 未年:ひつじどし 誕生日前なら→ 1歳 誕生日後なら→ 2歳


置換後:

西暦2015年 平成27年 未年:ひつじどし 誕生日前なら→ 1歳 誕生日後なら→ 2歳

ーーーーーーー 解説 G ここまで ーーーーーーー

ttttttt(2016-10-25の追記 ここまで)





2010-1-23の追加事項:
●セルの行や列をもうひとつ付け足す場合は:
つまり、編集とかで後で、一行付け加えたいとかの場合です。まず、
付け足したい行のすぐ上の任意の行をクリック→行の追加のボタンを押す(マス目の形のボタン群の1つ)→すると黒い一行ができる→その黒い一行を端から端までドラッグする(ドラッグしても黒のままのはず)→編集→属性の変更→色の欄→真っ白の色(#ffffff)を選択→OK→これでも、黒のままだが、そこをクリックすると白になる→これで出来上がり。
●セルを2行にならなくする方法(折り返しさせない方法):
そのセルを反転させる→右クリック→「自動的に行を折り返す」のチェックを外す→OK (注意: もしかすると、一定の限度を超えたレイアウトでは、できない場合がある)


Q.表を作ったとき、セル内の文字が折り返され(2行になってしまう)てしまいます。折り変えさなくする方法を教えて

A1.表内の任意のセルを選択→属性の変更→セルのタブ→自動的に行を折り返すのチェックを外す→ok

A2.それでだめなら→たとえば下記表を例にとろう→「お」のセルで折り返しが起こってしまったとしよう「お」のセルの右端か左端をドラッグして、折り返しが起こらなくなるまで広げる

A3.それでもだめなら→(これからの説明はA2の作業をすることが前提です。A2の作業の最後の作業の状態にしておいてください。)→ページ・ソースの編集画面にする→「お」を反転→ソースを見て反転したところの<TD width="103">(値は例です)を探す→ページ・ソース画面のうちページ画面(以降ページ画面と記す)を見る→「いおくさせ」を選択→ソース画面を見る→先程の<TD width="103">で、103の値が小さいことが原因なのだと考える→ページ画面で「いおくさせ」を選択(反転)→編集→属性の変更→セルのタブ→セルの幅が103になっているはず→103で折り返されたのだから、120ぐらいにしてみる→ok→プレビューで確認→それでだめなら、150にするなり、試行錯誤をすればよい→この場合、他の列にしわ寄せが来ることがあるので、その場合は、その列で同様のことをすればよい→@これで解決しないならば Aページ編集の画面で折り返されていないのにプレビューで折り返されるならば→@かつAならば、これはもうホームページの限界と見なしたほうがよい。無理なレイアウトのページを作ろうとしているのだと思ってあきらめるべきでしょう。重要なことはプレビューで折り返されているセルの列のwidthを増やし、折り返されていない(できれば空白がある)セルの列のwidthを減らすことです。 追記: その表がさらに大きなセルに含まれている場合はそのセルが邪魔している。さらに大きなセルというものは今のホームページではあって当たり前。それでいて、さらに大きなセルの存在を知らない人がいる(特にテンプレートや他のページを変更して作られた場合。知らないまでも、うっかり忘れる場合。 また、その表が全体だと思っていたが実は一部だったということもあるので注意。

A4.
それがだめなら、
http://superportal777.blog135.fc2.com/blog-entry-25.html
のページの上から1/5ぐらいのところの「ゆーとぴあ」と「やまや」の間(※)の変な水平のセルに埋めた画像のようにする。この画像で横幅をほぼ自由に調整できる。ちなみにこの画像は、クリックするとわかる通り、ダミーとして「横幅を調整するバーです」と書かれた画像になっている。
※・・・現在(2011-09-16の時点)は「ゆーとぴあ」と「やまや」の間ですが、今後このリンク先ページの編集により少し位置が変動するかもしれません。なので、もし見つからなかったら、変動したことを疑って、「そのあたり」を探してください。
 ↓
 ↓2011-10-08追加
 ↓
もっと、良い例を作りました。下記のページのメインの大きなテーブル(表)の最下部です。
http://homepage3.nifty.com/super-portal/j-toppu-3.5.html (2011年末日までこのURL)
http://homepage3.nifty.com/super-portal/j-toppu.html (2012年以降はこのURL)

ついでに申しますが、セルに埋めたその画像は以下の画像です。この画像の高さを1ピクセルにして、横幅を目的の長さにして埋め込んだのです。まあ、真っ白な画像のほうがいんだけど、ここでホームページ作成技術を説明するためもあって、この画像を使いました。


「横幅を調整するバーです」と書かれている。





トップページへ

┃┃