Work Note -2ページ目

フロート解除と上マージンは一緒に指定しない!

フロート解除を指定した要素に、上マージンを指定しても、


上マージンが利かない(;´Д`)ノ。


----------------------------------


p {
  clear: both;
  margin-top: 10px;
}


----------------------------------

↑この様な指定



フロート解除と上マージンは一緒に指定しちゃだめ!

って事を覚えておこう。



clearは「floatの解除」です

ってのは、ほとんどの場合は正しいらしいが、

正確には、

clearは「上マージンの自動調節」

(css2.1では、上マージンが不足する場合に不足分を埋める「クリアランス」を設ける)



◎clearは、上マージンを増加させるプロパティで、上マージンの指定を上書きしちゃいます。




※てんぽさんのclearは「floatの解除」ではない を参考にさせてもらいました。

詳しく書いてあります。ありがとうございます。



半角英数字を改行する

今更ですが、時間があいたのでメモ。


「URLなど半角英数文字を流したときに

自動改行せず、レイアウトからはみ出してしまう。」


CSSで回避

---------------------------------------


word-break: break-all;/* 半角英数改行IE対応 */


---------------------------------------


※IE、safari、Google Chrome~word-breakプロパティ実装

Firefox、Opera~word-breakプロパティ未実装→使えません


※「W3C CSS検証サービス」でエラー

           L エラー内容/CSS2.1は非対応です。(3より対応)



【参考になるブログ】


■「to-R」さんのブログで

FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリが紹介されています。

http://blog.webcreativepark.net/2008/09/14-211341.html

※table要素に対応してるようです。


■Webtech Walkerさん

→ word-break:break-allをFirefox等でも実現するjavascript(jQuery)

>http://webtech-walker.com/archive/2008/11/02151611.html



■MEMO 4 MEさん

→ 半角英数による横幅崩れ

>http://memo4me.seesaa.net/article/120355012.html



いろいろ参考になる記事があるので、

その時々で、使ってみようと思います。



やはり

   word-break: break-all

の対応だけでは無理っすかね……精進。


てすと

Work Note-11-03-09_1628.jpg
ケータイから
更新!