こんにちは、工藤です。
個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。
今回はレスポンシブ関連のものです。
ウィンドウサイズによってテキストを改行させたい
レスポンシブの時、例えばテキストをPC表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。
便宜上『PC表示～』と表記しましたが、メディアクエリでウィンドウサイズによって表示を変更させます。
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*PC表示の時*/ .pcclear { display:inline-block; } .spclear { display:none; } @media screen and (max-width: 768px) { /*スマートフォン表示の時*/ .pcclear { display:none; } .spclear { display:inline-block; } } |
cssは上記のようにします。
それぞれ改行させたい時は『display:inline-block;』、改行させたくない時には『display:none;』を設定します。
あとは以下のようにbrタグにclassを付けます。
|
1 2 |
<p>PCのみ⇒<br class="pcclear" />改行</p> <p>スマートフォンのみ⇒<br class="spclear" />改行</p> |
これでレスポンシブ時、それぞれの改行方法を設定できました。
テーブルのレイアウトをウィンドウサイズによって変更する
例えばテーブル組で横に項目を並べるときに、スマートフォン表示の際には領域が狭くて折角の表が見辛くなってしまいます。
そんな時は思い切ってウィンドウサイズによってレイアウトも変更してしまいます。
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*PC表示の時*/ table.responsiveTable{ border:#39C5C8 solid 1px; } table.responsiveTable th{ padding:10px 15px; background:#39C5C8; font-weight:bold; color:#FFF; width:100px; } table.responsiveTable td{ padding:10px 15px; background:#FFF; } @media screen and (max-width: 768px) { /*スマートフォン表示の時*/ table.responsiveTable th{ display:block; width:100%; } table.responsiveTable td{ display:block; } } |
上記のようにスマートフォン表示の時はthとtdそれぞれに『display:block;』を設定します。
ブロック要素になることで完全に1行の表示になります。
もしPC表示の時に『width』を設定しているようでしたら『width:100%;』の記述も忘れないようにしてください。
