段組みのCSS。

ページレイアウトに段組みはつきもの。Webデザインでは、CSSで段組みを行います。ちょっと前までは“よこ並び”も“段組み”もfloatプロパティひとつでまかなってました。けれど今は、シチュエーションごとにいろんなプロパティが用意されて、うまく使い分けることで、より効率よくページレイアウトができるようになってきました。
そんなわけでここでは「段組みするためのCSS」を、従来いにしえの方法から最新イマドキの方法まで、順番に見ていくことにします:D
この記事は、よこ並びのCSS。という記事の続きになります。

段組み?

段組とは、“段”で組むレイアウトのこと。ページの内容を“カラム”で区切って並べるレイアウトのことをいいます。
ただし、レイアウトするのが、紙媒体の時と、Webページの時とで、ちょっと意味合いが変わってきます。

紙の段組、Webの段組み

新聞や雑誌などのデザイン(エディトリアルデザイン)で段組というと、文章を読みやすくするために、1行あたりの文字数を適度に区切って、複数の列に分割するレイアウトのことをいう場合が多いです。
一方、Webデザインで段組みというと、Webサイトを使いやすくするために、機能や役割ごとにエリアを仕分けるレイアウトのことをいいます。
エディトリアルデザインでは可読性のためだけれど、Webデザインでは操作性のため、というふうに目的が違うんですね。なので、Webデザインで“段組みレイアウト”というと、文章まわりに限らず、ページ全体のレイアウトを指すことが多いです。

新聞や雑誌の段組と、Webの段組み。

とはいえ、Webでも、文章を読みやすくする目的のレイアウトを組むこともできる(※詳しくは後述)ので、ごっちゃになるといけないから、この記事では、可読性の方を“段組だんぐみ”、操作性の方を“段組みカラム”と呼び分けることにします:)(※Webの方だけ送り仮名を付けて、心の中で「カラム」と読みます。)

Webの段組みレイアウト

Webで段組みレイアウトといえば「2段組みレイアウト」が、いわゆるいちばん普通なレイアウトです。もっぱら、「メニューの段」と、「コンテンツの段」に分けられることが多いです。
企業サイトやECサイトみたく、紹介するサービスや情報が多くサイトの構造が複雑になっちゃいそうなサイトでよく採用されてますねー。

2カラムレイアウト、最もWebなレイアウト。

ページトップへ戻る

つくるレイアウト

この記事では、下図のようなデザインで作ってゆくことにします。

一番上のヘッダーにはロゴとナビゲーションがあって、メインビジュアルの下のコンテンツ部分が2段組みになっていて、コンテンツの途中にも2段組みのバナーとか、3段組みの商品一覧があったりして、フッターには多段組みのサイトマップが配置されてる。
割とよくあるタイプのレイアウトを詰め合わせた感じとなっております。

ヘッダーのナビゲーション商品一覧は、「よこ並びのCSS。」でやったのと同じですね。段組みとは、つまり要素を並べることなので、「よこ並びのCSS。」と同じことなのですけれど、ページレイアウトなりの勘所があるので、おさらいしながら順番に見ていくことにします。

下準備

HTMLは以下のようにマークアップしました。
ページ全体を、ヘッダー(header要素)と、コンテンツ(#content要素)と、フッター(footer要素)のエリアに分けて、コンテンツの中に、メインコンテンツ(main要素)と、サイドメニュー(aside要素)が入っていて、メインコンテンツとサイドメニューの中に、商品一覧や記事一覧などのセクションがあります。

レイアウトを作るにあたって、以下のルールを決めます。横幅に対してレスポンシブなレイアウトになる想定です:)なので、スマホで見ている人にはわけわかめかもしれません、ごめんなさい…X(

  • 2段組みレイアウトになるのは、ウィンドウ幅が768px以上の時。最大幅は1200pxで中央揃え。
  • 1200px未満はウィンドウ幅に合わせて、メインコンテンツとサイドメニューを同じ比率で伸縮。
  • 768px未満(=767px以下)の時には、1段組みレイアウト

つまり下図のようなことになります!その他の細かなところは、コーディングしながら決めてゆきます。:D

作るレイアウトのルール。

デザインは決まってるので、段組みレイアウト以外のスタイルだけ先に作っちゃっときます:D! サイトのタイトルをロゴっぽくしたり、リンクを推しやすくしたり、画像が親要素からはみ出ないようにしたり、角を丸くしたり、フォントサイズを調整したり…。

ぜんぶ縦に並んでるだけですけれど、768px未満の時はもともと1段組みの予定なので、このままでもほとんど完成してますね…。はてさて、前提条件はこんなところで、早速レイアウトしてまいりましょー!X)
下のリンクから、各CSSでのレイアウトの記事へ移動します。


Comment & Pingback

