CSSでウインドウサイズによって表示文字数を可変させる方法を教えて下さい。

2カラムレイアウトで、右コンテンツのみウインドウサイズによってwidth値が可変するようにしています。
ウインドウサイズを小さくしていくと右コンテンツの文字が重なって表示されてしまって困っています。
これを横スクロールを表示させずに、文字数を変えることで解決するにはどうすればいいでしょうか。
ウインドウサイズがwidth500pxならば文字数は○○のような感じです。
例えるならば、Googleリーダーのような形でしょうか。回答よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2011/08/29 16:01:28

ベストアンサー

id:Lhankor_Mhy No.2

回答回数812ベストアンサー獲得回数232

いわゆるリキッドレイアウトという奴ですよね。

 

固定幅カラム+可変幅カラムのリキッドレイアウトはネガティブマージンを利用するとデザインしやすいです。

サンプルを紹介しているページがあったので、参考になれば。

上級スタイルシートレイアウトサンプル|2カラム左サイドバーレイアウト

2カラムリキッドレイアウトのCSSサンプルソース|floatレイアウトサンプルソース

一行あたりの文字数を制限する elastic layout (エラステックレイアウト)

 

 

 

ただ、現在のリキッドレイアウトはJavaScriptを利用したものが主流ですので、検討に加えたほうが良いかもしれません。

ASCII.jp:jQueryで作るAmazon流リキッドレイアウト|29分でできる! あのサイトの“技”を盗め

id:goodpy1012

ありがとうございます。まさにこの通りのことをしたかったのです。

身近なAmazonも同じような感じだったのですね。

ネガティブマージンを駆使して、作ってみます。

2011/08/29 15:04:09

その他の回答1件)

id:a-kuma3 No.1

回答回数4968ベストアンサー獲得回数2151

width はパーセントでも指定できるけど、それでは駄目なの?

... {
    width: 30%;
}
id:Lhankor_Mhy No.2

回答回数812ベストアンサー獲得回数232ここでベストアンサー

いわゆるリキッドレイアウトという奴ですよね。

 

固定幅カラム+可変幅カラムのリキッドレイアウトはネガティブマージンを利用するとデザインしやすいです。

サンプルを紹介しているページがあったので、参考になれば。

上級スタイルシートレイアウトサンプル|2カラム左サイドバーレイアウト

2カラムリキッドレイアウトのCSSサンプルソース|floatレイアウトサンプルソース

一行あたりの文字数を制限する elastic layout (エラステックレイアウト)

 

 

 

ただ、現在のリキッドレイアウトはJavaScriptを利用したものが主流ですので、検討に加えたほうが良いかもしれません。

ASCII.jp:jQueryで作るAmazon流リキッドレイアウト|29分でできる! あのサイトの“技”を盗め

id:goodpy1012

ありがとうございます。まさにこの通りのことをしたかったのです。

身近なAmazonも同じような感じだったのですね。

ネガティブマージンを駆使して、作ってみます。

2011/08/29 15:04:09

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません