お世話になります。
段組みがしたいのですが。
<div>(<p>)を左右に振り分け、それをまたいで、文字を自動的に流し込む
いい方法はないでしょうか?
下記のようなことがCSS2もしくはjQuery(js)でできる方法を求めています。
http://cssoboegaki.netkatuyou.com/css3/1366/
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/
を確認したところ、英文は問題ないようです。
検証不足ですみません。
ご回答ありがとうございます(しかも2度も!)。
そして、返事が大変遅くなってしまい申し訳ございません。
検証不足だなんてとんでもないです。
ありがとうございます。
> 国産プラグイン
IE7までは切り捨てて良いと言われたので、大丈夫かと(笑)!
こちらで試してみます。
>新聞のようなカラムを組めるプラグイン。
凄いですね。横移動する!
でも、ぱっと見、クリックするかな?^^;
No.4
- 回答日時:
>文字コードをUTF-8に変えたのが原因とかあるのでしょうか。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
としないと、文字化けするでしょうが、段組されない原因は確認されたブラウザが対応していないだけだ
Firefox,Safari,Operaは対応していると思います。
2度目のご回答、ありがとうございます。
試したのは、firefoxとSafariだったんですけど。
ものすごくバージョンが古いということもないとは思うのですが、
確認してみます。
No.2
- 回答日時:
css3どの方法はNo.1さんがされているので、jsでの方法。
いずれもjqueryのプラグインです。
http://code.hokypoky.info/multicol/
シンプルで美しいレイアウトを組める国産プラグイン。
https://code.google.com/p/js-columns/
新聞のようなカラムを組めるプラグイン。
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">
<!--
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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
早速のご回答ありがとうございます。
やはりCSS2.1(すみません。始めたばかりの初心者なもので;)では
無理なのですね。
困ったな‥笑
頂いたコードですが、こちらで確認しても、2段になっていませんでした。
Safari6.0.2
FF19.0.2
文字コードをUTF-8に変えたのが原因とかあるのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
form input テキストを上下中央...
-
HTMLで文字が重なって表示されます
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
Win IE5.5~6.0での余白に関す...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
divタグ+CSSでのレイアウトで、...
-
指定したborderの一部が表示さ...
-
CSS(0の単位)について
-
W3Cのソースコードの検証サービ...
-
font-sizeが効かない
-
画像と一緒にスライドするリン...
-
4枚の画像を均等間隔で一列に...
-
余分な縦スクロールバーが出て...
-
z-indexで上になっている要素だ...
-
ホームページのCSSについて
-
CSS:animation開始位置の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報