HTML・CSS・JavaScriptを、むずかしい言葉を抜きにゼロから学べる、はじめての人のためのプログラミング学習サイト。https://piyogramming.com/jahttps://piyogramming.com/ja/knowledge/tips/color-palette/https://piyogramming.com/ja/knowledge/tips/color-palette/「色を決めるのが苦手…」は、道具で解決できます。できあいから選ぶ・眺めるだけ・主役の色から組み立てる・実物で確かめる・グラデーションのタイプ別に、画面つきで配色サイトをたっぷり紹介します。Tue, 13 Oct 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/horizontal-scroll/https://piyogramming.com/ja/knowledge/tips/horizontal-scroll/スマホで見ると右に白い余白ができて横にゆれる。原因は「画面より幅の広い要素が1つある」ことです。はみ出している犯人を開発者ツールで見つける方法と、よくある原因6つの直し方をまとめました。Tue, 13 Oct 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/image-not-showing/https://piyogramming.com/ja/knowledge/tips/image-not-showing/imgタグを書いたのに画像が出ない、壊れたアイコンや代替テキストだけが表示される。その原因のほとんどはパスのまちがいです。開発者ツールで原因を確かめる方法と、よくある7つの原因をチェックリストにしました。Tue, 13 Oct 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/image-resources/https://piyogramming.com/ja/knowledge/tips/image-resources/ページに写真やイラストが1枚入るだけで、見た目が“それっぽく”なります。無料で使えるイラスト・写真の素材サイトをタイプ別に画面つきで紹介。ライセンス（使っていい範囲）の見方もまとめました。Tue, 13 Oct 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/js-not-working/https://piyogramming.com/ja/knowledge/tips/js-not-working/ボタンを押しても何も起きない、書いたJavaScriptが動かない。その原因は「届いていない・エラーで止まっている・要素が見つからない・処理の中身がちがう」の4つに分けられます。上から順に切り分ける手順をまとめました。Tue, 13 Oct 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/null-addeventlistener/https://piyogramming.com/ja/knowledge/tips/null-addeventlistener/JavaScriptで要素を探したのに見つからず、nullに対してaddEventListenerを呼んだときに出るエラーです。原因は「scriptの位置」か「セレクタのまちがい」のどちらかがほとんど。見分け方と直し方をまとめました。Tue, 13 Oct 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/flexbox-cheatsheet/https://piyogramming.com/ja/knowledge/tips/flexbox-cheatsheet/「あれ、justify-contentとalign-itemsどっちだっけ？」に答える早見表。Flexboxの全プロパティを、その場で値を切り替えられる動くデモつきで整理しました。Wed, 12 Aug 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/articles/git/branches/https://piyogramming.com/ja/articles/git/branches/「大きく作りかえたいけど、いま動いているものは壊したくない」を叶えるのがブランチです。枝を分けて試し、うまくいったら合流させる。作り方から合体（マージ）、コンフリクトの直し方までまとめました。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/first-commit/https://piyogramming.com/ja/articles/git/first-commit/自分のサイトのフォルダをGitで管理して、最初の記録（コミット）を残すまで。addとcommitが分かれている理由も、荷物の箱詰めにたとえて腑に落ちるように説明します。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/github-pages/https://piyogramming.com/ja/articles/git/github-pages/GitHubに置いたリポジトリは、設定を数クリックするだけでそのままWebサイトになります。公開手順・URLの形・pushするたび自動で更新される仕組みと、真っ白になったときの原因を解説します。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/github-push/https://piyogramming.com/ja/articles/git/github-push/手元のコミットをGitHubへ送るまでの流れを、アカウント作成・リポジトリ作成・リモート登録・pushの順に通しで解説。つまずきやすい認証（パスワードが通らない問題）の解決法もまとめました。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/gitignore/https://piyogramming.com/ja/articles/git/gitignore/node_modulesや.DS_Store、パスワードの入ったファイルなど、Gitに入れてはいけないものがあります。.gitignoreの書き方と、うっかり記録してしまったときの外し方をまとめました。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/install-git/https://piyogramming.com/ja/articles/git/install-git/WindowsとMacそれぞれのGitの入れかたと、必ず最初にやる名前・メールアドレスの設定までを1本にまとめました。うまく入ったかの確認コマンドと、つまずいたときの対処つきです。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/undo-changes/https://piyogramming.com/ja/articles/git/undo-changes/「保存したけど元に戻したい」「addを取り消したい」「コミットメッセージを打ちまちがえた」。Gitで戻すやり方は状況ごとに違います。初心者が本当に使う4つだけを、危険度つきで整理しました。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/git/what-is-git/https://piyogramming.com/ja/articles/git/what-is-git/「最終_v2_ほんとの最終.html」を作らなくてよくなる道具、それがGitです。変更を記録して前の状態に戻せる仕組みと、よく混同されるGitHubとの違いを、はじめての人向けにやさしく整理します。Mon, 27 Jul 2026 00:00:00 GMTGit・GitHubhttps://piyogramming.com/ja/articles/javascript/fetch/https://piyogramming.com/ja/articles/javascript/fetch/天気やニュースなど、外のデータをページに表示する入口がfetchです。「時間がかかる処理を待つ」という考え方から、書き方の型、失敗したときの備えまでをまとめました。Mon, 27 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/input-value/https://piyogramming.com/ja/articles/javascript/input-value/入力欄に書かれた文字は、valueで受け取れます。名前を入れるとあいさつが変わるページを例に、取り出し方・空のときの対処・数として計算したいときの注意までまとめました。Mon, 27 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/json/https://piyogramming.com/ja/articles/javascript/json/Webのデータはほとんどが「JSON」という形でやりとりされます。オブジェクトとそっくりなのに別物である理由と、文字とデータを行き来する2つの命令をまとめました。Mon, 27 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/local-storage/https://piyogramming.com/ja/articles/javascript/local-storage/ページを閉じても消えないメモ帳がブラウザには付いています。localStorageで値を保存・読み出し・削除する書き方と、「文字しか入らない」「入れてはいけないもの」の注意までまとめました。Mon, 27 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/objects/https://piyogramming.com/ja/articles/javascript/objects/配列が「番号つきの棚」なら、オブジェクトは「ラベルつきの引き出し」。名前・すきなもの・年齢のように、種類の違う値をひとまとめにして持てます。Mon, 27 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/knowledge/tips/access-analytics/https://piyogramming.com/ja/knowledge/tips/access-analytics/何人が見に来て、どのページが読まれているか。個人サイトに入れやすい無料のアクセス解析2つを、設置のしやすさとプライバシーの観点で比べました。最初に見るべき数字も解説します。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/class-naming/https://piyogramming.com/ja/knowledge/tips/class-naming/red、box2、aaaのような名前しか出てこないのは、クラス名を「見た目」で付けようとしているからです。役割で名づける考え方と、定番のルールBEMの読み方・書き方をまとめました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/contact-form-send/https://piyogramming.com/ja/knowledge/tips/contact-form-send/HTMLで作ったフォームは、そのままでは送信先がなく届きません。サーバーを用意せずにメールを受け取れる無料サービス3つを、実際の書き方つきで比べました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/form-validation/https://piyogramming.com/ja/knowledge/tips/form-validation/空のまま送信された、メールアドレスが「あ」だった。そんなミスを防ぐ入力チェックは、HTMLの属性だけでかなりできます。標準機能の使い方、CSSでの見せ方、JSでの独自チェックまでまとめました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/mobile-preview/https://piyogramming.com/ja/knowledge/tips/mobile-preview/パソコンで完璧でも、スマホで見ると崩れていることがあります。開発者ツールのデバイスモード・同じWi-Fiで実機から見る方法・公開して見る方法の3つと、実機でしか分からない差をまとめました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/page-speed/https://piyogramming.com/ja/knowledge/tips/page-speed/重いサイトの原因は、ほとんどが画像です。loading="lazy"やwidth・heightの指定など、HTMLとCSSだけでできる改善5つと、PageSpeed Insightsでの測り方をまとめました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/search-console/https://piyogramming.com/ja/knowledge/tips/search-console/公開したページが検索に出ているかは、Search Consoleで分かります。無料の登録手順、所有権の確認方法、最初に見るべき2つの画面、「登録されていません」と出たときの対処までまとめました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/seo-basics/https://piyogramming.com/ja/knowledge/tips/seo-basics/検索結果に出るのはページの2行だけ。titleとmeta descriptionをどう書くと選ばれるのか、文字数の目安・実際の見え方・やってはいけない書き方まで、はじめての人向けにまとめました。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/terminal-basics/https://piyogramming.com/ja/knowledge/tips/terminal-basics/黒い画面が怖いのは「今どこにいるか分からない」から。pwd・ls・cdなど最初の5つだけ覚えれば、Gitやnpmのチュートリアルはそのままなぞれるようになります。WindowsとMacの違い、Tabキー補完のコツつき。Mon, 27 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/ai-hallucination/https://piyogramming.com/ja/knowledge/tips/ai-hallucination/AIはもっともらしい間違いを自信たっぷりに答えることがあります（ハルシネーション）。間違いに気づく3つの習慣と、「写す」だけで終わらせない学習でのAIとの距離感をまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/ai-question-tips/https://piyogramming.com/ja/knowledge/tips/ai-question-tips/同じ質問でも、聞き方しだいでAIの答えの質は大きく変わります。「やりたいこと・現状・コード」の3点セットで聞くコツ、エラーの聞き方、コピペで使える質問テンプレを紹介します。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-not-applied/https://piyogramming.com/ja/knowledge/tips/css-not-applied/「書いたのに見た目が変わらない」の原因は4つに分けられます。届いていない・選べていない・負けている・そもそも効かない。上から順に切り分ける手順を、開発者ツールの見かたつきでまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/devtools-basics/https://piyogramming.com/ja/knowledge/tips/devtools-basics/右クリック→「検証」で出てくるあの画面、Web制作でいちばん使う道具です。HTMLをのぞく・CSSをその場でいじる・エラーを読む。最初に覚えるべきこの3つだけに絞って紹介します。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/image-compression/https://piyogramming.com/ja/knowledge/tips/image-compression/ページが遅い原因のほとんどは重い画像。アップロード前にブラウザだけで圧縮できる無料ツール2つと、「そもそも何KBを目指すか」の目安をまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/image-formats/https://piyogramming.com/ja/knowledge/tips/image-formats/写真はJPG？PNG？WebPって何？Webサイトで使う画像形式の違いと使い分けを1枚の表に整理しました。迷ったときの答えと、その理由をまとめています。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/jquery-or-not/https://piyogramming.com/ja/knowledge/tips/jquery-or-not/結論、新しく学ぶ必要はありません。ただし「読める」と得をします。jQueryが解決していたことと、それが今の素のJavaScriptでどう置きかわったか、どこで出会うかを整理しました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/jquery-reading/https://piyogramming.com/ja/knowledge/tips/jquery-reading/書けなくていい、でも読めると困らない。$()が何をしているか、メソッドをつなげる書き方の意味、よく出る20個の素のJavaScript対応表を、既存サイトを触る人向けにまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/mojibake/https://piyogramming.com/ja/knowledge/tips/mojibake/ブラウザで開いたら「譁�蟄怜喧縺�」。日本語が記号の羅列になる文字化けは、原因が2つしかありません。metaタグと保存形式、2か所の確認だけで直せます。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/reading-errors/https://piyogramming.com/ja/knowledge/tips/reading-errors/エラーは「失敗」ではなく「ここが直せばいいよ」というお知らせです。赤い文字にビビらず読むコツ、原因を落ち着いて探す手順、そのまま検索して答えを見つける方法を紹介します。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/relative-paths/https://piyogramming.com/ja/knowledge/tips/relative-paths/「画像が表示されない」「リンクが開かない」の原因No.1は、たいていパスの書きまちがいです。同じフォルダ・下のフォルダ・上のフォルダへの書き方と、絶対パスとの違いを整理します。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/roadmap/https://piyogramming.com/ja/knowledge/tips/roadmap/「ホームページを自分で作りたいけど、何から始めればいいか分からない」。そんな人のための、学ぶ順番の地図。HTML・CSS・JavaScriptを、この順で・この理由で学ぶ、を1本にまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/sass-today/https://piyogramming.com/ja/knowledge/tips/sass-today/変数もネストも素のCSSで書ける今、Sassを新しく学ぶ優先度は下がりました。何が素のCSSに取りこまれ、何がまだSassの独自機能なのかを対応表で整理し、.scssを読むときのコツもまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/shortcuts/https://piyogramming.com/ja/knowledge/tips/shortcuts/保存、コメント、行のコピー、複数カーソル。マウスに手をのばす回数が減るだけで、コーディングのテンポは驚くほど上がります。初心者がまず得する厳選ショートカットをMac/Windows両対応で。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/vscode-japanese/https://piyogramming.com/ja/knowledge/tips/vscode-japanese/英語だらけのVSCodeは、拡張機能を1つ入れるだけで日本語になります。2分で終わる手順と、「日本語にならない」「急に英語に戻った」ときの直し方をまとめました。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/vscode-themes/https://piyogramming.com/ja/knowledge/tips/vscode-themes/コードを書く画面の色を変えるだけで、見やすさも気分も変わります。定番のダーク系からライト系、個性派まで、画面つきで紹介します。Sun, 26 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/webp-convert/https://piyogramming.com/ja/knowledge/tips/webp-convert/WebPが軽いのは分かったけれど、どうやって変換する？無料・登録なしでできる変換方法を「1枚ずつていねいに」と「何十枚もまとめて」に分けて紹介。Windows・Macの標準アプリの対応もまとめました。Sat, 25 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/articles/wordpress/publish-wordpress/https://piyogramming.com/ja/articles/wordpress/publish-wordpress/WordPressの置き場所は3つ。ブラウザの中（Playground）・自分のパソコンの中（ローカル環境）・サーバーの上。消えない場所は無料でも手に入ります。目的別の選び方と、公開するときの費用感をまとめます。Sat, 25 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/css/background-image/https://piyogramming.com/ja/articles/css/background-image/背景に色ではなく写真や柄をしけるのがbackground-image。敷きつめる・1枚だけ置く・いっぱいに広げる、3つの敷き方を覚えよう。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/border/https://piyogramming.com/ja/articles/css/border/borderで枠線の太さ・種類・色をまとめて指定する方法。1辺だけに線をつけるborder-bottomなどの書き方と、ボタンや入力欄の枠線を消したいときのborder: none;まで、よく使う形をまとめました。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/border-radius/https://piyogramming.com/ja/articles/css/border-radius/border-radiusで角を丸くする方法。数字の大きさによる丸みの違い、50%でまんまるにするやり方、ボタンらしく見せる角丸、角ごとに違う丸みをつける書き方を、実際の表示で確かめながら学びます。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/box-shadow/https://piyogramming.com/ja/articles/css/box-shadow/ぺたっと貼りついたカードに、ふわっと影をつけるだけで宙に浮いたように見える。box-shadowで、ページに立体感をたそう。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/box-sizing/https://piyogramming.com/ja/articles/css/box-sizing/width:300pxにしたのに、なぜか箱が大きい。paddingやborderが外に足されるせい。box-sizingひとつで、見たままの幅に揃う。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/class-selector/https://piyogramming.com/ja/articles/css/class-selector/タグ名だと「全部」変わってしまう。この段落だけ・このボタンだけを狙うには、クラスという目印を使おう。狙った部品だけを変えられるようになります。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/colors/https://piyogramming.com/ja/articles/css/colors/CSSで文字色（color）と背景色（background-color）をつける方法。140種類以上ある色の名前、細かく指定できる色コード、背景色が要素の箱全体につく仕組み、配色に迷ったときの道具を紹介します。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/display/https://piyogramming.com/ja/articles/css/display/要素には、縦に積まれるブロックと文中に流れるインラインの2つの性格があります。見分け方、displayで性格を変える方法、display: noneとvisibility: hiddenの「消す」の違いまで、レイアウトの基本を整理します。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/flexbox/https://piyogramming.com/ja/articles/css/flexbox/メニューやカードを横に並べたい。そんなときの主役がFlexbox。親にdisplay:flexと書くだけで、子が横一列に。現代CSSの中心です。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/font-family/https://piyogramming.com/ja/articles/css/font-family/同じ文字でも、フォントが変わると印象はがらりと変わる。font-familyでフォントを指定し、ページ全体の質感を仕上げよう。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/grid/https://piyogramming.com/ja/articles/css/grid/CSS Gridで縦横そろった格子状のレイアウトを作る方法。grid-template-columnsで列の数と幅を決める書き方、fr単位での配分、justify-itemsとjustify-selfで格子の中の部品を寄せる方法を学びます。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/position/https://piyogramming.com/ja/articles/css/position/positionで要素をふつうの流れから外して置く方法。画面に貼りつくfixed、スクロールで追従するsticky、5つの値の違い、fixedで本文の頭が隠れる問題の直し方を、ヘッダーの例で学びます。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/selectors/https://piyogramming.com/ja/articles/css/selectors/CSSで「どこを変えるか」を指すセレクタの基本。タグ名での指定、カンマでいくつもまとめて指定する書き方、同じ指定がぶつかったときに後に書いたほうが勝つルールを、その場で動かして確かめます。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/spacing/https://piyogramming.com/ja/articles/css/spacing/余白をつけるmarginとpaddingの違いと使い分け。外側と内側の余白、隣どうしのmarginが足し算にならない相殺の仕組み、margin: 0 auto;で要素を真ん中に寄せる方法まで、図とデモで解説します。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/text-align/https://piyogramming.com/ja/articles/css/text-align/text-alignで文字のそろえ方を変える方法。左寄せ・中央・右寄せの書き方と、両端をそろえるjustifyの使いどころを紹介します。見出しを中央に、日付を右に寄せるといった、よく使う形を確かめます。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/text-decoration/https://piyogramming.com/ja/articles/css/text-decoration/大事なところは太く、リンクの下線は引いたり消したり。font-weightとtext-decorationで、文字そのものに"かざり"をつけよう。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/width-height/https://piyogramming.com/ja/articles/css/width-height/部品の大きさは、自分で決められる。widthで横幅、heightで高さ。%を使えば画面に合わせて伸び縮みもする、レイアウトの第一歩。Wed, 15 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/html/anchor-links/https://piyogramming.com/ja/articles/html/anchor-links/同じページの中の「あの場所」へジャンプ。idで目印をつけて、href="#..." で飛ぶ。長いページのメニューや「上に戻る」に大活躍。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/blockquote/https://piyogramming.com/ja/articles/html/blockquote/誰かの言葉や本の一節を「これは引用です」と示すタグ。blockquoteとqで、自分の言葉と借りた言葉をきちんと分けよう。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/div-and-span/https://piyogramming.com/ja/articles/html/div-and-span/divとspanの違いと使い分け。それ自体に意味はないけれど、タグをひとまとまりにする箱です。大きなまとまりのdiv、文中の一部を囲むspan、箱の中に箱を入れる書き方を、あとでCSSで飾る前提で学びます。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/emphasis/https://piyogramming.com/ja/articles/html/emphasis/strongとemで文章の一部を強調する方法。大事なところを示すstrong、声色を変えるように強調するemの違い、2つを重ねる書き方、強調を使いすぎないコツを、表示の違いとあわせて紹介します。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/entities/https://piyogramming.com/ja/articles/html/entities/<, &, © のような「そのままでは書けない・打ちにくい」文字。&lt; &amp; という書き方（実体参照）で、きちんと画面に出す方法を覚えよう。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/figure/https://piyogramming.com/ja/articles/html/figure/画像と、その下の「キャプション（説明文）」をひとまとまりにするタグ。figureとfigcaptionで、写真に一言そえよう。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/headings-and-paragraphs/https://piyogramming.com/ja/articles/html/headings-and-paragraphs/見出し（h1〜h6）と段落（p）の使い方。見出しが6段階ある理由、番号を飛ばさないルール、段落の書き方を学びます。文字の大きさではなく意味で選ぶことが、なぜ大事なのかも説明します。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/images/https://piyogramming.com/ja/articles/html/images/imgタグで画像を表示する方法。srcに画像の場所を書くときのパスの書き方、alt（代替テキスト）を書く理由と書き方を、例つきで解説します。画像が表示されないときに見直すポイントも押さえます。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/line-breaks/https://piyogramming.com/ja/articles/html/line-breaks/「ここで改行したい」「話題の切れ目に線を引きたい」。そんな小さな整えに使うbrとhr。はさまない“単独タグ”のはじめまして。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/lists/https://piyogramming.com/ja/articles/html/lists/ulとolで箇条書きのリストを作る方法。点つきリストと番号つきリストの使い分け、リストの中にリストを入れる入れ子の書き方、liの中に文章や画像を入れる使い方まで、よく使う形を紹介します。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/semantic-layout/https://piyogramming.com/ja/articles/html/semantic-layout/divは意味を持たない箱でした。でもページの大きなパーツ（上のヘッダー、メニュー、本文、下）には“意味を持つ箱”がある。ページの骨組みを組もう。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/what-is-tag/https://piyogramming.com/ja/articles/html/what-is-tag/HTMLの基本になるタグの書き方。開始タグと終了タグで文字をはさむ形、タグが表す「種類」の意味、タグの中にタグを入れる入れ子と、入れ子を交差させないルールを、例つきで解説します。Wed, 15 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/knowledge/tips/css-table-designs/https://piyogramming.com/ja/knowledge/tips/css-table-designs/線もすき間もない素の表が、CSS数行で料金表らしく変身。基本の3行からしましま模様・カード風・スマホ対応まで、動くデモつきで7個そろえました。Wed, 15 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/articles/accessibility/alt-text/https://piyogramming.com/ja/articles/accessibility/alt-text/altは「画像が見えないときの代役」。何をどこまで書けばいいのか、良い例と悪い例で身につけます。飾り画像のalt=""も。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/accessibility/color-contrast/https://piyogramming.com/ja/articles/accessibility/color-contrast/おしゃれな薄グレーの文字、じつは読めない人がたくさんいます。「文字色と背景色の差」をどう確保するか、目で見て身につけましょう。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/accessibility/focus-visible/https://piyogramming.com/ja/articles/accessibility/focus-visible/マウスを使わず、Tabキーでページを操作する人がいます。その人の「いまどこ？」を示すフォーカスの輪を、消さずに、かっこよく整えます。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/accessibility/form-labels/https://piyogramming.com/ja/articles/accessibility/form-labels/入力欄に「何を入れるか」を確実に伝えるのがlabel。読み上げに効くだけでなく、タップできる範囲も広がる、全員が得する1タグです。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/accessibility/heading-structure/https://piyogramming.com/ja/articles/accessibility/heading-structure/「大きい文字にしたいからh1」は事故のもと。見出しはページの目次。順番どおりに使うと、読み上げソフトにも検索エンジンにも伝わるページになります。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/accessibility/link-text/https://piyogramming.com/ja/articles/accessibility/link-text/「詳しくはこちら」のリンク、読み上げで聞くと「こちら、こちら、こちら…」。リンクとボタンの文言だけで行き先が分かるように直します。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/accessibility/what-is-accessibility/https://piyogramming.com/ja/articles/accessibility/what-is-accessibility/「だれでも使えるページ」を作るための考え方がアクセシビリティ。特別な対応ではなく、ページの品質そのものです。まずは全体像から。Sun, 12 Jul 2026 00:00:00 GMTアクセシビリティhttps://piyogramming.com/ja/articles/animation/hover-effects/https://piyogramming.com/ja/articles/animation/hover-effects/transitionとtransformを組み合わせて、カードが持ち上がる・影が濃くなるといった、よく見るホバー演出を作ります。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/js-triggered-animation/https://piyogramming.com/ja/articles/animation/js-triggered-animation/transitionや@keyframesは「クラスが付いた瞬間」にも発動できます。JSでクラスを付け外しして、クリックのタイミングで動きを始める方法です。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/keyframes/https://piyogramming.com/ja/articles/animation/keyframes/transitionは「乗せたら変わる」動きでした。@keyframesを使うと、乗せなくても自動でループする動きが作れます。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/reduced-motion/https://piyogramming.com/ja/articles/animation/reduced-motion/画面の動きで気分が悪くなる人がいます。OSの「動きを減らす」設定をCSSで受け取って、アニメーションをやさしく止める。動きを作る人の最後のたしなみです。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/scroll-animation/https://piyogramming.com/ja/articles/animation/scroll-animation/スクロールして画面に入った要素を、ふわっと表示する演出の作り方。CSSで現れる前と後の見た目を用意し、JavaScriptのIntersectionObserverで「見えたらクラスを付ける」だけで動かします。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/transform/https://piyogramming.com/ja/articles/animation/transform/大きさ・角度・位置を変える道具、transform。3つの関数scale・rotate・translateを、transitionと組み合わせて動かします。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/transition/https://piyogramming.com/ja/articles/animation/transition/色や大きさが「パッ」と切り替わるのを「ふわっ」に変えるtransitionの使い方。書き方、イージング（変化のリズム）、ちょうどいい時間、遅らせて始めるtransition-delay、アニメーションできないプロパティまで扱います。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/animation/what-is-animation/https://piyogramming.com/ja/articles/animation/what-is-animation/ボタンがふわっと広がる、メニューがすっと開く。Webの動きは何のためにあるのか、GIFや動画と何が違うのかを整理し、CSSのtransition・transform・keyframesで学ぶことの全体像を紹介します。Sun, 12 Jul 2026 00:00:00 GMTWebアニメーションhttps://piyogramming.com/ja/articles/css/absolute-positioning/https://piyogramming.com/ja/articles/css/absolute-positioning/カードの角に「NEW」バッジ、画像の上に文字。狙った場所にピタッと重ねる合わせ技が、親relative×子absolute。頻出パターンをここで。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/connect-css/https://piyogramming.com/ja/articles/css/connect-css/色や大きさを試す前に、まず"置き場所"から。CSSはstyle.cssに書いて<link>でつなぐ。これを先に押さえれば、次からはすぐ手を動かせる。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/css-variables/https://piyogramming.com/ja/articles/css/css-variables/テーマカラーを変えたくなったら、30か所ぜんぶ書き直し？いいえ、1か所で済む方法があります。色に「名前」をつけて使い回すCSS変数を覚えよう。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/dark-mode/https://piyogramming.com/ja/articles/css/dark-mode/夜のスマホは黒い画面が目にやさしい。OSの「ダークモード」設定をCSSで受け取って、ページの配色を自動で切りかえる方法を覚えよう。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/font-size/https://piyogramming.com/ja/articles/css/font-size/font-sizeで文字の大きさを変える方法。書き方と単位、指定しなくても見出しが最初から大きい理由、HTMLで正しいタグを選んでおくとCSSが書きやすくなる関係を、実際の表示で確かめます。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/media-queries/https://piyogramming.com/ja/articles/css/media-queries/画面の幅に合わせて見た目を切りかえるメディアクエリの書き方。横並びをスマホで縦積みにするいちばん多い使い方、効かせるために必要なviewportの指定、2つの条件で範囲を決める書き方までまとめました。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/css/what-is-css/https://piyogramming.com/ja/articles/css/what-is-css/CSSとは何かを、はじめての人向けに解説します。HTMLとの役割分担、見た目を別ファイルに分けるメリット、名前の意味、CSSでできることを、同じ内容を飾る前と後で見比べながらつかみます。Sun, 12 Jul 2026 00:00:00 GMTCSShttps://piyogramming.com/ja/articles/html/attributes/https://piyogramming.com/ja/articles/html/attributes/タグには“設定”を足せます。それが属性。hrefやalt……これから山ほど出てくる書き方を、いちばんやさしい形で先につかんでおこう。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/buttons-and-inputs/https://piyogramming.com/ja/articles/html/buttons-and-inputs/HTMLでボタン（button）と入力欄（input）を置く方法。ボタンとリンクの使い分け、文字を打ち込む入力欄のtypeの種類、valueで最初から文字を入れておく書き方を、実際にさわりながら学びます。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/choice-inputs/https://piyogramming.com/ja/articles/html/choice-inputs/自分で打つのではなく、用意された中から“選ぶ”入力。いくつでも選べるチェックボックス、ひとつだけのラジオ、ドロップダウンのセレクト。3つの選ばせ方を覚えよう。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/comments/https://piyogramming.com/ja/articles/html/comments/HTMLのコメント（<!-- -->）の書き方。画面には表示されないメモをコードに残す方法、どんなときに使うと便利か、VSCodeのショートカット（⌘ / Ctrl + /）で一発でコメントにする方法を紹介します。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/definition-list/https://piyogramming.com/ja/articles/html/definition-list/dl・dt・ddタグで「言葉とその説明」をセットで並べる方法。用語集の書き方、1つの言葉に説明を複数つける形、Q&Aへの応用まで、説明リストの使いどころを例つきで紹介します。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/document-structure/https://piyogramming.com/ja/articles/html/document-structure/タグを書き込む“紙”そのものにも、決まった形があります。htmlの中にheadとbody。すべてのHTMLファイルに共通する外枠を、ここでしっかり。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/embed/https://piyogramming.com/ja/articles/html/embed/YouTubeの動画やGoogleマップを、ページの中にまるごと映す。iframeを使えば、よそのページを“窓”のようにはめ込めます。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/forms/https://piyogramming.com/ja/articles/html/forms/formタグで入力欄やボタンをまとめて送る仕組みの基本。labelで何の欄かを示す書き方、送るデータに名前をつけるname、送り先を決めるactionまで、使いやすい入力フォームの組み立て方を学びます。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/head-and-meta/https://piyogramming.com/ja/articles/html/head-and-meta/画面には出ないけれど、文字化け・スマホ表示・検索結果・タブのアイコンを左右する大事な設定。headに入れるものを、ひととおりそろえよう。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/input-types/https://piyogramming.com/ja/articles/html/input-types/パスワード、メールアドレス、長い文章……用途に合わせて入力欄は姿を変えます。typeとplaceholder、そしてtextareaで、入力欄のバリエーションを増やそう。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/links/https://piyogramming.com/ja/articles/html/links/aタグでリンクを作る方法。ほかのサイトへのリンク、サイト内のページへのリンク、リンク文字の選び方、メールアドレスや電話番号へのリンクまで、hrefの書き方を例つきでまとめました。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/tables/https://piyogramming.com/ja/articles/html/tables/tableタグで表を作る方法。tr・th・tdの組み立て方、見出しのマス、captionで表に題名をつける書き方、colspanでマスを横につなげる方法、よくある間違いと直し方まで、小さな表から順に学びます。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/video-and-audio/https://piyogramming.com/ja/articles/html/video-and-audio/videoタグとaudioタグで、動画や音声をページに置く方法。再生ボタンを出すcontrols、自動再生や繰り返しなどよく足す属性、自動再生させるときに必要なmutedの指定まで、書き方をまとめました。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/html/what-is-html/https://piyogramming.com/ja/articles/html/what-is-html/HTMLとは何かを、はじめての人向けに解説します。Webページの骨組みを作る言葉であること、名前の意味、CSS・JavaScriptとの役割分担、HTMLがやらないことまで、実際のコードを少し見ながらつかみます。Sun, 12 Jul 2026 00:00:00 GMTHTMLhttps://piyogramming.com/ja/articles/javascript/arrays/https://piyogramming.com/ja/articles/javascript/arrays/変数が「箱」なら、配列は「箱がずらりと並んだ棚」。すきなものリストのような“たくさんの値”を、ひとつの名前でまとめて持てます。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/calculations/https://piyogramming.com/ja/articles/javascript/calculations/JavaScriptは高性能な電卓でもあります。たし算からかけ算まで、計算の書き方と「文字のたし算」のふしぎを見てみよう。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/change-text/https://piyogramming.com/ja/articles/javascript/change-text/JavaScriptでHTMLの文字を書きかえる方法。書きかえたい場所にidで名札をつけ、getElementByIdでつかまえてtextContentで中身を変える手順を、実際にページの文字を変えながら学びます。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/console-log/https://piyogramming.com/ja/articles/javascript/console-log/変数の中身はいまどうなってる？画面に出す前にこっそり確かめられる、プログラミングの心強い相棒がconsole.logです。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/events/https://piyogramming.com/ja/articles/javascript/events/addEventListenerでボタンのクリックに反応させる方法。「〜したら、〜する」というイベントの考え方、文字の書きかえと組み合わせる例、フォームの送信をきっかけにする書き方、querySelectorまで扱います。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/functions/https://piyogramming.com/ja/articles/javascript/functions/何度も使う手順に名前をつけて、ひとことで呼び出せるようにするのが関数。じつはしまちゃんのページにも、もう登場しています。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/if-statements/https://piyogramming.com/ja/articles/javascript/if-statements/「もし正解なら○、ちがったら×」のように、状況に合わせて動きを変える「条件分岐」。プログラムが賢く見える理由は、これです。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/loops/https://piyogramming.com/ja/articles/javascript/loops/JavaScriptのfor文で同じ処理をくり返す方法。くり返しの書き方、配列と組み合わせて中身を順番に取り出す使い方を、動くデモで確かめます。同じコードを何度も書かずにすむ方法を身につけます。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/random-numbers/https://piyogramming.com/ja/articles/javascript/random-numbers/おみくじ、サイコロ、ガチャ。押すたびに結果が変わるドキドキの正体が乱数。Math.randomで「予測できない楽しさ」をページに足そう。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/timers/https://piyogramming.com/ja/articles/javascript/timers/「3秒後に表示する」「1秒ごとにカウントする」。クリックだけでなく、時間もきっかけになります。2つのタイマーを覚えよう。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/variables/https://piyogramming.com/ja/articles/javascript/variables/JavaScriptの変数の使い方。名前をつけた箱に文字や数字を入れる書き方、中身の入れかえ、名前のつけ方のルール、入れかえない箱のconstとletの使い分けを、はじめての人向けに解説します。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/javascript/what-is-js/https://piyogramming.com/ja/articles/javascript/what-is-js/JavaScriptとは何かを、はじめての人向けに解説します。HTML・CSSとの役割分担、身のまわりのページの動きの例、JavaScriptをどこに書くか、HTMLから読みこませる方法まで、最初の一歩をまとめました。Sun, 12 Jul 2026 00:00:00 GMTJavaScripthttps://piyogramming.com/ja/articles/start/first-html-file/https://piyogramming.com/ja/articles/start/first-html-file/はじめてのHTMLファイルを作って、ブラウザで表示するまでの手順。index.htmlという名前の意味、1行だけ書いて保存し、ブラウザで開くまでの流れと、うまくいかないときのチェックリストを紹介します。Sun, 12 Jul 2026 00:00:00 GMTじゅんびhttps://piyogramming.com/ja/articles/start/folders-and-files/https://piyogramming.com/ja/articles/start/folders-and-files/コードを書く前に、ファイルとフォルダを用意する方法。拡張子の意味、ファイル名のつけ方のコツ、VSCodeでフォルダをまるごと開く手順まで、はじめての人がつまずきやすいところを整理します。Sun, 12 Jul 2026 00:00:00 GMTじゅんびhttps://piyogramming.com/ja/articles/start/html-skeleton/https://piyogramming.com/ja/articles/start/html-skeleton/HTMLファイルの基本の型（<!DOCTYPE html>・html・head・body）の書き方。titleがブラウザのタブに出ること、見出しやdivはbodyの中に書くこと、型を書くときのありがちなミスを紹介します。Sun, 12 Jul 2026 00:00:00 GMTじゅんびhttps://piyogramming.com/ja/articles/start/install-vscode/https://piyogramming.com/ja/articles/start/install-vscode/無料のエディタVSCode（Visual Studio Code）をインストールする手順。エディタを使う理由、ダウンロードから起動までの流れ、日本語化などはじめに入れたい拡張機能3つを、画面つきで紹介します。Sun, 12 Jul 2026 00:00:00 GMTじゅんびhttps://piyogramming.com/ja/articles/start/preview-in-browser/https://piyogramming.com/ja/articles/start/preview-in-browser/書いて、直して、また見る。この“くり返し”をラクにする2つの方法を紹介します。ブラウザの更新と、Live Serverの自動プレビューです。Sun, 12 Jul 2026 00:00:00 GMTじゅんびhttps://piyogramming.com/ja/knowledge/tips/coding-fonts/https://piyogramming.com/ja/knowledge/tips/coding-fonts/エディタで使う「コードを書くためのフォント」は、Webページ用のフォントとはまた別物です。0とOの見分けやすさ、矢印がキマるリガチャ、日本語コメントの見え方まで、タイプ別に見本つきで17種類紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/copy-paste-animations/https://piyogramming.com/ja/knowledge/tips/copy-paste-animations/Web制作でよく使うアニメーションを、動くデモつきで11個そろえました。コピペしてクラスを付けるだけ。ふわっと表示・ホバー・ローディングまで、まずここから。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-button-designs/https://piyogramming.com/ja/knowledge/tips/css-button-designs/Web制作で毎回使うボタンのデザインを、動くデモつきで9個そろえました。基本の型から立体・グラデーション・ホバーの動きまで、コピペして色を変えるだけ。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-card-designs/https://piyogramming.com/ja/knowledge/tips/css-card-designs/ブログ一覧やプロフィールで大活躍する「カード」のデザインを、動くデモつきで8個そろえました。基本の影つきカードから画像ズーム、グリッド配置まで、コピペして中身を差し替えるだけ。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-centering-layouts/https://piyogramming.com/ja/knowledge/tips/css-centering-layouts/「中央寄せできない」「横に並ばない」を一発解決。Web制作で毎回使うレイアウトを、動くデモつきで10個そろえました。コピペして数字を変えるだけ。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-form-designs/https://piyogramming.com/ja/knowledge/tips/css-form-designs/素の入力欄は正直ちょっと事務的。整った入力欄・フォーカスの合図・エラーの見せ方から完成形の問い合わせフォームまで、動くデモつきで8個そろえました。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-gradient-designs/https://piyogramming.com/ja/knowledge/tips/css-gradient-designs/linear-gradientの基本から、おしゃれな配色8種、グラデーション文字、ゆっくり動く背景まで。ヒーローやボタンがひと味変わるグラデーションを、動くデモつきでまとめました。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-heading-designs/https://piyogramming.com/ja/knowledge/tips/css-heading-designs/見出しが変わると、ページ全体が締まって見える。下線・マーカー・ふきだしから、グラデ文字・英字そえまで、定番の見出しデザインを動くデモつきで10個。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-list-designs/https://piyogramming.com/ja/knowledge/tips/css-list-designs/黒丸だけの箇条書きを卒業しませんか。チェックマーク・番号バッジ・タイムライン・タグ風など、そのまま使えるリストのデザインを動くデモつきで8個そろえました。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-nav-designs/https://piyogramming.com/ja/knowledge/tips/css-nav-designs/サイトの顔になるナビゲーションメニューを、動くデモつきで9個そろえました。横並びの基本形から下線アニメーション、固定ヘッダー、ハンバーガーメニューまで、コピペして色を変えるだけ。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/css-units/https://piyogramming.com/ja/knowledge/tips/css-units/CSSの数字のうしろに付けるpx・rem・%・vw、結局どれを付ければいいの？4つの単位の正体と「迷ったらこれ」の使い分けを、動くデモつきで整理します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/emmet/https://piyogramming.com/ja/knowledge/tips/emmet/divと打ってTabを押すだけで <div></div>。VSCodeに最初から入っている「Emmet」を使うと、HTMLのタグ打ちがラクになります。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/favicon/https://piyogramming.com/ja/knowledge/tips/favicon/ブラウザのタブに出る小さなアイコン＝ファビコン。あるだけで「ちゃんとしたサイト」に見える仕上げの一手を、絵文字1行の方法と画像から作る方法の2通りで紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/find-and-replace/https://piyogramming.com/ja/knowledge/tips/find-and-replace/「あの単語どこだっけ？」を一瞬で。さらに、同じ言葉をファイル中・フォルダ中でまとめて置きかえる置換まで。手で1つずつ直す時間を、まるごと節約できます。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/google-fonts/https://piyogramming.com/ja/knowledge/tips/google-fonts/同じ文章でも、フォント（文字の形）を変えるだけで印象がガラッと変わります。無料で何百種類も使えるGoogle Fontsを、コピペ2か所でページに取り入れる手順を紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/google-fonts-picks/https://piyogramming.com/ja/knowledge/tips/google-fonts-picks/Google Fontsは数が多すぎて、どれを選べばいいか迷いがち。まるっこい・すっきり・しっとり・手書き風・インパクト大・英字のおしゃれ系のタイプ別に、実際に文字を出した見本つきで22種類をたっぷり紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/info-sites/https://piyogramming.com/ja/knowledge/tips/info-sites/困ったとき引く辞書から、毎日のトレンド、プロの現場の知見、海外の一次情報まで。Web制作の学習がはかどる定番の情報サイト13個を、使い分けの目安つきで紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/ogp/https://piyogramming.com/ja/knowledge/tips/ogp/XやLINEでURLを送ると出てくる、あの画像つきカードの正体がOGP。metaタグ5行と画像1枚で、シェアされたとき恥ずかしくないページに仕上げます。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/publish-site/https://piyogramming.com/ja/knowledge/tips/publish-site/フォルダをドラッグ&ドロップするだけ。作ったページをインターネットに公開して、URLで人に見せる方法を無料サービス3つで紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/reset-css/https://piyogramming.com/ja/knowledge/tips/reset-css/ブラウザが勝手につける余白や線をまっさらにする「リセットCSS」。そもそも必要なのか、コピペで使えるミニリセット、定番の配布3種の違いと読みこみ方をまとめました。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/terminal-customize/https://piyogramming.com/ja/knowledge/tips/terminal-customize/黒い画面が続くターミナルは、実は自分好みに改造できます。プロンプトに顔文字を出す・色をつける・コマンドを短縮する設定から、Warp・Ghostty・cmuxなど話題のターミナルアプリまで紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/knowledge/tips/vscode-extensions/https://piyogramming.com/ja/knowledge/tips/vscode-extensions/VSCodeは“拡張機能”を足して自分好みに育てられます。初心者が入れておくと世界が変わる定番を、入れ方と画面つきで紹介します。Sun, 12 Jul 2026 00:00:00 GMTべんりワザhttps://piyogramming.com/ja/articles/wordpress/block-editor/https://piyogramming.com/ja/articles/wordpress/block-editor/WordPressの記事は「ブロック」を積んで作ります。段落・見出し・画像は、実はぜんぶ学んだHTMLタグと対応しています。はじめての投稿を公開してみよう。Sun, 12 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/wordpress/dashboard-basics/https://piyogramming.com/ja/articles/wordpress/dashboard-basics/WordPressの運転席「ダッシュボード」の全体地図。左に並ぶメニューのどれが何の道具なのか、最初に迷子にならないための案内図を手に入れよう。Sun, 12 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/wordpress/html-css-in-wordpress/https://piyogramming.com/ja/articles/wordpress/html-css-in-wordpress/WordPressは「コードを書かなくていい」道具ですが、書ける人はもっと自由になれます。カスタムHTMLブロックと追加CSS。学んだ力の出番を紹介します。Sun, 12 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/wordpress/plugins/https://piyogramming.com/ja/articles/wordpress/plugins/お問い合わせフォームもSEO対策も、プラグインを入れるだけ。WordPressに機能を追加する仕組みと、安全なプラグインの見分け方を学びます。Sun, 12 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/wordpress/themes/https://piyogramming.com/ja/articles/wordpress/themes/WordPressの見た目は「テーマ」を選ぶだけで一新できます。8,000種類以上の無料テーマから選んで着せ替える方法と、テーマの正体（実はHTML+CSS）を学びます。Sun, 12 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/wordpress/try-playground/https://piyogramming.com/ja/articles/wordpress/try-playground/本来サーバーが必要なWordPressを、ブラウザだけ・3秒で触れる公式ツール「WordPress Playground」。壊しても消してもOKな練習場を手に入れよう。Sun, 12 Jul 2026 00:00:00 GMTWordPresshttps://piyogramming.com/ja/articles/wordpress/what-is-wordpress/https://piyogramming.com/ja/articles/wordpress/what-is-wordpress/世界のサイトの4割以上を動かす「WordPress」。いままで書いてきたHTMLのページと何がちがうのか、CMSという考え方から整理します。Sun, 12 Jul 2026 00:00:00 GMTWordPress