2005年07月31日

記事が横に伸びるのを防ぐ

URLとか半角英数の連続が記事にあると
うまく折り返ししてくれず横長になってサイドバーが落ちたりします。
それを回避するために「overflow:○○」
ではみ出し部分の表示方法を決めるんですが
○○や「overflow:○○」を入れる場所によって
見え方が違うのでまとめてみました。


■前提■
確認環境はWinXP+InternetExplorer(以下IE6)/Firefox1(FF)/Netscape7(N)、
○○に入るのはvisible/hidden/scroll/autoの四つ、
入れる場所はcontent/blog/blogbody/textの四箇所です。

他のブラウザやMacについては
持ってないのでわかりません。ごめんなさい。
○○の四つ目「auto」は表示方法が
ブラウザに依存するので環境によって左右されやすいかもです。
三つのブラウザ全てで横に伸びるのが回避されるものは赤+太字で表記。


■先にまとめ■
IE/FF/Netscape全てではみ出しを防ぐには
content又はblogに
「overflow:hidden」「overflow:scroll」「overflow:auto」
のいずれかを入れると吉。


■visible■
content
伸びる[IE]/伸びる+半角5文字ほどはみ出す[FF/N]
blog
伸びる[IE]/伸びずにはみ出す[FF/N]
blogbody
伸びる[IE]/伸びずにはみ出す[FF/N]
text
伸びる[IE]/伸びずにはみ出す[FF/N]

■hidden■
content
隠れる[IE/FF/N]

blog
隠れる[IE/FF/N]

blogbody
伸びる[IE]/隠れる[FF/N]
text
伸びる[IE]/隠れる[FF/N]

■scroll■
content
content全体に縦横スクロールバー[IE/FF/N]

blog
全ての個別記事(日付から投稿情報まで)に縦横スクロールバー[IE/FF/N]

blogbody
伸びる[IE]/全ての個別記事(日付以外)に縦横スクロールバー[FF/N]
text
伸びる[IE]/全ての個別記事(text部分のみ)に縦横スクロールバー[FF/N]

■auto■
content
content全体に縦横スクロールバー[IE/FF/N]

blog
はみ出しのある記事のみ(日付から投稿情報まで)縦横スクロールバー[IE/FF/N]

blogbody
伸びる[IE]/はみ出しのある記事のみ(日付以外)縦横スクロールバー[FF/N]
text
伸びる[IE]/はみ出しのある記事のみ(text部分のみ)横だけスクロールバー[FF/N]


□以下個人的な感想□
IEでもtext&autoが反映されるなら
横スクロールバーだけの方がすっきりしていいなーと思うんですけどね。
縦にもついてると勝手に個々の記事を短縮されちゃって
いちいちスクロールするのがめんどい…
content全体だとその点はましだけど
反面右方向のスクロールがしにくくてつける意味が半減しちゃうので
善し悪しかと。

あとFirefox/Netscapeのvisible+content、
半角5文字前後だけはみ出すのはどういうこだわりなの、
とか思いました。
文字数増やしても同じだけしかはみ出さないんですよ、これが。
ラベル:CSS
posted by 四葉屋 at 03:03| Comment(2) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
四つ目とか、前提を表示しなかったよ。


Posted by BlogPetの「Milch」 at 2005年08月03日 11:27
四葉屋は、大きい前提と、個人とか、うまく横長とか伸びる
英で勝手とか、うまく縦横と、横長などを表示しなかったの?


Posted by BlogPetのMilch at 2005年08月10日 10:49
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。