tamasaburo

得する役立つものをお届けする情報サイト

表(テーブル)をスマホサイト閲覧時に横スクロール表示する設定方法

スマートフォンユーザーの増加に伴い最大手の検索サイトを提供するGoogleがスマホサイトに最適化しているホームページやブログが優先的に表示されるようになっていますね。今回は、表(テーブル)をスマホサイトで閲覧時にははみ出した表示しきれない部分を横スクロールにて見ることができるようにするcssの設定方法を紹介します。

 

オフィスソフトを利用したエクセルなどの表(テーブル)をそのまま貼り付けたりする場合は、スマートフォンサイトでは型崩れしたりして非常に見えづらかったり、本来なら横に文章が伸びた状態の方が読みやすいテキストなんかも縦に1列に並んでしまったりする場合がありますよね?

 

以下の方法では、このような問題を解決することができます。表(テーブル)にdivタグを設置して、その設置したdivタグにcssを割り当てるだけの簡単な作業です。

wordpressなどのプラグインを利用した表(テーブル)の編集方法などもありますが、プラグインを利用している場合などは不具合があった場合に対処がとても難しいことと、プラグインの配布終了の場合に最悪の場合は、1から作り直すなどの手間がかかる問題が発生しますが、divタグを設置して、そのdivタグにcssを割り当てるだけの簡単な作業に関してはプラグインのような問題に行き当たることはないかと思いますので個人的には便利だと思っています。

しかし、ホームページやブログなどのサイトのコンテンツ内容によってはプラグインで表示した方がすっきり見えたりと便利な点もありますので、サイトによって分けて考えてみるとの良いかもしれません。

これから紹介する方法はどちらかというと頻繁に更新をしないサイトなどに向いていると言えるかも知れません。プラグインのアップデートなどの心配をする必要はありませんからね。

 

ホームページやブログに表示する表(テーブル)を横スクロールする設定方法

① 表(テーブル)にdivタグを設置する

ホームページやブログ初心者の方にも分かるように説明しますと、特定の部分にcssを割り当てたりして飾り付けをしたい場合などに、その特定エリアを指定してあげる作業がまさにこのdivタグの設置あたります。

通常ですと、見出しなどにcssを割り当てた場合には、サイト上のすべての見出しにそのcssが設定されオシャレなデザインの見出しにチェンジしたりすることができますが、今回のように特定のエリア「表(テーブル)」になりますと、ここからここまでのエリアでは画面から飛び出したはみ出し部分を「横スクロール」することで閲覧することができるようにして下さいね、と言った具合の作業をするために設置するタグになります。

divタグ入力&設置方法
<div class="scroll">
ここに表〈テーブル〉のコードを入力します
</div>

 

以上のコードを入力する形で、表(テーブル)を挟むような作業をするだけです。divタグには「scroll」を設定しました。別の名称で設定したい場合はここのローマ時を変更してもらっても大丈夫です。これができましたら、②に進んで下さい。

② divタグで挟んだ表(テーブル)にcssを割り当てて横スクロールを実現させる

/* テーブルを横スクロール */
table {
width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
overflow: auto;
white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}

上記のコードをcss編集画面に入力する形で設定完了です。①で「scroll」の名称を変更した場合は、②でも同様に「scroll」の部分を同一のものにご変更下さい。

cssをそのまま入力するだけで設定完了するブログシステムやホームページ製作ソフトもありますが、本来であればdivタグのようにstyleタグで挟む形で入力をする必要があります。ちなみにはてなブログでのcss入力方法については以前の記事で記載していますのでこちらをご確認ください。

以上で、表(テーブル)の横スクロールは設定完了です。自身のウェブサイトを確認してみて、本当に横スクロールができるようになっているかチェックしてみて下さい。

Copyright © 2017 tamasaburo.com. All rights reserved.