今日から使える！HTML5,CSS3のコーディングメモ7個

こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。

ちょっと前からHTML5.1やCSS4が話題になっていますね。
とはいえ、まだHTML5やCSS3の内容さえ把握できてないよ！という方も多いのではないでしょうか。(´ω｀)

そこで今回は、あえてHTML5,CSS3の小ネタを紹介してみたいと思います。
すぐに実務で使えるものばかりなので、ぜひお試しあれ！

HTML5、CSS3のコーディングメモ7個

1. どんなサイズの画像でも固定サイズの枠にいい感じに表示させる方法

imgタグではなく、divなどのタグにインラインでbackground-imageに画像のパスを指定し、background-size: coverを用いることでいい感じの見栄えにすることができます。

メディアサイトやブログサイト、複数人で運用していてルールを統一しづらいプロジェクトなどで有効です。
style属性を使うことに抵抗があるかもしれませんが、最も楽に実装できます。style属性を使いたくない場合は、JSでごにょごにょすることになるでしょう。または、2つ目の方法もありますので次にご紹介します。

例

See the Pen VvroEJ by Seito (@seito2014) on CodePen.

<div class="image" style="background-image:url(...);"></div>

.image {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

2. どんなサイズの画像でも固定サイズの枠にいい感じに表示させる方法（2）

こちらはimgタグを使いつつ、object-fitというプロパティを指定する方法です。
object-fit: coverを使えば、imgタグでありがながらbackground-siza: coverのような効果が得られます。
ただし、caniuse.comによればIE、Edge、Android Browserではサポートされていませんのでご注意を；

例

See the Pen NGXKra by Seito (@seito2014) on CodePen.

<img src="..." alt="">

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

3. keyframesアニメーションのオン／オフを操作する方法

keyframesアニメーションはanimation-play-stateというプロパティで再生・停止が操作できます。
再生はanimation-play-state: running,停止はanimation-play-state: pausedです。
animationプロパティに一行でまとめて書く場合は、以下のようになります。

animation: spin 1s linear infinite paused;

試しに以下に、ホバーで回転し、ホバーアウトで停止する四角形のオブジェクトを作ってみました。

例

See the Pen vNpBJK by Seito (@seito2014) on CodePen.

<div class="box"></div>

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background: #000;
  animation: spin 1s linear infinite paused;
}

.box:hover {
  animation-play-state: running;
}

4. スワイプ操作をCSS3で制御する方法

touch-actionプロパティを使えば、スワイプ操作を制御できます。
touch-actionでは以下のような値が指定できます。

以下の例では、横スクロールはできますが、横にスワイプはできないようにしています。

例

See the Pen wKpwpP by Seito (@seito2014) on CodePen.

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。