jigintern
diff --git a/‎html-css/DOCS.md‎
Lines changed: 19 additions & 11 deletions b/‎html-css/DOCS.md‎
Lines changed: 19 additions & 11 deletions
diff --git a/‎html-css/imgs/image-tag-sample.png‎
505 KB b/‎html-css/imgs/image-tag-sample.png‎
505 KB
@@ -206,13 +206,17 @@ HTMLの記述は`<html>`\~`</html>`の中に記述し、この要素をルート
 <details>
   <summary>HTMLにおける子孫</summary>
 
-  要素の中に入れ子になった要素のことを *子* といい、要素の中の要素からみて自分を含む要素を *親* と言い表すことがあります。  
-  共通の親を持つ要素を *兄弟*、親から見て子要素の子要素の子要素の...と続いていく要素郡を *子孫* などと表すこともあります。この資料で頻出する表現になるので覚えておくと良いでしょう。
+* ある要素に**入れ子で含まれる要素**をその要素の**子**と呼びます。
+* 反対に、ある要素を**直接囲んでいる要素**をその要素の**親**と呼びます。
+* 同じ親を持つ要素同士は**兄弟**、また親要素から見て、子要素のさらに子要素、そのまた子要素…といったように、**階層が下にある全ての要素**をまとめて**子孫**と表すことがあります。
+
+この資料で頻出する表現になるので覚えておくと良いでしょう。
+
 </details>
 
 #### 2-2-2. head要素
 
-`<head>`要素は、HTMLファイルに記述するもののうち、閲覧者に見せる **コンテンツでないもの** を子孫に記述する要素です。  
+`<head>`要素は、HTMLファイルに記述するもののうち、閲覧者に見せるための **コンテンツでないもの** を子孫に記述する要素です。  
 例えば、ページのタイトルや説明文が含まれます。2-2.のコードから`<head>`要素を切り出すと以下のようになります。
 
 ```HTML
@@ -225,11 +229,11 @@ HTMLの記述は`<html>`\~`</html>`の中に記述し、この要素をルート
 
 このうち、`<meta`\~`/>`で囲まれた要素を *メタ要素* と言います。その名の通りメタデータを表現するために利用します。  
 属性を`charset="UTF-8"`としたものは「文書の文字セットをUTF-8に設定する」意味を持ちます。  
-属性に`name="<指定するメタデータの名前>"`とされているメタ要素はまた別に特定のメタデータを指定することができ、この例では`"viewport"`が指定されています。  
+属性に`name="<指定するメタデータの名前>"`とされているメタ要素は任意の特定のメタデータを指定することができ、この例では`"viewport"`が指定されています。  
 これは表示領域に関する指定で、主にスマートフォンでページを閲覧したときに意図しない幅で表示されないようにしたり、表示が拡大・縮小されたりしないようにできます。
 
 `<title>`~`</title>`で囲まれた`<title>`要素は、ページを開いたときにブラウザのタブに表示されるタイトルを指定します。  
-これもページ閲覧者に伝えるよりブラウザに伝えて使ってもらうような値であるため、HTMLメタ関連の要素になります。
+これもページ本体のコンテンツとしてではなく、主にブラウザが利用するための情報（タイトル）を定義します。そのため、文書の付加的な情報（メタデータ）を定義する、という役割を持つ要素です。
 
 これ以外にも、`<head>`要素の中にはJavaScriptを記述したり読み込んだりする`<script>`要素や後述するCSSを記述できる`<style>`要素、現在のファイルと外部リソースの関係を表現できる`<link>`要素等が記述できます。
 
@@ -441,22 +445,26 @@ HTMLでも私達が普段話したり書いたりするのと同じように表
 ### 2-4. 画像を利用しよう
 
 普段私達が目にするwebサイトは画像を利用しているところがほとんどでしょう。HTMLでは以下のコードのようにして画像をページに表示できます。  
-> ※ StackBlitzは[バグ](https://github.com/stackblitz/core/issues/1687)があり、アップロードしたローカル画像を表示できません。そのため、ここでは自分のGitHubのプロフィールページからアイコンの画像アドレスを取得して表示させてみてください。
 
 ```HTML
 <img src="<アイコンの画像アドレス>" />
+
+<!-- 絶対パスの例：外部サーバー上の画像を指定 -->
+<img src="https://example.com/icons/user-icon.png" alt="ユーザーアイコン（絶対パス）" />
+<!-- 相対パスの例：自サイト内のフォルダ構成からの相対的な位置を指定 -->
+<img src="./user-icon.png" alt="ユーザーアイコン（相対パス）" />
 ```
 
-![imgタグサンプル](imgs/image-sample.png)
+> 【Try】GitHubのプロフィールアイコンの画像を2種類の方法で表示させてみましょう！
+
+![imgタグサンプル](imgs/image-tag-sample.png)
 
 このように`<img>`タグの`src`属性に表示させたい画像までのパスを指定することで、画像を取得してページに埋め込んで表示してくれます。  
 このとき`src`に指定されているURLをすべて書くパスを *絶対パス* 、それに対してHTMLファイルから見たファイルの位置を *相対パス* と言います。  
 外部にあるファイルへのアクセスでは絶対パスを使い、内部にあるファイルへのアクセスでは相対パスを使います。
 
-![相対パス](imgs/image-src-relative-path.png)
-
 また、`<img>`要素に追加できる属性として`alt`属性があります。  
-これは画像が取得できなかったときなどに表示される*代替テキスト*で、設定されている方が望ましいです。
+これは画像が取得できなかったときなどに表示される*代替テキスト*で、視覚に障害がある方向けの読み上げ機能などにも使用されます。そのため、設定されていることが望ましいです。
 
 <details>
   <summary>空要素</summary>
@@ -696,7 +704,7 @@ UAスタイルシートやCSS初期値に対して、オーサースタイルシ
 #### 3-4-2. 疑似表記
 
 ここまでのセレクタはHTMLファイルに記述されている情報のみをもって要素を選択するものでした。  
-ここで説明する疑似表記は、HTMLファイルにかかれていない情報も使って要素を選択できるものです。
+ここで説明する疑似表記は、HTMLファイルに書かれていない情報も使って要素を選択できるものです。
 
 - 擬似クラス
   - `:<擬似クラス名>`で表します。