ASK-STEM-official · ganondorofu · Jun 11, 2026 · Jun 10, 2026 · Jun 11, 2026 · Jun 11, 2026
@@ -44,7 +44,7 @@ Languageの項目が出てこなかった人で、自信がない人は部室に
 追記:<font color="red">学校配布タブレットでやってる場合モジュールの追加ができないため日本語にできません。</font>
 わからない単語があればその辺に聞くなり調べるなりしてください。その分英語は身に付きますが面倒です。
 親御さんに頼み込んでパソコンを買ってもらいましょう。
-[機材について](https://)
+機材について
 
 ## 3.コードエディタとしてVisual Studioを指定する
 

@@ -0,0 +1,8 @@
+{
+  "label": "CSS関係",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "CSSの活用をしよう！"
+  }
+}
@@ -0,0 +1,32 @@
+---
+sidebar_position: 2
+description: CSSについてのTips ~発展~
+---
+# 2. CSSについてのTips
+この章では、CSSについてのTipsを紹介します。
+
+## display: flex
+CSSの```display: flex;```は、要素をフレックスコンテナに変えるプロパティです。フレックスコンテナ内の子要素は、フレックスアイテムと呼ばれ、フレックスコンテナの特性に従って配置されます。
+
+簡単に言うと、親要素に```flex```を付与してあげると、その子要素をいい感じに配置してくれるプロパティです。例えば、以下のようなコードがあります。
+```html
+<div class="parent">
+    <div class="child">Child 1</div>
+    <div class="child">Child 2</div>
+</div>
+```
+```css
+.parent {
+    display: flex;
+    justify-content: space-around;
+    width:500px;
+}
+.child {
+    width:200px;
+}
+```
+このコードでは、```parent```クラスの要素がフレックスコンテナになり、```child```クラスの要素がフレックスアイテムになります。```justify-content: space-around;```は、フレックスアイテムを均等に配置するためのプロパティで、```width: 500px;```は、フレックスコンテナの幅を指定しています。```child```クラスの要素には、幅が200pxに設定されています。
+実際にこのコードを動作させると、500pxの横幅の親要素の中で、200pxの子要素がそれぞれ余白を均等にしながら、いい感じに配置されることがわかります。フレックスコンテナを使用することで、要素の配置を簡単に制御することができます。
+
+この使い方はほんの一例で、```display: flex;```には他にも様々なプロパティがあり、要素の配置やレイアウトを柔軟に制御することができます。フレックスコンテナを活用することで、Webページのデザインをより魅力的にすることができます。
+flexboxは極めるととても便利なプロパティなので、ぜひ調べてみてください。
@@ -0,0 +1,38 @@
+---
+sidebar_position: 3
+description: CSSの省略記法
+---
+# 3. CSSの短縮した書き方
+この章では、CSSの省略記法について紹介します。
+
+## 省略記法とは?
+筆者が勝手にそう呼んでいます。呼び方が正しいかどうかは知りません。
+ですが、長々と指定しなくとも、複数のプロパティをまとめて指定することができる便利な書き方です。例えば、```margin```プロパティは、上、右、下、左の順番で値を指定することができます。以下のように書くことができます。
+```css
+.element {
+    margin: 10px 20px 30px 40px;
+   /* 上 右 下 左の順番で指定 */
+}
+```
+ほかにも、```padding```, ```border```など、複数のプロパティをまとめて指定できるものがあります。これらのプロパティを使うことで、コードを短く、読みやすくすることができます。
+
+## 補完機能をフル活用する
+VSCodeの補完機能を活用することで、CSSの省略記法を簡単に書くことができます。例えば、```w100```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```css
+.element {
+    /*w100*/
+    width: 100%;
+}
+```
+
+補完を活用する書き方で、多く使うものをいくつか紹介します。
+| 補完 | 生成されるコード | 入力単位 | 生成されるコード |
+| --- | --- | --- | --- |
+| ```w100``` | ```width: 100px;``` | 単位は省略 | ```px``` |
+| ```h100vh``` | ```height: 100vh;``` | 単位:```vh``` | ```vh``` |
+| ```m10p``` | ```margin: 10%;``` | 単位:```%``` | ```%``` |
+| ```p10``` | ```padding: 10px;``` | 単位は省略 | ```px``` |
+| ```t0``` | ```top: 0;``` | 単位は省略 | 0なので単位なし |
+| ```l0``` | ```left: 0;``` | 単位は省略 | 0なので単位なし |
+
+このように、補完機能を活用することで、面倒な単位入力などの作業を効率的に進めることができます！
@@ -0,0 +1,21 @@
+---
+sidebar_position: 1
+description: CSSについて
+---
+# 1. CSSとは
+この章では、CSSについての基本を紹介します。
+
+## CSSとは
+CSSは、Cascading Style Sheetsの略で、HTMLなどのマークアップ言語で書かれた文書の見た目を指定するためのスタイルシート言語です。CSSを使うことで、Webページのレイアウトやデザインを自由にカスタマイズすることができます。
+
+CSSは、HTMLと組み合わせて使用され、見た目をとてもいい感じに整えることができる大切な部分です。CSSを使いこなすことで、Webページをより魅力的にすることができます。
+
+## CSSの書き方
+CSSは、セレクタと宣言ブロックから構成されます。セレクタは、スタイルを適用する要素を指定し、宣言ブロックは、プロパティと値のペアで構成されます。例えば、以下のようなCSSコードがあります。
+```css
+body {
+    background-color: lightblue;
+}
+```
+このコードは、```body```要素の背景色をライトブルーに設定しています。セレクタは```body```で、宣言ブロックは```{ background-color: lightblue; }```です。
+CSSのプロパティには、```color```, ```font-size```, ```margin``` など、さまざまなものがあります。プロパティと値を組み合わせることで、Webページの見た目を自由にカスタマイズすることができます。
@@ -0,0 +1,8 @@
+{
+  "label": "HTML関係",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "HTML関係の記事たち"
+  }
+}
@@ -0,0 +1,3 @@
+body {
+    margin: 10px;
+}
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
@@ -0,0 +1,45 @@
+---
+sidebar_position: 2
+description: もっと高度な補完機能や、Emmetの便利な機能を紹介します。
+---
+
+# もっと高度な補完
+この章では、VSCodeのもっと高度な補完機能や、Emmetの便利な機能を紹介します。
+
+## そもそもなぜ補完が使えるのか
+Emmetは、HTMLやCSSを書くときに便利な機能を提供するツールです。VSCodeにはEmmetが組み込まれているため、いろいろと便利な補完が使えるのです。
+
+## Emmetとは
+そもそもEmmetとは、HTMLやCSSを書くときに便利な機能を提供するツールです。VSCodeにはEmmetが組み込まれているため、いろいろと便利な補完が使えるのです。
+
+インターネットでEmmetについて調べると、様々な機能が紹介されています。調べてみると面白いよ。
+
+## よく使うやつらの紹介
+```ul>li*3```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```html
+<ul>
+    <li></li>
+    <li></li>
+    <li></li>
+</ul>
+```
+
+```div#header```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```html
+<div id="header"></div>
+```
+
+```div.container```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```html
+<div class="container"></div>
+```
+
+上記の応用で、```div#header.container```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```html
+<div id="header" class="container"></div>
+```
+
+cssのリンクも手で打つとスペルミスが起きそうで怖いですが、Emmetを用いることで簡単に生成できます。```link:css```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```html
+<link rel="stylesheet" href="">
+```
@@ -0,0 +1,49 @@
+---
+sidebar_position: 1
+description: HTMLの便利な書き方/便利なもの
+---
+# HTMLの便利な書き方/便利なもの
+この章では、HTMLを書くときの便利な書き方や、便利な機能を紹介します。
+
+みなさんは、HTMLを書くときに、```<html>```や```<head>```などの基本的な構造を毎回書いているでしょうか？実は、VSCodeを使うと、これらの基本的な構造を簡単に生成することができます。
+
+## 便利な書き方
+なんと、VSCodeでは、HTMLに強力な補完機能が実装されています。例えば、```!```と入力してEnterを押すと、HTMLの基本的な構造が自動で生成されます。
+生成されるものは以下の通り。
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
+```
+
+このように、VSCodeの補完機能を活用することで、HTMLを書く際の手間を大幅に減らすことができます。
+### Tips
+このテンプレートは```lang="en"```になっていて英語のサイトという扱いになるため、右上に翻訳が出ることがあります。そのため、翻訳が邪魔な時は```lang="ja"```に変更しておくと良いでしょう。
+
+## タグの補完
+VSCodeでは、タグの補完も非常に便利です。例えば、```div```と入力してEnterを押すと、以下のようなコードが自動で生成されます。
+```html
+<div></div>
+```
+
+さらに、同じタグを複数用意するとき、(aタグやdivなど)は、```a*3```や```div*2```のように入力してEnterを押すと、指定した数だけタグが生成されます。
+
+```a*3```
+```html
+<a href=""></a>
+<a href=""></a>
+<a href=""></a>
+```
+```div*2```
+```html
+<div></div>
+<div></div>
+```
@@ -1,6 +1,6 @@
 {
   "label": "GitHub Pagesの使い方",
-  "position": 3,
+  "position": 6,
   "link": {
     "type": "generated-index",
     "description": "GitHub Pagesを使ってみよう"

@@ -4,15 +4,25 @@ sidebar_position: 1
 
 # はじめに
 
+Webデザイン班のノウハウをまとめたドキュメントです。
 
 ## 対象者
 
 - Webサイトを作りたい人
 - TwitterやInstagramなどのWebアプリを作りたい人
 - ブラウザゲームを作りたい人
-
+- 自分専用のアプリやサイトにロマンを感じる人
 
 ## 前提条件
 
-- PCの基礎知識がある人
-
+- PCの最低限の操作をする基礎知識がある人
+- HTML/CSSの基礎知識がある人
+    - 経験0の場合はProgateを進めよう！
+- VSCodeをインストールしている人
+    - まだの人はVSCodeをインストールしよう！
+
+## 目次
+1. [CSS関係](./CSS/intro.md)
+3. [HTML関係](./HTML/hints.md)
+4. [JS関係](./JS/intro.md)
+5. [GitHub Pagesを使ってみよう](./github/intro.md)
@@ -0,0 +1,8 @@
+{
+  "label": "Javascript関係",
+  "position": 5,
+  "link": {
+    "type": "generated-index",
+    "description": "Javascript関係の記事たち"
+  }
+}
@@ -0,0 +1,18 @@
+---
+sidebar_position: 1
+description: Javascriptとは？
+---
+
+# Javascriptとは?
+Javascriptは、Webページに動きをつけるためのプログラミング言語です。
+HTMLやCSSと組み合わせて、ボタンをクリックしたときの動きや、データを送信したり保存するなど、サイトに様々な動きを持たせることができます。
+
+# Javascriptの特徴
+- 計算や条件分岐など、プログラミングの基本的な機能を持っています。
+- ブラウザ上で動作するため、インストール不要で手軽。
+- HTMLやCSSと絡めて動作します。
+    - HTMLと組み合わせて、ユーザーの入力を処理したり、要素を生成したりできます。
+    - CSSと組み合わせると、要素のスタイルを変更でき、アニメーションをつけたり色を変化させたりできます。
+- 豊富なライブラリやフレームワークが存在していて、開発を効率化できる。
+    - 例: jQuery、React、Vue.jsなど
+- サーバーサイドでも使用されることがある（Node.jsなど）。
@@ -0,0 +1,40 @@
+---
+sidebar_position: 2
+description: 実際に書いてみよう！
+---
+
+# 実際に書いてみよう！
+この章では、Javascriptの基本的な書き方や、簡単な例を紹介します....と行きたいところですが、基礎は**Progate**を用いて進めていきます。
+
+Progateは、ブラウザ上でプログラミングを学べるオンライン学習サービスです。Javascriptの基礎から応用まで、段階的に学ぶことができます。(回し者ではない)
+
+# Progateが終わったら...
+実際に自分の作ってみたいものを一度作ってみよう！
+
+基礎レベルで作りやすいものの例を分野別に紹介していきます。
+(下に行くほど複雑になっていくよ)
+
+
+### 表示を切り替える
+- 文字をHTMLに表示する
+- ボタンを押すと文字が変わる
+- 背景色をボタンを押したときに変える
+
+### 演算(計算)
+- 足し算、引き算、掛け算、割り算の結果を表示する
+
+### 条件分岐
+- じゃんけんゲーム
+- おみくじ
+
+### 繰り返し
+- 入力された段の九九を表示する
+- 1から100までの数字を表示する
+
+### 配列
+- inputとbuttonを用いて、入力された文字をリストに追加していく
+- ToDoリストを作る
+
+### データ保存
+- ローカルストレージを用いて、ToDoリストの内容を保存する
+- サーバーにデータを送信して保存する(Firebaseなどを用いる)
@@ -0,0 +1,8 @@
+{
+  "label": "よくやりがちなミス",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "よくやりがちなミスについて解説"
+  }
+}
@@ -0,0 +1,31 @@
+---
+sidebar_position: 2
+description: よくあるミス CSS編
+---
+# よくあるミス CSS編
+この章では、CSSでよくあるミスを紹介します。
+
+## CSSの全部がそもそも適用されないよ～～～
+CSSが適用されないときは、大体HTMLのhead部分に```<link rel="stylesheet" href="style.css">```と書いていないことや、ファイル名がそもそも違う問題が多いです。CSSファイルを作成したら、必ずHTMLのhead部分に```<link rel="stylesheet" href="style.css">```と書いて、CSSのファイル名も間違っていないか確認しましょう。
+
+## セレクタのスペルミス
+CSSのセレクタは、HTMLの要素やクラス、IDなどを指定するためのものですが、スペルミスをするとスタイルが適用されません。例えば、クラスである```.child```を```.chid```と書いてしまうと、スタイルが適用されないので注意しましょう。
+
+## プロパティのスペルミス
+CSSのプロパティもスペルミスをするとスタイルが適用されません。例えば、```background-color```を```backgroud-color```と書いてしまうと、スタイルが適用されないので注意しましょう。
+
+## 関数の引数が間違っている
+CSSのプロパティの値で、特に関数になっている部分では、引数の順序や値が間違っていると期待したスタイルが適用されません。例えば、```rgba(255, 0, 0, 0.5)```で透明度を指定する際、引数の順序を間違えると色が正しく表示されません。また、```transform: translate(50px 100px)```のように、引数を区切るカンマがなかったり、関数の引数が正しくないと、要素が期待通りに移動しないことがあります。
+関数の引数は、プロパティによって異なるため、公式ドキュメントなどで正しい引数の順序や値を確認することが重要です。
+
+## 同じセレクタを複数回書いている
+同じセレクタを複数回書いていると、どのスタイルが適用されるのか分からなくなります。例えば、以下のようなコードがあります。
+```css
+.child {
+    color: red;
+}
+.child {
+    color: blue;
+}
+```
+このコードでは、```child```クラスの要素に対して、最初に赤色が指定され、その後に青色が指定されています。CSSのルールでは、同じセレクタが複数回書かれている場合、最後に書かれたスタイルが優先されるため、この場合は青色が適用されます。同じセレクタを複数回書くと、どのスタイルが適用されるのか分からなくなり、バグの原因になることがあります。同じセレクタは1回だけ書くようにしましょう。