レッスンお疲れさまでした。

本日は、html/cssの修正を行いました。

テキストエディタなどであらかじめ準備した文章をHTMLに張り込んでいきます。

タグはParagraphの略で段落を表します。

通常の文章であれば

タグを使います。

改行したい箇所は
(BReak)を使います。

実際の文章が入ると写真とのバランスなど確認しやすくなります。

文字の色や大きさ、背景の色、余白など見た目のデザインはcssで指定していきます。

 どこの{ 何を: どうする }

の形で書くので、見出し1の文字を赤くしたい場合、

 h1{ color: red }

と書きます。

「どこの」はHTMLのタグやid名、class名を使用します。

 id名は、そのHTMLの中で1回しか使用できない名前

 class名は、そのHTMLの中で複数回使用することのできる名前

です。

タグなど、ひとつのHTMLの中で複数回使用するタグはid名やclass名と組み合わせて「どこの」の場所を特定します。

HTMLが

 

 

ほげほげ

 

 

 

ふがふが

 

の場合

 p { color: red; }

とすると「ほげほげ」「ふがふが」の両方の文字の色が赤くなります。

 .hoge p { color: red; }

とすると「ほげほげ」のみ文字の色が赤くなります。

class名は先頭にドット「.」をつけて「.hoge」

id名の場合は先頭にシャープ(ハッシュ)「#」をつけて「#hoge」

と指定します。

「.hoge」と「p」をスペースで区切ることで、「.hoge」の中に入っている「p」を表します。

不必要な余白が入ってしまっている場合で、どの場所に対して余白が付いているのかわからない場合、ブラウザで開いて、2本指タップ、「検証」(chromeの場合)で、様々な情報を確認することができます。

一時的に確認するだけであれば、その画面で直接数字などを変更するとリアルタイムに表示が変わります。

確認した内容でよければ、改めてCSSを修正します。