JavaScriptとは何か（動き）

この記事のゴール

JavaScriptを「ブラウザ上で処理する言語」として説明できる
最低限のDOM操作（ボタン→表示切替）ができる
「フォーム」「開閉」「表示切替」の入口が分かる

1. まず結論（30秒）

JavaScriptは、Webページに動きや処理を追加するための言語です。

2. JavaScriptでできること（よく使う順）

クリックしたら開閉（メニュー / FAQ）
フォーム入力チェック（必須、メール形式、文字数など）
APIからデータ取得して表示（少し進んだ内容）

3. 最低限覚える概念（これだけで戦える）

変数（データを入れる箱）
条件分岐（if）
関数（処理のまとまり）
イベント（clickなど）
DOM操作（HTMLの要素を選んで変更）

4. 実際にどう役立つ？

「メニューが開かない」→ clickイベント / class付け替え
「フォームが送れない」→ バリデーション / 送信処理

5. よくある誤解

誤解: JSは全部覚えないと使えない
正しくは: まずは「DOM操作とフォーム」からで十分

6. ミニ課題（30分）

FAQのアコーディオンを作ります（1クリックで開閉）。

☑ 質問をクリックしたら回答が開く
☑ 開いてる項目だけクラスを付ける
☑ CSSで開いてる項目の背景色を変える

ブログに載せるもの（アウトプット）
・アコーディオン開閉前（アコーディオンのキャレットダウン▼）

・アコーディオン開閉後（アコーディオンのキャレットアップ▲）

7. 理解チェック

JavaScriptは何をする言語？
イベントとは？
DOM操作は何を触っている？

まとめ

今日の結論: JSで「動き」と「処理」を作る
次にやること: 裏側（バックエンド）の役割へ

CSSとは何か（スマホ対応含む）

この記事のゴール

CSSを「見た目を当てるルール」として説明できる
スマホ対応（レスポンシブ）の基本（メディアクエリ）がわかる
「スマホで崩れる」をCSSで直す発想が持てる

1. まず結論（30秒）

CSSはHTMLに対して「こう見せる」を指定する言語です。
スマホ対応は画面幅に応じてCSSルールを切り替えるのが基本です。

2. CSSの基本（これだけ）

セレクタ: どこに当てるか（例：.btn）
プロパティ: 何を変えるか（例：color）
値: どう変えるか（例：red）

3. スマホ対応の考え方（最短）

先に“スマホ”を作る（モバイルファースト）

スマホで縦に積む
画面が広くなったら横並びにする

メディアクエリ例

/* まずスマホ基準 */
.cards { display: grid; gap: 16px; }
/* 画面が広いときだけ横並びを増やす */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}

4. 実際にどう役立つ？

「スマホで崩れてる」→ まずCSSの幅/余白/画像/フォントを疑う
「ボタンが押しにくい」→ タップ領域（高さ/余白）をCSSで調整
「表示が遅い」→ 画像最適化が主、でもCSSの整理も対象

5. よくある誤解

誤解: とりあえず !important
正しくは: まず「どのCSSが勝っているか」を確認（優先順位）

6. ミニ課題（30分）

HTMLでカード3枚を用意
PCは横並び（Grid or Flex）
スマホは縦並び（メディアクエリで切り替え）

ブログに載せるもの（アウトプット）

- PC表示スクショ

CSS練習

- スマホ表示スクショ（iPhone 14 pro max）

CSS練習

7. 理解チェック

CSSは何をする？
メディアクエリは何のため？
スマホ対応の基本方針は？（一言）

まとめ

今日の結論: CSSで見た目、メディアクエリでスマホ対応
次にやること: JSで「動き」へ

HTMLとは何か

この記事のゴール

HTMLを「文章の意味付け（構造化）」として説明できる
よく使うタグ（h1/p/a/img/ul/li/section）を使える
WordPress投稿が最終的にHTMLになるイメージが持てる

1. まず結論（30秒）

HTMLは、Webページの内容に意味（構造）を与える言語です。
「見出し」「本文」「リスト」などを正しく分けるほど、読みやすく・SEOにも強くなります。

2. よく使うタグ（最優先）

