勉強記録 ~プログラマーへのいばら道~ progate:HTML&CSS初級編(2)

プログラマー転職を目指す、progateでのお勉強記録。

今回は、HTML&CSS初級編の復習その2となります。

内容は【リンクを作成する、属性の書き方、画像を表示する、リストを作成する】で

す。

1.リンクを作成する

 リンクを作成するためには、<a>要素を用いる。

 テキストを<a>で囲むことで、リンクを作ることが可能である。

 実際にテキストで表示されるのは<a>タグに囲まれた部分である。

 

 <a>要素にリンク先を指定するには、herf属性を追加する必要がある。

 <a herf="url">というように書き、url部分にリンク先のURLを指定することで、その

 ページのリンクを作ることができる。

2.属性の書き方

 HTMLでは、herfのような属性が数多く存在する。

 これらは開始タグの中に記述し、値を指定する際にはダブルクォーテーションマーク

 「“”」で囲む。

3.画像を表示する

 画像の表示には、<img>要素を用いる。

 <img src="URL">のように、src属性のURL部分に画像のリンクを指定することで、画

 像が表示される。

 <img>要素はテキストを囲むことがないため、終了タグが必要ない。

4.リストを作成する

 リストを作成するには、<li>要素を用いる。

 箇条書きしたいリストをそれぞれ<li>タグで囲むことで、リストを作成することがで

 きる。

 <li>要素は、それを囲む要素によって種類が変わるという特徴を持っている。

 <ul>要素で囲むと、黒点「・」が先頭につく。

 <ol>要素で囲むと、数字が連番でつく。

 このように要素を要素で囲むことを入れ子という。

 囲む方の要素を「親要素」、囲まれる要素を「子要素」と呼ぶ。

 入れ子構造の要素がある場合は、インデント(字下げ)をする。

 インデントをすることで入れ子構造が複雑になっても親子関係が分かりやすくなる。

 行の先頭で「tab」キーを押すと、簡単にインデントをすることができる。

 

 

ということで、本日はここまで。

次回は「HTML&CSS初級編」の3回目の復習を記録します。

 

ご一読を頂きまして、有り難うございました。