wi日記

勉強、経験などのこと

HTML5

f:id:eoai:20190323105838j:plain

HTML5とcss3が出始めた頃、この本で勉強しました。

 

HTML4系

その前にわたしとHTMLなどのことを書きます。元々HTML4系の時にホームページを作りはじめました。その頃はHTML4.01というヴァージョンでした。それでブラウザに表示するのも時間がかかるのが普通でした。この頃はインターネット店などで写真が見れたり、説明が読めたりできるのが主流だったと思います。今、考えるとペーパーレスのカタログをインターネットで表示していたのだと思います。

 

xhtml

それからyoutubeが出だすとブラウザに映像が映し出されるようになりました。そういうこともあり、w3cからxhtmlを推奨されるようになりました。元々、w3cははっきりと宣言するxhtmlの方を好んでいたという話しも聞きました。そして、わたしも慌てて、xhtmlに書き換えたのを覚えています。しかし、その後すぐにgoogleなどによりHTML5が出ることになりました。

 

HTML5 & css3

スマートフォンタブレットが出て来だしてから見るデバイスでサイズが変わってしまうのでその対応をしなければいけませんでした。それからHTML5とcss3が出てきました。それまでのHTML4.01やxhtmlはわりとなんでも表示してくれましたが、HTML5はそうはいきませんでした。無駄なボックス要素は許してくれないという感じでした。そこで大事になってきたのがw3cのバリデーターというサイトを検査するアプリケーション。それはHTMLタグの構造がw3cの考える構造になっているか、調べるものでした。そして、検索エンジンはご存知の通りgoogleですが、googleもこのw3cの構造を重視するということになりました。

 

HTML5

HTML5の勉強をしなおさなければいけなくなりました。それでこの本でHTML5とcss3を勉強しました。この本が出た頃はまだ、HTML5とcss3が出て間もない頃でしたので、今から考えるとHTML5とcss3の初期でした。それでもこれまでのHTML4系やxhtmlとは違う要素がたくさん増えました。articlesectionなどこれまでにはない要素。そして、前までは<div class="header">や<div class="menu">、<div id="footer">などという書き方で、サイトの大きなパーツを作っていたと思います。これも新しい要素ができて、<header>や<nav>、<footer>いった要素に変えました。いつもdivでいつもclassやidでheaderやnav、footerというを作っていたので、もうタグに変えたようです。

 

W3Cのバリデーター

w3cのバリデーターを通しながらHTML5を主に記述するとけっこう大変でした。特にブロック要素を無駄に何重にもさせてくれないことでした。以前なら以下のような書き方が可能でしたが、これができなくなりました。厳密では以下は可能です。宣言でxhtmlにするとw3cは通りますが、新しいHTML5ではないので古くなってしまいます。HTML5の宣言では合っていません

 

<div class="backgroundcolor">

 <div class="bgimage">

    <div class="main>

    </div>

    <!-- main end -->

  </div>

  <!-- bgimage end -->

</div>

<!-- backgroundcolor end -->

 

xhtmlではさらにhtml要素やbody要素にもプロパティを入れることが可能でしたのでhtmlやbodyもブロック要素になっていました。しかし、HTMl5ではブロック要素を重ねさせてくれませんでした。そして、検索エンジンがサイトを見る時にarticleやsectionというところにサイトの内容が入っていると判断してチェックするということもあって、HTML5の新しいタグを使わなければいけませんでした。

    <section>

      <article>

      </article>

    </section>

上記のようなsectionのブロック要素にartilceのブロック要素を入れるのは許してくれませんでした。

<html>

  <body>

 <h2></h2>

    <section>

    </section>

    <h3></h3>

    <article>

    </artcle>

  </body>

</html>

と言った上記の形にしないといけませんでした。xhtml時代ではブロック要素で下の階層をたくさん増やすことは可能でしたがHTML5時代初期ではブロック要素の階層を作らせてくれなくなりました。

 

Frontend-ライブラリー、フレームワーク-

ディスプレイ、スマートフォンタブレットとサイズに合わせないといけないのでそれをそれぞれを書いているととんでもなく、大変になります。もちろん人為的ミスも増えてくると思います。そこで現れたのがtwitter bootstrapです。サイズを自動で合わせてくれるという便利なものでした。basisといった物もbootstrapの対抗で出たりしました。その以前からあったjqueryもライブラリーですが、古い物となってしまいました。その後、さらにデザイン性からvue.js、angular.jsなど出てきました。reactなどと言ったたくさんのfrontendフレームワークが出てきましたが利用はvue.jsの勢力がかなり強いようです。