h1〜h6: 見出し（h1が一番大きい）
p: 段落（文章）
a: リンク
img: 画像
ul / li: 箇条書き
section: 章・まとまり

3. “いいHTML”の考え方

見た目より先に意味を優先する
「divだらけ」より、見出し/段落/リストを正しく使う
h1は基本1つ（ページの主題）

4. 実際にどう役立つ？

LP制作：見出し構造が読みやすさ・SEOに直結
WordPress：ブロックエディタで書いても、最終的にHTMLになって表示される
表示崩れの原因が「HTMLの構造」なこともある（タグ閉じ忘れ等）

5. よくある誤解

誤解: divをいっぱい使えばOK
正しくは: まずは「意味のあるタグ」で構造化すると後が楽

6. ミニ課題（30分）

「求人LPの骨組み」をHTMLだけで作ります（CSSなし）。

h1（ページの主題）を1つ決める
sectionで「待遇」「給与例」「応募方法」「FAQ」を分ける
FAQはul/liで箇条書きにする
CTAはaタグでリンクを作る（仮でOK）

ブログに載せるもの（アウトプット）

- HTMLのスクショ
- 「h1は何にしたか」1行

□作ったページのブラウザ表示のスクショ

ブラウザ表示

□作ったページのHTMLのスクショ

HTML

7. 理解チェック

HTMLは何をする言語？
h1は基本いくつ？
aタグは何？

まとめ

今日の結論: HTMLは内容を「意味付けして構造化」する
次にやること: CSSで見た目とスマホ対応へ

Git / GitHub：clone→add→commit→push を1周した記録

GitとGitHubの基本操作を、実際に手を動かして1周（clone→add→commit→push）しました。
ここでは「何をやったか」「どこで詰まったか」「どう解決したか」を、WordPressにそのまま貼れる形でまとめます。

この記事のゴール

今回やった操作（clone / status / add / commit / push）を、自分の言葉で説明できる
not a git repository と nothing to commit を見ても焦らない
Git Bashで「ショートカットが違う」問題の回避策を持つ

方法1: 基本フロー（clone→add→commit→push）

結論：Gitは 変更を作る → add → commit → push の繰り返しです。

GitHubから取得（clone）
- 例：git clone https://github.com/koollovesato-maker/tradingview
- please complete authentication in your browser... が出たら、ブラウザで認証を完了
フォルダへ移動（ここが最重要）
- 例：cd tradingview
- clone直後は自動で中に入らないので、必ず移動する
状態確認
- git status
- On branch main が出ていればOK
変更を作る（新規ファイル作成）
- 例：echo "test" > test.txt
- この時点では Untracked files（未追跡）として表示される
変更を選ぶ（add）
- 例：git add test.txt
- add は「次のcommitに入れる変更を選ぶ」
履歴として保存（commit）
- 例：git commit -m "test.txt を追加（練習）"
- commitはローカルに履歴を残す操作
GitHubへ送る（push）
- 例：git push
- pushでGitHubに反映される

方法2: よく出る表示（エラーに見えるけど正常）

2-1. `nothing to commit, working tree clean`

これはエラーではありません。
意味は 保存すべき差分がない です（変更が0ならcommitは発生しない）。

トラブルシューティング

1) `not a git repository` が出る

fatal: not a git repository (or any of the parent directories): .git

原因：今いるフォルダ（または親フォルダ）に .git がない＝Git管理されていない場所で実行している。

今いる場所が正しいか確認
- pwd（今いる場所）
- ls -a（.git があるか）
cloneしたフォルダに移動
- 例：cd tradingview

2) コピペで変な文字が混ざって失敗する（ブラケットペースト）

こういう表示が出たら、貼り付け時の制御文字が混ざっています。

