このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

css リキッドレイアウト スマートフォンでも利用化

CSS

2011.02.23

この記事は最終更新日から1年以上が経過しています。

リキッドレイアウトとは何か?

リキッドレイアウトとはwebデザインにおいて、

表示領域の幅が変更されても従来のレイアウトを維持できる手法である。

と書かれていたりします。

そう、数年前流行ったやら、流行らないやらのレイアウト手法。

簡単に言うと、レイアウトをpxで指定して固定せず、

%で指定しなさいよ。

って事ですね。

ウィンドウが変わる事によって、レイアウトも変わる様に設計する。

例えば、

このような2カラムのレイアウトの場合、

ウィンドウを伸ばすと、

カラムも伸び、ウィンドウを狭めると、

レイアウトも狭まる。

また、ウィンドウ幅を伸ばすと2カラムが3カラムになったりと、

このように柔軟に対応するレイアウト設計の事をリキッドレイアウトと言います。

リキッドレイアウトを取り入れる事で

多様な環境でユーザービリティの損なわれないwebページを制作する事が出来ます。

とはいうものの、

無制限に可変するリキッドレイアウト設計をすると、

解像度の非常に高いディスプレイ上だと、

横に伸びすぎた表示になったり、

幅を狭めた場合、やたらと縦長くなって読みづらくなったりする難点もあります。

これらは、上限、下限を設定することで回避できます。

「うぅん面倒くさい。」

「普通でいいじゃん!」

て思われた方。

「はい。」

普通で良いと思います。(笑)

なぜ、今更リキッドレイアウト?

てな感じなんですが、実はスマートフォンサイトでかなり活用出来るのです。

iPhoneなんかは、480px×320pxのディスプレイなんですが、

横にする事によって320px×480pxに変化します。

そうです。

リキッドレイアウトの登場です。

横になった場合はこっちのcssを適応して…

なんてcssが増えてしまう様な難しい事を考える事はありません。

最初から柔軟なレイアウト設計を行いましょう。

通常、縦のレイアウト設計を行い、

横にした場合

可変する様、またセンター寄せになる様に

メニューは%で指定、画像等はmargin autoでセンター寄せ。

などの事を考えてマークアップしていけば、

よりユーザービリティの良いスマートフォンサイトを

作る事が可能となるでしょう。

Comment

Related Article

CSSスプライトを コマンドで生成 「Glue」の使い方

2014.08.23

jsdo.it企画 CSSで必殺技に参加しています。

2011.12.07

CSS圧縮 webサービス css compressor

2011.11.26

同一クラスで異なるレイアウト CSS 隣接セレクタ

2011.10.26

css 文頭のみ インデントを適応させない

2011.10.19

CSSをライブラリ化?Sass(scss)のインストール 使用方法 mac

2011.09.05

IE6 クリアーフィックスが効かない時

2011.06.25

CSS ブラウザの縦幅に合わせレイアウト調整

2011.06.05

css リキッドレイアウト スマートフォンでも利用化

2011.02.23

CSSとはなんぞや? (スタイルシート物語)

2010.11.25

CATEGORY LIST

LATEST NEWS

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US