ベストアンサー

紙面のように文字を段組みしたい

2013/04/08 23:52

お世話になります。段組みがしたいのですが。 <div>（<p>）を左右に振り分け、それをまたいで、文字を自動的に流し込むいい方法はないでしょうか？下記のようなことがCSS2もしくはjQuery(js)でできる方法を求めています。 http://cssoboegaki.netkatuyou.com/css3/1366/

kotamagokotama
お礼率85% (300/350)

CSS
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#187595

2013/04/09 12:42 回答No.3

2です。 http://code.hokypoky.info/multicol/ シンプルで美しいレイアウトを組める国産プラグイン。 ↑こちら、IEのバージョンによっては段組にならないようです。 https://code.google.com/p/js-columns/ 新聞のようなカラムを組めるプラグイン。 ↑こちらはchrome,fx,IE9,IE7/8（IE9の開発者ツール）で http://kenneth.kufluk.com/google/js-columns/ を確認したところ、英文は問題ないようです。検証不足ですみません。

質問者

お礼 2013/04/16 21:56

ご回答ありがとうございます（しかも2度も!）。そして、返事が大変遅くなってしまい申し訳ございません。検証不足だなんてとんでもないです。ありがとうございます。 > 国産プラグイン IE7までは切り捨てて良いと言われたので、大丈夫かと（笑）！こちらで試してみます。 >新聞のようなカラムを組めるプラグイン。凄いですね。横移動する! でも、ぱっと見、クリックするかな？^^;

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/04/10 08:57 回答No.4

＞文字コードをUTF-8に変えたのが原因とかあるのでしょうか。 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> としないと、文字化けするでしょうが、段組されない原因は確認されたブラウザが対応していないだけだ　Firefox,Safari,Operaは対応していると思います。

質問者

お礼 2013/04/16 21:58

2度目のご回答、ありがとうございます。試したのは、firefoxとSafariだったんですけど。ものすごくバージョンが古いということもないとは思うのですが、確認してみます。

noname#187595

2013/04/09 12:30 回答No.2

css3どの方法はNo.1さんがされているので、jsでの方法。いずれもjqueryのプラグインです。 http://code.hokypoky.info/multicol/ シンプルで美しいレイアウトを組める国産プラグイン。 https://code.google.com/p/js-columns/ 新聞のようなカラムを組めるプラグイン。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/04/09 08:28 回答No.1

CSS3のculamuns プロパティで可能ですが、対応しているブラウザが限られているため現実的ではないでしょう。CSS2(これは破棄)、CSS2.1にはありません。サンプル ★HTML4.01strict + CSS3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section column2"> ＿＿＿<p> ＿＿＿＿吾輩（わがはい）は猫である。名前はまだ無い。＿＿＿</p> ＿＿＿<p> ＿＿＿＿どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。＿＿＿</p> ＿＿＿<p> ＿＿＿＿この書生の掌の裏（うち）でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗（むやみ）に眼が廻る。胸が悪くなる。到底（とうてい）助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。＿＿＿</p> ＿＿＿<p> ＿＿＿＿ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋（ぴき）も見えぬ。肝心（かんじん）の母親さえ姿を隠してしまった。その上今（いま）までの所とは違って無暗（むやみ）に明るい。眼を明いていられぬくらいだ。はてな何でも容子（ようす）がおかしいと、のそのそ這（は）い出して見ると非常に痛い。吾輩は藁（わら）の上から急に笹原の中へ棄てられたのである。＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/04/09 10:18

早速のご回答ありがとうございます。やはりCSS2.1(すみません。始めたばかりの初心者なもので；)では無理なのですね。困ったな‥笑頂いたコードですが、こちらで確認しても、2段になっていませんでした。 Safari6.0.2 FF19.0.2 文字コードをUTF-8に変えたのが原因とかあるのでしょうか。

紙面のように文字を段組みしたい