$ ^[[200~cd tradingview
bash: $'\E[200~cd': command not found

何も入力せずEnterを押してリセット
コマンドを手入力する
- 例：cd tradingview

3) Ctrl+C / Ctrl+V の癖でミスる（Git Bashあるある）

Git Bashでは、Ctrl+C は多くの場合「中断」です（コピーではない）。

VSCodeのターミナル: Ctrl+Shift+C（コピー） / Ctrl+Shift+V（貼り付け）
Git Bash（mintty）: 右クリック貼り付け、または Shift+Insert など（設定次第）

確認コマンド（よく使うセット）

今の状態: git status
差分を見る: git diff
履歴を見る: git log --oneline
どこにpushするか確認: git remote -v

ミニ課題（10分）

test.txt に1行追記する
- 例：echo "line2" >> test.txt
差分を確認
- git diff
add → commit → push
- git add test.txt
- git commit -m "test.txt を更新（練習）"
- git push
□練習画像

理解チェック

not a git repository はどういう状態？
nothing to commit, working tree clean は何を意味する？
git add と git commit の役割の違いは？
commit したのに GitHub に反映されないとき、何が足りない？

まとめ

結論：変更を作る → add → commit → push が基本ループ。
commitできないのは「差分がない」だけで、エラーではありません。

今回触ったリポジトリ: https://github.com/koollovesato-maker/tradingview
タグ: #Git #GitHub #学習ログ #GitBash

HTML / CSS / JavaScript の役割

この記事のゴール

HTML/CSS/JSを「骨・見た目・動き」で説明できる
「どこを直せばいいか」の当たりが付く（超重要）

1. まず結論（30秒）

HTML: 内容と構造（骨組み）
CSS: 見た目（デザイン）
JavaScript: 動き（操作・処理）

2. 直感で理解（たとえ）

HTML = 家の柱・間取り
CSS  = 壁紙・家具・色
JS   = 電気・自動ドア・インターホン

3. 具体例（切り分け）

文字を変える → HTML（またはWordPressの本文/テンプレ）
色や余白を変える → CSS
ボタン押したら開閉したい → JavaScript
フォームが送れない → JS（バリデーション） or サーバ側（バックエンド）も疑う

4. 最低限の用語

DOM: ブラウザがHTMLをツリー構造にしたもの（JSが触る対象）
class: CSSやJSで狙うための目印

5. よくある誤解

誤解: CSSで文章を追加できる
正しくは: 内容はHTML。CSSは装飾が役割
誤解: JSは後回しでいい
正しくは: 最低限のDOM操作/フォームは早めに触ると理解が一気に進む

6. ミニ課題（30分）

1つのページで「骨・見た目・動き」を全部体験します。

HTMLで「見出し・本文・ボタン」を作る
CSSで「色・余白・中央寄せ」を当てる
JSで「ボタン押したら文字が変わる」を作る

ブログに載せるもの（アウトプット）

HTML/CSS/JSそれぞれ何を担当したか（各1行）
動いた様子のスクショ（可能ならGIF）

7. 理解チェック

HTML/CSS/JSはそれぞれ何担当？
「スマホで崩れる」はまずどこを見る？
DOMとは何？

まとめ

今日の結論: Webは「骨組み（HTML）+見た目（CSS）+動き（JS）」

Git / GitHubとは？「履歴管理」と「共同作業」

プログラミング学習で早めに押さえておきたいのが Git / GitHub です。難しく感じやすいですが、本質はシンプルで、役割は「変更履歴を安全に管理する」ことです。

この記事では、GitとGitHubの違い・できること・最低限の用語を整理します。

Gitとは何か

Gitは、ファイルの変更履歴を管理する仕組み（バージョン管理）です。

いつ、どこを、どう変更したかが残る
過去の状態に戻せる
安全に試せる（壊しても戻せる）

GitHubとは何か

GitHubは、Gitのデータ（履歴）をネット上に置いて共有できるサービスです。

チームで同じコードを共有できる
バックアップとして使える
成果物（ポートフォリオ）として見せられる

Git / GitHubでできること

① 履歴管理

どの変更で壊れたか追える
戻したいときに戻せる

② 差分確認

どこが変更されたかを見比べられる

③ チーム開発

複数人で同時に作業しても管理しやすい

最低限覚える用語

リポジトリ：プロジェクト一式の保管場所
コミット：変更の保存（スナップショット）
ブランチ：作業用の分岐（本体を壊さず試せる）
プッシュ：ローカルの変更をGitHubへ送る
プル：GitHubの変更を手元へ持ってくる

初心者はまず何ができればOK？

Gitでコミットできる
GitHubにプッシュできる
差分が見られる

この3つができれば、学習にも案件にも十分役立ちます。

まとめ

Gitは「変更履歴を管理する仕組み」
GitHubは「履歴を共有・保存する場所」
初心者は「コミット→プッシュ→差分確認」からでOK

タグ：#Git #GitHub #履歴管理 #初心者

APIとは？「できること」と「仕組み」

APIは、Webサービスやアプリを作るときに必ず出てくる重要概念です。一言でいうと、APIは サービス同士がやり取りするための窓口 です。

この記事では、APIの意味・仕組み・よくある例を、初心者向けに整理します。

APIとは何か

API（Application Programming Interface）とは、 他のプログラムやサービスから機能を利用できるようにした“入り口（窓口）” のことです。

APIでできること（例）

地図表示（Google Mapsなど）
決済（クレジット決済、QR決済）
ログイン（Googleログイン、LINEログイン）
天気情報の取得
SNS投稿の取得

仕組みのイメージ（超ざっくり）

APIは基本的に「リクエスト（お願い）→レスポンス（返事）」で動きます。

あなた（Web/アプリ）
   ↓ リクエスト（データちょうだい）
API（窓口）
   ↓ レスポンス（データ返す）
あなた（画面に表示）

よく見る言葉：エンドポイント / メソッド

エンドポイント：APIのURL（どこにお願いするか）
メソッド：何をしたいか（取得/作成など）

例（イメージ）：

GET /users   → ユーザー一覧を取得（Read）
POST /users  → ユーザーを作成（Create）

APIを理解すると何ができるようになる？

外部サービス連携ができる（地図、決済、予約、通知など）
フロント（画面）と裏側（サーバー）を分けて設計できる
Webサービス/アプリの“会話の仕組み”が分かる

まとめ

APIは「サービスの機能を使うための窓口」
基本は「リクエスト→レスポンス」
CRUDやJSONとセットで理解すると強い

タグ：#API #Webサービス #外部連携 #初心者

CRUDとは？Webサービス開発の基本4操作

Webサービスやアプリを作るとき、必ず出てくる言葉が CRUD です。 CRUDは「データを扱う基本操作」をまとめた考え方で、これを理解すると Webサービスの仕組みが一気に見通しよくなります。

この記事では、CRUDの意味・具体例・WordPressとの関係までを、教科書的に整理します。

CRUDとは何か

CRUDとは、データに対する基本操作4つを並べた略語です。

操作	意味	例
Create	作成	新規投稿を作る / 新規ユーザー登録
Read	読み取り	記事一覧を見る / 予約状況を確認
Update	更新	投稿を編集 / プロフィール変更
Delete	削除	投稿を削除 / 予約をキャンセル

CRUDが重要な理由

Webサービスの多くは「データを管理する仕組み」だから
管理画面や予約システムは、ほぼCRUDで説明できるから
要件整理（何ができれば完成か）がラクになるから

具体例：応募管理ツール（イメージ）

Create：応募フォームから応募データを登録する
Read：管理画面で応募一覧を見る
Update：対応状況（未対応→対応済み）を変更する
Delete：重複応募や不要データを削除する

WordPressとCRUDの関係

WordPressは「投稿」というデータを扱うCMSです。つまり、WordPressの基本機能はCRUDそのものです。

投稿を作成する（Create）
投稿を表示する（Read）
投稿を編集する（Update）
投稿を削除する（Delete）

まとめ

CRUDは「データ操作の基本4つ（作成・取得・更新・削除）」
Webサービスの多くはCRUDで整理できる
WordPressもCRUDの考え方で理解できる

タグ：#CRUD #Webサービス #WordPress #開発基礎

Markdown（マークダウン）とHTMLの違い

プログラミングやWeb制作を学び始めると、必ず出てくるのが Markdown と HTML です。

どちらも文章や構造を表現するための記法ですが、 目的・役割・使われる場面は大きく異なります。

この記事では、MarkdownとHTMLの違いを 教科書的・体系的にまとめます。

Markdownとは何か

Markdown（マークダウン）とは、 文章を簡単に書くための軽量な記法です。

主に、文章構造をシンプルに表現することを目的としています。

Markdownの特徴

記号を使って文章構造を表現する
人が読んでも分かりやすい
学習コストが低い

Markdownの記述例

# 見出し
- リスト1
- リスト2

**太字**

このように、記号だけで見出しやリストを表現できます。

HTMLとは何か

HTML（HyperText Markup Language）は、 Webページの構造を作るための言語です。

ブラウザに対して、「ここは見出し」「ここは本文」「ここは画像」といった情報を正確に伝える役割を持ちます。

HTMLの特徴

Webページ表示の土台となる
ブラウザが直接解釈する
CSSやJavaScriptと組み合わせて使う

HTMLの記述例

&lt;h1&gt;見出し&lt;/h1&gt;
&lt;ul&gt;
  &lt;li&gt;リスト1&lt;/li&gt;
  &lt;li&gt;リスト2&lt;/li&gt;
&lt;/ul&gt;

MarkdownとHTMLの違い

項目	Markdown	HTML
目的	文章を簡単に書く	Webページを構築する
書きやすさ	非常に簡単	やや複雑
表現力	限定的	非常に高い
主な用途	メモ・下書き・README	Webサイト・Webサービス

WordPressではどう使われているか

WordPressでは、最終的にHTMLとして保存・表示されています。

ブロックエディタで文章を書いても、内部的にはHTMLが生成されています。

Markdownが使われる場面

記事の下書き
学習メモ
GitHubのREADME

HTMLが必要になる場面

表示崩れの修正
デザイン調整
カスタムHTMLブロック

初心者はどちらを学ぶべきか

結論として、以下の順番がおすすめです。

Markdownで文章構造に慣れる
HTMLでWebの仕組みを理解する

特にWordPressやWeb制作を行う場合、 HTMLは必須知識になります。

まとめ

Markdownは「書きやすさ重視」の記法
HTMLは「Web表示の正式ルール」
WordPressでは最終的にHTMLが使われる

まずは違いを説明できる状態を目指せば十分です。この理解が、HTML / CSS / JavaScript 学習の基礎になります。

カテゴリ：Web基礎 / WordPress
タグ：#Markdown #HTML #Web基礎 #WordPress

WordPressへの投稿方法

WordPressに記事を投稿する方法を3つ紹介します。HTML形式での貼り付けが最も確実で推奨です。Markdownプラグインを使う方法や、ビジュアルエディタに直接貼り付ける方法もあります。

方法1: HTML形式で貼り付け（推奨）

HTMLファイルを開く
- 投稿したいHTMLファイルを開く
すべての内容をコピー
- Ctrl+A → Ctrl+C
WordPressの投稿編集画面を開く
コードエディタに切り替え
- 画面右上、コンテンツ編集エリアの上部にある3つのアイコンのうち、一番右のアイコン（3本の水平線が積み重なったアイコン）をクリック
- このアイコンが青くハイライトされていると、コードエディタモードです
HTMLを貼り付け
- Ctrl+V
ビジュアルエディタに戻す
- 同じアイコンを再度クリックすると、ビジュアルエディタに戻ります
確認して公開

📍 コードエディタアイコンの見つけ方

場所: 投稿編集画面の右上、コンテンツ編集エリアの上部
見た目: 3本の水平線が積み重なったアイコン（☰ のような形）
位置: 文字数: 0 の左隣、3つのアイコンの一番右
状態: 青くハイライトされている = コードエディタモード、ハイライトなし = ビジュアルエディタモード

メリット

そのまま貼り付けるだけで正しく表示される
絵文字やコードブロックが正しく表示される
プラグイン不要

方法2: Markdownプラグインを使用

プラグインのインストール

WordPress管理画面にログイン
プラグイン → 新規追加
「Markdown Editor」で検索
「Markdown Editor」をインストールして有効化

投稿方法

新規投稿を作成
Markdownエディタで編集
Markdownファイルの内容をコピー
- 例：cursorを学ぶファイルの内容をコピー
Markdownエディタに貼り付け
プレビューで確認
公開

メリット

Markdownをそのまま使える
シンタックスハイライトが自動で適用される
コードブロックがきれいに表示される

方法3: ビジュアルエディタに直接貼り付け（簡易版）

Markdownファイルを開く
内容をコピー
WordPressのビジュアルエディタに貼り付け
手動でフォーマット調整
- 見出しを選択して「見出し2」「見出し3」を適用
- 太字を手動で適用
- コードブロックを「コード」ブロックで挿入

注意点

絵文字はそのまま表示される
コードブロックは手動で挿入が必要
区切り線（---）は手動で「区切り線」ブロックを挿入

推奨方法

方法1（HTML形式）を推奨します。

理由：

最も確実に正しく表示される
プラグイン不要で軽量
一度HTMLに変換すれば、そのまま使える
絵文字やコードブロックが正しく表示される

トラブルシューティング

絵文字が表示されない場合

WordPressのテーマやサーバーの設定によっては、絵文字が表示されない場合があります。その場合は、絵文字を削除するか、テキストに置き換えてください。

例：

📌 → 【結論】
📝 → 【手順】
⚠️ → 【注意】
✅ → 【解決】
💡 → 【学び】
🚀 → 【次のステップ】
📋 → 【まとめ】

コードブロックが正しく表示されない場合

コードエディタモードに切り替えて確認
- 右上のコードエディタアイコン（3本の水平線）をクリック
<pre><code>タグが正しく入っているか確認
必要に応じて、WordPressの「コード」ブロックを使用
- ビジュアルエディタで「+」をクリック → 「コード」ブロックを追加

今後の効率化

同じ形式の記事を量産する場合は：

HTMLテンプレートを作成
Markdownで書いて、HTMLに変換するツールを使う
WordPressのカスタム投稿タイプやテンプレート機能を活用

作成日: 2026-01-23
カテゴリ: ブログ運営 / WordPress
タグ: #WordPress #投稿方法 #HTML #Markdown

この記事のゴール

1. まず結論（30秒）

2. JavaScriptでできること（よく使う順）

3. 最低限覚える概念（これだけで戦える）

4. 実際にどう役立つ？

5. よくある誤解

6. ミニ課題（30分）

7. 理解チェック

まとめ

この記事のゴール

1. まず結論（30秒）

2. CSSの基本（これだけ）

3. スマホ対応の考え方（最短）

先に“スマホ”を作る（モバイルファースト）

メディアクエリ例

4. 実際にどう役立つ？

5. よくある誤解

6. ミニ課題（30分）

7. 理解チェック

まとめ

この記事のゴール

1. まず結論（30秒）

2. よく使うタグ（最優先）

3. “いいHTML”の考え方

4. 実際にどう役立つ？

5. よくある誤解

6. ミニ課題（30分）

7. 理解チェック

まとめ

この記事のゴール

方法1: 基本フロー（clone→add→commit→push）

方法2: よく出る表示（エラーに見えるけど正常）

2-1. nothing to commit, working tree clean

トラブルシューティング

1) not a git repository が出る

