話題：レスポンシブをつくる

RWDとは

ウェブを見る端末は、パソコンだけではなくなりました。スマホやタブレットなど携帯できる端末、サイネージや巨大ディスプレイなど街中で見るような端末、テレビやゲーム機など昔からある端末でも、ウェブが見られます。

RWDとは、そんないろいろな画面サイズで見ても、ページが崩れず見えるようにデザインする技術です。

一見難しそうです。ウェブを作るプロでも、ときどきRWDに頭をひねることがあります。でも、必ず実現する方法があるのです。

いろいろな端末のサイズで崩れず見えるようにするには、どう考えて設計すればよいか。2000年ごろから世界中の研究者が考えてきた結果、2013年ごろから「コンテンツファースト」へ定番化しました。

たとえば、ロゴのサイズが、縦300px × 横560px だったとします。これを横幅いっぱいに配置しようとしました。しかし、スマホのような横幅が 480px しかない端末では、ロゴが右端で切れて表示されてしまいます。

そこで、端末のサイズではなく、ロゴのサイズを優先して、560px を境にレイアウトを切り替える作りにします。

560px より大きい場合は width: 560px; であっても、逆に小さい場合には、width: 100%; にするといった具合です。

文字数や、レイアウト上の余白や、画像や動画のサイズによって、きれいに見える大きさで切り替えて作ってしまえばよいのです。

そこで、よく使うCSSトップ5をご紹介します。

display: flex;とした要素の並ぶ向きを、横方向から縦方向に変更するプロパティ。

横に並んでいるメニューやアイコンやビジュアルを、スマホでは縦に並べたいときに使います。

display: flex;で左にある要素から順に、flex-direction: column;で上から下へ並べていけます。

逆に，display: flex;で左にある要素を下から並べたいときも大丈夫。flex-direction: column-reverse;で実現できます。

さらに、flex-wrap: wrap;を設定しておけば、要素サイズがオーバーしても改行されるので、ページが横に切れることはほぼありません。

widthを%やemで指定していると、横幅がPCに比べ狭い端末で、写真などが横に縮みすぎることがあります。

「この要素は少なくとも横幅200pxくらい欲しい…」との願い。min-widthで実現できます。

どんなに横幅が狭くても、widthの最小値を与えられます。

heightも同様に、少なくとも350pxは欲しいとき、min-height: 350px;とします。

一方、「この要素は横幅200px以内に収めたい…」との願いは、max-widthで実現できます。こちらもよく使います。

スマホで、画面が横に揺れるページをみたことはありませんか。

ページ内の文字列や写真や要素が、ページ幅を超えてしまっているときに起こります。

ページ内の全要素を調べて、食み出ている要素を特定できれば修繕できます。

しかし、文字列や写真のサイズが大きくても、縦にスクロールできるが横にはスクロールできなくしたい。

そのときに、overflow-x: hidden;を使えば、スクロールできなくできます。

また、コンテンツが長くなったときだけスクロールバーを出すには、overflow: auto;と書きます。

英語の文字列にハイフンやスラッシュをスペースを含めず書くと、改行がなされず文字列が横へ出てしまいます。

また、スマホで長い文字列が横のサイズに収まらないと、横揺れの原因になります。

word-wrap: wrap;として単語単位で改行するか、word-break: break-word;で強制的に改行させることができます。

文書関連のCSSは、一度調べておくと良いと思います。

どんなにスクロールしても右下や左上にアイコンをくっつけておきたい、上や下にメニューバーを固定表示させたい。

そんなとき、position: fixed;を使うと、スクロールしても出現位置を固定できます。

position: fixed;と書いた要素の親要素にposition: relative;を書いたうえで、

position: fixed;にtop: 0;やright: 0;やleft: 0;やbottom: 0;を組み合わせます。

しかし、くっつけずに、スクロールに連動させたくなったら…

簡単です。position: fixed;をposition: absolute;に書き換えるだけです。

ここに挙げたプロパティを知るだけで、設計・表現の幅が広がると思います。