• 締切済み

ホームページビルダー17 表のサイズについて

現在、未熟ながらも頑張ってホームページビルダー17の フルCSSテンプレートを使ってホームページを作っております。 ページの中に行数16、列数25の表を挿入したく表を作ってみますが 表の中に文字を入れるとどんどん表が大きくなりページから大きく はみ出してしまい困っております。 表内に打ち込む文字は、ポイント制度の表なので1つのセル内に「★」マーク 1つのみしか入れない単純な表です。なんとか表自体を小さくコンパクトな物にして ページ内に収まるよう設置したいのですが方法があれば教えて頂けないでしょうか？ よろしくお願い致します。

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

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.3

セル内が１文字のみなら、表のタイトルも１文字にすれば、場合によっては縦書き風に簡単になります。 つまり、上の表タイトルと左の表タイトルの掛け合わせが★なのでしょ？ 上の表タイトルの幅を1em(字)指定おけば縦読みできる表示に簡単にお望みの物ができる筈です。長音（ー）等が交じるとまずいですがね。 つまり、１文字ごとに折り返されて こ う な る よ う に する。文字をセンターに揃えれば、上手くいくのでは？ cssがわかるなら thead th{width:1em;text-align:center;line-height:1;} ということです。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

　ビルダーのフルCSSなんて嘘ですから(^^) 　ひとつのセルに一文字しか入らないのでしたら、25列でしたらタイトル列が数文字だとしたら通常のディスプレイ幅なら収まるはずです。 　ビルダーじゃ面倒(難しい)なので、テキストエディタで作ってみました。どうせビルダーじゃ、スタイルシートのセレクタなんか書けませんから手作業で指定するしかありません。 　ビルダーなどオーサリングツールは、HTMLやCSSを良く知ってなきゃ使いこなせません。逆じゃないですよ!!!。その上にツールのマニュアルも理解しなければならないので大変です。文書構造を読み取って最適なセレクタを書くなんて事は人工知能でも大変な作業になるのです。--ツールでは絶対に不可能です。 ☆下記サンプルはHTML4.01strict + CSS3 で、どのブラウザでも標準モードで動作します。 　Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATA入力でチェック済み ☆タブは＿に置換してあるので戻すこと。 [サンプル]Shif_JIS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table[summary="pointList"]{ border-collapse:collapse; margin:0 auto; } table[summary="pointList"] thead th{width:1em;} table[summary="pointList"] th,table[summary="pointList"] td{ padding:0.1em 0.3em; } table[summary="pointList"] th:nth-child(2n+3), table[summary="pointList"] td:nth-child(2n+3){background-color:rgb(255,255,180);} table[summary="pointList"] tr:nth-child(2n) th, table[summary="pointList"] tr:nth-child(2n) td{background-color:rgb(255,180,180); --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="pointList" border="1"> ＿＿＿<thead> ＿＿＿＿<tr> ＿＿＿＿＿<td></td><th abbr="1">６月１日</th><th abbr="2">６月２日</th><th abbr="31">６月３日</th><th abbr="41">６月４日</th><th abbr="5">６月５日</th><th abbr="6">６月６日</th><th abbr="7">６月７日</th><th abbr="8">６月８日</th><th abbr="9">６月９日</th><th abbr="101">６月10日</th><th abbr="11">６月11日</th><th abbr="12">６月12日</th><th abbr="13">６月13日</th><th abbr="14">６月14日</th><th abbr="15">６月15日</th><th abbr="16">６月16日</th><th abbr="17">６月17日</th><th abbr="18">６月18日</th><th abbr="19">６月19日</th><th abbr="20">６月20日</th><th abbr="21">６月21日</th><th abbr="22">６月22日</th><th abbr="23">６月23日</th><th abbr="24">６月24日</th><th abbr="25">６月25日</th> ＿＿＿＿</tr> ＿＿＿</thead> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="伊藤">伊藤博文</th><td></td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td></td><td>☆</td><td></td><td>☆</td><td></td><td></td><td></td><td>☆</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="黒田">黒田清隆</th><td></td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td></td><td>☆</td><td></td><td>☆</td><td></td><td></td><td></td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="三條">三條実美</th><td></td><td></td><td>☆</td><td>☆</td><td></td><td></td><td></td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="山縣">山縣有朋</th><td>☆</td><td>☆</td><td>☆</td><td></td><td></td><td></td><td></td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td></td><td></td><td></td><td></td><td>☆</td><td>☆</td><td>☆</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="松方">松方正義</th><td>☆</td><td>☆</td><td></td><td></td><td>☆</td><td></td><td></td><td></td><td>☆</td><td>☆</td><td></td><td></td><td></td><td></td><td></td><td>☆</td><td></td><td>☆</td><td></td><td>☆</td><td>☆</td><td></td><td></td><td>☆</td><td>☆</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

kaochan1102
質問者

お礼

詳しく説明して下さり本当にありがとうございます！ ビルダーのフルCSSって簡単そうに見えてよく理解していないと 扱えないのがわかりました。私ももっともっと勉強して いかないとダメですね。 頂いた情報を参考に努力してみます。ありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

どう頑張ったって、はみ出すかどうかは閲覧者のウィンドウ次第なので、方法は「無い」し、「気にしない」のが正解。 とりあえず、table内の文字サイズを無理の無いレベルで少し小さくすればいいんじゃないでしょうか。

kaochan1102
質問者

お礼

早速ありがとうございました。 やはり気にしないしかないんですね、、、

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ホームページビルダーで、文字を張り付けると表が広がってしまいます。

    こんにちは。 ホームページビルダーでホームページをつくっています。 表のなかに文字を入力していくと、表の行き止まりで自動的に次の行に移りますが、ワードにつくった文章を表内にコピーペーストすると次の行に移らず、表が広がってしまいます。 どんな設定をしたらいいのでしょうか。 基本的な質問ですみません。 ご存知の方がいらっしゃいましたら宜しくお願いいたします。

  • ホームページビルダー14で挿入した表の幅を揃えたい

    まず、ホームページビルダー14で、表を挿入するため、左にあるツールから「表の挿入」をクリックします。 例えば、カレンダーだとすると、列が７、行が5になります。 その後、幅を均一に揃えようとして、挿入した表内の任意の位置で右クリック後、「表の属性」などから幅や高さなどをピクセルで揃えようとしても、均一にならないのです。 ホームページビルダー14で、幅を均一に揃えることについて詳しい方がいましたら、よろしくお願い致します。

  • ホームページビルダー９：表について…

    ホームページビルダー９で３行３列の高さも幅もすべて均等な表を作りたいのですが、文字や画像を挿入する度に表の高さや幅が変わってしまいます。 どんな文字や画像を挿入しても高さや幅の変わらない表を作る方法はないのでしょうか？ 何度も色々と試しているのですが解決しません。 ご存知の方、どうぞよろしくお願いします！！

  • ホームページビルダーでcssレイアウトは可能ですか？

    Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか？ tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは（ホームページビルダー上では）どのようにするのでしょうか？ あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか？

  • ホームページビルダー表巾の固定

    ホームページビルダー９にて、ホームページを自作しています。 表を設定し、その中に、例えば写真などの画像ファイルを挿入すると、表巾が拡がってしまいます。 表の中に、ファイルを挿入しても、当初設定した表巾が拡がらないよう、固定することはできませんか？

  • ホームページビルダー　表の中の見出しについて

    教えてください。ホームページビルダー１２です。 表の中なのですが。 文字を見出しにしたいです。 H1とかH2です。 ところが、同じページでも表によって、H1とかH2にできるところとできないところがあります。 何故でしょうか？ 教えてください。よろしくお願いします。

  • ホームページビルダの表の挿入が、分かりません。

    ホームページビルダーの表の挿入の行と列を決めて、ホームページに挿入しましたが 文字を入れようとしたところ、ひとつのマスの上下に打ってある中点のところで文字が 打てなくなります。 これでは、ひとつのマスが２分割されているのと同じです。 この２分割を解除するにはどうしたらよいですか!? 仕事で使っていて、本当に困ってます。どうか、ご指南ください。

  • ホームページビルダーでの表によるレイアウトについて

    ホームページビルダー8を利用しています。 「標準モード」で表を使ってレイアウトする方法で、つぎの場合についてご教示ください。 簡略的に表現しますと、 (1)の素材＝　Illustratorで自作した下地となるデザイン(壁紙のような)で、幅高さともにページの全面を占める。 (2)の素材＝　(たとえば)剣道の竹刀の写真を切抜いてトリミングしたjpeg。 (3)の素材＝　Illustratorで自作したサイトのタイトル文字で、(たとえば)「剣　道」のようなも。 重なり方は(1)が一番下。 その上に(2)の竹刀の写真。 一番上に(3)のタイトルの文字デザインです。 竹刀の写真は元々横長で水平になっていた棒のような写真を45度くらいに回転させて、ページの右上から左下にかけて大きく配置して、その上方部分に(2)のタイトル「剣道」が一部だけ上に重なる形です。 (1)の壁紙と(3)のタイトル文字は、四角形として考えられるので、表として配置できますが、(2)はトリミングして回転させた関係で今は、細長～い長方形が斜めになっている形で、表としてはどのように配置すればよいでしょうか？ ページサイズの大きな表をつくり、(1)を収め、その(1)の表の中のタイトルの部分に表をつくり(3)の剣道を収めるのかと思いますが、・・・・・ (2)の竹刀の写真はどうすればよいでしょうか？ この場合、(1)(2)(3)それぞれ文章ではないので(SEOとも関係なく)ビルダーに挿入する以前に、一枚の画像として合成したうえで、ビルダーに挿入するのが普通でしょうか？ (このサイトで、最近の傾向としてレイアウトには表ではなくCSSを用いるのが良い、とのアドバイスをいただいて勉強を始めましたが、まだレベルが上がっておらず、どうしても急ぎでどこでもモードから少なくとも標準モードへ(表を使ってでも)作り変えなければならない事情があり、今回質問させていただきました。) よろしくお願いいたします。

  • ホームページビルダーの表について

    ホームページビルダーに「エクセル」の表みたいなのがありますよね。 表をつくって、中に字を書いたりできると思うんですが、 表の大きさをドラックして大きくしたり、数字を入力して 大きくしたりしたあと、文字の中央寄せを使っても、ビルダー内では 中央に寄っていても、ブラウザで見るとずれていたりするんですが これはどうしてでしょうか。中央寄せした状態で表示したいです。 どこでも配置モードでやってます。 あと、数字でセルの大きさを変えたりするときも、数字を入れても 変わらないときがあります。これもさっきのと同じで、たとえ ホームページビルダー内で変わっても、ブラウザでは変わってない ことがあります。どうしてでしょう。どうやったら直せ ますでしょうか。教えてください。よろしくお願いします。

  • ホームページビルダー10　CSS解除

    ホームページビルダー10を使用しています、表の挿入後、表の中の色の変更をしたかったのですがCSS設定が有効のため表示されませんとのメッセージが・・・解除できるのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する