WEB

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

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

こんにちは、フロントエンドエンジニアのせいとです。

ちょっと前から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では以下のような値が指定できます。

touch-action: auto; 初期値。スワイプ操作なんでもできる。
touch-action: none; スワイプ操作不可。
touch-action: pan-y; 縦方向のスワイプ操作のみを許可。
touch-action: pan-x; 横方向のスワイプ操作のみを許可。
touch-action: manipulation; スクロールとズームのスワイプ操作のみを許可。

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

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

5. textareaのサイズ変更を制御する方法

textareaはデフォルトではユーザーが自由にサイズを変更できてしまいます。
このとき、やりようによってはサイトのレイアウトが崩れてしまうため、できればこの操作には一定の制御を加えたいところ。
そこで、resizeプロパティを使えば、ユーザー側のtextareaのサイズ変更を制御できます。

resize: both; 初期値。リサイズ可。
resize: vertical; 縦方向のリサイズのみを許可。
resize: horizontal; 横方向のリサイズのみを許可。
resize: none; すべてのリサイズを禁止。

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

6. ブラウザに標準で付いているバリデートを切る方法

novalidate属性を使えば、ブラウザに標準で付いているバリデート機能をオフにできます。
inputタグのtype属性でemailやtelなどの属性を指定していると、一部のブラウザでは標準でバリデート機能が走ります。
これはこれでありがたいのですが、バリデートは自前で実装したいケースも多いはず。そんなときこれがあるとかえって邪魔ですから、novalidateを使いましょう。

<form action="..." novalidate>...</form>

7. SVGタグに代替テキストを入れる方法

SVGはSVGタグ内用のtitle、descタグを持っています。
ここに画像のタイトル(題名)やディスクリプション(説明)を入れることができ、入れたテキストを代替テキストとすることができます。
また、ここに入れたテキストはブラウザ上は表示されません。
アクセシビリティ上、設定しておいて損はないでしょう。

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1">
  <g>
    <title>LIG.inc LOGO</title>
    <desc>
	  LIg.incのロゴ画像です。
    </desc>
  </g>
  <path d="...">
</svg>

まとめ

いかがでしたか?
HTML5、CSS3には、知られていないけど案外便利なプロパティやら属性やらがあったりします。
ちなみにmozillaのMDNはこの辺の情報が豊富なのでおすすめです。
興味があれば、ぜひこちらでその他のいろいろなHTML5,CSS3の情報をゲットしてみてください。

イベントのお知らせ

先日SBクリエイティブ様より発売した僕の書籍『最強のCSS設計 チーム開発を成功に導くケーススタディ』の出版イベントを行います!

「CSS設計」「チーム開発」というテーマでプレゼンを行う他、懇親会もありますのでぜひお越しくださいませ!
参加していただける方は以下のイベントページ「ATND」または「connpass」よりお申し込みください(^^)

日時 2015/11/18(水)19:30〜21:30
場所 いいオフィス(東京都台東区 東上野2丁目18−7 共同ビル3F)
イベントページ ATND
connpass
こんな方にオススメ
  • CSS設計についてもっと知りたい!という方
  • 日々の業務で複数人からなるチーム開発をおこなっているが、うまく意思疎通や効率のいい開発ができない方
  • 「本の内容について聞きたいことがあるから質問させなさい」という方

この記事を書いた人

せいと
せいと フロントエンドエンジニア 2012年入社
最近フロントエンドエンジニアになりました。
第一回HTML5カルタ大会で優勝しました。
休日の過ごし方は、"Jazz Barでスコッチを片手に『世界の終りとハードボイルド・ワンダーランド』を読む"です。

こちらもおすすめ

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

  • 著者堀口 誠人
  • 価格¥ 2,376(2015/11/10 11:09時点)
  • 出版日2015/10/24
  • 商品ランキング20,085位
  • 単行本208ページ
  • ISBN-104797384557
  • ISBN-139784797384550
  • 出版社SBクリエイティブ