無料WordPressテーマ Principle

WordPressテーマ Principleの機能や使い方、及び、WordPress用レンタルサーバーに関する情報

更新情報 機能解説

tableのはみ出た部分をスクロールできるようにする方法

ver.7.3以降の機能になります。

 tableってPCとスマホとで幅が違いすぎてレスポンシブにする際に処理に困りますよね。

 Principleでははみ出た部分を横スクロールで表示するようにすることができます。

 やり方は簡単。tableタグをtable_wrapクラスを付けたタグで囲うだけです。

table_wrapクラスを付けたタグで囲うだけ

 こちらは普通のtableで作った表↓

1組2組3組4組5組
tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。

↑長い文が入っているとスマホではとても読める代物ではないと思います。

 全く同じ表をtable_wrapクラスを付けたタグで囲ってあげるだけでこうなります。↓

1組2組3組4組5組
tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。

↑多少は読みやすくなってるかなと思います。

 本当は各tableごとにwidthなんかの値を調整してあげればもっと読みやすい状態にすることはできますが、汎用的な使い方をするにはこれぐらいが限界かなと思います。

 スマホでぺちゃんこになってしまう表には是非、table_wrapクラスを使ってみて下さい。

おすすめサーバー

第1位エックスサーバー

スペック、安定感、使いやすさ、サポート、非の打ち所のない安心・安全レンタルサーバー。初心者はまずエックスサーバーがおすすめ。

第2位 MixHost

サーバー処理能力の高さは随一、コスパ最強。利用者急上昇中の新世代レンタルサーバー!

参考【徹底比較】エックスサーバー 対 MixHost

コメントを残す




関連記事

Pick Up