• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32016/11/04 17:45:10

  

  それぞれのセルの幅を足した合計が全体の幅を超えているために、TABLE タグの自動調整が効いているのだと思います。
  
  縦を合わせるのに一番単純な方法は、一行毎に TABLE を作るのではなく、全体をひとつの TABLE にすることです。
  また、セルの幅や背景色など、見栄え的なものはタグの属性に直接埋め込むのではなく、CSS に切り出しておくと、「見た目を調整したかっただけなのにテーブル全体が表示されなくなった」的な地雷を回避できる可能性が高くなります。
  
  以上をふまえて、

  • ひとつの TABLE タグで構成する
  • 見出し（「リスト」）は、TABLE の CAPTION タグを使う
  • 見出し行は TH タグを使う
  • 列の幅は COL タグを使う
  • 見栄え的なものは、CSS で記述する
  • ひとつの長い文字列でタグを書くのではなく、構成要素単位にばらして書く（方が、見やすいと思います）

  というふうにしてみました。

  javascript

  var Array1 = ["apple","car","dog","international scppl"];
  var Array2 = ["りんご","車","犬","国際学校"];
  
  /* ★ここから */
  var str1 =
      '<caption>リスト</caption>' +
      '<colgroup>' +
      '<col class="col_1">' +
      '<col class="col_no">' +
      '<col class="col_eng">' +
      '<col class="col_jpn">' +
      '<col class="col_prac">' +
      '<col class="col_prac">' +
      '<col class="col_prac">' +
      '</colgroup>' +
      '<tr>' + 
      '<th></th>' + 
      '<th>'+'No.'+'</th>' +
      '<th>'+'英語'+'</th>' +
      '<th>'+'日本語'+'</th>' +
      '<th>練習①</th>' +
      '<th>練習②</th>' +
      '<th>練習③</th>' +
      '</tr>';
  
  var str2 = ''
  for (var i=0 ; i<Array1.length ; i++) {
      str2 +=
          '<tr>' +
          '<TD>' +
          '<TD>'+[i+1]+'</td>' +
          '<TD>'+Array1[i]+'</td>' +
          '<TD>'+Array2[i]+'</td>' +
          '<TD></td>' +
          '<TD></td>' +
          '<TD></td>' +
          '</tr>';
  }
  
  var div = document.getElementById("list")
  div.innerHTML =
      '<TABLE class="list" border=1 cellpadding=8 cellspacing=0 >' +
      str1 +
      str2 +
      '</TABLE>';
      /* ↑ひとつの TABLE にする */
  
  /* ★ここまでを変更してます */
  
  /////指定範囲印刷するjquery   <div id="printarea">で囲んだ箇所が印刷される
  
  jQuery.noConflict();
  var j$ = jQuery;
  jQuery(document).ready(function($){
    $('#btn_print').click(function(){
      $.jPrintArea("#printarea");
    });
  });
  /////////////////////////
  

  
  

  CSS

  table.list caption {
      margin-left: auto;
      margin-right: auto;
      width: 8ex;
      padding: 9px;
      background-color: #ffff66;
      border: 1px solid gray;
  }
  table.list th {
      background-color: #ffff66;
  }
  table.list td {
      background-color: #ffffff;
  }
  table.list {
      text-align: center;
      font-size: large;
  }
  table.list .col_1 {
      width: 10px;
  }
  table.list .col_no {
      width: 40px;
  }
  table.list .col_eng {
      width: 150px;
  }
  table.list .col_jpn {
      width: 200px;
  }
  table.list .col_prac {
      width: 150px;
  }
  

  
  
  

  jsFiddle で試したのがこちら。
  https://jsfiddle.net/a_kuma3/c2k2jdka/

  スター

  • 

    9件のコメントを見る

  • a-kuma3 2016/11/05 15:58:50

    また印刷するとヘッダーにURL、フッダーに日付が印刷されてしまいます。これを消す方法はありますか？

    こっちを忘れてた。
    印刷時のヘッダーやフッターは、javascript の範囲では変更できません。
    ブラウザの「ページ設定」のような機能で消すか、プログラムで用意するならブラウザのプラグインのようなものを作ることになります。

    スター

  • javelover 2016/11/07 10:33:20

    ありがとうございます。返信遅れて申し訳ありません。なるほど、tableの作り方は要素ごとに書くと見やすいです。テーブルのセルの文字サイズを列ごとに個別に設定したいのですが、セルの中の文字のサイズは
    table.list {
    text-align: center;
    font-size: large;
    }
    こちらのlargeで一括して決められているのでしょうか。
    だとすると、
    セルごとに文字サイズを変えたいときは、font-size: large;の部分を消して例えば
    
    ||<
    table.list .col_eng {
    width: 150px;
    font-size: 15pt;
    }
    ||>
    というふうに個別に設定するやり方で合っていますでしょうか。
    
    あとセルの練習①，②，③のタイトルの入った列のセル幅をもう少し広げてみたのですが、画面上では広く表示されているのですが、印刷するとなぜか、狭いままでした。もしかして、画面の表示幅を超えたので、印刷すると自動で調整されてしまうのでしょうか？
    これらの対策として、table.list .col_eng とtable.list .col_jpn　の文字サイズをそれぞれもう少し小さく調整したいと思った次第です。
    
    宜しくお願いします。

    スター

  • a-kuma3 2016/11/07 14:17:09

    テーブルのセルの文字サイズを列ごとに個別に設定したいのですが、
    　　...
    セルごとに文字サイズを変えたいときは、font-size: large;の部分を消して例えば

    そうです。
    CSS は、緩い指定よりも細かい指定が優先されて採用されるので、table.list の方の指定はそのまま残しておいても、.col_XXX の方に指定すれば、そちらが有効になります。

    table.list {
        /* TABLE のフォントサイズは、基本的に large */
        font-size: large;
    }
    table.list .col_eng {
        /* でも、.col_eng の列だけは small に指定 */
        font-size: small;
    }
    

    
    

    画面上では広く表示されているのですが、印刷するとなぜか、狭いままでした。

    環境（ブラウザ、プリンタ、用紙サイズ）によると思いますが、A4縦置きで印刷のプレビューを見ると、用紙の横幅に収まっていなくて自動調整が効いている感じです。
    TABLE のサイズを絶対値で指定すると、用紙をはみ出る部分は見切れて表示されるので、確認できると思います。

    table.list {
        /* TABLE 全体の幅を（例えば）900px に固定 */
        width: 900px;
    }
    

    スター

  • javelover 2016/11/07 17:44:08

    a-kuma3さん、ありがとうございます。
    いろいろ試しているのですが、フォントサイズが小さくなりません。
    
    https://jsfiddle.net/a_kuma3/c2k2jdka/
    
    ↑前回作って頂いたこちらのコードを使って試しています。
    table.list {
    text-align: center;
    font-size: large;
    }
    table.listは largeサイズのままで
    
    col_engの列の文字サイズだけを小さくしたいのですが
    table.list .col_eng {
    width: 150px;
    font-size: small;
    }
    
    smallの部分をfont-size:12px とか、50%とかいろいろ
    試しているのですが、変化しません。
    
    table.list のほうを試しに削除してみても同じでした。
    
    原因がわかりますでしょうか？

    スター

  • a-kuma3 2016/11/07 18:04:52

    すみません、嘘を書きました　(´・ω・｀)
    COL って、指定できる属性が限られてるみたいだし、そのほとんどが非推奨で。
    　　<col> - HTML | MDN
    
    CSS の nth-child を使ってください。

    table.list tr td:nth-child(3) {
        font-size: small;
    }
    

    ↑は、「TR の配下で、3番目にある TD 要素」になります。

    スター

  • javelover 2016/11/08 10:28:44

    a-kuma3 さん
    ありがとうございます。文字サイズ変更できました！
    いろいろ試してうまくいかず、教えてもらって大変助かりました。
    これを基に、CSSのほうを勉強を進めています。ありがとうございました。

    スター

  • javelover 2016/11/08 11:07:19

    もう１つ教えてください。
    文字置換のやり方なのですが、
    
    ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
    var ken ="in my opinion"
    var str ="In my opinion, I love KEN."
    
    //文字を置換する
    str=str.replace(/ken/ig,"私の意見では");
    
    document.write(str);
    ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
    
    In my opinion, I love KEN.　という文章の中の
    
    In my opinionという部分を”私の意見では”に置き換えたいのですが
    

    ■***********************************************

    //文字を置換する
    str=str.replace(/ken/ig,"私の意見では");

    ■***********************************************

    
    

    ↑の文字置換の/ken/ という部分に配列を指定するにはどうしたらいいのでしょうか？
    
    このままだと、文章の中のKENという部分が置換されてしまいます。
    
    結果→In my opinion, I love 私の意見では.

    スター

  • a-kuma3 2016/11/08 11:43:44

    ↑の文字置換の/ken/ という部分に配列を指定するにはどうしたらいいのでしょうか？

    「配列」ではなくて「変数」ですね。
    RegExp オブジェクトを使います。

    var ken ="in my opinion"
    var str ="In my opinion, I love KEN."
    
    //文字を置換する
    str=str.replace(new RegExp(ken, "ig"),"私の意見では");
    

    →RegExp - JavaScript | MDN
    以下の三つは、同じ正規表現のオブジェクトを表します。

    /in my opinion/ig
    
    new RegExp("in my opinion", "ig")
    
    var ken = "in my opinion";
    new RegExp(ken, "ig")
    

    スター

  • javelover 2016/11/08 14:14:34

    すみません、変数でした。早速有り難うございます。RegExp オブジェクトというのがあるのですね。
    いろいろ自分で調べていても、変数（配列）の場合の具体的な例がなかなか見つけられず行き詰まっておりました。
    その使い方の例ととても分かりやすい解説ありがとうございます。これを配列に応用して試しております。どうもありがとうございました。

    スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2016-11-04 14:09:36

終了日時

2016-11-11 14:10:03

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• ノーヒットワンダラー、雪村いずみ、和田アキ子、大貫妙子のように、一定の評価の下、長年歌手活動を、著名…minminjp2001332日前
• 「か」の3画目って跳ねますか？（パソコンでは跳ねてないけど） 分かったら教えてええ！…あいるん1322日前
• 仮想通貨で１万円から始めたとして、その１万円以上損をするということはありますか？ できたら理由や根拠…kan3711日前
• 【GoogleのBardとBingのChatGPT】とでは、どっちが良いと思いますか。 rsc212日前
• 中学3年です。 ほとんど成績が2の偏差値約30です。偏差値50の倍率が高い高校を目指すのはまだ希望はありま…匿名質問者4115時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