divなど、要素をfloatさせると親要素の高さが0になってしまうが、これだと都合の悪いことが多々ある。
親要素にも高さをもたせ、次に続く要素達の位置を正しく配置するためには、
floatさせた要素の最後、ようは親コンテナの擬似要素である「:after」に「clear: both;」を適用してやればOK。
具体的には下記の通り。
<div class="container">
.container:after {
content: " ";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
contentで空要素を作成し、ブロック要素を指定、高さを0に設定し、visibilityで念のためコンテンツを非表示に設定。これにclear:bothをかけてやることで
親要素の高さも子要素に応じて変動してくれるようになる。
ぐぐたすとか、twitterと並べるとFacebookだけどうしても下にずれてしまう。
そんな時は下記のCSSで表示位置を強制してやると幸せになれる。
.fb_iframe_widget > span {
vertical-align: baseline !important;
}
Webサービスを作っていていい加減メイリオにも飽きてきたので調べてみた。
http://www.hirok-k.com/blog/751.html
ら、ここに著作権の問題から作成方法まで全部まとまってた。
結構簡単にできるんだね。これは便利。
ので下記のように対応すればOK。
input {
vertical-align: middle;
}
input要素に適用するところがミソ。
めも。
// まずはオプションを設定
$('.selector').tooltip({
...config...
});
$('.selector').tooltip('show');
要素の幅や高さが絶対に変わってほしくない時に「box-sizing」を知っていると幸せになれる。
指定可能な値は下記の通り。
| 値 | 詳細 |
|---|---|
| content-box | padding と border の幅を要素の幅と高さに含めない。デフォルト値。 |
| border-box | padding と border の幅を要素の幅と高さに含める。 |
これをうまく活用すれば要素のサイズを自分の意図したサイズに固定することが出来る。
webkit系とmoz系のみ対応している模様。
まずはwebkit。
/*コロンが2個な点に注意*/
input::-webkit-input-placeholder { color: red; }
次にmoz。
input:-moz-placeholder { color: red; }
colorだけではなくテキスト装飾系は大抵効いてくれる。