人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: goodpy1012
●カテゴリ:ウェブ制作
✍キーワード:CSS Googleリーダー ウインドウ カラム コンテンツ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3

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

... {
 width: 30%;
}

2 ● Lhankor_Mhy
ベストアンサー

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

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

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

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

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

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

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

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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