●復習（としてとりあえずシンプルに記述してみる）

●新しく学んだこと
・a要素（aタグ）（html）：ハイパーリンクを設定できる。
　書き方
<a href=”http://deau.cloudfree.jp/c0922/”>これはAタグだよ</a>
　→ブラウザに表示される「これはAタグだよ」がリンクとなってhttp://deau~~~に移行する。

※aタグはtarget属性で開き方の指定もできる。
上記だと同じタブで移行するが、下記記載すると違う方法で開く。
<a href=”http://deau.cloudfree.jp/c0922/” target=””>
　　_blank 　新規ウインドウでリンクを開く。
　　_self 　現在のフレームでリンクを開く。
　　_parent 　現在のフレームの親フレームでリンクを開く。
　　_top 　現在のウインドウでリンクを開く。
参考：https://www.mitsue.co.jp/glossary/html4_xhtml1/attribute/target.html

・brタグ（html）：改行したい部分に<br>と入れる。（閉じタグはなし）

・spanタグ（html）：を<span></span>でくくることで、特定の範囲をグループ化する、一つの範囲を定義する。
HTMLの変更のみでは実際の表示は変わらないが、CSSと連動させたときに明確になる。
　書き方
　-HTML
　<p>これは<span>spanタグ</span>の実演だよ</p>
　-CSS
　p {color: #ff0000;}
　span {color: #00008b;}
　→これで、pタグの文字はすべてff0000だが、spanで囲った「spanタグ」のみ00008bになる。

・font-size / font-weight などフォントについての記載（css）
https://samplesdl.me/training_html-css/sample-font.html

・text-decoration（css）：テキストに装飾線を付けるためのプロパティ（text-decoration-line: 線の種類とも記載できる※）
　underline: 下線
　overline: 上線
　line-through: 取り消し線
　none: 装飾なし (初期値)
※線の種類や色、太さなども調整可能で、その際はdecorationの後ろに値のみ並べればOK
　text-decoration-style: 線のスタイル（例：solid, double, dotted, dashed, wavy）
　text-decoration-color: 線の色
　text-decoration-thickness: 線の太さ
例）p {color: #ff0000; text-decoration: underline double #ffff00 2px;}

・特殊文字：< や &、¥はHTML上ではHTMLのタグとして認識される、文字コードの違いなどの理由によりうまく表示されないときがあり、特殊文字を使ってフォローする必要がある。
<> → 「&lt;」「&gt;」　&→「&amp;」　など
参考：https://zero-plus.io/media/what-are-html-special-characters/

●CSSの記述方法について
・ブロックレベルとインラインレベル
ブロックレベル：
HTMLはデフォルトで横幅（ブロック）100％を取ってあるため、どんなタグを使用しても、それひとつの要素は100％横幅（ブロック）を使う。
ブロック要素はインライン要素の中に配置することができない。
インラインレベル：
ブロックとは異なり、文字や文章、画像などの中身の幅で作用する。
インラインレベルの要素では、ブロックレベル要素のように幅や高さを自由に設定したり、上下に余白を設けたりすることができず、またインライン要素の中にブロックレベル要素を入れることもできない。

タグはどちらかに分類され、デフォルトはそのタグの性質による。
参考：https://creatorquest.jp/reference/html/block-inline/

変更する方法
インライン→ブロック「display: block;」
ブロック→インライン「display: inline;」

★display: inline-block;
インライン、ブロックラインはそれぞれデフォルトではお互いに干渉することが出来ない。
ただし、「display: inline-block;」を使うことで、インライン要素のように横並びに配置しながら、ブロック要素のように幅や高さを指定するなど、区分けなく要素を柔軟に配置し、レイアウトを調整できるようになる。

●リセットCSSとは
HTMLやCSSでWebページを作成・カスタマイズしようとした際に、Webブラウザによって意図せぬ余白がついていたり、フォントがブラウザによって異なったりすることがある。
それはWebブラウザには、ブラウザ固有のスタイル(CSS)が効いているためで、ブラウザ毎の差異をなくすためにデフォルトのCSSをリセットしてコーディングを行うことが多い。
その際使うのがリセットCSS。
リセットCSSには、「HTMLタグに指定されているほぼ全てのデフォルトスタイルをリセットしてしまうタイプ」「極力デフォルトCSSを残しつつ、ブラウザ間の表示差異のみをなくすタイプ」の2種類ある。
狭義には前者をリセットCSS、後者をノーマライズCSS/サニタイズCSSと呼ぶ場合もある。
リセットCSSは、style.cssファイルと同様に新規ファイルで記述する。
参考：https://webst8.com/code/reset-css/

●今日の講義をまとめたWeb制作