Help us understand the problem. What is going on with this article?

よく忘れるCSSの小技

More than 5 years have passed since last update.

Evernoteを掃除してたらでてきたCSS系の小技をまとめてみた。
ソースみたら納得するものの時間がったたら忘れるやつ。

サンプルないとわかりづらいかなと思ったので一部追加
 よく忘れるCSSの小技 - jsdo.it

[css] clear fix

.cf:after{ content : ''; display : block; clear : both; height:0; }

[css] 画像置換

text-indent:-9999px;よりパフォーマンスを改善したやつ

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

[css] 上下中央揃え

<div class="sample">
    <div>中央揃え</div>
    <div>中央揃え<br />中央揃え</div>
    <div>中央揃え<br />中央揃え<br />中央揃え</div>
</div>
.sample div{
    display:table-cell;
    width:100px;
    margin-bottom:1px;
    vertical-align:middle;
}

* html .sample div{ /* IE 6 */
    display:inline;
    zoom:1;
}

*:first-child+html .sample div{ /* IE 7 */
    display:inline;
    zoom:1;
}

display:table-cell;vertical-align:middle; で無理なら
更にその上の親に対してdisplay: table;

[css] サイズがわからない要素の中央寄せ

色々やり方があるのでその時に応じて対応。

1.inline-blockを使用

<div class="sample">
  <p>中央寄せ<br />inline-blockを使用</p>
</div>
.sample {
  text-align: center;
  background: #FFFFCC;
}

.sample p{
  display: inline-block;
  text-align: left;
  /display: inline;
  /zoom: 1;
}

2.positionを使用

<div class="sample">
  <div>
      <p>中央寄せ<br />positionを使用</p>
  </div>
</div>
.sample {
  position: relative;
  overflow: hidden;
  background: #FFFFCC;
}

.sample div {
  position: relative;
  left: 50%;
  float: left;
}

.sample div p {
  position: relative;
  left: -50%;
}

[css] 親要素いっぱい領域を広げる

<div class="sample">
  <div>
     親要素に横幅と高さを指定
  </div>
</div>

.sample {
  position: relative;
  width: 300px;
  height: 100px;
}
.sample div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #FFFFCC;
}

[css] floatで並べたリストのセンタリング

<div class="sample">
  <ul>
     <li>中央寄せ</li>
     <li>中央寄せ</li>
  </ul>
</div>
.sample {
  position: relative;
  overflow: hidden;
  background: #FFFFCC;
}

.sample ul {
  position: relative;
  left: 50%;
  float: left;
  list-style: none;
  padding: 0;
}

.sample ul li {
  position: relative;
  left: -50%;
  float: left;
}

[css] 高さを揃える

<div class="sample">
  <div class="sample_01">高さを揃える</div>
  <div class="sample_02">高さを揃える</div>
  <div class="sample_03">高さ...</div>
</div>
.sample  {
  width: 100%;
  display: -webkit-box; /* Safari,Google Chrome用 */
  display: -moz-box; /* Firefox用 */
}
.sample_01   {
  width: 200px;
  background: #FFFFCC;
  min-height: 25px;
}
.sample_02   {
  width: 150px;
  background: #FFFF99;
  min-height: 30px;
}
.sample_03   {
  width: 80px;
  background: #FFFF66;
  min-height: 40px;
}

[css] IEで画像にすきまができる...

vertical-align:bottom;

[css] スマホの細かい設定

/* タップ時のハイライトカラー*/
-webkit-tap-highlight-color:#f00;

/*テキストの選択をキャンセル*/
-webkit-user-select:none;

/*リンクの長時間タップでリンク内容をポップアップで表示させない場合*/
-webkit-touch-callout: none;

[css バグ] スマホのposition: fixed問題

position:fixed はiOS5、Android2.2以降が対応。

* Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動かない
* iOS5ではURLに#がついた状態だと挙動が不安定
* iOS5で他ページに遷移した後に、戻るボタンでページにもどると表示位置がずれる
* Androidではuser-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

[css3] 背景画像とグラデの同時指定

背景の指定してからグラデーションの指定をする

.sample {
  background: #CCC;
  background: url(**.png) repeat 0 0,
  -moz-linear-gradient(top, #eee, #999 20%, #eee);
  background: url(**.png) repeat 0 0,
  -webkit-gradient(
    linear,
    left top, left bottom,
    color-stop(0, #eee),
    color-stop(20%, #999),
    color-stop(100%, #eee));
  }

[css3] Android2用グラデ

.sample {
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.51, #88000b), color-stop(0.50, #e50012));
 background: -webkit-linear-gradient(top, #e50012 50%, #88000b 51%);
}

[css3] セレクタ

 /* 1番目のみ */
li:nth-child(1) {      
   color: red;
}

/* 末尾から1番目のみ */
li:nth-last-child(1) {  
   color: blue;
}

/* 先頭から3つのみ */
li:nth-child(-n+3) {  
}

 /* 4番目以降のみ */
li:nth-child(n+4) {  
}

/* 最後から3つのみ */
li:nth-last-child(-n+3) { 
}

/* 最後から4つ目以前 */
li:nth-last-child(n+4) {
}

保存版!CSS3セレクタの説明書|Webpark

[css3] パディングとボーダーを幅と高さに含める

.sample {
  width: 400px; height: 100px; background-color:greenyellow;
  border: 10px solid orange; 
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
<div class="sample">box-sizing: border-box; を指定</div> 

他CSS3系参考サイト

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

matsui-a
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした