BLOGCSSで文書の段組表現を行うcolumnプロパティの使い方HTML/CSSコーディングTwitterFacebookはてブPocketLINEコピー2013.02.21スポンサーリンクCSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。いうわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。段組にすると視線の横移動が少なくて済む段毎の幅はcolumn-widthで幅の決まったボックスにしたい場合はまとめスポンサーリンク段組にすると視線の横移動が少なくて済むお題のHTMLはこちら。<div><p>上海のある家の2階で、占い師をやっているインド人の老婆が、アメリカ人の商人と話し合っていた。商人は戦争で大儲けをする為に、日米戦争がいつ頃起こるのかを占って欲しいと頼む。始めは渋っていた老婆だが、前金として小切手をもらうと愛想が良くなり、自分にはアグニの神がついているから占いは絶対に外れないと言って引き受ける。商人が帰ると老婆は家にいる一人の少女を呼びつけ、今夜アグニの神にお伺いをたてるなどと話す。</p><p>丁度その時、下の通りからその様子を見ている日本人がいた。日本人は名を遠藤といい、行方不明になった香港領事の娘を探していて、2階にいる少女が領事の娘、妙子ではないかと疑う。遠藤は2階に押し入り、少女を返すよう求めるが、一向に聞き入れられない。遠藤はピストルを出して老婆を脅すが、老婆の魔法によってあっけなく追い返されてしまう。</p><p>遠藤は下の通りでどうしたものかと考えていたが、家の2階から妙子が書いた手紙が落ちてくる。手紙には、おばあさんはいつも私にアグニの神を乗り移らせて声を聞くから、自分は神に取り憑かれたふりをして自分を父の元に返すよう求めるという計画が書かれていた。</p><p>儀式が始まり、遠藤は2階のドアの前に立って盗み聞きをする。神の声が聞こえたが、その内容は少女を父親の元に返せというもので、老婆は妙子に、神に乗り移られたふりをするなと言う。神の声はそれを否定する。怒った老婆はナイフで妙子を殺そうとするが、次の瞬間には自分自身を刺して息絶えた。</p><p>ドアを突破した遠藤は、妙子に計画の成功を伝えるが、妙子は自分は眠ってしまっていて計画は失敗したと言う。妙子は死んでいる老婆を見て、遠藤さんが殺したのかと聞くが、遠藤は、殺したのはアグニの神ですと答えた。</p></div>このようにひとつの【div】のなかにパラグラフがいくつかある一連の文書をどうやって段組するか、というお話。いうときには【column】プロパティを使ってCSSを書きます。div{display:block;background-color:#ccc;column-count:2;-webkit-column-count:2;-moz-column-count:2;}ここで登場した【column-count】というのは段組の数を指定するプロパティです。今は2を指定していますのでこのように2段組になっています。すると目線の横移動、行での折り返しのときに疲れなくて済みますよね、読むほうとしては。このままだと幅を指定していませんので、Window幅にともなって幅が可変なboxだとこんな感じで段の幅も連なって変わってしまいます。サンプルページ実際にこのサンプルを開いてウィンドウ幅を広げたり縮めたりするとよくわかると思います。スポンサーリンク段毎の幅はcolumn-widthで段毎の幅を固定にするには【column-width】プロパティを使用します。div{display:block;background-color:#ccc;column-width:150px;-webkit-column-width:150px;-moz-column-width:150px;}こうすると幅の狭いウィンドウでは2段組になり幅の広いウィンドウでは3段組になる、もっと広ければ4段...となり段毎の視線移動が変わらずに済みます。サンプルページでは【column-count】と【column-width】を使えばきちっとしたフォーマットの段組ができるか...というと段組数の方が優先されて適用されるみたいで幅は無視されるようです(ソース割愛)。段組数と段組幅両方指定のサンプルページスポンサーリンク幅の決まったボックスにしたい場合は実用的に使う場合はボックスの幅に制限があることが多いでしょうから、【div】の幅を決め撃ちしたうえで段組数指定するのが順当な方法ではないでしょうか。div{display:block;background-color:#ccc;width:420px;column-count:2;-webkit-column-count:2;-moz-column-count:2;}サンプルページ【div】の高さを指定しなければボックス自体は下に伸びるだけなので通常はこれで良いでしょう。余白のとり方は通常通り【padding】を用いれば良いのですが、段と段の間隔を指定するには【column-gap】というプロパティを使います。div{display:block;background-color:#ccc;width:500px;padding:10px;column-count:2;-webkit-column-count:2;-moz-column-count:2;column-gap:40px;-webkit-column-gap:40px;-moz-column-gap:40px;}サンプルページこんな感じでひとつのボックスの中で段組が完結して、組み方をある程度コントロールすることもできました。スポンサーリンクまとめちょっとビジュアル的には面白くもなんともない話になっちゃいましたが、テキストメインのページですとやはりそれなりにその読ませ方にも配慮する必要があると思いますので、覚えておいて損はないと思います。テキスト関連のCSSプロパティは画像不要CSSだけで作るテキストロゴデザインのTipsという記事でいくつか紹介していまして(参考記事は本文よりも主に見出し等に使う場合について触れてますが方法は一緒)そちらもあわせて適用すればより読みやすいテキスト文章になるのではないでしょうか。背景画像のサイズ調整をする方法とあるページのコーディングをしていて演出部分でやりたいことを実現する方法がわからず調べてみたら、知らなかったCSSプロパティを見つけました。ウェブ界隈一般では周知されてるかもしれませんが自分用のメモということで。いう記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが...いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。...HTML/CSSコーディングNotepad++とEmmetでサクサクコーディング以前の記事で紹介したNotepad++、大変便利で私もブログライティングやコーディングのデフォルトエディタとしてありがたく使わせてもらってます。プログラミング学習動画サイト『ドットインストール』ウェブ界隈のツイッタラーさんには今さらな話のような気もするけど、多分世の中にはこれ知らない人たくさんいると思うのでぜひ知っていただきたいと思いご紹介。プログラミングやwebコーディングに興味あるけど敷居が高そうで二の足を踏んでいる...という...HTML/CSSコーディングCSS知らないとハマり続けるfloatboxの貫通問題CSSでデザインしてて、「あれっ」と思うこと。親要素の中にfloatした子要素を入れると子要素の高さが親要素の高さに反映されず貫通して表示されてしまう問題。基本的なことですが一応整理しておかないといつまでもハマり続けたりするので備忘録を。花に囲まれた洋館CSSでつくるahaムービーその2。前回よりさらに難易度低し。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。