知っておくと便利なcssの小技 part5

  • はてブ

こんにちは、工藤です。
個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。
今回はレスポンシブ関連のものです。


ウィンドウサイズによってテキストを改行させたい

%e3%82%a4%e3%83%a9%e3%82%b9%e3%83%8801
レスポンシブの時、例えばテキストをPC表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。
便宜上『PC表示~』と表記しましたが、メディアクエリでウィンドウサイズによって表示を変更させます。

DEMO


cssは上記のようにします。
それぞれ改行させたい時は『display:inline-block;』、改行させたくない時には『display:none;』を設定します。
あとは以下のようにbrタグにclassを付けます。


これでレスポンシブ時、それぞれの改行方法を設定できました。



テーブルのレイアウトをウィンドウサイズによって変更する

%e3%82%a4%e3%83%a9%e3%82%b9%e3%83%8802
例えばテーブル組で横に項目を並べるときに、スマートフォン表示の際には領域が狭くて折角の表が見辛くなってしまいます。
そんな時は思い切ってウィンドウサイズによってレイアウトも変更してしまいます。

DEMO


上記のようにスマートフォン表示の時はthとtdそれぞれに『display:block;』を設定します。
ブロック要素になることで完全に1行の表示になります。
もしPC表示の時に『width』を設定しているようでしたら『width:100%;』の記述も忘れないようにしてください。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