# プログラミング備忘録 --- ## 固定ページ --- ## 投稿 - [::before と ::after　疑似要素をわかりやすく解説！](https://programing-knowledge.net/https-programing-knowledge-net-before-and-after-pseudo-elements-are-super-easy-to-understand/): 疑似要素ってなに？ 疑似要素とは、見た目... - [WEBサイトの仕組みとは？初心者にもわかりやすくやさしく解説！](https://programing-knowledge.net/web-structure-search/): 「WEBサイトってどう動いてるの？」そん... - [選ばれし「チェックボックス」　疑似クラス　：checked](https://programing-knowledge.net/https-programing-knowledge-net-autodraft/): チェックボックスとは 一言で言うと...... - [擬似クラスってなに？リンクにマウスを乗せた時の”あの指マーク"で覚えよう！](https://programing-knowledge.net/https-programing-knowledge-net-what-is-a-pseudo-class-when-you-hover-the-mouse-over-a-link/): みなさん、Webサイトを見ていて「リンク... - [ナビゲーションメニューから各セクションへスムーズにスクロールする方法](https://programing-knowledge.net/navmenu-smooth-scroll/): ナビゲーションメニューから各セクションへ... - [属性セレクタとは、classなしでもデザインできる便利ワザ！](https://programing-knowledge.net/https-programing-knowledge-net-what-is-an-attribute-selector-it-is-a-convenient-way-to-design-without-classes/): 属性とは（おさらい） 属性とは「タグの中... - [【初心者向け】npmとは？Web制作でよく使う「便利ツール」の正体をわかりやすく解説！](https://programing-knowledge.net/javascript-npm-web/): 【初心者向け】npmとは？Web制作でよ... - [子孫クタ・子セレクタ・隣接セレクタの基本的な書き方](https://programing-knowledge.net/https-programing-knowledge-net-easy-to-use-descendant-selector-child-selector-adjacent-selector/): 今回は「子孫セレクタ」「子セレクタ」「隣... - [スクロールでふわっと表示されるアニメーションの実装方法【初心者向け・コピペOK】](https://programing-knowledge.net/javascript-scroll-animation-beginner/): スクロールでふわっと表示されるアニメーシ... - [親からひ孫まで！要素の世代物語](https://programing-knowledge.net/https-programing-knowledge-net-from-parents-to-great-grandchildren-generational-stories-of-elements/): 「要素」はHTMLの超基本！タグの意味や... - [【CSS】フォントサイズにcalc()を使うとどうなる？使い方とレスポンシブ対応のコツを解説！](https://programing-knowledge.net/css-calc-px-rem-responsivedesign/): CSSでフォントサイズを指定するとき、p... - [内側の余白って何？CSSのpaddingで読みやすさが変わる！](https://programing-knowledge.net/https-programing-knowledge-net-what-is-inner-margin-css-padding-can-change-readability/): ・余白には「外側」と「内側」があります。... - [「CSSのルール」誰が一番エライ？学校を例えで学ぶ、セレクタの力関係](https://programing-knowledge.net/https-programing-knowledge-net-css-rules-who-is-the-most-important-learning-from-school-examples/): 今回は「学校のルール」にたとえて、わかり... - [【完全初心者向け】JavaScriptの配列とオブジェクトの違いと使い方をゼロから解説！図解・コード例付き](https://programing-knowledge.net/javascript-programing-object-array/): 🔰 JavaScript初心者がつまずく... - [【初心者向け】JavaScriptでDOMを操作する方法とイベントの使い方をやさしく解説！](https://programing-knowledge.net/javascript-dom-object-model-event/): JavaScriptを使ってHTMLの内... - [「CSSセレクタってなに？」初心者にも超わかりやすく解説](https://programing-knowledge.net/https-programing-knowledge-net-what-is-a-css-selector-easy-to-understand-even-for-beginners/): ・CSSってよく聞くけど、「セレクタ」っ... - [JavaScript初心者向け｜エラーメッセージの読み方を徹底解説【具体例付き】](https://programing-knowledge.net/javascript-error-function/): はじめに：JavaScriptエラーは怖... - [【初心者向け】JavaScriptの変数の宣言とスコープを超わかりやすく解説！let・const・varの違いも図解付き](https://programing-knowledge.net/javascript-const-var-let/): 🧠 JavaScriptの変数宣言とは？... - [タグをいちいち全部書かなくてもOK! 「Emmet機能でコードが一瞬で書ける」](https://programing-knowledge.net/https-programing-knowledge-net-you-dont-have-to-write-all-the-tags-one-by-one-code-with-emmet-function/): HTMLやCSSでを練習していると、「タ... - [「 属性 」って何？ タグだけでは物足りない！属性で伝わるhtml](https://programing-knowledge.net/https-programing-knowledge-net-what-is-attribute-tags-alone-are-not-enough/): たとえば、写真を表示させたいとき・タグは... - [「 要素 」って何？ ブロック要素とインライン要素を一発で見分ける方法！](https://programing-knowledge.net/https-programing-knowledge-net-what-is-element-block-element-and-inline-element/): ブロック要素とインライン要素の違いを、超... - [【JavaScript】変数・関数・引数・戻り値 について](https://programing-knowledge.net/javascript-variable-function-argument-return/): JavaScriptを学ぶにあたって一番... - [【JavaScript】よく使われる演算子について](https://programing-knowledge.net/javascript-true-false-operator/): Javascriptでよく使われる演算子... - [Javascriptでよく使うメソッド一覧と使い方について](https://programing-knowledge.net/javascript-method/): ここではJavaScriptでよく使うメ... - [マウスを乗せると指のマークになる！ボタンの作り方](https://programing-knowledge.net/https-programing-knowledge-net-button-artwork-that-turns-into-a-finger-mark-when-you-place-your-mouse-over-it/): webサイトを作っていると、マウスを乗せ... - [【JavaScript】getTime() とは？基本的な使い方と応用例](https://programing-knowledge.net/javascriptgettime-gettime-date-mathfloor/): getTime は、JavaScript... - [初心者でもできる！HTMLとCSSで基本のボタンを作ろう！](https://programing-knowledge.net/even-beginners-can-do-it-create-a-basic-button-with-html-and-css/): この記事では、HTMLとCSSだけで簡単... - [class と id の違いを めちゃくちゃ分かりやすく解説！](https://programing-knowledge.net/https-programing-knowledge-net-a-super-easy-to-understand-explanation-of-the-difference-between-class-and-id/): class （クラス）とは クラスは「複... - [HTMLのclassの使い方！を分かりやすく解説！](https://programing-knowledge.net/make-web-design-more-fun-with-this-easy-class-even-for-beginners/): この記事では、HTMLのclassを使っ... - [これで完璧！外部 CSS の作り方完全ガイド](https://programing-knowledge.net/https-programing-knowledge-net-this-is-perfect-complete-guide-to-creating-external-css/): 外部CSSとは 外部 CSS とは、We... - [HTML CSS 【初心者向け】画像の透過方法](https://programing-knowledge.net/html-css-opacity-backdrop-filter-mask-image/): 画像の透過（透明にする）方法を初心者向け... - [【JavaScript】backgroundPositionの指定ルール！](https://programing-knowledge.net/javascript-backgroundposition/): Javascriptでbackgroun... - [【JavaScript】borderRadius について](https://programing-knowledge.net/javascript-borderradius/): JavaScript で borderR... - [JavaScript の "this" について](https://programing-knowledge.net/javascript-this-fined/): ⒈ this が指すものを見分ける4つの... - [超初心者向け！<style>タグを使ったCSSの書き方とは？](https://programing-knowledge.net/https-programing-knowledge-net-for-beginners-how-to-write-css-using-style-tags/): 前回も紹介した通り、CSSの書き方には。... - [超初心者向け！CSSはどこに書くの⁉︎](https://programing-knowledge.net/https-programing-knowledge-net-how-to-write-css-directly-in-html-tags/): CSSとは？ CSSとは「Cascadi... - [実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！](https://programing-knowledge.net/https-programing-knowledge-net-practice-making-an-excellent-curry-recipe-using-html-for-the-first-time/): ここでは、実際にHTMLのみで、カレーの... - [写真（画像）の表示を理解しよう！<img>タグとは？](https://programing-knowledge.net/why-does-the-tag-for-photos-ltimggt-only-have-a-start-tag/): この記事では、写真を入れるタグ の使い方... - [HTML CSS 【初心者向け】疑似要素 ::before/::afterとは？](https://programing-knowledge.net/html-css-before-after/): 疑似要素（Pseudo-elements... - [HTML CSS 【初心者向け】　画像をリピートする方法](https://programing-knowledge.net/html-css-img-repeat-xy/): 画像をリピート（繰り返し表示）する方法 ... - [HTML CSS 【初心者向け】z-index の使い方](https://programing-knowledge.net/html-css-z-index/): z-index の基本的な使い方 z-i... - [HTML CSS【初心者向け】display: flex;の使い方](https://programing-knowledge.net/html-css-display-flex/): フレックスボックス（Flexbox)は、... - [HTML初心者必見！写真フォルダの作り方！](https://programing-knowledge.net/https-programing-knowledge-net-htmla-must-see-for-beginners-how-to-make-a-photo-folder/): 写真をHTMLで使うには、正しい場所に保... - [「HTMLの基本、3つのタグを超簡単に解説！」](https://programing-knowledge.net/if-you-know-the-basics-of-html-the-three-tags-you-wont-get-confused/): ウェブページには基礎となる重要なタグあが... - [プログラミング最初の1行目〈！DOCTYPE html 〉を超やさしく解説！](https://programing-knowledge.net/first-line-of-programming-super-easy-explanation-of-doctype-html/): < DOCTYPE html > は、「... - [「エクスプローラーが消えた⁈」VS code初心者あるある！対処法](https://programing-knowledge.net/what-to-do-when-explorer-disappears/): 「あれ、エクスプローラーが消えた！」VS... - [HTML CSS 【初心者向け】marginの使い方](https://programing-knowledge.net/html-css-first-margin/): 今回はmarginの使い方について説明を... - [HTML CSS 【初心者向け】marginの相殺について](https://programing-knowledge.net/html-css-first-marginoffset/): 初心者の頃にmarginを使いすぎてデザ... - [HTML CSS 【初心者向け】画像を斜めに表示したい！transformの使い方](https://programing-knowledge.net/html-css-transform/): 画像を斜めに傾けたい時の解説を簡単にして... - [HTML CSS 【初心者向け】 ハンバーガーメニューのリストが出てこない時の対処法](https://programing-knowledge.net/html-css-menulist-hunbergermenu/): 今回はHTML CSS JavaScri... - [これでもうスペルミスに困らない！！【Code Spell Checker 】VS codeの拡張機能 コード スペル チェッカー](https://programing-knowledge.net/a-must-see-for-beginners-visual-studio-code-useful-spell-check-extensions-code-spell-checker-code-spell-checker/): スペルチェックって何？ 1 スペルチェッ... - [【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成](https://programing-knowledge.net/enjoy-your-first-step-debut-programming-with-live-server/): Live Serverの重要性 ・Liv... - [VS code 初心者向け【 コードを書く ▶︎ ブラウザで見る 】を超簡単にする魔法のやり方！](https://programing-knowledge.net/vs-code-for-beginners-magical-way-to-write-code-view-in-browser-super-easy/): Live Server（ライブサーバー）... - [超簡単！パララックスをCSSで作ろう！](https://programing-knowledge.net/parallax-easy/): パララックスとはページをスクロールする際... - [【 フォルダとファイル 】の違いが分かれば、パソコンの世界がもっと楽しくなる！](https://programing-knowledge.net/understanding-the-difference-between-folders-and-files-will-make-the-world-of-computers-more-enjoyable/): パソコンを使い始めると必ず耳にする「 フ... - [【 拡張機能 】でプログラミングが楽しくなる！日本語にする簡単な方法](https://programing-knowledge.net/extended-functions-make-programming-fun-a-complete-explanation-that-will-help-even-first-timers-get-confused/): visual studio code を... - [HTML CSS　【初心者向け】テキストとアイコンがズレる時の対処法](https://programing-knowledge.net/html-css-first-texticon-alignitems/): こんにちは！今回は「テキストとアイコンを... - [【初心者向け】Visual Studio Code ダウンロードを徹底解説](https://programing-knowledge.net/a-thorough-explanation-of-visual-studio-code-download-for-beginners/): 初めてHTMLを始める方の第一歩、Mic... - [HTML CSS 【初心者向け】positionの使い方](https://programing-knowledge.net/html-css-first-positionguide/): こんにちは★初心者の私がコーディングする... - [HTML CSS 初心者向け max-widthの使い方](https://programing-knowledge.net/html-css-beginner-max-width/): 初心者の私がよくやってしまうミスを備忘録... - [【 無料で使える! 】Visual Studio Code（VS Code) とは](https://programing-knowledge.net/what-is-visual-studio-codevs-code-that-can-be-used-for-free/): プログラミングを始めるには、専用のアプリ... - [【 ゼロから学ぶ！】Webサイトが形になるまでをやさしく解説](https://programing-knowledge.net/learn-the-basics-before-you-start-programmng-how-is-a-website-created/): 　ここではWebサイトの構成を簡単に解説... - [【 ゼロから理解！】Webサイトが表示されるまでの流れ](https://programing-knowledge.net/how-a-website-for-learning-the-basics-before-starting-programming-is-displayed/): みなさんこんにちは。前回に続き、Webサ... - [【 今更聞けない！】インターネットの基本を徹底解説](https://programing-knowledge.net/learn-the-basics-before-starting-programming-what-is-the-internet/): 　初めまして、こんにちは。50歳の私がw... - [レスポンシブ 【初心者向け】display:none; が効かない時の対処法](https://programing-knowledge.net/dont-work-display-none/): 初心者向け模写を最近やっています^^ そ... - [LIFFアプリとは？開発方法について解説](https://programing-knowledge.net/what-liff-app/): LIFFアプリとは LIFFとは、LIN... - [HTML CSS 【初心者向け】ナビゲーションバーの隙間対処法](https://programing-knowledge.net/fix-navbar-spacing/): 初心者の私がよくやってしまうミスを備忘録... - [HTML CSS　【初心者向け】スクロールバーが表示されない時の対処法](https://programing-knowledge.net/css-dont-work-scroll/): 初心者向け模写を最近やっています^^ そ... --- # # Detailed Content ## 固定ページ --- ## 投稿 - Published: 2025-07-12 - Modified: 2025-07-12 - URL: https://programing-knowledge.net/https-programing-knowledge-net-before-and-after-pseudo-elements-are-super-easy-to-understand/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, アフター, ビジュアルスタジオコード、, ビフォアー, プログラミング初心者, 初心者向け, 擬似要素, 擬似要素after, 擬似要素before, 擬似要素とは, 擬似要素使い方 疑似要素ってなに？ 疑似要素とは、見た目だけ「あるように見せる」要素のこと！つまり... HTMLには書かれていないけど、CSSだけで、前や後ろに文字やマークを追加できる仕組みです。 htmlに星マークはないですが、CSSだけで表示させることができます。 こんな感じ ::before と ::after ::before は前につけるときに使いますが、後ろにつけたい場合は ::after を使います 疑似要素って、わざわざ使わなくてもよくない？ 「最初からHTMLに書けばいいんじゃないの？」そう... --- - Published: 2025-07-09 - Modified: 2025-07-09 - URL: https://programing-knowledge.net/web-structure-search/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, webサイトの仕組み, Web制作入門, Web解説, インターネットの仕組み, サーバーとは, ブラウザの役割, 初心者向け 「WEBサイトってどう動いてるの？」そんな初心者の疑問を、たとえ話を交えてやさしく丁寧に解説。これを読めばWEBの基本がまるわかり！ WEBサイトの仕組みとは？初心者にもわかりやすくやさしく解説！ 「WEBサイトってどうやって見られるの？」「インターネットの仕組みがよくわからない... 」そんな初心者の方に向けて、今回はWEBサイトの仕組みをできるだけ丁寧に解説します。 WEBサイトの仕組みをざっくり言うと？ 「お店に行って商品（情報）を見る」のをネット上でやっているというイメージです！ WEB... --- - Published: 2025-07-05 - Modified: 2025-07-12 - URL: https://programing-knowledge.net/https-programing-knowledge-net-autodraft/ - カテゴリー: 基礎 - タグ: checked使い方, CSS, forとは, HTML, チェックボックスCSS, チェックボックスとは, チェックボックス作り方, ビジュアルスタジオコード、, フォ, プログラミング初心者, 初心者向け, 疑似クラスとは チェックボックスとは 一言で言うと... 「はい・いいえ」「する・しない」など、選ぶかどうかを決める時に使います。よくある使い方の例として①利用規約に同意しますサービスを使う前に、「ルールに同意しますか？」というときのhtmlコードがこちら↓インプットのタイプをチェックボックスとします チェックを入れたら「同意した」とみなされます ②メールを受け取るかどうか会員登録などで、「お知らせメールを受け取りますか？」と言う場面ではこんな感じになります↓ ③複数の選択肢を選ぶときラジオボタンはひとつしか選... --- - Published: 2025-06-28 - Modified: 2025-06-28 - URL: https://programing-knowledge.net/https-programing-knowledge-net-what-is-a-pseudo-class-when-you-hover-the-mouse-over-a-link/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 擬似クラス, 疑似クラス:focus, 疑似クラスhover, 疑似クラスとは みなさん、Webサイトを見ていて「リンク」にマウスを乗せた時、ポインター（マウスの矢印）が"指の形"に変わるの、見たことありますよね。実はあの「指マーク」、マウスを乗せたという"状態"に反応して、見た目が変わっているんです。でも、HTMLのコードを見ても「指マークになるよ」なんて書いてありません。じゃあ、どうして変わるの？それは、CSSが「マウスが乗った状態」を見つけて、自動でデザインを変えているからです。このように「ある状態の時だけ見た目を変えるCSSの機能」を擬似クラスといいます。 指マーク... --- - Published: 2025-06-27 - Modified: 2025-06-27 - URL: https://programing-knowledge.net/navmenu-smooth-scroll/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, javascript, VS code初心者, スクロール, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け ナビゲーションメニューから各セクションへスムーズにスクロールする方法 ランディングページ（LP）などで、ナビゲーションメニューをクリックしたときにページ内の特定の場所へスクロール移動する方法を紹介します。WordPressでも使用可能なシンプルな方法です。 方法①：HTMLとCSSだけで簡単に実装 id属性を使ったアンカーリンクと、CSSのscroll-behaviorでスムーズスクロールを実現します。 About Services Contact About ここは About セクションです... --- - Published: 2025-06-21 - Modified: 2025-06-21 - URL: https://programing-knowledge.net/https-programing-knowledge-net-what-is-an-attribute-selector-it-is-a-convenient-way-to-design-without-classes/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, ぞく生セレクタの書き方, セレクタとは, セレクタ書き方, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 属性とは, 属性セレクタ, 属性セレクタとは, 属性セレクタ使い方 属性とは（おさらい） 属性とは「タグの中に書かれている　ひとことメモ　を見て、CSSデザインを当てる方法です！＊属性を理解する記事はこちら→「 属性 」って何？ タグだけでは物足りない！属性で伝わるhtml class名を使ったデザインの仕方 ・テキストボックスを作ってみましょう！ これは、クラス名（text-box)を使ってCSSでデザインする方法です。でも実は... クラス名をつけなくても、CSSでデザインできる方法があるんです。 それが属性セレクタです！！ 属性セレクタとは 簡単に言うと.... --- - Published: 2025-06-18 - Modified: 2025-06-18 - URL: https://programing-knowledge.net/javascript-npm-web/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, javascript, npm, npmとは, プログラミング初心者, 初心者向け 【初心者向け】npmとは？Web制作でよく使う「便利ツール」の正体をわかりやすく解説！ 「npmって何？」「JavaScriptの勉強を始めたら出てきたけどよくわからない... 」 そんな初心者の方に向けて、npmとは何か？どんな場面で使うのか？を、やさしく・具体的に解説します。 npmとは？ npm（エヌピーエム）とは、「Node Package Manager」の略で、JavaScriptのツールやライブラリ（＝パッケージ）を管理する仕組みのことです。 主にNode. jsという環境で使われ... --- - Published: 2025-06-14 - Modified: 2025-06-22 - URL: https://programing-knowledge.net/https-programing-knowledge-net-easy-to-use-descendant-selector-child-selector-adjacent-selector/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, セレクタの書き方, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 子セレクタとは, 子孫セレクタとは, 親子関係, 隣接セレクタとは 今回は「子孫セレクタ」「子セレクタ」「隣接セレクタ」という３つのセレクタを使って、シンプルで読みやすいブログ記事を一緒に作ってみましょう！↓これを作ります htmlコードの作成 htmlコードを書きましょう！ ・emmet機能を使って簡単作成！ ・クラス名blog クラス名つけたdiv要素を書く場合は、このようにemmet機能を使って簡単に書きましょう！・emeetの使い方はこちらから→・タグをいちいち全部書かなくてもOK! 「Emmet機能でコードが一瞬で書ける」 ・できるだけ簡単にコードを書... --- - Published: 2025-06-11 - Modified: 2025-06-11 - URL: https://programing-knowledge.net/javascript-scroll-animation-beginner/ - カテゴリー: フロントエンド, 基礎, 未分類 - タグ: API, CSS, HTML, Intersectionovserver, javascript, ふわっと表示, アニメーション, コピペ, 初心者向け スクロールでふわっと表示されるアニメーションの実装方法【初心者向け・コピペOK】 Webサイトをおしゃれに見せたい！そんなときに使えるのが「スクロールでふわっと表示されるアニメーション」です。 この投稿では、初心者の方でも理解できるように、HTML・CSS・JavaScriptを使った方法を丁寧に解説します。WordPressにもそのまま使えるコピペコード付きです。 スクロールでふわっと表示とは？ ユーザーがページをスクロールしたときに、まだ見えていなかった要素（画像やテキストなど）が、自然にふ... --- - Published: 2025-06-07 - Modified: 2025-06-14 - URL: https://programing-knowledge.net/https-programing-knowledge-net-from-parents-to-great-grandchildren-generational-stories-of-elements/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 子要素, 孫要素, 親要素 「要素」はHTMLの超基本！タグの意味や構造をしっかり理解することで、読みやすくて正しいコードが書けるようになりますよ！今回は、要素の基本と構造の仕組みをわかりやすくまとめています。 要素のおさらい 要素とは→開始タグ＋内容＋閉じタグ＝要素 要素の中に複数の要素がある場合 ・このように、要素の中に複数の要素がある場合には親子関係が生まれます。 ・ココでは、 が親要素になります。親要素は１つしか存在しません。 ・親要素の中にあるのが子要素です。ここでは子要素は１つですが、子要素は何個あっても良いで... --- - Published: 2025-06-04 - Modified: 2025-06-04 - URL: https://programing-knowledge.net/css-calc-px-rem-responsivedesign/ - カテゴリー: フロントエンド, 基礎 - タグ: calc, CSS, HTML, プログラミング初心者, レスポンシブデザイン, 初心者向け, 対処法 CSSでフォントサイズを指定するとき、pxやremだけを使っていませんか？最近は、レスポンシブに対応するために calc を使う方法が注目されています。 この記事では、calcの基本的な使い方から、フォントサイズでの具体的な活用例、さらに注意点までをわかりやすく解説します！ calcとは？ calc は、異なる単位を組み合わせて計算できるCSSの関数です。 font-size: calc(16px + 1vw); これは「基本サイズ16pxに加えて、画面幅（vw）の1%分を追加する」という意味で... --- - Published: 2025-05-31 - Modified: 2025-06-07 - URL: https://programing-knowledge.net/https-programing-knowledge-net-what-is-inner-margin-css-padding-can-change-readability/ - カテゴリー: 基礎 - タグ: CSS, HTML, padding, padding余白, VS code初心者, パディングの使い方, ビジュアルスタジオコード、, プログラミング初心者, ボタン作成, 余白, 初心者向け ・余白には「外側」と「内側」があります。今回は「内側の余白」＝paddingだけに注目！・「文字が端っこにくっついちゃう」「背景色はつけたけど、なんだか窮屈... 」などの悩みを解決します！ paddingとはどこのこと？ ・ボタンを例にして説明します・paddingとはボックス内の内側の余白です。ボタンを例にすると、文字とボーダの間の余白がpaddingになります。 ・paddingがない（余白無し）場合、とpaddingあり（余白あり）の場合ではこのように違います。 ボタンを作る ・emme... --- - Published: 2025-05-24 - Modified: 2025-06-06 - URL: https://programing-knowledge.net/https-programing-knowledge-net-css-rules-who-is-the-most-important-learning-from-school-examples/ - カテゴリー: 基礎 - タグ: CSS, CSSの優先順位, HTML, VS code初心者, セレクタとは, セレクタの優先順位, セレクタの順位, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 複数のCSS 今回は「学校のルール」にたとえて、わかりやすく説明します！ CSSの優先順位ってなに？ ・同じ場所に複数のCSSがあると、どれか1つだけが有効になる・それを決めるのが「セレクタの強さ」「優先順位」 学校で例えるセレクタの優先順位 実際のコードで書いてみよう！（html) ・フォルダを作っていない人はフォルダを作ってから始めてね。フォルダ作り方はこちらから→【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成の中にある「フォルダを作る」を参照してください... --- - Published: 2025-05-21 - Modified: 2025-05-21 - URL: https://programing-knowledge.net/javascript-programing-object-array/ - カテゴリー: フロントエンド, 基礎 - タグ: javascript, オブジェクト, 違い, 配列 JavaScript初心者がつまずく「配列」と「オブジェクト」って何？ JavaScriptでよく登場する「配列」と「オブジェクト」。データをまとめて管理するために欠かせない存在です。 でも「どう使うの？」「何が違うの？」という声、多いですよね。 この記事では、違い・使い方・アクセス方法・ループ処理まで、図やコード例を使ってやさしく解説します！ 配列（Array）とは：順番があるデータのまとまり const fruits = ; 特徴： インデックス番号でアクセス：fruits → "りんご" ... --- - Published: 2025-05-21 - Modified: 2025-05-21 - URL: https://programing-knowledge.net/javascript-dom-object-model-event/ - カテゴリー: フロントエンド, 基礎 - タグ: DOM, javascript, イベント, 初心者, 操作 JavaScriptを使ってHTMLの内容を動的に変更したり、クリックや入力などのユーザー操作に反応したいなら「DOM操作」と「イベント処理」は必須です。この記事では、DOMの基本的な操作方法と、よく使うイベントの書き方を、初心者向けに図やコード例を交えてわかりやすく解説します。 DOM（Document Object Model）とは？ DOMとは、HTML文書をJavaScriptで操作できるようにした「構造化されたデータ」のことです。Webページのテキストやボタン、画像などをJavaScr... --- - Published: 2025-05-17 - Modified: 2025-06-06 - URL: https://programing-knowledge.net/https-programing-knowledge-net-what-is-a-css-selector-easy-to-understand-even-for-beginners/ - カテゴリー: 基礎 - タグ: CSS, CSSセレクタ, HTML, idセレクタ, VS code初心者, クラスセレクタ, セレクタ, セレクタってなに, セレクタとは, セレクタどこ, タグセレクタ, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 対処法 ・CSSってよく聞くけど、「セレクタ」って何？今回は、セレクタとは何か？初心者が知っておきたい３つのセレクタを優しく解説します。・このブログを読む前にこれを読めばさらに理解する記事↓これで完璧！外部 CSS の作り方完全ガイドclass と id の違いを めちゃくちゃ分かりやすく解説！ 「セレクタ」ってなに？ ・CSSの「セレクタ」はココ！！・セレクタとは、「どのHTMLにスタイルをあてるか」を決めるためのもの！ タグセレクタとは 【 コード　を使って説明するよ！】 htmlコードに　絶品カレ... --- - Published: 2025-05-14 - Modified: 2025-05-14 - URL: https://programing-knowledge.net/javascript-error-function/ - カテゴリー: フロントエンド, 基礎, 未分類 はじめに：JavaScriptエラーは怖くない JavaScriptを学んでいると、突然赤文字でエラーが表示されて驚いた経験はありませんか？この記事では、初心者がよく出くわすエラーの意味と読み方を、やさしく丁寧に解説します。 1. JavaScriptのエラーはどこに表示される？ ブラウザの開発者ツールを開く方法（F12キーまたは右クリック→検証） 「Console」タブをチェック 2. エラーメッセージの基本構造を理解しよう Uncaught TypeError: Cannot read pr... --- - Published: 2025-05-14 - Modified: 2025-05-14 - URL: https://programing-knowledge.net/javascript-const-var-let/ - カテゴリー: フロントエンド, 基礎, 未分類 JavaScriptの変数宣言とは？ JavaScriptでは、データを一時的に保存しておくために「変数」を使います。変数は以下の3つの方法で宣言できます： let：再代入OK（ブロックスコープ） const：再代入不可（ブロックスコープ） var：再代入OK（関数スコープ）※非推奨 それぞれの違いを表で整理 宣言方法再代入スコープ特徴let〇ブロックスコープ一番よく使うconst×ブロックスコープ定数。変更できないvar〇関数スコープ古い書き方。使わない方が良い スコープとは？ スコープとは、... --- - Published: 2025-05-10 - Modified: 2025-05-17 - URL: https://programing-knowledge.net/https-programing-knowledge-net-you-dont-have-to-write-all-the-tags-one-by-one-code-with-emmet-function/ - カテゴリー: 基礎 - タグ: CSS, Emmetって何？, Emmetとは, HTML, VS code初心者, エメット機能, コード時短, コード短縮入力, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け HTMLやCSSでを練習していると、「タグをいちいち全部書くのは大変... 」そんなあなたに知って欲しいのが、VS Codeに入っている「Emmet（エメット）」です Emmet（エメット）って何？ Emmetとは、HTMLやCSSのコードを短く書いて、【 TABキー 】で一気に展開できる便利機能です。たとえば （リスト）を何個も書きたい もっと簡単にするには、半角英数で　li*６ と入力すると、右側にemmet 省略記法と出ます Tabキーを押すと、このようにリストが6つ出来上がります。もし３... --- - Published: 2025-05-03 - Modified: 2025-06-22 - URL: https://programing-knowledge.net/https-programing-knowledge-net-what-is-attribute-tags-alone-are-not-enough/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, タグと属性, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 対処法, 属性とは, 属性の意味, 要素と属性 たとえば、写真を表示させたいとき・タグは「写真を出すよ！」という宣言をする・属性は 「このフォルダの中にあるよ！」「この写真を使って！ 」などの細かい指示をする < img >タグの属性名は　src alt ↓これは「画像を出すよ！」という命令です。 < img > でも、どの写真を使うのかが分からないので、写真を表示できません。 属性は細かい指示をする さあ、ここで属性の登場です！下の図はカレーの写真を出すための要素です↓・要素についての記事はこちらから→「 要素 」って何？ ブロック要素とイ... --- - Published: 2025-04-26 - Modified: 2025-06-06 - URL: https://programing-knowledge.net/https-programing-knowledge-net-what-is-element-block-element-and-inline-element/ - カテゴリー: 基礎 - タグ: CSS, HTML, VS code初心者, インライン要素, インライン要素とブロック要素の見分け方, タグと要素のちがい, ビジュアルスタジオコード、, ブロック要素, プログラミング初心者, 初心者向け ブロック要素とインライン要素の違いを、超簡単に解説します！ タグと要素のちがい 「タグ」と「要素」は、どう違うのだろうか？ 正確には・タグとは → , , , , などの記号をいいます。・要素とは → 内容 , 内容 , 内容 などのように、開始タグ＋内容＋閉じタグ全体をいいます ブロック要素とインライン要素のちがい 結論から言うと... ブロック要素→勝手に改行されるやつ！・改行され、下に並んで表示されるインライン要素→改行されずに横に並ぶやつ！・文章の途中に自然に表示される ブロック要素とは... --- - Published: 2025-04-26 - Modified: 2025-04-26 - URL: https://programing-knowledge.net/javascript-variable-function-argument-return/ - カテゴリー: フロントエンド, 基礎 - タグ: javascript, プログラミング初心者, 初心者向け, 変数, 引数, 戻り値, 関数 JavaScriptを学ぶにあたって一番最初に「？？？」となりやすい「変数」「関数」「引数」「戻り値」について詳しくわかりやすいように説明していこうと思います！ 変数とは？？？ 変数はデータに名前を付ける箱だと思ってください！イメージ：リンゴを入れる箱に「くだもの」という名前を付けるという感じ！ //JavaScript let fruit = "りんご"; ・let → 箱を作るよ・fruit → 箱の名前・”りんご” → 箱の中身 なんでわざわざ名前を付けるの？？あとで使いたい時に frui... --- - Published: 2025-04-25 - Modified: 2025-04-25 - URL: https://programing-knowledge.net/javascript-true-false-operator/ - カテゴリー: 基礎, 未分類 - タグ: javascript, プログラミング初心者, 三項演算子, 代入演算子, 初心者向け, 文字列演算子, 比較演算子, 演算子, 理論演算子, 算術演算子 Javascriptでよく使われる演算子(operator)はプログラムを書くときにとても大事な道具のようなものです。「値をどう扱うか」「条件をどう判定するか」などに使います。 ここではジャンル別に詳しく紹介していきます！ 算術演算子　（計算に使う）  演算子読み方  意味例 +プラス足し算/文字列結合5+3→8/"Hello"+"! "→”Hello! "-マイナス引き算9 - 4 →5*アスタリスク掛け算3 * 2 → 6/スラッシュ割り算8 / 2 → 4%パーセント割ったあまり10 / ... --- - Published: 2025-04-21 - Modified: 2025-04-21 - URL: https://programing-knowledge.net/javascript-method/ - カテゴリー: フロントエンド, 基礎, 未分類 - タグ: javascript, まとめ, メソッド一覧, 初心者向け ここではJavaScriptでよく使うメソッド一覧と簡単に使い方について紹介します。 配列に関するメソッド . forEach 配列の要素を一つずつ処理する //JavaScript const fruits = ; fruits. forEach( fruit => { console. log(fruit); }); . map配列の各要素に処理をして新しい配列を作る //JavaScript const numbers = ; const doubled = numbers. map( n... --- - Published: 2025-04-19 - Modified: 2025-07-04 - URL: https://programing-knowledge.net/https-programing-knowledge-net-button-artwork-that-turns-into-a-finger-mark-when-you-place-your-mouse-over-it/ - カテゴリー: 基礎 - タグ: CSS, CSSボタンの作り方, CSS指マークになるボタンの作り方, HTML, htmlボタンの作り方, html指マークになるボタンの作り方, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 模写 webサイトを作っていると、マウスを乗せた時に指のマークになるボタンを見かけたことはありませんか？今回は、初心者の方でも超カンタンにできる！指のマークになるボタンの作り方を、優しく解説します！ 基本のボタン まずはhtmlで基本のボタンを作ります 今回は にclass名をつけて解説します ・classについての解説はこちら→HTMLのclassの使い方！を分かりやすく解説！class名は　"glow-button" とつけました web表示させるとこんな感じ。 CSSでデザイン 今回も内部CSS... --- - Published: 2025-04-13 - Modified: 2025-04-13 - URL: https://programing-knowledge.net/javascriptgettime-gettime-date-mathfloor/ - カテゴリー: フロントエンド, 基礎 - タグ: Date(), getTIme(), javascript, 初心者向け, 基本的な使い方, 応用例 getTime は、JavaScript で日付や時間を扱うときに使うメソッドのひとつです。 基本的な使い方 //JavaScript const now = new Date; const timestamp = now. getTime; console. log(timestamp); ・getTime は1970年1月1日0時0分0秒（UTC）からの経過ミリ数秒を返します。・これはタイムスタンプとも呼ばれます。 応用例：時間差の計算 //JavaScript const start = ... --- - Published: 2025-04-12 - Modified: 2025-07-04 - URL: https://programing-knowledge.net/even-beginners-can-do-it-create-a-basic-button-with-html-and-css/ - カテゴリー: 基礎 - タグ: buttonタグ, CSS, CSS ボタン, HTML, htmlボタンの作り方, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, ボタンの作り方, ボタンの文字の大きさを変える, ボタンの色を変える, ボタンの角を丸くする, 初心者向け この記事では、HTMLとCSSだけで簡単にボタンを作る方法を、超初心者向けに分かりやすく解説します！「コードがよくわからない... 」という方でも大丈夫！実際のサンプルを見ながら、一緒に楽しく学んでいきましょう！ フォルダ作成 まずはフォルダとファイルを作成しましょう！ フォルダとファイル作成の仕方はこちら→【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成フォルダ名を btn練習 と付ました。 次は、HTMLファイルを作成します。VS-codeを立... --- - Published: 2025-04-05 - Modified: 2025-05-30 - URL: https://programing-knowledge.net/https-programing-knowledge-net-a-super-easy-to-understand-explanation-of-the-difference-between-class-and-id/ - カテゴリー: 基礎 - タグ: classの使い方, CSS, HTML, idとclassの違い, IDの使い方, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 模写 class （クラス）とは クラスは「複数のものに同じスタイルを適用したいとき」に使います class の使い方はこちらから→HTMLのclassの使い方！を分かりやすく解説！ たとえば、ボタンが６つあります。 赤いボタン３つと緑のボタン３つに分けます。この場合、複数のものに同じスタイルを適用したい時にあたるので、classを使います。赤いボタンにはclass名に　" red-btn "　緑のボタンにはclass名に　" green-btn "　というふうに、class名に色を入れてあげると分か... --- - Published: 2025-03-29 - Modified: 2025-04-07 - URL: https://programing-knowledge.net/make-web-design-more-fun-with-this-easy-class-even-for-beginners/ - カテゴリー: 基礎 - タグ: classでデザイン, classとは, classの使い方, classの書き方, CSS, CSSの書き方, HTML, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 模写 この記事では、HTMLのclassを使って、どんなページでも簡単にデザインを変更する方法を学びます タグをデザインする では早速以前作成した、HTMLの「絶品カレーの作り方」を使ってclassの使い方を学びましょう！ ・HTMLの「絶品カレーの作り方」はこちらから→実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！HTMLコードの中に タグが３つあります 上の２つの タグだけ、色と文字の大きさを変えたいのですが、 style. css で タグをデザインします。cssファイルを開きまし... --- - Published: 2025-03-22 - Modified: 2025-04-06 - URL: https://programing-knowledge.net/https-programing-knowledge-net-this-is-perfect-complete-guide-to-creating-external-css/ - カテゴリー: 基礎 - タグ: CSS, CSSの作り方, HTML, stylecssの作り方, VS code初心者, スタイルシートの作り方, ビジュアルスタジオコード、, プログラミング初心者, 初心者向け, 外部CSS, 外部CSSの作り方, 模写 外部CSSとは 外部 CSS とは、Webページのデザインを別のファイルにまとめて管理する方法です。これにより、複数のページで同じデザインを使いたいときに便利です。 なぜ外部CSSを使うのか？ ・効率的１つの CSS ファイルを使えば、複数のページに同じデザインを適用できます。これで毎回 CSS を繰り返し書く必要がないので便利です。たとえば、インライン CSS はタグに直接書くため、繰り返し書く必要があります。また、内部 CSS も HTML ファアイル内に書いているため、別の HTMLファイ... --- - Published: 2025-03-19 - Modified: 2025-03-19 - URL: https://programing-knowledge.net/html-css-opacity-backdrop-filter-mask-image/ - カテゴリー: フロントエンド, 基礎 - タグ: backdrop-filter, clip-path, CSS, HTML, mask-image, mix-blend-model, opacity, png画像, rgba(), プログラミング初心者, 初心者向け, 対処法, 画像透過, 透過 画像の透過（透明にする）方法を初心者向けに解説！画像の透過には「画像の一部を透過する方法」と「全体を透過する方法」の2種類があります。目的に応じてCSSや画像編集ツール（Photoshopなど）を使い分けましょう！ CSSを使って画像全体を透過する 画像全体の透明度を調整するには、opacity や rgba を使います。 ⒈ opacity で透明度を設定 //css img { opacity: 0. 5; /* 透明度50% */ } ・ opacity: 1; （不透明）～ opacit... --- - Published: 2025-03-19 - Modified: 2025-03-19 - URL: https://programing-knowledge.net/javascript-backgroundposition/ - カテゴリー: フロントエンド, 基礎 - タグ: backgroundPosition, CSS, HTML, javascript, 初心者向け, 対処法 JavascriptでbackgroundPositionを指定するには、CSSのルールに従って値を設定する必要があります。以下のポイントを押さえておくとスムーズに使えます。 ⒈ backgroundPosition の基本 JavaScript で指定する方法 //js document. body. style. backgroundPosition = "center top"; ・CSSと同じ書き方でOK・”X方向　Y方向”の2つの値を半角スペースで区切る backgroundPosit... --- - Published: 2025-03-19 - Modified: 2025-03-19 - URL: https://programing-knowledge.net/javascript-borderradius/ - カテゴリー: フロントエンド, 基礎 - タグ: borderRadius, CSS, HTML, javascript, 初心者向け, 基本, 対処法 JavaScript で borderRadius を指定するには、CSSのルールに従って値を設定する必要があります。以下のポイントを押さえておくとスムーズに使えます。 borderRadius の基本 Javascript で指定する方法 //js document. getElementById("box"). style. borderRadius = "10px"; ・CSSと同じ書き方でOK・単位（ px , % , em など）をつける borderRadius の指定方法 ⒈ 1つ... --- - Published: 2025-03-17 - Modified: 2025-03-19 - URL: https://programing-knowledge.net/javascript-this-fined/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, javascript, this, プログラミング初心者, 初心者向け, 対処法 ⒈ this が指すものを見分ける4つのポイント ⒉ this の基本ルール ⒊ どの this が使われるか判断するコツ ⒋　this を迷わないための対策 ⒌　まとめ this が指すものを見分ける4つのポイント JavaScriptで this が何を指すのかを決めるルールは、大きく分けて4つあります。 関数の呼び方（重要！） どこで定義されたかではなく、どのように呼ばれたか strict mode (厳格モード) の影響 this を明示的に指定する方法 ( . call, . appl... --- - Published: 2025-03-15 - Modified: 2025-03-22 - URL: https://programing-knowledge.net/https-programing-knowledge-net-for-beginners-how-to-write-css-using-style-tags/ - カテゴリー: 基礎 - タグ: CSS, CSSはどこに書くの, CSS書き方, HTML, styleタグ, VS code初心者, ビジュアルスタジオコード、, プログラミング初心者, 内部CSSとは, 初心者向け 前回も紹介した通り、CSSの書き方には。「インラインCSS」「内部CSS」「外部CSS」の3つの方法があります。前回の記事【 インラインCSS 】の書き方はこちらから→超初心者み向け！CSSはどこに書くの⁈今回は内に書く【 内部CSS 】に注目し、書き方を紹介します！ 内部CSSとは？ 内部CSSとは、内に　タグを作って書きます。 実践！文字の色を変える 前回の記事、HTMLで作った、「絶品カレーレシピ」を使って、文字の色を変えてみましょう！・前回の記事「絶品カレーレシピ」HTML文書の作り方は... --- - Published: 2025-03-08 - Modified: 2025-03-16 - URL: https://programing-knowledge.net/https-programing-knowledge-net-how-to-write-css-directly-in-html-tags/ - カテゴリー: 基礎 - タグ: CSS, CSSはどこに書くの, CSS書き方, HTML, VS code初心者, ビジュアルスタジオコード、, 初心者向け, 模写 CSSとは？ CSSとは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。HTMLだけで作ったページはシンプルすぎるため、CSSでデザインして、おしゃれに見た目を変えることができます。・こちらはHTMLのみで作成したページです。↓↓全体的に左に寄っています。 こちらはCSSでデザインされたページになります。全体的に中央に配置され、フォントを変更、写真を丸くしてあります。 CSSを書く方法は3つ CSSの書き方には3つの方法があります。前回書いた、HT... --- - Published: 2025-03-01 - Modified: 2025-03-16 - URL: https://programing-knowledge.net/https-programing-knowledge-net-practice-making-an-excellent-curry-recipe-using-html-for-the-first-time/ - カテゴリー: 基礎 - タグ: HTML, HTMLコード実践, html模写, html練習, コーディング, コード練習, ビジュアルスタジオコード、, プログラミング初心者, リストタグ, 写真タグ, 初めてのHTML, 初心者向け, 実践HTML, 模写, 段落タグ, 見出しタグ, 順番付きリストタグ ここでは、実際にHTMLのみで、カレーのレシピページを作ります。同じcodeを書いて同じ作業をして、タグの使い方を覚えましょう！ HTMLで作る絶品カレーのレシピ できあがりイメージです。HTMLのコードのみで作成したページです。一緒に作業しながらタグについて学習していきましょう！ bodyの中にcodeを書く ビジュアルスタジオコードを開きます。コードを書くまでの流れは、【 Live Server が表示できない！！】VS code初心者あるある対処法　←こちらからフォルダを作ってスタートしま... --- - Published: 2025-02-22 - Modified: 2025-04-25 - URL: https://programing-knowledge.net/why-does-the-tag-for-photos-ltimggt-only-have-a-start-tag/ - カテゴリー: 基礎 - タグ: HTML写真タグ, HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, imgタグとは, VS code初心者, プログラミング初心者, 写真タグ, 写真表示のタグ, 写真表示の仕方, 空要素とは, 閉じタグがないタグ, 開始タグしかないタグ この記事では、写真を入れるタグ の使い方と、開始タグしかない理由をわかりやすく解説します！ 写真を入れるタグ の基本 HTMLで写真を入れるには タグを使います。前回、写真フォルダを作成したときの写真を例に簡単に説明します。【前回の記事、写真フォルダ作成←はこちらから】・この写真ファイル名は、zeppincurry. jpeg です codeで書くとこうなります↓↓　となります。 よく見ると、 のような閉じタグはありません。・codeの説明はこうです↓↓ 　 ・ウェブで表示されるとこうなります↓... --- - Published: 2025-02-20 - Modified: 2025-02-20 - URL: https://programing-knowledge.net/html-css-before-after/ - カテゴリー: フロントエンド, 基礎 - タグ: ::after, ::before, CSS, HTML, プログラミング初心者, 初心者向け, 対処法, 疑似要素 疑似要素（Pseudo-elements）は、HTMLの要素に対して疑似的な内容や装飾を追加するためのCSSの機能です。特に ::before や ::after がよく使われ、要素の前後にコンテンツを追加できます。 ::before と ::after の基本 ・要素の前（::before）または後（::after）に内容を追加できる。 contentプロパティ ・content に指定できる値  値 説明“テキスト”文字を追加“ ”何も追加しない（デフォルト）attr (属性名)HTML属性... --- - Published: 2025-02-20 - Modified: 2025-02-20 - URL: https://programing-knowledge.net/html-css-img-repeat-xy/ - カテゴリー: フロントエンド, 基礎 - タグ: background-repeat, CSS, HTML, repeat(), プログラミング初心者, 初心者向け, 対処法, 繰り返し 画像をリピート（繰り返し表示）する方法 CSSの background-repeat を使うと、画像を繰り返し表示できます。デフォルトでは、背景画像はタイル状に繰り返される仕様になっています。 background-repeat の基本 ・画像を縦横に繰り返す（デフォルト） ・結果st. tokyo. jpg がボックス全体に敷き詰められる。 繰り返しのバリエーション ・水平方向だけ（repeat-x） ・結果画像が横方向にのみ繰り返される。 ・垂直方向だけ(repeat-y) ・結果画像が縦方... --- - Published: 2025-02-19 - Modified: 2025-02-19 - URL: https://programing-knowledge.net/html-css-z-index/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, z-index, プログラミング初心者, 初心者向け, 対処法 z-index の基本的な使い方 z-index はCSSのpositionプロパティ（absolute, relative, fixed, stickyのいすれか）が適用された要素の重なり順を制御するプロパティです。数値が大きいほど上に表示され、小さいほど下に表示されます。 z-index の基本 ・z-index を使った要素の重なり調整 ・結果box1 (赤）は z-index: 1; → 下に配置box2 (青）は z-index: 2; → . box1 より上に表示 z-index ... --- - Published: 2025-02-16 - Modified: 2025-02-16 - URL: https://programing-knowledge.net/html-css-display-flex/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, display:flex;, HTML, プログラミング初心者, 初心者向け フレックスボックス（Flexbox)は、要素を柔軟にレイアウトできるCSSのレイアウトモデルです。親要素に display: flex; を設定すると、子要素の配置やサイズ調整が簡単にできます。 基本的な使い方 ・水平に並べる ・結果display: flex;にすると、itemが横並びになる。 justify-content (横方向の揃え方) ・justify-contentを使って子要素を整列 justify-contentの値説明flex-start左寄せ（デフォルト）flex-end右... --- - Published: 2025-02-15 - Modified: 2025-02-22 - URL: https://programing-knowledge.net/https-programing-knowledge-net-htmla-must-see-for-beginners-how-to-make-a-photo-folder/ - カテゴリー: 基礎 - タグ: HTML, HTML写真ファイル, VS code写真フォルダ, VS code初心者, ビジュアルスタジオコード、, プログラミング写真ファイル, プログラミング初心者, 写真ファイル, 写真ファイル作る場所, 写真表示方法 写真をHTMLで使うには、正しい場所に保存することが大事です！難しく考えずに次の手順で作業してみましょう！ imagesフォルダを作る 写真フォルダの名前は「 images 」という名前で作成します。「 images 」フォルダは、必ずHTMLファイルと同じ場所に作ります。macパソコンの場合はFinderを開き、index. htmlファイルの入ったフォルダをダブルクリックで開きます。「 index. htmlファイル 」の入ったフォルダ作成の仕方はこちら→【 Live Server が表示で... --- - Published: 2025-02-08 - Modified: 2025-02-28 - URL: https://programing-knowledge.net/if-you-know-the-basics-of-html-the-three-tags-you-wont-get-confused/ - カテゴリー: 基礎 - タグ: bodyタグ, headタグ, htmlタグ, htmlタグとは, html基本構造, langとは, タグの役割, 終了タグとは, 開始タグとは ウェブページには基礎となる重要なタグあがあります！それが htmlタグ headタグ bodyタグの3つのタグです 開始タグと終了タグの基本的な意味 開始タグと終了タグはペアで使うことが基本である。・開始タグ何かを始める合図。これから始める内容を囲むために開始タグで「ここから始めるよ」という意味で使います。・終了タグ何かを終わらせる合図。開始タグで始まった内容が「ここで終わったよ」という意味を示します。・終了タグが無いものもある開始タグと終了タグはペアで使うことが基本ですが、終了タグが無いものも... --- - Published: 2025-02-01 - Modified: 2025-02-08 - URL: https://programing-knowledge.net/first-line-of-programming-super-easy-explanation-of-doctype-html/ - カテゴリー: 基礎 - タグ: DOCTYPEとは, DOC宣言とは, HTMLプログラミング, HTML始め方, VS code初心者, プログラミング1行目 < DOCTYPE html > は、「これからHTML5の文書が始まりますよ！」とブラウザに伝えるための合図です。なので、とりあえず最初の1行目に必ず書く！これをDOC宣言と言います ブラウザへのお知らせ この1行がないと、ブラウザは「このページは古い形式のHTMLかな？」と勘違いして、ページを正しく表示できないことがあります。HTMLには、古いバージョンや最新のHTML5などがあり、ブラウザがそれを正しく認識するために必要です。現代では最新バージョンのHTML５の、< DOCTYPE htm... --- - Published: 2025-01-25 - Modified: 2025-02-01 - URL: https://programing-knowledge.net/what-to-do-when-explorer-disappears/ - カテゴリー: 基礎 - タグ: VS code初心者, エクスプローラ再表示, ビジュアルスタジオコードエクスプローラ表示の仕方, ビジュアルスタジオコード画面構成, プログラミング初心者 「あれ、エクスプローラーが消えた！」VS codeを使っていると、そんな経験をしたことはありませんか？この記事では、エクスプローラーを表示・非表示する方法を、初心者でも分かりやすく解説します！ エクスプローラーとは エクスプローラーは、VS codeの左側に表示されるサイドバーで、ファイルやフォルダを確認したり開いたりするための便利なツールです。ファイルとフォルダーの違いはこちら エクスプローラーが消えた理由 実は、エクスプローラーは消えたのではなく、何かの操作で非表示になっただけんです！その理... --- - Published: 2025-01-25 - Modified: 2025-01-25 - URL: https://programing-knowledge.net/html-css-first-margin/ - カテゴリー: フロントエンド, 基礎 今回はmarginの使い方について説明をしていきたいと思います。 marginとは？ 　要素の外側のスペース（余白）を指定するためのプロパティです。　要素とその周囲の他の要素との間に余白を設けることで、レイアウトやデザインを調整するために使用されます。 marginの基本的な特徴 ・外側の余白　要素の境界（ボーダー）の外側に設定されるスペース。　他の要素と要素を離すために使用します。 ・透明なスペース　marginで設定したスペースは背景色やコンテンツがなく、完全に透明です。 ・単位　値はピクセ... --- - Published: 2025-01-25 - Modified: 2025-01-25 - URL: https://programing-knowledge.net/html-css-first-marginoffset/ - カテゴリー: フロントエンド, 基礎 初心者の頃にmarginを使いすぎてデザインが崩れた経験がある方も多いのではないのでしょうか。今回はmarginの相殺について解説していきたいと思います。 marginの相殺とは HTMLとCSSにおけるmarginの相殺は、CSSレイアウトにおいて発生する特定の現象で、隣接する要素や親子関係にある要素間のmarginが重なり、一部が無視されるような挙動を指します。この仕組みを理解することは、予期しないデザインの崩れを防ぐ上で重要です。 marginの相殺の発生条件 ・隣接するブロック要素のma... --- - Published: 2025-01-22 - Modified: 2025-01-22 - URL: https://programing-knowledge.net/html-css-transform/ - カテゴリー: フロントエンド, 基礎, 未分類 - タグ: CSS, HTML, HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, transform, プログラミング初心者, 初心者向け 画像を斜めに傾けたい時の解説を簡単にしていきたいと思います！ CSSを使用して画像を斜めに傾ける場合、transform　プロパティを使用します。その中でも、rotate　関数を利用して角度を指定することで、画像を簡単に回転することができます。 以下は具体的なコードと例です。 ・transform: rotate(15deg);画像を時計回りに15度回転させます。rotateの中には角度を指定し、deg(度)単位を使用します。負の値を指定すると反時計回りになります。（例　rotate(-15de... --- - Published: 2025-01-19 - Modified: 2025-01-19 - URL: https://programing-knowledge.net/html-css-menulist-hunbergermenu/ - カテゴリー: フロントエンド, 基礎 今回はHTML CSS JavaScriptでハンバーガーメニューを作成し、メニューボタンを押してもリストが表示されない時の対処法を解説していきたいと思います。 まずはハンバーガーメニューを作ります。 赤矢印のボタンを押すと、ボタン自体は機能していますが、出てくるはずのメニューリストが下の画像をご覧の通り表示されません。 CSSにoptionプロパティを追加し、z-indexを指定して、メニュー画面が前面に出てくるように設定したらいいのではないかと思いやってみましたがダメでした。そこで、CSSを... --- - Published: 2025-01-18 - Modified: 2025-01-30 - URL: https://programing-knowledge.net/a-must-see-for-beginners-visual-studio-code-useful-spell-check-extensions-code-spell-checker-code-spell-checker/ - カテゴリー: 基礎 - タグ: code spell checker, HTML, VS code拡張機能, コードスペルチェッカー, スペルチェック拡張機能, ビジュアルスタジオコード、, ビジュアルスタジオコード拡張機能, プログラミング初心者, 初めてのプログラミング, 初心者向け スペルチェックって何？ 1 スペルチェックは、文章やコードの中にある「スペルミス（つづりの間違い）」を見つけて教えてくれる機能のことです。例えば、英語の単語を間違えて書いてしまったときに、「これ間違ってるよ！」と教えてくれる「お助けツール」みたいなものです！（例）あなたが「apple （りんご）」と書きたかったのに、間違えて「aple」と書いてしまったとします。すると、スペルチェックが働いて「aple に赤線や波線を引いて、ここ間違ってるよ！」と教えてくれます。 スペルチェックの重要性 1 co... --- - Published: 2025-01-11 - Modified: 2025-04-05 - URL: https://programing-knowledge.net/enjoy-your-first-step-debut-programming-with-live-server/ - カテゴリー: 基礎 - タグ: HTML初心者, HTML基礎, Live Server, live server使い方, Live Server動作確認, liveservers表示方法, liveserver表示できない, mac HTML, ビジュアルスタジオコード、, ビジュアルスタジオコード拡張機能, ライブサーバーが表示出来ない, ライブサーバー確認方法, ライブサーバー表示方法 Live Serverの重要性 ・Live Serverを整えることは時間と労力を節約する第一歩です！ 「Live Serverは、プログラミングを始めるときの効率アップツールです。これを最初に整えておくことで、無駄な作業を減らし、書いたコードの結果をすぐに確認できる環境を作れます。プログラミングをスムーズに、そして楽しく学ぶための第一歩として、Live Serverを導入するのがとても大切なんです！ フォルダを作成 はじめにフォルダを作成します。なぜなら、Live Serverはファイル単体で... --- - Published: 2025-01-04 - Modified: 2025-01-30 - URL: https://programing-knowledge.net/vs-code-for-beginners-magical-way-to-write-code-view-in-browser-super-easy/ - カテゴリー: 基礎 - タグ: HTMLプレビュー, live server使い方, VS code, VS codeプレビュー, ビジュアルスタジオコード拡張機能, ブラウザで表示, プログラミング初心者 Live Server（ライブサーバー）とは Live server （ライブサーバー）とは、visual studio code （ビジュアルスタジオコード）の【 拡張機能 】のひとつです。簡単に言うと、「 あなたが書いたコードをすぐにブラウザで見せてくれるツール 」です。 使うメリット VS code でコードを書いたら、そのコードを画像として表示させなければなりません。そのやり方を簡単に説明します。こちらが私が書いたコードです。↓↓ まず、書いたコードを「 保存 」します。次に自分の書いた... --- - Published: 2024-12-29 - Modified: 2024-12-29 - URL: https://programing-knowledge.net/parallax-easy/ - カテゴリー: フロントエンド, 基礎 パララックスとはページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現する ことです。 パララックスを使ったWEBサイトRESCALAR | 株式会社リスカラICS COLLEGE OF ARTS WEB OPEN CAMPUSRe-Frame 今回はJavaScriptを使わずにパララックスを簡単に作っていこうと思います！ まずは、挿入したい背景画像を用意します。CSSに背景画像を指定したら、min-height（要素の最小高）background-po... --- - Published: 2024-12-28 - Modified: 2024-12-28 - URL: https://programing-knowledge.net/understanding-the-difference-between-folders-and-files-will-make-the-world-of-computers-more-enjoyable/ - カテゴリー: 基礎 - タグ: データ整理術, パソコンのデータ整理, パソコン初心者ガイド, パソコン基本操作, ファイルとは, ファイル保存方法, フォルダとは, フォルダとファイルの違い, フォルダの使い方, フォルダの活用術, フォルダの管理方法, フォルダ作成方法, 初心者向けパソコンの知識 パソコンを使い始めると必ず耳にする「 フォルダとファイル」という言葉。でも具体的に何が違うのかと聞かれると、意外と説明が難しいですよね。このブログではフォルダとファイルの違いを、わかりやすく例えながら解説します。これを読めば、プログラミングを学ぶ前の準備として、データ管理の基本がしっかりと身につきます！ フォルダとファイルの違い フォルダは「 本棚 」ファイルは「 本 」 ですフォルダは、本棚のような役割をします。本棚がなければ、本がバラバラに散らばってしまいますよね？フォルダは本（ファイル）を... --- - Published: 2024-12-21 - Modified: 2025-01-26 - URL: https://programing-knowledge.net/extended-functions-make-programming-fun-a-complete-explanation-that-will-help-even-first-timers-get-confused/ - カテゴリー: 基礎 - タグ: HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, ビジュアルスタジオコード、, ビジュアルスタジオコード拡張機能, ビジュアルスタジオコード日本語化, 拡張機能日本語化 visual studio code をインストールしたけれど、なんだか操作が難しそう... そんなふうに思ったことはありませんか？実は、VS code には拡張機能という便利なツールがあり、それを活用することで作業がグッと楽になります！初心者の方でも迷わないように、拡張機能の使いやすさやおすすめをわかりやすく解説していきます。 拡張機能とは 拡張機能とは、VS code に追加できる便利な "アプリ"のようなものです。たとえば、スマホにカメラアプリやゲームをインストールするのと同じように、VS... --- - Published: 2024-12-18 - Modified: 2024-12-18 - URL: https://programing-knowledge.net/html-css-first-texticon-alignitems/ - カテゴリー: フロントエンド, 基礎 こんにちは！今回は「テキストとアイコンを横並びにしたらバランスがおかしくなってしまった！」という方のためのに対処法をお伝えしていきます。 まずはHTMLとCSSの中身を見ていきましょう。 親要素に display: flex; でテキストとアイコンを横並びにしています。実際にブラウザで確認してみます。 テキストよりアイコンが下にズレているのが分かります。このズレを修正するには、align-itemsというプロパティを使います^^ 親要素に align-items: center; を追加しました... --- - Published: 2024-12-14 - Modified: 2025-01-26 - URL: https://programing-knowledge.net/a-thorough-explanation-of-visual-studio-code-download-for-beginners/ - カテゴリー: 基礎 - タグ: HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, visual studio code, ダウンロードの仕方, ダウンロード手順, ビジュアルスタジオ　ダウンロード, 初心者向け 初めてHTMLを始める方の第一歩、Microsoftが提供する無料のソースコードエディタ、「 Visual Studio Code 」のダウンロードをしてみよう！ちなみに私のパソコンはMacBookです。 ダウンロード手順 （１）公式サイトにアクセス ・「まず、↓↓ 以下のリンクをクリックして公式サイトにアクセスしてください。」・　https://code. visualstudio. com/ この画面が表示されます。英語英語英語... 日本語表示もできます。1表示→2 翻訳→3 日本語に翻訳... --- - Published: 2024-12-13 - Modified: 2024-12-29 - URL: https://programing-knowledge.net/html-css-first-positionguide/ - カテゴリー: フロントエンド, 基礎 こんにちは初心者の私がコーディングする際に、画像の上に見出しを載せたい時や要素を重ねて表示したい時に使うプロパティ　position　について学習してみようと思います。 まずはHTMLに親要素と子要素を準備します。 CSSには親要素と子要素に分かりやすいように色を付けて範囲を指定し、親要素には position: relative; を指定します。ブラウザ上で確認すると親要素の上に子要素のbox1がぴったりとくっついている状態です。 次に子要素に position: absolute;　を指定し... --- - Published: 2024-12-11 - Modified: 2024-12-18 - URL: https://programing-knowledge.net/html-css-beginner-max-width/ - カテゴリー: フロントエンド, 基礎 初心者の私がよくやってしまうミスを備忘録としてお届けしていきます^^ 参考にしたのはこちら  作って学ぶコーディング学習サイト とっても見やすく学習しやすいように初級、中級、上級編と分かれていて、完成イメージやヒント、デモ、ソースコード、画像素材も用意されているのでおすすめです！ 今回の模写対象のデモはシンプルでそんなに時間もかからなさそうと思っていたのですが、効率の悪い作り方をしてしまったせいで時間がかかってしまいました。 パッと見てわかる通り上下左右には余白があるデザインです。このようなデザ... --- - Published: 2024-12-07 - Modified: 2025-01-26 - URL: https://programing-knowledge.net/what-is-visual-studio-codevs-code-that-can-be-used-for-free/ - カテゴリー: 基礎 - タグ: HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, ビジュアルスタジオコード、, プログラミングアプリ, プログラミング初心者におすすめ, 初心者向け プログラミングを始めるには、専用のアプリでコードを書いてみることからスタートします。 コード(code)とはこんな感じ↓ 　でも、どのアプリを選んだらいいのか迷いますよね。今回は初心者におすすめのコードを書くための「エディタアプリ」をわかりやすく説明します。 なぜエディタと呼ばれるのか？ 　「エディタ(Editor)」という言葉は英語の「Edit（編集する）」に由来しています。つまり、エディタは「編集するためのツール」という意味を持っています。 1 文字やコードを編集する役割が中心 　プログラミ... --- - Published: 2024-12-01 - Modified: 2025-01-26 - URL: https://programing-knowledge.net/learn-the-basics-before-you-start-programmng-how-is-a-website-created/ - カテゴリー: 基礎 - タグ: HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, Webサイトの作り方、, フロントエンド初心者、フロントエンドとは、Webサイトが表示される仕組み 　ここではWebサイトの構成を簡単に解説するよ。今回はサラッと学習していきましょう。 フロントエンド（見た目や操作部分）とは 　フロントエンドは、Webサイトやアプリで、みなさんが「目で見たり、触ったりできる部分」の事です。 　そうです！普段私たちがスマホの画面で見ている部分です。文字やボタン、画像など、実際に「見える」＋「使う」部分全部がフロントエンドです。 　 3つの要素 　フロントエンドは ◯ HTML（配置・設計図） ◯ CSS（デザイン） ◯ JavaScript（動き） の3つの要素... --- - Published: 2024-11-23 - Modified: 2025-01-26 - URL: https://programing-knowledge.net/how-a-website-for-learning-the-basics-before-starting-programming-is-displayed/ - カテゴリー: 基礎 - タグ: HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, フロントエンド初心者、フロントエンドとは、Webサイトが表示される仕組み みなさんこんにちは。前回に続き、Webサイトをさらに理解して行きましょう！ URL (アドレス）とは 　前回学んだ、インターネット回線は「道」としたならば、「URL」はインターネット上での「住所」のようなものです。 　たとえば、家の住所が特定の場所を指すように、URLは特定のWebサイトやページを見つけるための場所を示します。URL（住所）をブラウザに入力すると、ネット回線（道）を通ってその場所（住所）にあるWebページや情報にアクセスする事ができるようになります。 　ちなみにこちらが私の yo... --- - Published: 2024-11-17 - Modified: 2025-01-26 - URL: https://programing-knowledge.net/learn-the-basics-before-starting-programming-what-is-the-internet/ - カテゴリー: 基礎 - タグ: HTML基礎、HTML初心者、初めてのHTML、 初めてのプログラミング、プログラミング初級、インターネットとは、, フロントエンド初心者、フロントエンドとは、 　初めまして、こんにちは。50歳の私がwebサイト作りに挑戦します！理解するためにとても分かりやすく解説しているので参考にして頂けると嬉しいです。 インターネットとは 　インターネットは、世界中のコンピュータを繋ぐ、目にを見えない「道」みたいなものです。 　この「道」を使って、メッセージを送ったり、写真を見たり情報を探したりできます。 　たとえば、友達にスマホからメールを送る時、そのデータがインターネットという「道」を通って、友達のスマホに届きます。ホームページなどの webサイトを見るときも、... --- - Published: 2024-10-23 - Modified: 2024-12-18 - URL: https://programing-knowledge.net/dont-work-display-none/ - カテゴリー: フロントエンド, 基礎 - タグ: @media screen, CSS, display:block;, display:flex;, display:none;が効かない, HTML, レスポンシブ, 中級模写, 初心者向け, 対処法, 模写 初心者向け模写を最近やっています^^ そこで初心者の私がよくやってしまうミスをご紹介します！ 皆さんの参考になればなぁーと思いつつもほぼ私の備忘録でございます  参考にした模写はこちら  作って学ぶコーディング学習サイト　https://code-jump. com/coding-recommend/ 見た目がシンプルで綺麗めのデザインなので初心者にはコーディング学習にぴったり！！ ある程度PC版の画面模写は仕上がってきたので、次はモバイル版になった時も見やすいようにレスポンシブデザインを考えて... --- - Published: 2024-10-10 - Modified: 2024-10-10 - URL: https://programing-knowledge.net/what-liff-app/ - カテゴリー: LIFF, フロントエンド LIFFアプリとは LIFFとは、LINE Front-end Frameworkの略称でLINEが提供するウェブアプリのプラットフォームです。LIFFアプリではLINEのユーザIDなどをLINEプラットフォームから取得でき、LINEのユーザ情報を使用したシステム開発が出来ます。 LIFFは、LINEのトーク画面からLIFFブラウザで開くことになります。内部的にはWebViewが使用されており、HTMLによって表示されます。 OpenChatではLIFFはサポートされていません。 スターターアプ... --- - Published: 2024-10-10 - Modified: 2024-12-18 - URL: https://programing-knowledge.net/fix-navbar-spacing/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, margin, padding, top, ナビゲーションバー, ナビゲーションバーの隙間対処法, ナビバー, 余白, 初心者向け, 対処法, 隙間 初心者の私がよくやってしまうミスを備忘録としてお届けしていきます^^ 前回と同様、参考にしたのはこちら  作って学ぶコーディング学習サイト　https://code-jump. com/coding-recommend/ 見た目がシンプルで綺麗めのデザインなので初心者にはコーディング学習にぴったり！！ 私は難易度高めの模写ばかりしてきたのでこちらのサイトの中級編からすることにしてみました。 今回はナビゲーションバーについてです！ 初心者の私にはナビゲーションバーは最も時間が掛かるところでもありま... --- - Published: 2024-10-09 - Modified: 2024-12-18 - URL: https://programing-knowledge.net/css-dont-work-scroll/ - カテゴリー: フロントエンド, 基礎 - タグ: CSS, HTML, overflow-x:hidden;, overflow:hidden;, overflow:scroll;, コーディング, スクロールバー, スクロールバーが表示されない, 中級模写, 初心者向け, 対処法, 模写 初心者向け模写を最近やっています^^ そこで初心者の私がよくやってしまうミスをご紹介します！ 皆さんの参考になればなぁーと思いつつもほぼ私の備忘録でございます  今回参考にしたのはこちら  作って学ぶコーディング学習サイト　https://code-jump. com/coding-recommend/ 見た目がシンプルで綺麗めのデザインなので初心者にはコーディング学習にぴったり！！ 私は難易度高めの模写ばかりしてきたのでこちらのサイトの中級編からすることにしてみました。 さっそく、コーディング... --- ---