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

css。横並びBOXに長文textを流し込む方法

解決済

  • 質問者：gucci524
  • 質問日時：
  • 回答数：1件

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

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

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

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

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



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

通報する

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

質問の本文を隠す

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

「CSS 高さ」に関するQ&A： 【CSS】ヘッダーの高さが不明の時、コンテンツの高さの指定について

さらに表示

「ツール アプリ」に関するQ&A： Androidアプリ開発を作るならどのツールを使うのが良いか

「アプリ デザイン」に関するQ&A： アプリについてです。この前、アプリのデザインを作るアプリをダウンロードしました。そしてデザイ

「jQuery テキスト」に関するQ&A： JS・JqueryやWPプラグインで、曜日・時間帯でテキストを何回か自動変更する方法

「OS ブラウザ」に関するQ&A： ブラウザOS 8.51IMACのバージョンアップが出来ません。

「ブラウザの変更」に関するQ&A： エクセルのハイパーリンクで開くブラウザの変更

「LINE white」に関するQ&A： White lined paper tablet　の意味を教えてください

「ブラウザ変更」に関するQ&A： デフォルトのブラウザ変更方法

A 回答 (1件)

No.1ベストアンサー

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

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>
＿＿＿＿高さ固定の横並び３連BOXに長文テキストを流し込む場合。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿レイアウトのBOXサイズは固定だが、
＿＿＿</p>
＿＿＿<p>
＿＿＿＿テキストは文章の途中で隣のBOXへ移り、文字サイズの変更
＿＿＿</p>
＿＿＿<p>
＿＿＿＿（ブラウザやOSの違い）で隣のBOXへ移る位置も変わる。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿これを実現させたいのですが、、、。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿まぁ紙媒体においての、１ページ３段組みレイアウトの流し込みを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： 原因不明のCPU使用率100％

さらに表示

「ブラウザの変更」に関するQ&A： サーバーのDNSアドレスが見つかりませんでしたと表示される

「OS ブラウザ」に関するQ&A： 「bin」ていう拡張子のついたファイルの開けた方について教えて下さい。

「アプリ デザイン」に関するQ&A： フェイスブックの情報を見たいが参加はしたくない

「ツール アプリ」に関するQ&A： ＳＯＮＹ Media Goは大変に使いにくい？

「CSS 高さ」に関するQ&A： 文字の位置、上下のマージンがずれる

「jQuery テキスト」に関するQ&A： プルダウン 項目が多いので先頭文字とかで検索したい

「LINE white」に関するQ&A： 英語がわかる方に質問です！！

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

Q質問する（無料）

この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をタブで切り替えて表示をさせてたいと考えております。

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

■仕様した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をタブで切り替えて表示をさせてたいと考えております。

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

■仕様した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のままでも良いと思います。

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

※もしこれでうまく行かなかったら、②③はjＱueryじゃなくて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質問する（無料）

人気Q&Aランキング

おすすめ情報