第2回webのひみつ(フレシキブル、可変グリッドレイアウトについて)

皆さんこんにちは。
インターンシップ生の明瀨と申します。

今回は前回、予告していたフレシキブルレイアウトに関する情報を取り上げてまとめていきたいと思います。
また、可変グリッドレイアウトについても述べていきたいと思います。
(フレシキブルレイアウト参考画像)

(引用元URL)
http://liginc.co.jp/designer/archives/6154

このフレキシキブルレイアウトは、画像に挙げられている、ヘッダーやメインビジュアル、コンテンツなどの要素を可変的に調整することが可能となっています。
また画面の横幅などのバランスも相対的に調整できるものとなっているため中央に揃え見やすくすることができます。
このレイアウトの特徴としては、上記の内容は、リキッドレイアウトと呼ばれるレイアウトと同じ内容です。
しかし、こちらは最大幅や最小幅の指定を行うため、大きな画面サイズのみ余白が出来るものとなっています。
つまり、PCモニターやテレビなどの大きな画面で表記した時、決まった形の画面表記を行うことが出来るものとなっています。
これが、リキッドレイアウトとの主な違いとなっています。

次に可変グリッドレイアウトについて取り上げていきたいと思います。
(可変グリッドレイアウト参考画像)

(引用元URL)
http://liginc.co.jp/designer/archives/6154

こちらの主な特徴は、リキッドレイアウトの可変できる性質を持ちながら、画面サイズによって決められたボックスのサイズや位置に再配置されるというものが主な特徴となっています。
つまり、PCを使用すればPCでのコンテンツのサイズや位置、携帯であれば、携帯でのコンテンツのサイズや位置など様々な画面表示を行うサイズによって、表記方法を変化させることが出来ます。
これは、凄くユーザーにとって見やすいものとなっていますが、もしコンテンツの内容が多い場合だとPCでの表記だととても見やすく、携帯だとサイズが小さくコンテンツの量が多いとすごく見ずらい表記となる可能性があるため、そこは作成者のセンスや能力が問われてきまので、作成者様には頑張っていただきたいです。
以上の内容が可変グリッドレイアウトの内容となっています。

今回は以上の2つの記事を書いたところで終わりにしたいと思います。
次回の予告ですが、次回からは色々なホームページを参考にして実際にレスポンシブルwebデザインとなっている記事を参照していきながらどのようなデザインがあるかを客観的に見ていきたいと思います。
まず記念すべき1回目のホームページデザイン参照のため、当社デザインについても見ていきたいと考えています。
次回もまたお楽しみ下さい。閲覧ありがとうございました。

(参考記事)
<フレシキブルレイアウトについて>
http://liginc.co.jp/designer/archives/6154
<追加参考>
http://e-words.jp/w/

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー