作りながら学ぶHTML/CSSデザインの教科書
本日はサクサクと5章を。
ページヘッダーやページフッダーの追加と2カラムのレイアウトなど
カラムデザインと言えばfloat
floatの不具合回避として
Progateでは空のdivを挿入してfloat解除する方法を教わりましたが
こちらでは疑似要素を使うやり方を。
しかし段組みはフレックスボックスでやるようにしたいのと
疑似要素について調べ出すときりがないんじゃって事で
「こういうやり方もあるよ」っていう確認だけして
深堀はしていないのでした。
疑似要素を利用したfloatの解除
<div class=”main>
</body>
.main { border: 1px solid red; }
.sub { width: 300px; height: 200px; border: 1px solid #000; float: left; }
この状態だとsubのdivが浮いていてmainの高さがなくなっているのだけど
.main { border: 1px solid red; }
.main:after { （親要素の最後に） content: “”; （空の要素を追加し） clear: both; （floatを解除し） display: block; （空の要素をブロック要素に） }
.sub { width: 300px; height: 200px; border: 1px solid #000; float: left; }
太字部分を挿入することで
floatさせた要素の下に空divを挿入しての解除方法と同じ結果になるのでした。
例がしょぼいのは気にしないで頂ければ幸い。
時間を示すためのタグ
日時を示すタグを使う
更新履歴とかで日付を表示させる場合
pとかspanにクラスを付けてスタイルを適用させていたりしましたが
と言うタグがあるのだそうです。
これは見た目の問題じゃなくて
コンピュータに日時を正しく認識させるためのタグ。
その為に形式も決まっていて
- 時間は「：」で区切る
- 日付は「-」で区切る
- 日付と日時は「T」で繋げる
- タイムゾーンも指定できる
正確に特定できない日時を表す時は❌
表示を変えたいとき
日付の表示はなのだけど
年月日とか．とか使いたいときもあるじゃないですか。
そういう時の表記はコレ。
<time datetime=”2018-09-02”>2018.09.02</time>
pubdate属性
もう一つ紹介されていたpubdate属性ですが
現在は廃止になっている模様。
本にも打ち消し線を引いておきましたのだ。
参考リンク
http://www.tohoho-web.com/html/time.htm
マークアップと言うもの
ProgateでHTML/CSSを勉強し始めて
分からないタグの意味を調べているうちに
「htmlタグと言うのはページの内容を表示させるためだけのものではなくて
それぞれに意味を与えているのだなぁ」と意識するようになったのだけど
この本の１章～５章を進めるうちにその思いが強くなりました。
元になるデザインがあって
それを再現するHTML/CSSを書くことをコーディングと言うそうですが
もう一歩踏み込んで
デザインに込められた情報をコンピュータが認識できるようにコーディングすることをマークアップと言う。って事でいいのかな。
今回出てきたtime然り、セクションタグとかfigureとか、より詳しく認識してもらえるように。と言う事なんだなぁ。きっと。
追記（2018/09/03）
タイトルがウェブフォントとtimeタグとマークアップと言うものってなってましたが
内容にそぐわないのでfloat解除とtimeタグとマークアップと言うものに訂正しました
勢いで書いているとは言えヒドイ。