【先着1,000名様!】1,000円分をプレゼント!

css。横並びBOXに長文textを流し込む方法はありますか?

CSSについてです。
高さ固定の横並び3連BOXに長文テキストを流し込む場合。
ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。

レイアウトのBOXサイズは固定だが、
テキストは文章の途中で隣のBOXへ移り、文字サイズの変更
(ブラウザやOSの違い)で隣のBOXへ移る位置も変わる。
これを実現させたいのですが、、、。

まぁ紙媒体においての、1ページ3段組みレイアウトの流し込みを
HTMLで可能なのか?という質問になります。

文書作成ツールやデザインアプリでは当たり前な方法ですが。
CSSでも可能なんでしょうか?



または、このようなことが可能な jQueryがありましたら
ご紹介ください。

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

思いの外の早々のご回答に感謝します。

素晴らしく判り易いサンプルまで作成いただき、、、。
まさにコレです!!

ブラウザの対応が進んでいないのですね。
時期尚早とのアドバイス。了解しました!

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 …

お礼日時:2014/05/15 22:26

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q独自ドメインからどこのレンタルサーバーを使用してるか調べる方法

独自ドメイン(www.好きな名前.com等)からどこのレンタルサーバーを使用してるか調べる方法を教えて下さい。
またレンタルサーバー専用会社なのか大手プロバイダのレンタルサービスを使用してるかを調べる方法をできれば具体的に教えて下さい。

Aベストアンサー

.comや.orgなどならば http://www.whois.sc/
でドメイン名を入れて検索すると、
その結果表示の中の IP location という項目に
会社名がでます。

.jpならば コマンドプロンプトで"ping サーバ名"で
IPアドレスを取得、次に http://www.nic.ad.jp/
下部左の部分にそのIPアドレスを入れて検索すると
会社名がでます。

でドメインを入れて

Qaタグに直接style=""で:hoverをしたいしたい

お世話になります。
下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには
どのようにすればよいのでしょうか
hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。
A:link.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:visited.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:hover.menu {
FONT-SIZE: 12px;
color:#0000ff;
background-color:#66bce2;
}
A:active.menu {
FONT-SIZE: 12px;
COLOR: #0000ff;
}

お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

Aベストアンサー

<a href="http://www.yahoo.co.jp" style="text-decoration:none;FONT-SIZE:12px;COLOR: #0000ff;"
onmouseover="this.style.backgroundColor='66bce2'"
onmouseout="this.style.backgroundColor=''">やふう</a>

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

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

お世話になります。

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

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

Aベストアンサー

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

検証不足ですみません。

Q複数bxsliderをタブで切り替えたいのですが…

初めまして。

現在、仕事でECサイトを作成しているのですが、
複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。

試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。

■仕様したJquery【bxslider】
http://bxslider.com/


サイトのコード記述は下記の通りです。

HTML-------------------------------

<ul id="tab">
<li class="select">総合</li>
<li>トップス</li>
<li>ボトムス</li>
</ul>

<!--rank01-->
<div class="content_wrap">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb01.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->

<!--rank02-->
<div class="content_wrap disnon">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
<div class="slide">
<img src="sp_index/img/thumb02.jpg" />
</div>
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->


<!--rank03-->
<div class="content_wrap disnon">

<div class="bx-wrapper">
<div class="bx-viewport">

<div class="slider1">
※rank02同様
</div>

</div><!--//bx-viewport-->
</div><!--//bx-wrapper-->
</div><!--//content_wrap-->


jquery.bxslider.cssはほぼダウンロードしたままを使用していますが、
タブに対するcssはこちらです。

CSS-------------------------------

ul#tab{
display:table;
table-layout:fixed;
width:100%;
}

#tab li.select {
background: none repeat scroll 0% 0% #fff;
color:#000;
border-top:#d9d9d9 1px solid;
border-left:#d9d9d9 1px solid;
border-right:#d9d9d9 1px solid;
}

#tab li {
display:table-cell;
padding: 10px;
list-style: none outside none;
cursor: pointer;
background: none repeat scroll 0% 0% #d9d9d9;
text-align:center;
border:#FFFFFF 1px solid;
border-top-left-radius:5px; /* 左上角丸 */
border-top-right-radius:5px;
color:#666;
font-size:8px;
}

.content_wrap {
width: 100%;
height:auto;
font-size: 20px;
text-align: center;
line-height: 100px;
background: none repeat scroll 0% 0% #fff;
color: #000;
overflow:hidden;
}

.disnon {
display: none;
}

タブのJava Scriptは、

Java Script-------------------------------
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

sliderの方のJava Scriptは、

Java Script-------------------------------
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
});

以上です。

まだまだ知識も浅く、Java Scriptに関しては特に勉強不足で、いつもJqueryを手探りで実装している状態です。
この文章で質問事項もしっかりと伝えることが出来ているのか不安ですが、どなたか良きアドバイスお願いできますでしょうか。

よろしくお願い致します。

初めまして。

現在、仕事でECサイトを作成しているのですが、
複数のbxsliderをタブで切り替えて表示をさせてたいと考えております。

試してみると、1つ目はsliderがきちんと表示されていますが、
2つ目タブ以降が中身が表示されない状態となってしまいました。

■仕様したJquery【bxslider】
http://bxslider.com/


サイトのコード記述は下記の通りです。

HTML-------------------------------

<ul id="tab">
<li class="select">総合</li>
<li>トップス</li>
<li>ボトムス</li>
...続きを読む

Aベストアンサー

●HTMLの<div class="content_wrap disnon">のdisnonを削除。
●jQueryは以下
<script>
$(function() {
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
$(".content_wrap:not(:eq(0))").hide();
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>

【jQuery説明】
概要としては、スクリプトの実行の順序を変えるって感じで。
①まず最初にbxsliderを実行。
②その後にタブの非表示。
disnonを消したので代わりに、.content_wrapの1つ目以外を.hide()で隠す。
③それからタブのスクリプト。
disnon消したし、クラスdisnonにほかの役目がなさそうだったので、
タブの表示非表示を.hide()と.show()に変えましたが、もともとのaddClass,removeClassのままでも良いと思います。

あとセレクタで何度も出てくるものは代入したほうが良いかも。。この程度ならしなくてもほぼ速度変わらないと思いますが。。

※もしこれでうまく行かなかったら、②③はjQueryじゃなくてjsのwindow.onload = function() {}で囲って試してください。あくまで順序のために実行タイミングを変えるだけですけど。

頑張ってください。

●HTMLの<div class="content_wrap disnon">のdisnonを削除。
●jQueryは以下
<script>
$(function() {
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
});
$(".content_wrap:not(:eq(0))").hide();
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>

【jQuery説明】
概...続きを読む


人気Q&Aランキング