複数カラムレイアウトのサイトで表の幅を広げられるようにする

投稿日:2020年10月22日 更新日:

複数絡むレイアウトのサイトで表の幅を広げられるようにする

1. 問題点

このサイトは2カラムレイアウトです(少なくても今の時点では)。左カラムには記事が、右カラムにはサイドバーが表示されます。

このようなレイアウトの場合、メイン側に幅の広い表 (<table>タグ) を記述しても、表の幅が狭くなってしまい非常に見にくくなります。

2. 対策

そこで本記事では、表の幅を広げるボタンを追加する方法を紹介します。

本サイトの 無料ブログサービスの比較 というページで使っていますので、具体的な動きはそちらで確認してください。

以下のスクリーンショットでも、だいたいの動きが分かると思います。

表を拡大する動き(その1)
表を拡大する動き(その1)

表を拡大する動き(その2)
表を拡大する動き(その2)

3. コードサンプル

ここでは、WordPress を使っていることを想定し、1つの「カスタムHTML」ブロックに、必要なコードを全て記述する例について説明します。

まず、「カスタムHTML」ブロックに記述する内容の全体的な構成は以下になります。

<style>
  省略
</style>

<script>
  省略
</script>

<button id="grh2TPvhG864RVqg">拡大</button>

<div style="overflow:auto;">
  <table id="tC5Aq8RFzPn3jqpx">
  省略
  </table>
</div>
  • <button><table> には id 属性を指定しており、ランダムな文字列をセットしています。スタイルシートや JavaScript では、この id 値を使って各要素にアクセスしますが、このとき間違って他の要素にアクセスしてしまわないために、ランダムな文字列にしました。”password generator” でウェブを検索すると、パスワード生成ができるサイトが見つかりますので、そういうサイトで文字列を生成することができます。ちなみに id 値は数字から始まってはいけません。
  • <table><div style="overflow:auto;"> で囲うことによって、拡大前の時点で表が横スクロールできるようにしています。こうしておくと便利です。

<script> タグの中身は以下になります。

window.addEventListener('DOMContentLoaded', (event) => { 
  let flg = true, parentOverflow, parentWidth, width, position, backgroundColor, boxSizing;
  const btn1 = document.querySelector('#grh2TPvhG864RVqg'); 

  btn1.addEventListener('click', function() { 
    const tbl1 = document.querySelector('#tC5Aq8RFzPn3jqpx'); 
    const parent = tbl1.parentElement;

    if (flg) { 
      parentOverflow = parent.style.overflow;
      parentWidth = parent.style.width;
      width = tbl1.style.width; 
      position = tbl1.style.position; 
      backgroundColor = tbl1.style.backgroundColor; 
      boxSizing = tbl1.style.boxSizing; 

      parent.style.overflow = ''; 
      parent.style.width = tbl1.style.width =
        window.innerWidth - tbl1.getBoundingClientRect().left - 20 + 'px'; 
      tbl1.style.position = 'relative'; 
      tbl1.style.backgroundColor = parent.style.backgroundColor || 'white'; 
      tbl1.style.boxSizing = 'border-box'; 
      btn1.textContent = '元に戻す';
    } else { 
      parent.style.overflow = parentOverflow; 
      parent.style.width = parentWidth;
      tbl1.style.width = width; 
      tbl1.style.backgroundColor = backgroundColor; 
      tbl1.style.position = position; 
      tbl1.style.boxSizing = boxSizing; 
      btn1.textContent = '拡大する';
    } 
    flg = !flg; 
  }); 
});
  • 大雑把にいうと「ボタンがクリックされたら、table 要素のプロパティを変更して幅を広げ、もう一度ボタンが押されたら元の値に戻す」とうことをやっています。<table>を囲っている <div>style 属性値も合わせて変更しています。
  • Chrome の場合は、divwidth を変更しなくても、表の横幅を変えることができましたが、Firefox ではそうはなりませんでした。なので、divwidth (= parent.style.width)も表の横幅の長さに変更しています。
  • 「- 20」となっているところは、幅の微調整です。このあたりなどは、もっとよい書き方があるかもしれません。

<style> は絶対必要というわけではありませんが、例えば以下を記述します。

@media print, screen and (max-width: 960px) {
  button#grh2TPvhG864RVqg{
    display: none;
  }
}
  • スマートフォンで表示した場合は、全体の幅が狭いので「拡大」機能が使えません。なので、スマートフォンの場合はボタンを非表示にしています。

4. おわりに

ここで取り上げたカラムレイアウトとは異なる場合でも、本記事のサンプルコードを改造すれば 表の幅を変えられると思います。

-Tips

執筆者:fitallright

関連記事

レンタルサーバーの Tips

CGI と PHP(モジュール版) の違い

レンタルサーバーにおける「CGI」と「PHP(モジュール版)」の違いについて書きます。 目次1. 「CGI」と「PHP(モジュール版)」の共通点2. 両者の違いと「PHP(モジュール版)」の手軽さ1. …

データ転送量とは?

レンタルサーバーにおけるデータ転送量とは?

レンタルサーバーの機能やスペックを見ていると「転送量の目安」といった項目を目にすることがあります。 ウェブサイトへのアクセスが少ないうちは、あまり気にする必要はない項目ではあるのですが、できれば、 レ …

WordPress に Font Awesome 5 を導入する方法

WordPress に Font Awesome 5 を導入する方法

WordPress に Font Awesome 5 を導入する方法について説明します。 目次1. はじめに本ページで説明する方法について2. 導入手順「SVG with JS」の導入手順「Web F …

【VPS, クラウドサーバー】MySQL (MariaDB) が突然停止する場合は、innodb_buffer_pool_size が大きすぎるかもしれません

VPS や クラウドサーバー(OS は Linux)を借りて、MySQL (MariaDB) を使っている場合のお話しです。 目次現象調査my.cnf で innodb_buffer_pool_siz …

no image

レンタルサーバーに関して気を付けること

レンタルサーバーに関して気を付けること 借りたサーバのホスト名もしくは IPアドレスを参照する DNS のレコードを残したまま解約してはいけない。 ドメインに関して気を付けること 証明書の期限を短くす …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」