最近、HTML5とCSS3を本格的に勉強し始めましたので、
自分なりにHTML5について思ったことを書いていきます。
今までのHTMLから大きくは変わりましたが、基本は一緒なので早く習得できると思います。

<header>や<nav>、<footer>等のタグ

1番大きく変わり便利になった点は、<header>や<nav>、
<footer>等のタグの追加だと思います。
それと、<section>や<artical>等のタグも使いこなせれば、
コードも見やすく管理しやすくなります。

今までは、<div>で囲んでIDを付けていましたが、
<div>をこれらのタグに変えるだけで一瞬にしてHTML5の土台は出来上がりです。

 

<animation>について

基本的なことを覚えるのも大事ですが、自分の興味があることを見つけ
それにどのタグが必要なのか考えるのもおもしろいので、
今回は私が使いこなしたいと思った<animation>タグについて
ちょっとした説明をしていきます。

この<animation>タグは使えると静的なサイトが動的になり、
見栄えもよくなるのですが、cssに少し付け加えないといけない要素があります。

<animation>タグをそのまま使うと、ブラウザによっては動かないということが起きます。

<animation>タグに前に

XHTML

-moz-animation: anime1 4s ease -1s infinite normal; -webkit-animation: anime1 4s ease -1s infinite normal; -o-animation: anime1 4s ease -1s infinite normal; -ms-animation: anime1 4s ease -1s infinite normal;

1 2 3 4

-moz-animation: anime1 4s ease -1s infinite normal; -webkit-animation: anime1 4s ease -1s infinite normal; -o-animation: anime1 4s ease -1s infinite normal; -ms-animation: anime1 4s ease -1s infinite normal;

これらを付け加えることによって、ほぼどのブラウザでも動きます。
そしてもう一つ気を付けたいのは、動きを指定する際にも

XHTML

@-webkit-keyframes anime1{0%{width: 50%}　100%{width: 100%}} @-moz-keyframes anime1{0%{width: 50%}　100%{width: 100%}} @-o-keyframes anime1{0%{width: 50%}　100%{width: 100%}} @-ms-keyframes anime1{0%{width: 50%}　100%{width: 100%}}

1 2 3 4

@-webkit-keyframes anime1{0%{width: 50%}　100%{width: 100%}} @-moz-keyframes anime1{0%{width: 50%}　100%{width: 100%}} @-o-keyframes anime1{0%{width: 50%}　100%{width: 100%}} @-ms-keyframes anime1{0%{width: 50%}　100%{width: 100%}}

この記述を忘れないことです。

私はまだ<animation>の可能性を把握しきれていないので
これからも、勉強してHTML5やCSS3のみでどこまでできるか考えていきたいです。

 

まとめ

今回はHTML5について簡単なことにしか触れませんでしたが
もっと深く勉強して、ブログを見ていただいた方の力になれればと思っています。
引き続きこれからも、HTML５について書いていこうと考えています。

最後まで、読んでいただき、ありがとうございました。