モダンコーディング入門 - HTML5とCSS3

今日すること

こんにちは、ふるてつです。
今日はCSS3とHTML5です。

f:id:tetsufuru:20190815031209p:plain:w200
盆休みということもあり少しまとまった時間が取れそうなので、
普段やらないことをしてみようと思い、HTML5とCSS3を勉強することにしました。
わたしはもともとの育ちがWindowsアプリだったり、Web系開発ではサーバ側が主でしたので、 Angularのようなフロントエンドの仕組みを使うと、HTMLやCSS3でつまずいてしまうことが多いです。
そこですこし勉強してみようかと思いました。

基本的にはこの本を使います。
この本を進めていった中で新たに知ったことをまとめようかと思います。
f:id:tetsufuru:20190815030218p:plain:w100

● そもそものHTML5の書き方

HTML5からDOCTYPE宣言やmeta要素、外部ファイルの読込が簡潔に書けるようになりました、そういえば昔より短いですね。

HTML4	HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	<meta charset="UTF-8">
<script type="text/javascript" src="main.js"></script>	<script src="main.js"></script>
<link rel="stylesheet" type="text/css "href="main.css">	<link rel="stylesheet" href="main.css">

● 新たな要素が追加

header、footer、main要素が追加になっていました。
例）<header></header>、<main></main>、<footer></footer>
ヘッダーやフッター、メインのコンテンツなど、以前はすべて<div>で定義していたと思いますが最近は違うんですね。
そのほかにも<nav>や<time>なども追加になりました。
HTML5で追加された要素については下記を参照ください。
https://www.tagindex.com/html5/basic/added.html

● clearfixというcssのクラス

これは全然知らなかった内容です。
クラスというよりtips的なテクニックと言ったところでしょうか。
横並びのレイアウトを実現するためにfloatを使用した時に、要素の高さを親要素が認識できなくなり表示が崩れる場合があります。
それを修正するために使います。
参考にしたサイト：https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc

● ::after、::before疑似要素

HTMLには書かれていない要素もどきをCSSで作ることができます。
タグ名やクラス名、id名などの後に::beforeや::afterをつけます。
afterやbeforeが便利なのは「HTMLコードを汚すことなく様々な表現ができる」点です。
以下のように書きます、上述のclearfixクラスを作る際に出てきました。

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

参考にしたサイト：https://saruwakakun.com/html-css/basic/before-after

● reset.css

職場ではよく聞きましたが、個人的に自分で使ったことはありません。
ブラウザ間の表示を統一しやすくするために使用します。
参考にしたサイト：https://parashuto.com/rriver/development/to-reset-or-no-to-reset-css

メリット
ブラウザ間の表示の違いを効率的に最小限に抑えることができます。
ブラウザ間の差異を気にせずに各要素の必要な部分だけスタイルできます。
デメリット
CSSの量が多くなります。
リセットしたスタイルの再設定を忘れる可能性があります。
リセットしても結局再定義している場合が多いので意味がない？

● font-size:62.5%

こちらはわたしが不勉強なだけかもしれません。
html要素に対して、ルートのフォントサイズを10pxに設定するためにCSSに記述します。
ほとんどのブラウザで、ルート要素のフォントサイズが16pxに設定されています。
16pxに0.625を掛けると10pxとなるので、フォントサイズを「62.5%」と指定していることになります。
わざわざルートを10pxに設定する理由は、rem指定のときの計算が楽になるからです。

html {
  font-size: 62.5%;
}

参考にしたサイト：https://bsj-k.com/font-size-rem-bestpractice/

● ブロックレベル要素とインライン要素

CSSの display オプションの話になります。
以前は「要素」ごとにブロックレベルかインラインか決まっていましたが、現在はdisplayでどちらにも指定できます。
display: block;この様に書けば、ブロックレベル扱いになりますし、
display: inline;この様に書けばインライン扱いになります。
そこに加えてインラインブロック扱いが存在しますdisplay: inline-block;
インラインのように扱って横に並べたり出来るのですが、ブロックレベルのように幅や高さなどを指定できます。
参考にしたサイト：https://kent-and-co.com/127/

要素ごとに決まっていた時のブロックレベル要素とインライン要素については、下記を参照ください。
http://www.htmq.com/htmlkihon/005.shtml

● transitionプロパティ

CSS トランジション機能を使うと、CSSプロパティの値が変化する際にかかる時間や変化の方法を制御することができます。
下記のように書くとリンクをクリックした時などに使用できます。

.global-nav .nav-item a {
  ～ 中略 ～
  transition: 0.15s;
}

参考にしたサイト：https://developer.mozilla.org/ja/docs/Web/CSS/transition

●hoverとopacity

これはテクニック的なものです。
画像などの上で、ホバーしたときにopacityを少し下げ透過させると少し光ったように見せることができます。
下記のような書き方になります。

.hot-topic:hover {
  opacity: 0.85;
}

今日の感想

今日は盆休みということもありHTML5とCSS3にチャレンジしてみました。
もともと不勉強だったせいもありますが、新たに知ったことが多すぎて困りました。
本では全体で3種類のサイトを作るのですが、まだ1つ目のサイトの半分程度です。

https://tetsujifurukawa.github.io/learning_modernCodingOfHtml5Css3/standard-layout/index.html

盆休みに全部終わるつもりがとても終わりません…
小学生の時いつも「夏休みの友」が終わらず大騒ぎしていたのを思い出します。

では、今日もお疲れ様でした。

ふるてつのぶろぐ

福岡在住のエンジニアです。