HTMLスマホ&PC両対応にはリキッドスタイルが最適

こんばんは! Benです。
今週はいよいよ職場のスマホ対応WEBサイトへの更新です。色々神経を使いますが、スマホやタブレットとか画面解像度が異なる機器で一つのWEBコンテンツで表示させるレスポンシブ対応デザインを使っています。そのうえで大事な基本をノートします。

20160222a.PNG
昔のホームページはこんな感じでtableタグを使ってレイアウトをしていることが多かったです。これは幅をパーセントで指定すると画面幅が変わってもレイアウトが崩れないのがいいのですが、それがそのまま課題にもなります。

20160222b.PNG
スマートフォンなどの画面幅が狭い環境では、tableタグは画面幅が狭くなっても回り込まないので、狭くなって見づらくなります。これを防ぐには…

    

    
東京都の桜の開花予想は3月21日
宮城県の桜の開花予想は4月4日
秋田県の桜の開花予想は4月12日
札幌市の桜の開花予想は4月29日
20160222c.PNG
ご覧のようにtableを使わずにdivでブロックタグを作って、上手く並べさせる方法です。floatを使うとleftの場合左から順番に余白がなくなり入らなくなるまで並んでいきます。今回は幅は固定ですが、5つに分けたい場合20%などの相対表示も可能です。head内のスタイルは通常CSSファイル内で指定します。最後のdivは回り込みを解除するためのものです。

20160222d.PNG
そして、画面幅を狭めてスマホのような環境を作るとこんな感じです。上手く下に回り込み、変に幅が小さくなることがないですね。このように画面幅に応じて隙間があったらそこに流れ込む液体のような性質があることから、液体スタイル=リキッドスタイルと呼びます。これらをうまく使って、PCとスマホの両方で見られるレスポンシブ対応のページを作っていきます。

この記事へのコメント


この記事へのトラックバック