ブログ
プログラミング学習に役立つ記事をまとめています。全143記事。
夏休みに無料でホームページを作ろう!中学生向け手順解説
夏休みに無料でホームページを作る方法を中学生向けにステップバイステップで解説。パソコンとブラウザだけでOK。HTMLとCSSの基本からGitHub Pagesでの公開まで、初心者でもできる手順を紹介。
夏休みに無料でホームページを作ろう!中学生向け手順解説
夏休みに無料でホームページを作る方法を中学生向けにステップバイステップで解説。パソコンとブラウザだけでOK。HTMLとCSSの基本からGitHub Pagesでの公開まで、初心者でもできる手順を紹介。
高校生が夏休みにプログラミングを独学する方法【完全ガイド】
高校生が夏休みにプログラミングを独学する具体的な手順を解説。情報Ⅰの予習・大学受験・推薦入試での活用法も紹介。HTML・CSS・JavaScript・Gitを無料で学べます。
夏休みにプログラミングで何作る?中学生向けアイデア10選
夏休みにプログラミングで何を作ればいいか迷っている中学生向けに、作れるもの10個を難易度・所要時間付きで紹介。HTML・CSS・JavaScriptで自己紹介ページからゲームまで作れます。無料。
HTML・CSSで作れる作品アイデア10選【中学生・高校生向け】
HTML・CSSで作れる作品アイデア10個を難易度・所要時間付きで紹介。自己紹介ページからポートフォリオサイトまで、初級→中級→上級の3段階で構成。何を作ればいいか迷っている中高生向け。無料。
JavaScriptのボタンが動かない!初心者がハマる原因と直し方
JavaScriptでボタンをクリックしても動かない原因と直し方を初心者向けに解説。スクリプトの読み込み順・セレクタの間違い・イベント名のtypoなど、よくある原因6つをコード例付きで紹介。中高生向け。無料。
情報Ⅰの期末テスト対策!ネットワーク・データ活用の要点まとめ
情報Ⅰの期末テストで出るネットワーク・データ活用分野の要点を高校生向けにまとめ。IPアドレス・DNS・HTTP/HTTPS・プロトコル・表計算・グラフの読み取りを解説。テスト頻出形式付き。無料。
情報Ⅰのテストに出るフローチャートの書き方【アルゴリズム入門】
情報Ⅰのテストに出るフローチャートの書き方を初心者向けに解説。基本記号・よく出るパターン(最大値・合計・探索)・コードへの変換方法を図解で紹介。練習問題付き。高校生向け。無料。
文化祭のデジタル看板をHTMLで作ろう!教室のタブレットに表示
文化祭のデジタル看板をHTMLで作る方法を解説。全画面表示・自動スクロール・CSSアニメーションで動きのある看板を作り、タブレットやPCに表示する手順を紹介。USBに入れて開くだけ。中高生向け。無料。
文化祭サイトをスマホ対応にする方法【レスポンシブデザイン入門】
文化祭サイトをスマホ対応にする方法を初心者向けに解説。viewport設定・メディアクエリ・Flexboxを使って、PCでもスマホでも見やすいサイトにする手順をコード例付きで紹介。中高生向け。無料。
文化祭のアンケートフォームを作ろう!HTMLフォーム+Google Forms連携
文化祭の来場者アンケートをHTMLフォームで作る方法を解説。デザインはHTML+CSSで自由にカスタマイズし、回答収集はGoogle Formsと連携。QRコードでの配布方法も紹介。中高生向け。無料。
HTML・CSSの模写コーディングのやり方【初心者の練習法】
HTML・CSSの模写コーディングのやり方を初心者向けに解説。お手本の選び方・観察→再現→比較の手順・身につくスキル・よくある失敗と対処法を紹介。レイアウト力を鍛える最強の練習法です。中高生向け。無料。
情報Ⅰの中間テスト対策!プログラミング問題の解き方【高校生向け】
情報Ⅰの中間テストで出るプログラミング問題の解き方を高校生向けに解説。穴埋め問題・トレース問題・アルゴリズム説明問題の3パターンを具体例付きで紹介。変数・条件分岐・繰り返しの基礎から対策できます。無料。
高校「情報」のテスト勉強法!プログラミング問題で点を取るコツ
高校・情報Ⅰのテストでプログラミング問題の点を取る勉強法を解説。コードを読む力・トレース力・パターン認識の3つを鍛える方法と、1週間前〜前日の学習スケジュールを紹介。高校生向け。無料。
情報Ⅰのテストで出る「変数」「条件分岐」がわからない人へ【図解で解説】
情報Ⅰのテストで出る変数と条件分岐がわからない高校生向けに、身近な例と図解でやさしく解説。擬似コードとJavaScriptの両方で説明し、テストでよく出る穴埋め・実行結果予測の練習問題付き。無料。
プログラミングのエラーメッセージの読み方【初心者が最初に覚えること】
プログラミングのエラーメッセージの読み方を初心者向けに解説。SyntaxError・ReferenceError・TypeErrorなどよくあるエラー6種類を具体例付きで紹介。開発者ツールでの確認方法も説明。中高生向け。無料。
夏休みにCSSデザインを練習しよう!初心者向けミニ課題集
夏休みにCSSデザインを練習したい初心者向けのミニ課題6つを紹介。ボタン・カード・ナビバー・ホバーアニメーション等を難易度・所要時間・学べるプロパティ付きで解説。中高生向け。無料。
夏休みの自由研究にプログラミング!高校生向けテーマ5選
夏休みの自由研究にプログラミングを活用したい高校生向けに、テーマ5つを難易度・所要時間付きで紹介。API活用・データ可視化など発展的な内容で、情報Ⅰの評価にもつながります。無料。
夏休みにJavaScriptでゲームを作ろう!初心者向けステップガイド
夏休みにJavaScriptでゲームを作りたい中学生・高校生向けのステップガイド。数当てゲーム→じゃんけん→クイズアプリの3段階でJavaScriptの基礎を楽しく学べます。無料・登録不要。
夏休みに情報Ⅰを予習しよう!プログラミングの基礎を先取り
夏休みに情報Ⅰを予習したい高校生向けガイド。プログラミングの基礎(変数・条件分岐・繰り返し・関数)を先取りする学習計画と、無料で学べるサイトを紹介。登録不要で今日から始められます。
情報Ⅰの授業に備えよう!事前に学んでおくべきこと
情報Ⅰの授業に備えて事前に学んでおくべきプログラミングの基礎を解説。中高生向け。
プログラミング部・パソコン部の活動アイデア10選
プログラミング部・パソコン部で取り組める活動アイデア10選。初心者から上級者まで。
HTMLで初めてのWebページを作る方法【5分で完成】
HTMLで初めてのWebページを作る手順を初心者向けに解説。VS Codeでファイルを作り、タグを書いてブラウザで表示するまでを5分で体験。
CSSでWebページにスタイルを付ける方法【初心者向け】
CSSでWebページに色やフォントを付ける手順を初心者向けに解説。CSSファイルの作成からHTMLへの読み込みまで。
JavaScriptでボタンクリックを動かす方法【初心者向け】
JavaScriptでボタンクリック時に動作する仕組みを初心者向けに解説。scriptタグからaddEventListenerまで。
GitHub Pagesで無料でWebサイトを公開する方法【初心者向け】
GitHub Pagesを使ってHTMLサイトを無料で公開する手順を初心者向けに解説。アカウント作成からデプロイまで。
VS Codeをインストールしてプログラミングを始める方法
VS Codeのダウンロードからインストール、日本語化、最初のファイル作成までを初心者向けに解説。Windows・Mac対応。
情報Ⅰのプログラミング対策|共通テストに役立つ無料学習サイト
大学入学共通テスト「情報Ⅰ」のプログラミング分野を無料で対策。変数・条件分岐・繰り返し・関数の基礎をゼロから学べます。中高生向け。
文化祭のウェブサイトを作ろう!HTML・CSSで簡単制作ガイド
文化祭・学園祭のウェブサイトをHTML・CSSで作る方法を解説。テンプレート付きで初心者でも簡単。中高生向け。
文化祭サイトにJavaScriptで動きをつけよう!
文化祭サイトにJavaScriptでカウントダウンタイマーやスライドショーを追加する方法。コピペで使えるコード付き。
CSS練習問題|初心者向け無料ドリル30問
CSSの練習問題30問。セレクタ・ボックスモデル・Flexbox・レスポンシブの知識を選択・入力・穴埋めで確認。中高生向け。無料。
JavaScript練習問題|初心者向け無料ドリル30問
JavaScriptの練習問題30問。変数・条件分岐・関数・DOM操作の知識を選択・入力・穴埋めで確認。中高生向け。無料。
夏休みの自由研究にプログラミング!Webサイトを作ってみよう
夏休みの自由研究にプログラミングでWebサイトを作る方法を中学生向けにわかりやすく解説。テーマの決め方・HTMLとCSSでの制作手順・完成作品の見せ方・レポートのまとめ方を紹介。
プログラミングで夏休みの宿題を効率化しよう
夏休みの宿題をプログラミングで効率化する方法を中学生・高校生向けに解説。計算ドリル自動採点ツール・英単語暗記アプリなど、HTMLやJSで作れる便利ツールのアイデアとコード例を紹介。
夏休みにHTMLを独学する方法【1週間で基礎マスター】
夏休みにHTMLを独学で学ぶ方法を初心者向けに解説。1日目〜7日目の学習スケジュール・必要な道具・無料の学習リソース・つまずきやすいポイントと対策を紹介。
夏休みにプログラミングを始めよう!中高生向け完全ガイド
夏休みにプログラミングを始めたい中学生・高校生向けの完全ガイド。必要な準備・HTML→CSS→JS学習スケジュール・無料で学べるサイト・夏休み中に作れる作品例を紹介。
中学生・高校生におすすめのプログラミング本5選【2026年版】
中学生・高校生向けプログラミング本のおすすめ5冊を紹介。HTML・CSSの入門書からJavaScriptの基礎、プログラミング的思考を育てる本まで、自分で学びたい中高生に最適な書籍を厳選。
ウェブエンジニアになりたい中学生・高校生におすすめのプログラミング本5選
ウェブエンジニアになりたい中学生・高校生向けに、プログラミング本を5冊厳選して紹介。HTML・CSSの入門からJavaScript、ウェブの仕組みまで、職業につながる書籍選びを解説。
HTMLとは?初心者向けにわかりやすく解説【中高生向け】
HTMLとは何かをわかりやすく解説。タグの書き方・基本構造をゼロから学べます。
CSSとは?初心者向けにわかりやすく解説【中高生向け】
CSSを使ってWebページをデザインする方法を初心者向けに解説。
JavaScriptとは?初心者向けにわかりやすく解説【中高生向け】
JavaScriptの基本をゼロから解説。ボタンクリックで動くページの作り方を説明します。
HTMLタグ一覧【初心者がよく使う20選】
初心者がよく使うHTMLタグ20個を一覧で解説。各タグの使い方をコード例付きで説明します。
中学生がプログラミングを始める方法【無料で学べる】
中学生がプログラミングを無料で始める方法を解説。おすすめの学習順序を紹介します。
HTMLとCSSの違いをわかりやすく解説【初心者向け】
HTMLとCSSの違いを初心者向けにわかりやすく解説。それぞれの役割と使い方を説明します。
VS Codeのインストール方法【初心者向け図解】
VS Codeのインストール方法を初心者向けに解説。Windows・Mac対応。
Webプログラミング学習ロードマップ【中高生向け】
HTML・CSS・JavaScriptをどの順番で学べばいいか、ロードマップ形式で紹介します。
HTML練習問題10選【初心者向け】
HTML練習問題を10問まとめました。タグの書き方・リンク・画像など手を動かして学べます。
CSSフレックスボックス入門【初心者向けわかりやすい解説】
flexboxの使い方を初心者向けに解説。横並び・中央揃えなどよく使うレイアウトをコード例で学べます。
JavaScriptでHTMLを操作する方法【DOM入門】
JavaScript DOMの基本を初心者向けに解説。getElementById・querySelector・textContentなどをコード例で学べます。
レスポンシブデザインの作り方【初心者向け】
レスポンシブCSSの作り方を初心者向けに解説。メディアクエリの書き方・スマホ対応の基本をコード例で学べます。
HTMLフォームの作り方【input・button解説】
HTMLフォームの作り方を初心者向けに解説。input・button・label・selectなどのタグの使い方をコード例で学べます。
JavaScriptのイベント処理入門【onclick解説】
JavaScript onclickの使い方を初心者向けに解説。addEventListener・クリック・キーボードイベントをコード例で学べます。
CSSアニメーションの作り方【初心者向け】
CSSアニメーションの作り方を初心者向けに解説。transitionとanimation(@keyframes)の違いと使い方をコード例で学べます。
中高生がプログラミングを学ぶメリット5選
プログラミングを学ぶ理由・中学生にとってのメリットを5つ解説。将来の仕事・思考力・創造力など今から学ぶべき理由を紹介します。
HTMLリンクの作り方【aタグ完全解説】
HTMLリンクの作り方を初心者向けに解説。aタグのhref・target・rel属性の使い方、別タブで開く方法をコード例で学べます。
CSSで色を指定する方法【カラーコード解説】
CSS色の指定方法を初心者向けに解説。カラーコード(16進数)・rgb・hsl・色名の書き方と使い分けをコード例で学べます。
JavaScriptの配列入門【初心者向け】
JavaScript配列の使い方を初心者向けに解説。配列の作り方・要素の取得・追加・削除・ループ処理をコード例で学べます。
中高生がWebポートフォリオを作る方法
ポートフォリオの作り方を中学生・高校生向けに解説。HTMLとCSSで自分の作品集ページを作る手順と掲載すべき内容を紹介します。
HTMLテーブルの作り方【table・tr・td解説】
HTMLテーブルの作り方を初心者向けに解説。table・tr・th・tdタグの使い方、セルの結合、CSSでのデザイン方法をコード例で学べます。
CSSグリッドレイアウト入門【初心者向け】
CSSグリッドの使い方を初心者向けに解説。display:grid・grid-template-columns・gapの書き方とレイアウトパターンをコード例で学べます。
JavaScriptの関数入門【function解説】
JavaScript関数の使い方を初心者向けに解説。functionの書き方・引数・戻り値・アロー関数をコード例でわかりやすく学べます。
GitHub Pagesで無料公開する方法【初心者向け】
GitHub Pagesの使い方を初心者向けに解説。HTMLファイルを無料でインターネットに公開する手順をステップごとに説明します。
HTMLで画像を表示する方法【imgタグ解説】
HTML画像の表示方法を初心者向けに解説。imgタグのsrc・alt・width・height属性の使い方、パスの書き方をコード例で学べます。
CSSのmarginとpaddingの違いをわかりやすく解説
margin paddingの違いを初心者向けにわかりやすく解説。ボックスモデルの仕組みと余白の使い分け方をコード例で学べます。
JavaScriptのif文入門【条件分岐をわかりやすく】
JavaScript if文の使い方を初心者向けに解説。if・else if・elseの書き方、比較演算子、論理演算子をコード例で学べます。
初心者がプログラミング言語を選ぶ方法
プログラミング言語の選び方を初心者向けに解説。目的別のおすすめ言語と中学生が最初に学ぶべき言語を紹介します。
HTMLセマンティックタグとは?SEOにも重要な理由
HTMLセマンティックタグの意味と使い方を初心者向けに解説。header・main・footer・article・sectionなどの役割を説明します。
CSSセレクターの使い方【初心者向け完全解説】
CSSセレクターの使い方を初心者向けに完全解説。要素・クラス・ID・子孫・擬似クラスなどをコード例でわかりやすく学べます。
HTMLの見出しタグ(h1〜h6)の使い方【初心者向け】
HTML見出しh1〜h6タグの使い方を初心者向けに解説。正しい使い分け・SEOへの影響・アクセシビリティの観点からわかりやすく説明します。
CSSでフォントを変える方法【font-family解説】
CSSフォントの変え方を初心者向けに解説。font-family・font-size・font-weight・Google Fontsの使い方をコード例で学べます。
JavaScriptの変数入門【let・const・varの違い】
JavaScript変数 let・const・varの違いを初心者向けに解説。それぞれの使い分けと現代のベストプラクティスをコード例で学べます。
HTMLのdivとspanの違いをわかりやすく解説
HTML div spanの違いを初心者向けにわかりやすく解説。ブロック要素とインライン要素の違い、使い分けの基準をコード例で学べます。
CSSのhoverで動きをつける方法【初心者向け】
CSS hoverの使い方を初心者向けに解説。マウスを乗せたときの色変化・拡大・影などの動きをtransitionと組み合わせてコード例で学べます。
JavaScriptの文字列操作入門【初心者向け】
JavaScript文字列の操作方法を初心者向けに解説。length・slice・includes・replace・split・テンプレートリテラルをコード例で学べます。
HTMLのmetaタグとは?SEOに重要な理由【初心者向け】
HTML metaタグの種類と書き方を初心者向けに解説。charset・viewport・description・OGPなど、SEOに重要なmetaタグをわかりやすく説明します。
CSSのpositionプロパティ完全解説【初心者向け】
CSS positionの使い方を初心者向けに解説。static・relative・absolute・fixed・stickyの違いと使い分けをコード例でわかりやすく学べます。
JavaScriptのオブジェクト入門【初心者向け】
JavaScriptオブジェクトの使い方を初心者向けに解説。オブジェクトの作り方・プロパティの取得・追加・削除・メソッドをコード例で学べます。
Webアクセシビリティとは?中高生向けにわかりやすく解説
アクセシビリティWebの意味を初心者向けに解説。なぜ重要か・具体的な対応方法(alt属性・aria-label・カラーコントラストなど)を説明します。
HTMLのコメントアウトの書き方【初心者向け】
HTMLコメントの書き方を初心者向けに解説。コメントアウトの使い方・メモとしての活用・一時的に非表示にする方法をコード例で学べます。
CSSメディアクエリの使い方【レスポンシブ対応】
CSSメディアクエリの使い方を初心者向けに解説。@mediaの書き方・ブレークポイントの設定・モバイルファーストの考え方をコード例で学べます。
JavaScriptのループ処理入門【for・while解説】
JavaScriptループ for・whileの使い方を初心者向けに解説。for文・while文・for...of・forEachの違いと使い分けをコード例で学べます。
Webデザインの色の選び方【初心者向け配色入門】
Webデザインの色の選び方を初心者向けに解説。配色の基本・カラーパレットの作り方・ツールの使い方をわかりやすく説明します。
プログラミングを学ぶと将来どんな仕事ができる?【中高生向け】
プログラミングを学ぶと将来どんな仕事ができるか、中学生・高校生向けにわかりやすく解説。職種別に紹介します。
HTMLリストの作り方【ul・ol・li完全解説】
HTML リスト ul・ol・liタグの使い方を初心者向けに完全解説。箇条書き・番号付きリスト・ネストの方法・CSSでのデザインをコード例で学べます。
CSSの背景設定完全解説【background-color・image】
CSS背景の設定方法を初心者向けに完全解説。background-color・background-image・background-size・グラデーションをコード例で学べます。
JavaScriptの数値・計算入門【初心者向け】
JavaScript数値と計算の方法を初心者向けに解説。四則演算・Math関数・parseInt・parseFloat・数値と文字列の変換をコード例で学べます。
HTMLのブロック要素とインライン要素の違い
HTMLブロック要素とインライン要素の違いを初心者向けに解説。それぞれの特徴・代表的なタグ・CSSでの切り替え方をコード例で学べます。
CSSトランジションで動きをつける方法【初心者向け】
CSS transitionの使い方を初心者向けに解説。transitionプロパティの書き方・duration・timing-functionをコード例でわかりやすく学べます。
JavaScriptの真偽値(boolean)入門【初心者向け】
JavaScript boolean true falseの使い方を初心者向けに解説。真偽値の基本・比較演算子・論理演算子・truthy/falsyをコード例で学べます。
ブラウザの開発者ツールの使い方【初心者向け】
開発者ツールの使い方をChrome初心者向けに解説。Elements・Console・Networkパネルの基本操作、CSSのリアルタイム編集をわかりやすく説明します。
CSSのoverflowプロパティ解説【スクロール・非表示】
CSS overflowの使い方を初心者向けに解説。visible・hidden・scroll・autoの違いと使い分け、テキストの省略をコード例で学べます。
JavaScriptのスコープとは?初心者向けにわかりやすく解説
JavaScriptスコープの意味を初心者向けに解説。グローバル・ローカル・ブロックスコープの違いと変数が使える範囲をコード例で学べます。
新学期からプログラミングを始める中高生へ【完全ガイド】
新学期・4月からプログラミングを始めたい中高生向け。学習計画・部活との両立を紹介。
春休みに初めてのWebサイトを作ろう!1週間チャレンジ
春休みの1週間でWebサイトを作る7日間のステップバイステップガイド。中高生向け。
HTMLの特殊文字・文字参照の書き方【初心者向け】
HTML特殊文字のエスケープ方法を初心者向けに解説。&・<・>・ などの文字参照(HTMLエンティティ)の書き方をコード例で学べます。
CSSカスタムプロパティ(変数)の使い方【初心者向け】
CSS変数(カスタムプロパティ)の使い方を初心者向けに解説。--変数名の定義・var()での使用・テーマカラーの管理をコード例で学べます。
JavaScriptのエラー処理入門【try・catch解説】
JavaScriptエラー処理 try・catchの使い方を初心者向けに解説。try・catch・finally・throwの書き方とエラーの種類をコード例で学べます。
HTTPSとは?Webセキュリティの基本を中高生向けに解説
HTTPSとは何かをセキュリティの観点から初心者向けに解説。HTTPとの違い・SSL/TLS・なぜHTTPSが重要なのかをわかりやすく説明します。
HTMLのinputタイプ一覧【type属性完全解説】
HTML input typeの一覧を初心者向けに完全解説。text・email・password・checkbox・radio・date・fileなど全タイプの使い方をコード例で学べます。
プログラミング学習が続かない人へ【継続のコツ5選】
プログラミングが続かない・挫折しそうな人へ、継続のコツを5つ紹介します。モチベーション維持・学習習慣の作り方を中高生向けに解説します。
HTMLのclassとidの違いをわかりやすく解説
HTML class idの違いを初心者向けにわかりやすく解説。classとidの使い分け・CSSでの指定方法・JavaScriptからの取得方法をコード例で学べます。
CSSの詳細度(優先順位)をわかりやすく解説
CSS詳細度(優先順位)を初心者向けにわかりやすく解説。セレクターの強さの計算方法・!importantの使い方・詳細度の競合を解決する方法をコード例で学べます。
JavaScriptのコールバック関数入門【初心者向け】
JavaScriptコールバック関数を初心者向けに解説。コールバックとは何か・addEventListener・setTimeoutでの使い方をコード例でわかりやすく学べます。
HTMLのパス(相対パス・絶対パス)の書き方
HTMLパス(相対パス・絶対パス)の書き方を初心者向けに解説。src・hrefでのファイルパスの指定方法、../の意味、ルートパスの使い方をコード例で学べます。
CSSのbox-shadowで影をつける方法【初心者向け】
CSS box-shadowの使い方を初心者向けに解説。影の方向・ぼかし・広がり・色の指定方法、insetで内側の影をつける方法をコード例で学べます。
JavaScriptのテンプレートリテラル入門
JavaScriptテンプレートリテラルの使い方を初心者向けに解説。バッククォートの書き方・変数の埋め込み・改行・式の評価をコード例で学べます。
DNSとは?ドメインとIPアドレスの仕組みを解説
DNSとは何かをドメインとIPアドレスの仕組みから初心者向けに解説。名前解決の流れ・DNSサーバーの役割・ドメインの種類をわかりやすく説明します。
CSSのtext-decorationで文字を装飾する方法
CSS text-decorationの使い方を初心者向けに解説。下線・打ち消し線・上線の追加、リンクの下線を消す方法、色・スタイル・太さの指定をコード例で学べます。
JavaScriptのMathオブジェクト入門【計算・乱数】
JavaScript Mathオブジェクトの使い方を初心者向けに解説。Math.round・floor・ceil・abs・max・min・randomなどをコード例でわかりやすく学べます。
プログラミング学習で大切な考え方【初心者向け】
プログラミングを学ぶ初心者に大切な考え方を解説。エラーへの向き合い方・小さく始める・手を動かす・検索力を鍛えるなどのマインドセットを紹介します。
HTMLのDOCTYPE宣言とは?書き方と意味を解説
HTML DOCTYPEの書き方と意味を初心者向けに解説。なぜ必要なのか・書かないとどうなるか・HTML5での正しい書き方をコード例でわかりやすく学べます。
CSSの擬似クラス(:hover・:focus等)完全解説
CSS擬似クラス hover・focusの使い方を初心者向けに完全解説。:hover・:focus・:active・:nth-child・:not など主要な擬似クラスをコード例で学べます。
JavaScriptのPromise入門【非同期処理をわかりやすく】
JavaScript Promise非同期処理を初心者向けにわかりやすく解説。Promiseとは何か・then・catch・async/awaitの書き方をコード例で学べます。
HTMLのheadタグに書くべき内容まとめ
HTML headタグに書くべき内容を初心者向けにまとめて解説。charset・viewport・title・description・OGP・favicon・CSSの読み込みをコード例で学べます。
CSSカスタムプロパティ(変数)の実践的な使い方
CSS変数(カスタムプロパティ)の実践的な使い方を解説。テーマカラーの管理・ダークモード対応・JavaScriptからの操作をコード例で学べます。
JavaScriptのfetch入門【APIからデータを取得する方法】
JavaScript fetch APIの使い方を初心者向けに解説。fetchでデータを取得する方法・async/awaitとの組み合わせ・エラーハンドリングをコード例で学べます。
Cookieとは?仕組みとプライバシーへの影響を解説
Cookieとは何かを仕組みから初心者向けに解説。Cookieの役割・セッションCookieと永続Cookie・サードパーティCookie・プライバシーへの影響を説明します。
CSSのdisplayプロパティ完全解説【block・inline・flex】
CSS displayの使い方を初心者向けに完全解説。block・inline・inline-block・flex・grid・noneの違いと使い分けをコード例でわかりやすく学べます。
JavaScriptのlocalStorage入門【データを保存する方法】
JavaScript localStorageの使い方を初心者向けに解説。setItem・getItem・removeItem・clearの使い方、JSONとの組み合わせをコード例で学べます。
プログラミング初心者が最初にやるべきこと5選
プログラミング初心者が最初に何をすべきか5つ解説。目的決め・環境構築・Hello World・毎日続ける習慣・作りたいものを決めるコツを紹介します。
HTMLテーブルの応用【colspan・rowspan・caption解説】
HTML テーブル colspan・rowspanの使い方を初心者向けに解説。セルの結合・captionでのタイトル追加・scope属性によるアクセシビリティ向上をコード例で学べます。
CSSのnth-childセレクタの使い方【初心者向け】
CSS nth-childの使い方を初心者向けに解説。偶数・奇数・3の倍数・特定の番号など、nth-childの数式の書き方と実践的な使い方をコード例で学べます。
JavaScriptのスプレッド構文入門【...の使い方】
JavaScriptスプレッド構文(...)の使い方を初心者向けに解説。配列のコピー・結合・関数への展開・オブジェクトのコピーをコード例で学べます。
HTMLでアクセシビリティを高める方法【aria属性解説】
HTML アクセシビリティ aria属性の使い方を初心者向けに解説。aria-label・aria-hidden・aria-live・role属性の使い方をコード例でわかりやすく学べます。
CSSのcalc()関数の使い方【動的な計算をCSSで】
CSS calc()の使い方を初心者向けに解説。異なる単位の計算・レスポンシブレイアウトへの活用・min()・max()・clamp()との組み合わせをコード例で学べます。
JavaScriptの分割代入入門【配列・オブジェクト】
JavaScript分割代入の使い方を初心者向けに解説。配列の分割代入・オブジェクトの分割代入・デフォルト値・関数の引数での使い方をコード例で学べます。
Web APIとは?初心者向けにわかりやすく解説
Web APIとは何かを初心者向けにわかりやすく解説。APIの仕組み・REST API・JSONとは・実際のAPIの使い方・無料で使えるAPIの紹介をコード例で学べます。
CSSのclip-pathで図形を作る方法【初心者向け】
CSS clip-pathの使い方を初心者向けに解説。circle・ellipse・polygon・insetで三角形・六角形・斜め切りなどの図形を作る方法をコード例で学べます。
JavaScriptのアロー関数入門【=>の使い方】
JavaScriptアロー関数(=>)の使い方を初心者向けに解説。通常の関数との違い・省略記法・コールバックでの活用をコード例でわかりやすく学べます。
プログラミング学習の成果をポートフォリオにまとめる方法
プログラミングポートフォリオの作り方を解説。何を載せるか・GitHubの活用・GitHub Pagesでの公開・ポートフォリオの作り方を中高生向けに紹介します。
HTMLで動画・音声を埋め込む方法【video・audio解説】
HTML video・audioタグの使い方を初心者向けに解説。動画・音声の埋め込み方法・controls属性・autoplay・loop・poster・複数フォーマットの指定をコード例で学べます。
CSSのfilterプロパティで画像を加工する方法
CSS filterの使い方を初心者向けに解説。blur・brightness・contrast・grayscale・sepia・hue-rotate・drop-shadowなどのフィルター効果をコード例で学べます。
JavaScriptのクラス入門【オブジェクト指向をわかりやすく】
JavaScriptクラスの使い方を初心者向けに解説。classの書き方・constructor・メソッド・継承(extends)・staticをコード例でわかりやすく学べます。
HTMLのpictureタグでレスポンシブ画像を実装する方法
HTML pictureタグのレスポンシブ画像実装方法を初心者向けに解説。pictureタグ・sourceタグ・srcset・WebP対応の方法をコード例で学べます。
CSSのscroll-snapでスクロールを制御する方法
CSS scroll-snapの使い方を初心者向けに解説。scroll-snap-type・scroll-snap-alignを使ったスライダー・フルページスクロールの実装をコード例で学べます。
JavaScriptの正規表現入門【初心者向けわかりやすい解説】
JavaScript正規表現の使い方を初心者向けに解説。正規表現の書き方・test・match・replace・よく使うパターン(メール・電話番号の検証)をコード例で学べます。
Webサイトの表示速度を改善する方法【初心者向け】
Webサイトの表示速度改善方法を初心者向けに解説。画像の最適化・遅延読み込み・CSSとJSの最適化・PageSpeed Insightsでの計測方法を説明します。
CSSのwriting-modeで縦書きを実装する方法
CSS縦書き writing-modeの使い方を初心者向けに解説。vertical-rl・vertical-lr・横書きと縦書きの切り替え・縦書きレイアウトの実践例をコード例で学べます。
JavaScriptのモジュール入門【import・export解説】
JavaScriptモジュール import・exportの使い方を初心者向けに解説。named export・default export・import文の書き方をコード例でわかりやすく学べます。
プログラミング学習を続けるためのコミュニティ活用法
プログラミングコミュニティの活用法を解説。学習を続けるためのコミュニティの選び方・Discord・Twitter・勉強会など、仲間と学ぶ方法を紹介します。
冬休みにプログラミングを始めよう!中高生向け完全ガイド
冬休みの2週間でHTML・CSS・JSの基礎を学ぶスケジュールと作品例を紹介。中高生向け。
冬休みの自由課題にHTMLでポートフォリオを作ろう
冬休みの自由課題にHTMLとCSSでポートフォリオサイトを作る方法を解説。中高生向け。
新年の目標にプログラミング!初心者が3ヶ月で作れるもの
1月〜3月の学習ロードマップと月ごとの目標設定、3ヶ月で作れる作品例を紹介。中高生向け。
冬休みにJavaScriptでミニゲームを作ろう
おみくじ→カウンター→クイズの段階的な制作手順を中高生向けにやさしく紹介。