Wedとりとめないメモ。TueSVGでやることのまとめ。Satスクロールパラパラ。Wedふりがなを振る。Wed段組みのCSS。Sunウィンドウ幅いっぱいのヘッダー画像。Wedよこ並びのCSS。Friコンテナからの解放。Tueイラレでイラスト。Wed動くCSSのためのメモ。Thuなつかしくってあったかい、きりぎりす。Sun透明ノイズと紙テクスチャ。Sun透明にしないでテクスチャ段組みのCSS。Wedページレイアウトに段組みはつきもの。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作るレイアウトのルール。サイトのタイトルをロゴっぽくしたり、リンクを推しやすくしたり、画像が親要素からはみ出ないようにしたり、角を丸くしたり、フォントサイズを調整したり...。ぜんぶ縦に並んでるだけですけれど、768px未満の時はもともと1段組みの予定なので、このままでもほとんど完成してますね...。はてさて、前提条件はこんなところで、早速レイアウトしてまいりましょー!X)下のリンクから、各CSSでのレイアウトの記事へ移動します。16:59Gridレイアウトが可能になり少しずつですが利用しているサイトを見かけるようになりましたね。以前は格子状にして幅が違うもしくは可変させる場合には専用のプラグインを利用したりCSSでも工夫する必要がありました、Gridの登場でほんの少しの記述で実装できるのは嬉しい限りです。今まで2カラムや3カラムとしていた箇所も修正の際は打ち直しなどの苦労もありましたが...数カ月CSSを打ってなかったので頭の中がリセットされたのでLopanさんのこの記事をやりながらリハビリしていきたいと思います。※Gridレイアウトならテーブルレイアウトのdtやddを利用してた箇所をdivとかにすれば可能なのかなぁ。アシベさんコメントありがとうございます!この記事がお役に立てれば幸いです;)。グリッドレイアウト、ちょっと難解で取っ付きにくいかもしれませんけれど、使いこなせたら、CSSの見通しもよくなる気がしますね:D。グリッドレイアウトを作る時には、特に、HTML要素の種類は気にしなくても大丈夫です。dt/dd要素でHTMLを書いている所というと、記事中のサンプルの「お知らせ一覧」のところ。gridを適用すれば、dl要素がグリッドコンテナになって、dt/dd要素はグリッドアイテムになります。お知らせ一覧の、グリッドレイアウトするための指定は、以下の2つだけ:)。シンプルゆえにCSSが複雑なことしてる気がしますね...。9.6em幅と成り行き幅の2列のグリッドセルを作る」ということをしてて、dt/dd要素はそのグリッドセルに順番に割り当てられます。グリッドレイアウトしている要素を、Chromeのデベロッパーツールで見てみると、下図のように、作られているグリッドが視覚化されるので、わかりやすいです:)。今後ともグリッドレイアウトをよろしくです。watercolorさんお返事ありがとうございます。サンプルをご用意していただきありがとうございます。記事のレイアウトのまとめにも書かれていますが、それぞれの得意とするレイアウトに形式に合わせて組み合わせていくほうが便利ですし、記述するコードも少なくなりますのでメリットとしていいですね。(グリッドレイアウトをやってみた際に、もう全部グリッドレイアウトでいいんじゃないか?)と思った時がありました。グリッドレイアウトはたしかに便利ですが、少し複雑で頭の中で断片的にやるのではなく、やはり紙とペンで(レイアウト関連もそうですけど)イメージを描き起こしてツールで清書してからのほうがいいですね。Chromeのデベロッパーツールは気になった部分があるとどんな記述で実現しているのかなど確認するためによく使用しています。質問とは別の話となりますが、ここ数年はSketchなどのデザイン用に特化したツールなどを使用して、コーディングの設計が動的なプロトタイプとしてコードもHTMLとCSSなどのコード化もしてくれるのでとても便利だと聞きます。いった話を耳にすると手を打ちながらのコーディング自体の必要性について考えてしまいます。効率的でワイヤーが可能で打ち合わせにも便利な点を見るとやはり必需品なんだなと感じました。今後もlopanさんのサイトを定期的に訪問しようと思います。アシベさんお返事ありがとうございます!そうですねー、グリッドレイアウトも、機械的に組み上げる感じが、自動コーディング用に用意されたレイアウトモードなんじゃないかなって思います...。そのうち、SketchとかXDとか、そういうツールで直接Webを作ることになるんじゃないかな:O。14:42こんにちは!いつもホームページ拝見してます!わたしはコーディングを担当しておりますが、レイアウトやデザインのこと、すっごく勉強になります・・!うさぎさんが走っているのもかわいくて、何度もローディングしちゃいます。kaoriさんコメントありがとうございます!いつも見てくれててありがとうございます!お役に立てたなら嬉しいです;)。綺麗な写真のサイト、かっわいいですねーXD、おしゃれで素敵です。14:33私は神戸の大学生で、大学のサークルのHPを作成する担当なのですが、その際にこのHPを何度も参照しております。HPのデザインがリニューアルされていて、感激しました。更新が止まっていらっしゃったので、少し残念だったのですが、小さく嬉しくて、ついコメントさせていただきました。これからも良い・楽しい記事をよろしくお願いします。ふみさんコメントどうもありがとうございます!嬉しいなぁ。リニューアルに伴い、古い情報を一斉削除してしまって、もしかして困惑させてしまっていたらすみません。記事の数はいっそう減ってしまいましたけれど、更新しやすくリニューアルしたつもりなので、以前よりは更新できると思いますX)。コメントデータの処理方法の詳細はこちらをご覧ください。