HTML5とCSS3の勉強を始めました。
最近、HTML5とCSS3を本格的に勉強し始めましたので、
自分なりにHTML5について思ったことを書いていきます。
今までのHTMLから大きくは変わりましたが、基本は一緒なので早く習得できると思います。
<header>や<nav>、<footer>等のタグ
1番大きく変わり便利になった点は、<header>や<nav>、
<footer>等のタグの追加だと思います。
それと、<section>や<artical>等のタグも使いこなせれば、
コードも見やすく管理しやすくなります。
今までは、<div>で囲んでIDを付けていましたが、
<div>をこれらのタグに変えるだけで一瞬にしてHTML5の土台は出来上がりです。
<animation>について
基本的なことを覚えるのも大事ですが、自分の興味があることを見つけ
それにどのタグが必要なのか考えるのもおもしろいので、
今回は私が使いこなしたいと思った<animation>タグについて
ちょっとした説明をしていきます。
この<animation>タグは使えると静的なサイトが動的になり、
見栄えもよくなるのですが、cssに少し付け加えないといけない要素があります。
<animation>タグをそのまま使うと、ブラウザによっては動かないということが起きます。
<animation>タグに前に
|
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; |
これらを付け加えることによって、ほぼどのブラウザでも動きます。
そしてもう一つ気を付けたいのは、動きを指定する際にも
|
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５について書いていこうと考えています。
最後まで、読んでいただき、ありがとうございました。
Author Profile
スターフィールド編集部
SHARE
