ブログにテーブル表を掲載する（2） / アメブロ表作戦

スマホの表示を考慮した横スクロールするテーブル表 

大きなテーブル表はスマートフォンから参照した場合は、表の右側は見る事が出来ません。 このページの様な標準的な「620px幅」にフィットするテーブル表でも、スマートフォンでの表示は右側が欠けたまま見えない状態になります。

 

もしスマホで参照しても、全てのテーブル表の内容を見える様にするには、テーブル表全体を横スクロール可能にする工夫が必要です。 その方法は、テーブル表自体を作るのに比べれば、とても簡単です。

 

テーブル表本体のコードを加工する 

❶ HTML編集で「テーブル表」の本体の要素「tableタグ」を確認し、その前後を「divタグ」で囲みます。 

❷ その「div要素」にインラインで「overflow-x: auto」を指定

❸「table要素」にインラインで「width: 620px」等のテーブル幅の固定値を指定

 

実際には以下の様な状態になります。

 

<div style="overflow-x: auto">
<table style="width: 620px; border-collapse: collapse">
<tbody>

　　～～～　テーブル表のコード本体　～～～

</tbody>
</table>
</div>

 

太字の部分が、この加工で追加する内容です。

 

「tableタグ」のstyle指定で「width: 620px」は、テーブル幅の一例です。 実際に指定する最適なテーブル幅は、DevTools等で確認する必要があります。「table要素」の表示幅は、指定をしてやらないと、置かれた場所の幅や、テーブル内部の表示物の幅に従ったりします。 この優柔不断なテーブル幅を、この指定で固定します。

 

その状態の表を「div要素」の中に入れるコードですが、div自体に幅指定が無いので、divの幅はスマホ画面の幅になり、テーブル幅がそのdivより大きい場合には、div側が横スクロールする様になるという塩梅です。

 

なお、「border-collapse: collapse」の指定は、表のデフォルトの2重枠線を単線にする指定で、2重が良ければ無くても構いません。

 

 コードの効果の確認する

スマホがある場合は、テーブル表のページを表示して確認するのがベストですが、無い場合は、ブラウザの開発ツール（Chromeでは DevTools）で確認できます。

 

◎ Chromeでテーブル表のページを表示し、F12（右クリック→検証）を押します。これで、DevToolsがサブウインドウに起動します。 

 

◎ DevToolsの左上隅のアイコンをクリックすると、ブラウザ主画面がスマホ表示に変わり、表示しているページの幅が狭まります。

 

スマホ表示切り替えツール

 

◎ ブラウザ主画面を「右クリック→再読み込み」とクリックすると、狭くなった表示は、更にスマホ表示をシミュレートした表示になります。

 

スマホでテーブル表を再読み込み

 

下は、この方法で表示した横スクロールするテーブル表の例です。

 

テーブル表の横スクロール表示

 

PC画面の表示枠を超えた大きなテーブル表 

上例は「スマホ表示幅に入らないテーブル表をスマホに表示」という場合ですが、「PC表示幅に入らないテーブル表をPCやスマホに表示」というのも全く同じ事です。 下のテーブル表はそのサンプルで、実際にPC表示でもスマホ表示でも横スクロールします。

 

Panasonic LUMIX DMC-G8M  基本仕様
タイプ ミラーレス レンズマウント マイクロフォーサーズマウント
画素数 1684万画素(総画素)
1600万画素(有効画素)		 撮像素子 フォーサーズ
4/3型
LiveMOS
撮影感度 標準：ISO200～25600
拡張：ISO100		 記録フォーマット JPEG/RAW
連写撮影 メカシャッター/電子先幕時：
     約9コマ/秒(AFS時)、約6コマ/秒(AFC時)
電子シャッター時：約40コマ/秒		 シャッタースピード 1/16000～60秒(シャッター方式自動切換)
液晶モニター 3インチ
104万ドット		 ファインダー形式  有機EL(OLED)LVF
ローパスフィルターレス  ○ ファインダー倍率 1.48 倍
ファインダー視野率
（上下/左右）		 100/100 電池タイプ 専用電池
専用電池型番 DMW-BLC12 撮影枚数 ファインダー使用時：320枚
液晶モニタ使用時：330枚
記録メディア SDHCカード
SDカード
SDXCカード		 スロット シングルスロット

 

 

美しいテーブル表を作るの作業に必要なツール 

表のHTMLを扱う上で、以下のツールは大変に有効です。 継続的に表を扱う見込みがある場合は、これらの利用もお勧めします。

 

　　　Both-WH ⭐  

　　　S-R in Editor ⭐  

　　　

テーブル表のデザイン修正には、「table表のコード」の沢山のセル（table-cell）で同じ指定をする必要があり、手作業で修正するのは大変です。 何を指定するかが判っている場合は、HTMLの「検索・一括置換」を使えば、瞬時に複数セルの指定記入や変更が出来ます。 この「一括編集」のツールが「S-R in Editor ⭐  」です。

 

また、表のセルのある箇所のHTMLを調べたい時、HTML編集を開いても、同じ様なコードが並んで見分けが付き難くなります。 その様な場合には、通常表示の目的のセルにカーソルを入れて「Both-WH ⭐  」を使います。 目的のセルのHTMLコードに直接移動してカーソルが表示されるので、迷う事はありません。

 

 

ブログにテーブル表 を掲載する方法

テーブル表をブログに掲載するのは、たとえ横4列、縦3行程度のテーブル表（HTMLとしては table要素）でも、コードは一見して複雑で大きく、いっそ画像にして掲載する方法に逃げたくなります。 そして数十の列・行の表になると、これは用意してかからない限り上手く行きません。

 

以下のリブログ先に、ブログに「テーブル表」を掲載する方法を纏めています。 綺麗な表を表示するには少し努力が必要ですが、慣れると使い回しが出来ます。

 

 

また、アメブロ記事に表を何度も使いたい場合は、専用ツール「Blog Table ⭐」の利用をお勧めします。 このツールは、扱いになれると大変に有効です。 以下のページにツールと説明があるので、参考にしてください。

 

●「Blog Table ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

 

 

●「Blog Table ⭐」の操作マニュアル