Tips

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

投稿日:

1. 問題点

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

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

2. 対策

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

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

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

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

表を拡大する動き(その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

関連記事

Webサイトに Font Awesome 5 を導入する方法

Font Awesome 5 の使い方をご紹介します。 目次1. Font Awesome とは?2. Font Awesome 5 の2つのフレームワークSVG with JSWeb Fonts w …

エックスサーバーに WP-CLI を導入する

WordPress は優れた管理サイトが用意されているため、ほとんどの操作をここから行うことができます。 しかし、何らかの原因で管理サイトにアクセスができなくなった場合に備え、別の操作方法を用意してお …

no image

エックスサーバーの「WordPress簡単移行」機能

目次概要メモ簡単移行の処理について試してみたお知らせマニュアルページ 概要 エックスサーバーの「WordPress簡単移行」機能は、他社のサーバーで運営していた WordPress サイトを、エックス …

Windows で、.htaccess(先頭がドットで始まり拡張子を持たないファイル名の)ファイルを作成する方法

レンタルサーバーでは、.htaccess ファイルを使ってサーバー側の設定を変更することが許されているものが多くあります。 そこで、この機能を利用しようと思い Windows のエクスプローラー上で …

エックスサーバーに tig コマンドを導入する

エックスサーバーに tig コマンドを導入する手順について説明します。

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