2) コピペで変な文字が混ざって失敗する（ブラケットペースト）

3) Ctrl+C / Ctrl+V の癖でミスる（Git Bashあるある）

確認コマンド（よく使うセット）

ミニ課題（10分）

理解チェック

まとめ

この記事のゴール

1. まず結論（30秒）

2. 直感で理解（たとえ）

3. 具体例（切り分け）

4. 最低限の用語

5. よくある誤解

6. ミニ課題（30分）

7. 理解チェック

まとめ

Gitとは何か

GitHubとは何か

Git / GitHubでできること

① 履歴管理

② 差分確認

③ チーム開発

最低限覚える用語

初心者はまず何ができればOK？

まとめ

APIとは何か

APIでできること（例）

仕組みのイメージ（超ざっくり）

よく見る言葉：エンドポイント / メソッド

APIを理解すると何ができるようになる？

まとめ

CRUDとは何か

CRUDが重要な理由

具体例：応募管理ツール（イメージ）

WordPressとCRUDの関係

まとめ

Markdownとは何か

Markdownの特徴

Markdownの記述例

HTMLとは何か

HTMLの特徴

HTMLの記述例

MarkdownとHTMLの違い

WordPressではどう使われているか

Markdownが使われる場面

HTMLが必要になる場面

2-1. `nothing to commit, working tree clean`

1) `not a git repository` が出る