ASK-STEM-official · ganondorofu · Jun 15, 2026 · Jun 15, 2026 · Jun 15, 2026
@@ -29,4 +29,6 @@ CSSの```display: flex;```は、要素をフレックスコンテナに変える
 実際にこのコードを動作させると、500pxの横幅の親要素の中で、200pxの子要素がそれぞれ余白を均等にしながら、いい感じに配置されることがわかります。フレックスコンテナを使用することで、要素の配置を簡単に制御することができます。
 
 この使い方はほんの一例で、```display: flex;```には他にも様々なプロパティがあり、要素の配置やレイアウトを柔軟に制御することができます。フレックスコンテナを活用することで、Webページのデザインをより魅力的にすることができます。
-flexboxは極めるととても便利なプロパティなので、ぜひ調べてみてください。
+flexboxは極めるととても便利なプロパティなので、ぜひ調べてみてください。
+
+作成:2026-06-15 YGMS_yukkuri
@@ -35,4 +35,6 @@ VSCodeの補完機能を活用することで、CSSの省略記法を簡単に
 | ```t0``` | ```top: 0;``` | 単位は省略 | 0なので単位なし |
 | ```l0``` | ```left: 0;``` | 単位は省略 | 0なので単位なし |
 
-このように、補完機能を活用することで、面倒な単位入力などの作業を効率的に進めることができます！
+このように、補完機能を活用することで、面倒な単位入力などの作業を効率的に進めることができます！
+
+作成:2026-06-15 YGMS_yukkuri
@@ -18,4 +18,6 @@ body {
 }
 ```
 このコードは、```body```要素の背景色をライトブルーに設定しています。セレクタは```body```で、宣言ブロックは```{ background-color: lightblue; }```です。
-CSSのプロパティには、```color```, ```font-size```, ```margin``` など、さまざまなものがあります。プロパティと値を組み合わせることで、Webページの見た目を自由にカスタマイズすることができます。
+CSSのプロパティには、```color```, ```font-size```, ```margin``` など、さまざまなものがあります。プロパティと値を組み合わせることで、Webページの見た目を自由にカスタマイズすることができます。
+
+作成:2026-06-15 YGMS_yukkuri
@@ -42,4 +42,6 @@ Emmetは、HTMLやCSSを書くときに便利な機能を提供するツール
 cssのリンクも手で打つとスペルミスが起きそうで怖いですが、Emmetを用いることで簡単に生成できます。```link:css```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
 ```html
 <link rel="stylesheet" href="">
-```
+```
+
+作成:2026-06-15 YGMS_yukkuri
@@ -46,4 +46,6 @@ VSCodeでは、タグの補完も非常に便利です。例えば、```div```
 ```html
 <div></div>
 <div></div>
-```
+```
+
+作成:2026-06-15 YGMS_yukkuri
@@ -25,4 +25,6 @@ Webデザイン班のノウハウをまとめたドキュメントです。
 1. [CSS関係](./CSS/intro.md)
 3. [HTML関係](./HTML/hints.md)
 4. [JavaScript関係](./javascript/aboutJS.md)
-5. [GitHub Pagesを使ってみよう](./github/intro.md)
+5. [GitHub Pagesを使ってみよう](./github/intro.md)
+
+最終編集:2026-06-15 YGMS_yukkuri
@@ -15,4 +15,6 @@ HTMLやCSSと組み合わせて、ボタンをクリックしたときの動き
     - CSSと組み合わせると、要素のスタイルを変更でき、アニメーションをつけたり色を変化させたりできます。
 - 豊富なライブラリやフレームワークが存在していて、開発を効率化できる。
     - 例: jQuery、React、Vue.jsなど
-- サーバーサイドでも使用されることがある（Node.jsなど）。
+- サーバーサイドでも使用されることがある（Node.jsなど）。
+
+作成:2026-06-15 YGMS_yukkuri
@@ -37,4 +37,6 @@ Progateは、ブラウザ上でプログラミングを学べるオンライン
 
 ### データ保存
 - ローカルストレージを用いて、ToDoリストの内容を保存する
-- サーバーにデータを送信して保存する(Firebaseなどを用いる)
+- サーバーにデータを送信して保存する(Firebaseなどを用いる)
+
+作成:2026-06-15 YGMS_yukkuri
@@ -28,4 +28,6 @@ CSSのプロパティの値で、特に関数になっている部分では、
     color: blue;
 }
 ```
-このコードでは、```child```クラスの要素に対して、最初に赤色が指定され、その後に青色が指定されています。CSSのルールでは、同じセレクタが複数回書かれている場合、最後に書かれたスタイルが優先されるため、この場合は青色が適用されます。同じセレクタを複数回書くと、どのスタイルが適用されるのか分からなくなり、バグの原因になることがあります。同じセレクタは1回だけ書くようにしましょう。
+このコードでは、```child```クラスの要素に対して、最初に赤色が指定され、その後に青色が指定されています。CSSのルールでは、同じセレクタが複数回書かれている場合、最後に書かれたスタイルが優先されるため、この場合は青色が適用されます。同じセレクタを複数回書くと、どのスタイルが適用されるのか分からなくなり、バグの原因になることがあります。同じセレクタは1回だけ書くようにしましょう。
+
+作成:2026-06-15 YGMS_yukkuri
@@ -29,4 +29,6 @@ HTMLのタグや属性には、スペルミスがあるとブラウザが正し
 ## JSが思うように動かない
 HTMLとJSを組み合わせることでいろいろな操作をすることができますが、連携の```script```タグの書き方を間違えると、JSが思うように動かないことがあります。例えば、```<script src="script.js"></script>```と書く場所を```<head>```の中に書いてしまうと、ブラウザがHTMLを読み込む前にJSを読み込んでしまうため、JSが正しく動作しないことがあります。
 #### 解決方法
-```<script src="script.js"></script>```は、```<body>```の最後に書くようにしましょう。これにより、ブラウザがHTMLを読み込んだ後にJSを読み込むため、JSが正しく動作するようになります。
+```<script src="script.js"></script>```は、```<body>```の最後に書くようにしましょう。これにより、ブラウザがHTMLを読み込んだ後にJSを読み込むため、JSが正しく動作するようになります。
+
+作成:2026-06-15 YGMS_yukkuri
@@ -47,4 +47,6 @@ inputElement.addEventListener("input", function() {
     console.log(inputValue);
 });
 ```
-このコードでは、```inputElement```という変数が```const```で宣言されているため、再代入することができませんが、イベントリスナーを用いて、入力された内容を取得することができます。ページロード時に要素を取得しても、その要素の内容は空であるため、イベントリスナーや関数を用いて、入力された内容を取得するようにしましょう。
+このコードでは、```inputElement```という変数が```const```で宣言されているため、再代入することができませんが、イベントリスナーを用いて、入力された内容を取得することができます。ページロード時に要素を取得しても、その要素の内容は空であるため、イベントリスナーや関数を用いて、入力された内容を取得するようにしましょう。
+
+作成:2026-06-15 YGMS_yukkuri