HTML CSS

CSSで役立つテクニック 第1弾

2015年7月30日

主に、レスポンシブデザインやモバイルで役立つcssのテクニックをご紹介します。

タッチデバイスでのなめらかスクロール

ある要素を下記のようにcssを適用したとします。

div{
  display:foxed;
  height:50px;
  overflow:auto (or scroll);
}

要素の中身が、要素の高さ(50px)を超えた場合、その要素の中身はスクロールで表示されるようになります。
しかしこの場合、タッチデバイスではカクカクした、なめらかではないスクロールとなってしまいます。

解決策

なめらかなスクロールを実現するには下記の記述を加えます。

-webkit-overflow-scrolling:touch;

フロートで並べた要素に高さを持たせる

通常、フロートで並べた要素というのは高さを持っていません。
フロート後の要素にマージンを持たせてもうまく効かないのはその為です。

cssTechnic1

解決策

clearfixという手法をとります。

.clearfix:after{
  content:"";
  display:block;
  clear:both;
}

このclearfixクラスを、下記のようにhtml内で適用します。

<ul>下の<li>要素をフロートで並べた場合

example.html
<div class="example1"></div>
<ul class="clearfix">
  <li style="float:left;">....</li>
  <li style="float:left;">....</li>
</ul>
<div class="example2"></div>

stylesheet.css
.clearfix:after{
  content:"";
  display:block;
  clear:both;
}

ul{.....}
li{float:left; .....}
.example1{width:100px; height:100px;....}
.example2{width:100px; height:100px; margin-top:10px;}

これで<ul>要素と<div class=”example2″>間のマージンは期待通りに10pxとすることができます。

レスポンシブデザインでも要素の縦横比を維持する

レスポンシブデザインでは、要素の幅をパーセントで指定することがよくあります。
しかし、高さの指定をpxでしてしまった場合、縦横比がくずれます。
パーセントで指定しても同様にくずれます。
高さのパーセントはその要素の幅に対しての割合ではなく、親要素の高さの割合の為。

解決策

下記のように:after(擬似要素)にpadding-topを指定することで要素の縦横比を維持することができます。

stylesheet.css
.example3:after{
  width:30%;
  background-color:black;
}
.example3:after{
  content: "";
  display:block;
  padding-top:100%;
}

example.html
<div class="example3"></div>

これで正方形の要素の完成です。

デモ

ブラウザのサイズを変えてみてください。
縦横比を維持できた正方形になるはずです。

レスポンシブデザインで、子要素を親要素の真ん中に配置する

子要素をposition:absoluteにして、綿密にtop:xxpx; height: xxpxとすれば昔はできました。
ですが、このやり方はレスポンシブデザインではうまくいきません。
親要素も子要素も幅、高さが変わる以上、px指定ではブラウザのサイズ変更時にくずれてしまいます。

解決策

css3の”transform”を使います。

tranform:translate(-50%,-50%)

-50%を指定するところがポイント。

example4-1 ではdiv要素の中にdiv要素を、example4-2 ではdiv要素の中にp要素を配置してみました。

stylesheet.css
.example4-1{
  position:relative;
  width:40%;
  height:100px;
  background-color:black;
  float:left;
}
.example4-1-1{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:50%;
  height:50%;
  background-color:white;
}

.example4-2{
  width:40%;
  height:100px;
  background-color:gray;
  float:right;
}
.example4-2-2{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  padding:0;
  margin:0;
}

example.html

<div class="example4-1">
  <div class="example4-1-1"></div>
</div>

<div class="example4-2">
  <p class="example4-2-1">this is demo. <br/>this is demo.</p>
</div>

デモ

まとめ

レスポンシブデザインになって、小技を使う必要がちょくちょく出てきます。
そんな時に役にたったら嬉しいです。

お問い合わせやコメント

ウェブサイト制作の依頼やこの投稿へのコメントなど、なんでもいいのでお問い合わせ待っています!ウェブデザインのチューターもしているのでそういったことへの依頼も受け付けています。

送信完了しました。 お問い合わせ確認用メールを上記のメールアドレス宛てに送信しましたのでご確認ください。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信完了しました。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信に失敗しました。お手数ですが入力内容をご確認の上、再度送信ボタンをクリックしてください。