9 Comments! for 段組みのCSS。

  1. ふみ

    私は神戸の大学生で、大学のサークルのHPを作成する担当なのですが、その際にこのHPを何度も参照しております。
    HPのデザインがリニューアルされていて、感激しました。ずっと更新が止まっていらっしゃったので、少し残念だったのですが、小さく嬉しくて、ついコメントさせていただきました。これからも良い・楽しい記事をよろしくお願いします。

    Reply
    • _watercolor

      > ふみさん
      コメントどうもありがとうございます!嬉しいなぁ。

      リニューアルに伴い、古い情報を一斉削除してしまって、もしかして困惑させてしまっていたらすみません。
      記事の数はいっそう減ってしまいましたけれど、更新しやすくリニューアルしたつもりなので、以前よりは更新できると思いますX)
      今後ともLopan.jpをどうぞよろしくです!

      Reply
  2. kaori

    こんにちは!いつもホームページ拝見してます!
    わたしはコーディングを担当しておりますが、
    レイアウトやデザインのこと、すっごく勉強になります・・!
    うさぎさんが走っているのもかわいくて、何度もローディングしちゃいます。。
    これからも記事楽しみにしております!

    Reply
    • _watercolor

      > kaoriさん
      コメントありがとうございます!いつも見てくれててありがとうございます!
      お役に立てたなら嬉しいです;)
      綺麗な写真のサイト、かっわいいですねーXD、おしゃれで素敵です。
      僕もまだまだ勉強中なので、今後ともLopan.jpをお楽しみにぃ!

      Reply
  3. アシベ

    Gridレイアウトが可能になり少しずつですが利用しているサイトを見かけるようになりましたね。
    以前は格子状にして幅が違うもしくは可変させる場合には専用のプラグインを利用したりCSSでも工夫する必要がありました、Gridの登場でほんの少しの記述で実装できるのは嬉しい限りです。
    今まで2カラムや3カラムとしていた箇所も修正の際は打ち直しなどの苦労もありましたが…

    数カ月CSSを打ってなかったので頭の中がリセットされたのでLopanさんのこの記事をやりながらリハビリしていきたいと思います。

    ※Gridレイアウトならテーブルレイアウトのdtやddを利用してた箇所をdivとかにすれば可能なのかなぁ。
    もしお時間がありましたらサンプルをお願いしたいのですが

    Reply
    • _watercolor

      > アシベさん

      コメントありがとうございます!この記事がお役に立てれば幸いです;)
      グリッドレイアウト、ちょっと難解で取っ付きにくいかもしれませんけれど、使いこなせたら、CSSの見通しもよくなる気がしますね:D

      グリッドレイアウトを作る時には、特に、HTML要素の種類は気にしなくても大丈夫です。
      dt/dd要素でHTMLを書いている所というと、記事中のサンプルの「お知らせ一覧」のところ。(サンプル、以下のでもよいでしょうか…)

      グリッドで2段組みレイアウト – 段組みのCSS。

      dl要素にdisplay: gridを適用すれば、dl要素がグリッドコンテナになって、dt/dd要素はグリッドアイテムになります。
      お知らせ一覧の、グリッドレイアウトするための指定は、以下の2つだけ:)。シンプルゆえにCSSが複雑なことしてる気がしますね…。。

      1. .info-list {
      2. display: grid;
      3. grid-template-columns: 9.6em auto;
      4. }

      上記の書き方で、「1. グリッドレイアウトにして」「2. 9.6em幅成り行き幅の2列のグリッドセルを作る」ということをしてて、dt/dd要素はそのグリッドセルに順番に割り当てられます。
      グリッドレイアウトしている要素を、Chromeのデベロッパーツールで見てみると、下図のように、作られているグリッドが視覚化されるので、わかりやすいです:)


      ではでは、今後ともグリッドレイアウトをよろしくです。

      Reply
      • アシベ

        > watercolorさんお返事ありがとうございます。

         サンプルをご用意していただきありがとうございます。
          記事のレイアウトのまとめにも書かれていますが、それぞれの得意とするレイアウトに形式に合わせて組み合わせていくほうが便利ですし、記述するコードも少なくなりますのでメリットとしていいですね。
        (グリッドレイアウトをやってみた際に、もう全部グリッドレイアウトでいいんじゃないか?)と思った時がありました。

          グリッドレイアウトはたしかに便利ですが、少し複雑で頭の中で断片的にやるのではなく、やはり紙とペンで(レイアウト関連もそうですけど)イメージを描き起こしてツールで清書してからのほうがいいですね。
          Chromeのデベロッパーツールは気になった部分があるとどんな記述で実現しているのかなど確認するためによく使用しています。

        質問とは別の話となりますが、ここ数年はSketchなどのデザイン用に特化したツールなどを使用して、コーディングの設計が動的なプロトタイプとしてコードもHTMLとCSSなどのコード化もしてくれるのでとても便利だと聞きます。そういった話を耳にすると手を打ちながらのコーディング自体の必要性について考えてしまいます。効率的でワイヤーが可能で打ち合わせにも便利な点を見るとやはり必需品なんだなと感じました。

        今後もlopanさんのサイトを定期的に訪問しようと思います。これからも頑張ってください

        Reply
        • _watercolor

          > アシベさん
          お返事ありがとうございます!

          そうですねー、グリッドレイアウトも、機械的に組み上げる感じが、自動コーディング用に用意されたレイアウトモードなんじゃないかなって思います…。そのうち、SketchとかXDとか、そういうツールで直接Webを作ることになるんじゃないかな:O
          いつもLopan.jpを見てくれていてありがとうございます!
          てなもんで、今後ともLopan.jpをお楽しみにぃX)

          Reply
  4. Pingback:気になった記事まとめ(1月8日〜1月12日) | tz_blog

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください