【初心者向け】HTML／CSS中級3 - 気ままに趣味旅行

どうもhiroakiです。

今回は前回に続き、ウェブページを作るうえで大切な、HTML言語とCSS言語の中級編についてまとめていきます。説明の部分が多くなりますが、実際にコードを打ちながら試すことが大切です。

hiroakies.hatenablog.com

Lesson9

次はemについてです。「em」は基準となるフォントサイズに対してその何倍か、で表現します。

CSS：

body{font-size:16px;}
p{font-size:1em;
margin:1em;}
h1{font-size:2em;
margin:1em;}

上の例でいうと、フォントサイズは親要素<body>のフォントサイズを元に大きさが変わります。つまり、のフォントサイズは16px*1=16pxです。<h1>のフォントサイズは16px*2=32pxです。

マージンの場合はその要素の文字サイズに対する比率で表します。つまり、のマージンは16px*1=16pxです。<h1>のマージンは32px*1=32pxです。

Lesson10

次に細目の表示方法についてまとめます。

Copyright© 2018@hiroaki ALL Right Reserved.

⇓結果⇓

要素には細目として免責事項、警告、法的制約、著作権表記などについて表記します。内はブラウザの標準値で文字サイズが小さくなります。

また、次の特殊文字について紹介します。実は上記のコードもそうですが、ブログ内で&copyなどを文字として表現するにはHTMLの表記を変えなければいけません。※ただし、はてなブログの「編集見たままモード」についてはそのままで表記できます。試しに、上記結果をコピーして、「編集見たままモード」に貼り付けてみて下さい。その後、「HTML編集」画面へ移動して、コードが1.のように書かれているか確認してください。

その他、特殊文字一覧です。代表的なものを示します。

特殊文字
<	<
>	>
&	&
"	"
©	©
¥	¥
«	«
»	»

Lesson11

f:id:hiroakies4463:20181120162905j:plain

ウェブページの上部はこんな風になっていますね。実は、HTMLで正しい日付を表すには決まった書式があります。

<--! 時刻は「:」、日付は「-」で区切る-->
<time>16:34</time>
<time>16:34:53</time>
<time>2018-11-20</time>
<--! 日付と時刻は「T」でつなぐ-->
<time>2018-11-20T16:34:53</time>
<--! タイムゾーンオフセット（世界標準時間からの時差。日本は９時間）を指定する場合-->
<time>2018-11-20T16:34:53+09:00</time>
<--! 上の形式以外で日時を表す場合はdatetime属性で指定します。>
現在は<time datetime="2018-11-20">11月20日</time>です。

⇓結果⇓

16:34

16:34:53

2018-11-20

2018-11-20T16:34:53 2018-11-20T16:34:53+09:00

現在は11月20日です。

Lesson12

次はfloat・clearプロパティについてです。以前の記事でも簡単に扱ってますので、忘れた人は確認してください。

hiroakies.hatenablog.com

floatは値を指定した要素を左、右に寄せて配置するプロパティです。後続のコンテンツはfloatを指定した要素の反対側に回り込みます。

floatに指定できる値
left	要素を左に寄せる
right	要素を右に寄せる
none	floatを指定しない
clearに指定できる値
left	float:leftの回り込みを解除
right	float:rightの回り込みを解除
both	floatの回り込みを解除
none	回り込みを解除しない