Home > TagScript > Style Guide > カラム・レイアウト

ベクトルドロー・レベルゼロ

カラム・レイアウトを導入する

新規作成日 2018-06-06
最終更新日

Webサイトのレイアウトでは、複数のカラムを持つ、マルチ・カラム・レイアウトがよく利用されています。スマートフォンでは、サイドナビを持たないシングルカラムデザインで表示されます。PCでは、画面を有効につかい、サイドナビを持つマルチ・カラム・レイアウトが使われることが多いです。

横書きの文章が、幅広い領域に広がって表示されていると読みにくいからです。ブラウザ表示を幅広く使用している際に、真ん中の記事の左右に空白が広がっていると見た目が良くないこと、また、読み手の集中が途切れた時、視線が左右に移動することから、同じサイト内にある他の記事へのリンクがあれば、その記事を離脱する場合でも、同じサイト内で回遊してもらうことができます。

カラム・レイアウトの例

一般には、PCで表示される際、2カラム構成で表示されるデザインを利用しているWebサイトが多いように感じます。

左側にサイドナビがあるデザイン

左側にサイドナビがあるデザイン

右側にサイドナビがあるデザイン

右側にサイドナビがあるデザイン

両側にサイドナビがあるデザイン

両側にサイドナビがあるデザイン

フルード・レイアウト

流れるように変化することを示す名前のレイアウトです。レスポンシブWebデザインが導入する前から使われています。カラムの幅を%で指定することで、表示するブラウザのウィンドウ幅に合わせて、表示領域が変化します。表示画面を有効に利用できる利点がありますが、複雑なレイアウトを活用しているとレイアウトが崩れやすいので注意が必要です。通常、レイアウトをそれほどこだわったページは、作成しないと思割れるため、実際には、問題が起こることは、まずありません。全てのカラムが、ウィンドウ幅に従って、変化するので、固定幅のコンテンツを配置する際は、若干の違和感が生じることがあります。

実装の方法

htmlとcssを活用して、そのような、デザインを実現するには、htmlとcssに対する高度な理解と、かなりの発想力が必要です。結果として、ほとんどの場合、望むレイアウトを実現する実装方法の定石を調べて、そのとおりに記述するだけです。

スマートフォンなど、さまざまな大きさの端末が存在しているため、あらたにWebサイトを作成する場合、表示幅ごとにレイアウトを変更するレスポンシブWebデザインを使用することが多いです。

書籍を参考にする

Webサイトのレイアウトは、いきなりだと理解しにくいと思うので、インターネット上の情報だけでなく、Webデザインを紹介する書籍を使用して、考え方を理解すると理解しやすいと思います。

私は、書籍を利用して学習しましたが、Webセミナーやスクールを利用して学習する方法を推奨している人もいます。学習する人の性格によって、適した方法が異なると思います。不向きな方法を選択しないように注意してください。

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~ [小川 裕之]

amazon 楽天ブックス Yahoo! honto

固定幅+フルードグリッドレイアウト

htmlとcssを使ってWebページを作成する場合、多くの知識が必要です。カラム・レイアウトとレスポンシブWebデザインについて理解するためには、できるだけ単純な構造のコードから少しずつ複雑なコードを考えていくと理解しやすくなります。

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」