プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：kotamagokotama
  • 質問日時：
  • 回答数：4件

お世話になります。

段組みがしたいのですが。
<div>（<p>）を左右に振り分け、それをまたいで、文字を自動的に流し込む
いい方法はないでしょうか？

下記のようなことがCSS2もしくはjQuery(js)でできる方法を求めています。
http://cssoboegaki.netkatuyou.com/css3/1366/

「紙面のように文字を段組みしたい」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1

  • 回答者： ORUKA1951
  • 回答日時：

　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">
<!--
html,body{margin:0;padding:0;background-color:gray;}
div.header,div.section,div.footer{
width:80%;margin:0 auto;
padding:10px 20px;
background-color:white;
}
div.section p{text-indent:1em;margin:0;line-height:1.8em;}
div.section div.column2{
width: 90%; margin:0 auto;
-moz-columns: auto 2;
-moz-columns: auto 2;
-webkit-columns: auto 2;
-o-columns: auto 2;
-ms-columns: auto 2;
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
-o-column-gap: 50px;
-ms-column-gap: 50px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
border:silver 1px solid;
}

-->
＿</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます。

やはりCSS2.1(すみません。始めたばかりの初心者なもので；)では
無理なのですね。
困ったな‥笑

頂いたコードですが、こちらで確認しても、2段になっていませんでした。
Safari6.0.2
FF19.0.2

文字コードをUTF-8に変えたのが原因とかあるのでしょうか。

通報する
お礼日時：2013/04/09 10:18

No.2

  • 回答者： wo_moon
  • 回答日時：

css3どの方法はNo.1さんがされているので、jsでの方法。


いずれもjqueryのプラグインです。

http://code.hokypoky.info/multicol/
シンプルで美しいレイアウトを組める国産プラグイン。

https://code.google.com/p/js-columns/
新聞のようなカラムを組めるプラグイン。
    • good
    • 0
    • 件
通報する

No.3ベストアンサー

  • 回答者： wo_moon
  • 回答日時：

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/
を確認したところ、英文は問題ないようです。

検証不足ですみません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます（しかも2度も!）。
そして、返事が大変遅くなってしまい申し訳ございません。

検証不足だなんてとんでもないです。
ありがとうございます。

> 国産プラグイン
IE7までは切り捨てて良いと言われたので、大丈夫かと（笑）！
こちらで試してみます。

>新聞のようなカラムを組めるプラグイン。
凄いですね。横移動する!
でも、ぱっと見、クリックするかな？^^;

通報する
お礼日時：2013/04/16 21:56

No.4

  • 回答者： ORUKA1951
  • 回答日時：

＞文字コードをUTF-8に変えたのが原因とかあるのでしょうか。


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
としないと、文字化けするでしょうが、段組されない原因は確認されたブラウザが対応していないだけだ
　Firefox,Safari,Operaは対応していると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2013/04/16 21:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報