From 89a3053645691b173728a0a20064d95e07eb4215 Mon Sep 17 00:00:00 2001 From: yukkuri Date: Mon, 15 Jun 2026 18:16:49 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=84=E8=A8=98=E4=BA=8B=E3=81=AE?= =?UTF-8?q?=E6=9C=80=E7=B5=82=E8=A1=8C=E3=81=AB=E7=B7=A8=E9=9B=86/?= =?UTF-8?q?=E4=BD=9C=E6=88=90=E6=97=A5=E6=99=82=E3=83=BB=E4=BA=BA=E7=89=A9?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E8=A8=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 05-web-docs/CSS/css-advanced.md | 4 +++- 05-web-docs/CSS/css-short.md | 4 +++- 05-web-docs/CSS/intro.md | 4 +++- 05-web-docs/HTML/advanced-hint.md | 4 +++- 05-web-docs/HTML/hints.md | 4 +++- 05-web-docs/intro.md | 4 +++- 05-web-docs/javascript/aboutJS.md | 4 +++- 05-web-docs/javascript/howto.md | 4 +++- 05-web-docs/miss/css.md | 4 +++- 05-web-docs/miss/html.md | 4 +++- 05-web-docs/miss/js.md | 4 +++- 11 files changed, 33 insertions(+), 11 deletions(-) diff --git a/05-web-docs/CSS/css-advanced.md b/05-web-docs/CSS/css-advanced.md index 497fb2f..a341b49 100644 --- a/05-web-docs/CSS/css-advanced.md +++ b/05-web-docs/CSS/css-advanced.md @@ -29,4 +29,6 @@ CSSの```display: flex;```は、要素をフレックスコンテナに変える 実際にこのコードを動作させると、500pxの横幅の親要素の中で、200pxの子要素がそれぞれ余白を均等にしながら、いい感じに配置されることがわかります。フレックスコンテナを使用することで、要素の配置を簡単に制御することができます。 この使い方はほんの一例で、```display: flex;```には他にも様々なプロパティがあり、要素の配置やレイアウトを柔軟に制御することができます。フレックスコンテナを活用することで、Webページのデザインをより魅力的にすることができます。 -flexboxは極めるととても便利なプロパティなので、ぜひ調べてみてください。 \ No newline at end of file +flexboxは極めるととても便利なプロパティなので、ぜひ調べてみてください。 + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/CSS/css-short.md b/05-web-docs/CSS/css-short.md index 64714f2..dcd4e49 100644 --- a/05-web-docs/CSS/css-short.md +++ b/05-web-docs/CSS/css-short.md @@ -35,4 +35,6 @@ VSCodeの補完機能を活用することで、CSSの省略記法を簡単に | ```t0``` | ```top: 0;``` | 単位は省略 | 0なので単位なし | | ```l0``` | ```left: 0;``` | 単位は省略 | 0なので単位なし | -このように、補完機能を活用することで、面倒な単位入力などの作業を効率的に進めることができます！ \ No newline at end of file +このように、補完機能を活用することで、面倒な単位入力などの作業を効率的に進めることができます！ + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/CSS/intro.md b/05-web-docs/CSS/intro.md index 1a5b8d5..1de2f69 100644 --- a/05-web-docs/CSS/intro.md +++ b/05-web-docs/CSS/intro.md @@ -18,4 +18,6 @@ body { } ``` このコードは、```body```要素の背景色をライトブルーに設定しています。セレクタは```body```で、宣言ブロックは```{ background-color: lightblue; }```です。 -CSSのプロパティには、```color```, ```font-size```, ```margin``` など、さまざまなものがあります。プロパティと値を組み合わせることで、Webページの見た目を自由にカスタマイズすることができます。 \ No newline at end of file +CSSのプロパティには、```color```, ```font-size```, ```margin``` など、さまざまなものがあります。プロパティと値を組み合わせることで、Webページの見た目を自由にカスタマイズすることができます。 + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/HTML/advanced-hint.md b/05-web-docs/HTML/advanced-hint.md index df21b81..3b0f76e 100644 --- a/05-web-docs/HTML/advanced-hint.md +++ b/05-web-docs/HTML/advanced-hint.md @@ -42,4 +42,6 @@ Emmetは、HTMLやCSSを書くときに便利な機能を提供するツール cssのリンクも手で打つとスペルミスが起きそうで怖いですが、Emmetを用いることで簡単に生成できます。```link:css```と入力してEnterを押すと、以下のようなコードが自動で生成されます。 ```html -``` \ No newline at end of file +``` + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/HTML/hints.md b/05-web-docs/HTML/hints.md index ab141bc..f80e02e 100644 --- a/05-web-docs/HTML/hints.md +++ b/05-web-docs/HTML/hints.md @@ -46,4 +46,6 @@ VSCodeでは、タグの補完も非常に便利です。例えば、```div``` ```html
-``` \ No newline at end of file +``` + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/intro.md b/05-web-docs/intro.md index 0243ef5..737d3a7 100644 --- a/05-web-docs/intro.md +++ b/05-web-docs/intro.md @@ -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) \ No newline at end of file +5. [GitHub Pagesを使ってみよう](./github/intro.md) + +最終編集:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/javascript/aboutJS.md b/05-web-docs/javascript/aboutJS.md index 5978293..5d98a74 100644 --- a/05-web-docs/javascript/aboutJS.md +++ b/05-web-docs/javascript/aboutJS.md @@ -15,4 +15,6 @@ HTMLやCSSと組み合わせて、ボタンをクリックしたときの動き - CSSと組み合わせると、要素のスタイルを変更でき、アニメーションをつけたり色を変化させたりできます。 - 豊富なライブラリやフレームワークが存在していて、開発を効率化できる。 - 例: jQuery、React、Vue.jsなど -- サーバーサイドでも使用されることがある（Node.jsなど）。 \ No newline at end of file +- サーバーサイドでも使用されることがある（Node.jsなど）。 + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/javascript/howto.md b/05-web-docs/javascript/howto.md index 8c19eb5..9bfd5ba 100644 --- a/05-web-docs/javascript/howto.md +++ b/05-web-docs/javascript/howto.md @@ -37,4 +37,6 @@ Progateは、ブラウザ上でプログラミングを学べるオンライン ### データ保存 - ローカルストレージを用いて、ToDoリストの内容を保存する -- サーバーにデータを送信して保存する(Firebaseなどを用いる) \ No newline at end of file +- サーバーにデータを送信して保存する(Firebaseなどを用いる) + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/miss/css.md b/05-web-docs/miss/css.md index 0ec27d2..efed4f1 100644 --- a/05-web-docs/miss/css.md +++ b/05-web-docs/miss/css.md @@ -28,4 +28,6 @@ CSSのプロパティの値で、特に関数になっている部分では、 color: blue; } ``` -このコードでは、```child```クラスの要素に対して、最初に赤色が指定され、その後に青色が指定されています。CSSのルールでは、同じセレクタが複数回書かれている場合、最後に書かれたスタイルが優先されるため、この場合は青色が適用されます。同じセレクタを複数回書くと、どのスタイルが適用されるのか分からなくなり、バグの原因になることがあります。同じセレクタは1回だけ書くようにしましょう。 \ No newline at end of file +このコードでは、```child```クラスの要素に対して、最初に赤色が指定され、その後に青色が指定されています。CSSのルールでは、同じセレクタが複数回書かれている場合、最後に書かれたスタイルが優先されるため、この場合は青色が適用されます。同じセレクタを複数回書くと、どのスタイルが適用されるのか分からなくなり、バグの原因になることがあります。同じセレクタは1回だけ書くようにしましょう。 + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/miss/html.md b/05-web-docs/miss/html.md index c7d82a4..8fe16db 100644 --- a/05-web-docs/miss/html.md +++ b/05-web-docs/miss/html.md @@ -29,4 +29,6 @@ HTMLのタグや属性には、スペルミスがあるとブラウザが正し ## JSが思うように動かない HTMLとJSを組み合わせることでいろいろな操作をすることができますが、連携の```script```タグの書き方を間違えると、JSが思うように動かないことがあります。例えば、``````と書く場所を``````の中に書いてしまうと、ブラウザがHTMLを読み込む前にJSを読み込んでしまうため、JSが正しく動作しないことがあります。 #### 解決方法 -``````は、``````の最後に書くようにしましょう。これにより、ブラウザがHTMLを読み込んだ後にJSを読み込むため、JSが正しく動作するようになります。 \ No newline at end of file +``````は、``````の最後に書くようにしましょう。これにより、ブラウザがHTMLを読み込んだ後にJSを読み込むため、JSが正しく動作するようになります。 + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file diff --git a/05-web-docs/miss/js.md b/05-web-docs/miss/js.md index fbcc73c..da82a2e 100644 --- a/05-web-docs/miss/js.md +++ b/05-web-docs/miss/js.md @@ -47,4 +47,6 @@ inputElement.addEventListener("input", function() { console.log(inputValue); }); ``` -このコードでは、```inputElement```という変数が```const```で宣言されているため、再代入することができませんが、イベントリスナーを用いて、入力された内容を取得することができます。ページロード時に要素を取得しても、その要素の内容は空であるため、イベントリスナーや関数を用いて、入力された内容を取得するようにしましょう。 \ No newline at end of file +このコードでは、```inputElement```という変数が```const```で宣言されているため、再代入することができませんが、イベントリスナーを用いて、入力された内容を取得することができます。ページロード時に要素を取得しても、その要素の内容は空であるため、イベントリスナーや関数を用いて、入力された内容を取得するようにしましょう。 + +作成:2026-06-15 YGMS_yukkuri \ No newline at end of file