JavaScript基礎 【初心者向け】JavaScriptのオブジェクト入門｜使い方・書き方をわかりやすく解説！
1.はじめにJavaScriptでは、複数の情報をひとまとめにして扱うときに「オブジェクト」という仕組みを使います。たとえば、ある人の情報を表すときに、const name = "たろう";const age = 20;const city...
2025-05
JavaScript基礎 
JavaScript基礎 【初心者向け】JavaScriptの配列の基本と使い方をわかりやすく解説！
1.はじめにJavaScriptでは、複数のデータをまとめて扱いたいときに「配列（array）」という仕組みを使います。たとえば：数字のリスト（例：）フルーツの名前一覧（例：）TODOリストの項目配列を使えば、似た種類のデータをまとめて1つ...
作ってみたシリーズ 【Canvas入門】JavaScriptで必殺技を描くアニメーションを作ってみた
1.はじめに「JavaScriptとCanvasで、カメハメハを撃てないだろうか？」そんな発想から始まった今回の“ちょっとネタだけど、ちゃんと学べる”企画です。HTMLの<canvas>とJavaScriptを使って、波動（エネルギー弾）を...
JavaScript基礎 JavaScriptのcanvas入門｜図形や描画の基本をやさしく解説！
1.canvasとは？<canvas>（キャンバス）は、JavaScriptを使って自由に絵や図形を描けるHTMLのタグです。「キャンバス」という名前のとおり、お絵描きやアニメーションができる画面のようなものと思ってください。何ができるの？...
JavaScript基礎 【初心者向け】JavaScriptでボタンをクリックしてイベントを実行しよう！
1.イベントとは？イベント（event）とは、「ユーザーが何か操作したときに起きる出来事」のことです。たとえば、次のような操作はすべて「イベント」ですボタンをクリックするキーボードを押すマウスを動かす画面が読み込まれる入力フォームに文字を入...
JavaScript基礎 【初心者向け】JavaScript関数入門｜使い方・書き方を丁寧に紹介
1.関数とは？JavaScriptにおける関数（function）とは、「ひとまとまりの処理」をまとめて名前をつけたものです。たとえば「画面に文字を表示する処理」や「数字を足し算する処理」などを、何度でも使えるように箱に入れておくようなイメ...
HTML/CSS入門 もう迷わない！CSS Flexboxレイアウト完全ガイド【サンプル付き】
CSSのFlexboxって何？横並び・中央寄せなどレイアウトに悩んだらこれ。初心者でも図解とサンプル付きで今すぐ使えるFlexboxの基本をわかりやすく解説！
HTML/CSS入門 【初心者向け】CSSの@keyframesで簡単アニメーション！フェードインとスライドインを作ってみよう
1.@keyframesとは？@keyframesは、CSSだけでアニメーション（動き）を作るための仕組みです。たとえば、テキストをフェードインさせたいボタンをふわっと浮かせたい画像をスライドさせたいといった「動き」を、JavaScript...
作ってみたシリーズ CSSとJavaScriptでふわっと湯気を再現してみた
1.はじめに先日、街のカフェでホットコーヒーを飲んでいたとき、「この湯気ってコードで再現できないかな？」と思ったのがきっかけで、CSSとJavaScriptだけで湯気アニメーションを作ってみました。アニメーションって敷居が高そうに感じるかも...
JavaScript基礎 【初心者向け】JavaScriptのfor文の使い方と繰り返し処理の基本を解説！
1.for文とは？JavaScriptの for 文は、「同じ処理を何度も繰り返したいとき」に使う文法です。日常生活でも、こんなことってありますよね？例：「腕立て伏せを10回やる」「3回深呼吸する」このように、「同じことを何回も行う」処理を...