
css。横並びBOXに長文textを流し込む方法はありますか?
CSSについてです。
高さ固定の横並び3連BOXに長文テキストを流し込む場合。
ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。
レイアウトのBOXサイズは固定だが、
テキストは文章の途中で隣のBOXへ移り、文字サイズの変更
(ブラウザやOSの違い)で隣のBOXへ移る位置も変わる。
これを実現させたいのですが、、、。
まぁ紙媒体においての、1ページ3段組みレイアウトの流し込みを
HTMLで可能なのか?という質問になります。
文書作成ツールやデザインアプリでは当たり前な方法ですが。
CSSでも可能なんでしょうか?
または、このようなことが可能な jQueryがありましたら
ご紹介ください。
No.1ベストアンサー
- 回答日時:
CSS3のcolumnsプロパティを使う。
[例]HTML5 + CSS3 ベンダーフィックスつき
★タブは_に置換してあるので戻す。
★対応ブラウザが少ないので時期尚早でしょう。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style media="screen">
<!--
html,body{margin:0;padding:0;background-color:gray;}
header,section,footer{
width:800px;
margin:0 auto;
padding:5px;
background-color:silver;
}
section section{
width:90%;background-color:white;
columns:220px auto;
-moz-columns: 220px auto;
-webkit-columns: 220px auto;
-o-columns: 220px auto;
-ms-columns: 220px auto;
}
section section p{
text-indent:1em;
margin:0;line-height:1.8em;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">段組</h1>
_</header>
_<section>
__<h2>段組の簡単な例</h2>
__<section>
___<p>
____CSS。横並びBOXに長文textを流し込む方法はありますか?
___</p>
___<p>
____CSSについてです。
___</p>
___<p>
____高さ固定の横並び3連BOXに長文テキストを流し込む場合。
___</p>
___<p>
____ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。
___</p>
___<p>
____レイアウトのBOXサイズは固定だが、
___</p>
___<p>
____テキストは文章の途中で隣のBOXへ移り、文字サイズの変更
___</p>
___<p>
____(ブラウザやOSの違い)で隣のBOXへ移る位置も変わる。
___</p>
___<p>
____これを実現させたいのですが、、、。
___</p>
___<p>
____まぁ紙媒体においての、1ページ3段組みレイアウトの流し込みをHTMLで可能なのか?という質問になります。
___</p>
___<p>
____文書作成ツールやデザインアプリでは当たり前な方法ですが。
___</p>
___<p>
____CSSでも可能なんでしょうか?
___</p>
__</section>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
思いの外の早々のご回答に感謝します。
素晴らしく判り易いサンプルまで作成いただき、、、。
まさにコレです!!
ブラウザの対応が進んでいないのですね。
時期尚早とのアドバイス。了解しました!
columnsプロパティ。
勉強させていただきました!!!
ありがとうございます!
自分用に覚書。
CSS 多段レイアウト multi-column layout
column-count 段組みの数を特定した値に指定。
column-width 段の幅の最小値を設定。
ベンダーフィックス
-moz-columns: 000px auto;
-webkit-columns: 000px auto;
-o-columns: 000px auto;
-ms-columns: 000px auto;
CSS3 Multiple Columns
http://www.w3schools.com/css/css3_multiple_colum …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
ホームページビルダー 空白の...
-
ヘッダーの上にほんのわずかに...
-
chromeだけbody直下に空白が開く
-
端から端まで横線を引きたい
-
text-alignの解除の方法
-
ノーマルヤリスとGRヤリス
-
Excelの列や行の幅を表示...
-
エクセルでサイズに合ったもの...
-
エクセルでサイズ指定でPOP...
-
PDFへてのテキストボックスにて...
-
Excel セルの幅が合わない
-
エクセル 画面表示拡大率によ...
-
word,excelで、cm...
-
バーコードのサイズは拡大縮小...
-
ワードで「 」(カギかっこ)の...
-
<td> 内のテーブルを上寄せにす...
-
excel初心者です。 セルの色変...
-
パソコンでランドルト環の作成...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
CSSでh1とその下の文字との行間...
-
macとwindowsのレイアウト崩れ...
-
text-alignの解除の方法
-
端から端まで横線を引きたい
-
htmlのタグ間の謎の空白
-
FireFoxで見るとブラウザの幅に...
-
INPUT TEXT内の文字位置を指定...
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
文字を左上に配置したい。
-
chromeだけbody直下に空白が開く
-
iPhone用のサイトの文字がずれ...
-
htmlのタグで・・・
-
htmltとcssのコードで
-
paddingを指定するとwidthやhei...
-
【css】Firefoxで見るとborder-...
おすすめ情報