Java
Java | 1 日 90 分 × 7 日アプリ学習 初級編：ミニToDoアプリ（CUI）
Web
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － object-position
object-position を理解すると「どこを切り取るか」をコントロールできるobject-position は、object-fit とセットで使うと真価を発揮するプロパティです。一言でいうと...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － object-fit
object-fit を理解すると「画像・動画が枠にきれいに収まる」デザインが作れるobject-fit は、画像や動画を「どのように枠に収めるか」をコントロールするプロパティです。縦横比がバラバラな...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － aspect-ratio活用
アスペクト比（aspect-ratio）を理解すると「どんな画面でも崩れない」レイアウトが作れるaspect-ratio は、ボックスモデルの中でも 画像・カード・動画枠・サムネイルなど、縦横比を固定...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － min-height / max-height
min-height / max-height を理解すると「高さが安定した UI」が作れるmin-height / max-height は、ボックスモデルの中でも 高さの伸び縮みをコントロールする...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － min-width / max-width
min-width / max-width を理解すると「伸び縮みするレイアウト」が自在に扱えるmin-width / max-width は、ボックスモデルの中でも レスポンシブ設計の核になるプロパ...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － overflow-x / y分離
overflow-x / overflow-y を分離してコントロールすると「横だけスクロール」「縦だけ切り取り」が自在になるoverflow は「要素の中身がはみ出したときの扱い」を決めますが、ov...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － overflow制御
overflow の仕組みを理解すると「はみ出し」「スクロール」「切り抜き」が自在に扱えるoverflow は 「要素の中身が、要素のサイズを超えたときどう扱うか」 を決めるプロパティです。ボックスモ...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － display:block / inline / inline-block
display:block / inline / inline-block を“動きの違いから理解する”display は 要素がどのように並び、どれだけの幅・高さを持つかを決める CSS の根本的な...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － paddingと高さの関係
padding と高さの関係を“正しく理解するとレイアウトが安定する”padding は「内側の余白」ですが、高さ（height）とどう関係するかを理解していないと、要素が思ったより大きくなったり、逆...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － margin相殺の理解
margin 相殺（マージンの重なり）を“直感で理解できるようにする”margin 相殺は、CSS のボックスモデルの中でも初心者が最もつまずきやすいポイントです。「なぜ margin が効かないの？...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － スコープ分離設計
box-sizing: border-box を“理解するとレイアウトが一気に安定する”box-sizing: border-box は、CSS レイアウトの中でも 最重要級のプロパティです。初心者が...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － スコープ分離設計
スコープ分離設計を“理解すると CSS が劇的に壊れにくくなる”スコープ分離とは、「スタイルが意図しない場所に影響しないように、適用範囲（スコープ）を明確に区切る設計」のことです。初心者がここを理解す...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － セレクタのネスト戦略
セレクタのネスト戦略を“構造から理解して、破綻しない CSS を書く”セレクタのネスト（入れ子構造）は、CSS 設計の中でも 「読みやすさ」と「保守性」を大きく左右する重要テーマ」です。初心者がここを...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － カスタムデータ属性設計
カスタムデータ属性（data-*）を“設計レベルで使いこなす”カスタムデータ属性（data-*）は、HTML 要素に 独自の意味や状態を持たせるための仕組みです。JavaScript との連携で使われ...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － contentの活用
疑似要素 content を“正しく・自在に使いこなす”ための実践ガイドcontent は、疑似要素 ::before と ::after を使うときに欠かせないプロパティです。初心者がここを理解する...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似要素 ::after
疑似要素 ::after を“自在に扱えるようになる”ための実践ガイド::after は、::before と並んで HTML を増やさずに装飾を追加できる最強の CSS テクニックです。名前の通り「...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似要素 ::before
疑似要素 ::before を“ちゃんと味方にする”::before は、「本物の要素の前に、もう1つ“見た目だけの要素”を生やす」ための仕組みです。HTML を増やさずに、アイコン・線・ラベル・装飾...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － グルーピングセレクタ
グルーピングセレクタを“正しく・効率的に”使いこなすグルーピングセレクタは、CSS の中でも 「複数のセレクタに同じスタイルをまとめて適用する」 とても便利な書き方です。初心者がここを理解すると、CS...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － !importantを使わない設計
!important を使わない CSS 設計を“根本から理解する”!important は CSS の中でも 最強の上書き手段ですが、便利な反面、使いすぎると CSS が壊滅的に管理しづらくなるとい...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － セレクタの詳細度管理
セレクタの詳細度（Specificity）を“感覚で理解する”ための実践ガイドCSS の詳細度（specificity）は、「どのスタイルが勝つか」 を決める CSS のルールです。初心者がここを理解...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 複数クラス指定
複数クラス指定を“正しく・美しく”使いこなす複数クラス指定は、CSS の中でも 最も頻繁に使う基本テクニックです。しかし、初心者ほど「どう組み合わせればいいのか」「どんな意味があるのか」で迷いがち。こ...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :not の活用
:not() を“自在に使いこなす”ための実践ガイド:not() は CSS の中でも 「特定の要素だけ除外してスタイルを当てる」 という、非常に強力で柔軟な疑似クラスです。初心者がここを理解すると、...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :nth-child の実践パターン
:nth-child を“自在に使いこなす”ための実践パターン集:nth-child() は CSS の中でも 「繰り返し要素をパターンで選択できる」 とても強力な疑似クラスです。初心者がここを理解す...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :first-child と :last-child
:first-child と :last-child を“構造から理解する”:first-child と :last-child は、CSS の中でも 「並びの中で一番最初／最後の要素だけにスタイルを...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :active
疑似クラス :active を“気持ちよく理解する”:active は、ユーザーが 「クリックして押している瞬間」 を表す疑似クラスです。ボタンやリンクを押したときに、少し沈んだり色が変わったりする“...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :focus
疑似クラス :focus を“直感的に理解する”:focus は、フォーム入力やボタン操作など ユーザーが「今まさに触っている要素」 を示す疑似クラスです。特にアクセシビリティ（キーボード操作のしやす...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :hover
疑似クラス :hover を“気持ちよく使いこなす”ための基礎と実践:hover は CSS の中でも特に「動き」を感じられる楽しいセレクタです。マウスカーソルを乗せたときにスタイルを変えるための疑似...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 属性セレクタ活用
属性セレクタを“使いこなす”ための基礎と実践属性セレクタは、HTMLタグが持つ属性（class・id 以外も含む）を条件にしてスタイルを当てる方法です。初心者が理解すると CSS の表現力が一気に広が...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 子孫セレクタと直下セレクタ
子孫セレクタと直下セレクタを“本質から”理解するCSSの中でも、初心者がつまずきやすいのが 子孫セレクタ（スペース） と 直下セレクタ（>） の違いです。この2つを正しく理解すると、HTML構造を意識...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － クラスとIDの適切な設計
クラスとIDの適切な設計を“本質から”理解するクラス（.）とID（#）は、CSSの中でも特に「設計の質」が出る部分です。初心者のうちにここをしっかり押さえておくと、後々のCSSが劇的に書きやすくなりま...
CSS CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 要素セレクタの使い分け
CSSの基本文法をざっくりつかむCSSは「どの要素に」「どんな見た目を」適用するかを書く言語です。セレクタ { プロパティ: 値; プロパティ: 値;}セレクタ { プロパティ: 値; プロパティ: ...
JavaScript decimal.js を使った「誤差ゼロ金額電卓」
機能概要単価・数量・税率を入力「計算する」ボタンで合計金額を表示decimal.js を使うため誤差ゼロ（0.1 + 0.2 問題なし）ダークモード切り替えボタン付きスマホ対応レスポンシブデザイン S...
JavaScript 配列メソッド 実践アプリ（HTML + JS）
配列メソッド実践アプリ（sort / splice / flat / find など） を ブラウザ上で自動採点できる練習ページ（HTML + JS） として作成します。配列メソッド 実践アプリ（HT...
JavaScript 無料で使えるAPI（2025年版）
無料で使える汎用API 一覧（2025年版）分野API名無料プラン概要主な用途登録要否備考🌦️ 天気OpenWeatherMap API月1,000回リクエスト無料現在・予報・過去の天気データ要登録（...
CSS 「いまさら聞けないSCSSとSASSの違い」完全初心者向け完全ガイド
いまさら聞けないSCSSとSASSの違い（結論から）結論から言うと、SCSSとSASSは同じ「Sass」というCSS拡張言語の記法違いです。SCSS：CSSに近い書き方（主流）SASS：インデントベー...
Web 脱Adobe | フォトショ・イラレ・プレミアの無料「最強代替ツール」4選
結論：Photoshop・Illustrator・Premiere Proの無料「最強代替ツール」は以下の4つです👇GIMP（画像編集：Photoshop代替）Inkscape（ベクター編集：Illu...
Web WebサイトとWebアプリとWebサービスの違い
Webサイトとは何か（まず一番シンプルな概念）Webサイトは「情報を見るための場所」です。インターネット上に公開されているページの集まりで、基本的にはユーザーは“閲覧する”ことが目的になります。例えば...
Web WordPress Tips | セキュリティ：外部APIキーの置き場所を wp-config に移動
そもそも「外部APIキー」とは何かまず前提をそろえましょう。外部APIキーというのは、Google MapsreCAPTCHA外部メールサービス（SendGrid など）決済サービス各種外部APIとい...
Web WordPress Tips | セキュリティ：投稿者権限の最小化
「投稿者権限の最小化」とは何をすることかまず言葉をほぐします。「投稿者権限の最小化」とは、“記事を書く人に、本当に必要な権限だけを与えて、それ以上は持たせないようにすること”です。WordPress ...
Web WordPress Tips | セキュリティ：管理者権限を乱用しない
「管理者権限を乱用しない」とはどういうことかWordPress でいう「管理者権限（Administrator）」は、サイトのほぼすべてを操作できる、いわば「神モード」です。テーマやプラグインのインス...
Web WordPress Tips | セキュリティ：プラグイン脆弱性の監視
なぜ「プラグイン脆弱性の監視」が超重要なのかまず一番大事なことから。WordPress サイトが乗っ取られる原因のかなり大きな割合は、「プラグインの脆弱性」です。理由はシンプルで、プラグインは機能が豊...
Web WordPress Tips | セキュリティ：ログイン通知を受信
「ログイン通知を受信する」とは何をしているのかまずイメージからいきましょう。「ログイン通知」とは、誰かがあなたの WordPress アカウントにログインしたときに、メールなどで知らせてもらう仕組みで...
Web WordPress Tips | セキュリティ：使用中テーマの脆弱性情報を定期チェック
なぜ「テーマの脆弱性情報」を定期チェックする必要があるのかまず一番大事な前提から。WordPress のセキュリティ事故のかなりの割合は、「WordPress 本体」ではなく「テーマやプラグイン」の脆...
Web WordPress Tips | セキュリティ：ブラウザキャッシュのセキュリティ対応
ブラウザキャッシュの「セキュリティ対応」とは何をすることかまず前提から整理します。ブラウザキャッシュ自体は「表示を速くするための仕組み」です。しかし、扱うページの内容によっては“セキュリティリスク”に...
Web WordPress Tips | セキュリティ：Content-Security-Policy 設定
Content-Security-Policy（CSP）は「サイトに読み込んでよいものを“ホワイトリスト化”する最強の防御壁」まず、CSP を一言でまとめると、「このページでは、どのスクリプト・画像・...
Web WordPress Tips | セキュリティ：X-XSS-Protection 設定
X-XSS-Protection は「ブラウザ側の簡易XSSフィルターのスイッチ」まず、X-XSS-Protection をざっくり一言でいうと、「ブラウザに備わっている“簡易的なXSSフィルター”を...
Web WordPress Tips | セキュリティ：X-Frame-Options 設定
X-Frame-Options は「フレームに入れていいかどうか」を決めるスイッチまず、X-Frame-Options を一言でいうと、「このページを、他のサイトの <iframe> や <frame...
Web WordPress Tips | セキュリティ：Mixed Content の修正
Mixed Content ってそもそも何？SSL を有効化してサイトを https:// で表示できるようにしても、ブラウザのアドレスバーに「保護されていません」「一部のみ安全」みたいな警告が出るこ...
Web WordPress Tips | セキュリティ：SSLを有効化
「SSLを有効化する」とは何をしているのかまず言葉をほぐします。「SSLを有効化する」というのは、ざっくり言うと、サイトのURLをhttp:// ではなく https:// で動かすようにするそのため...
Web WordPress Tips | セキュリティ：reCAPTCHA の利用
reCAPTCHA は「人間かボットかを見分けるフィルター」まず、reCAPTCHA を一言でいうと、「この操作をしているのは、本物の人間か？ それともボットか？」をチェックするためのフィルターです。...
Web WordPress Tips | セキュリティ：セキュリティプラグイン導入
セキュリティプラグインって、ざっくり何をしてくれるのかまずイメージからいきましょう。「セキュリティプラグイン」は、WordPress にとっての・見張り役（監視）・門番（ブロック）・健康診断（スキャン...
Web WordPress Tips | セキュリティ：ファイル変更監視を設定
「ファイル変更監視」って何をする仕組み？まずイメージからいきましょう。ファイル変更監視とは、ざっくり言うと、「サーバー上のファイルが、いつ・どこで・どう変わったかを記録し、怪しい変更があれば気づけるよ...
Web WordPress Tips | セキュリティ：ウイルススキャンを定期実施
なぜ WordPress に「ウイルススキャン」が必要なのかまず前提として、ここでいう「ウイルススキャン」は、PC に入れるウイルス対策ソフトと同じ発想を、サーバー上の WordPress ファイルや...
Web WordPress Tips | セキュリティ：不正ログインログを定期確認
なぜ「不正ログインログの定期確認」がセキュリティ対策になるのかまず大事な前提から。セキュリティは「設定して終わり」ではなく、「ちゃんと見続ける」ことで強くなります。強力なパスワード2段階認証ログイン試...
Web WordPress Tips | セキュリティ：REST API の匿名アクセス制限
REST APIって何をしているのかをイメージしようWordPress の REST API は、「ブラウザ以外のもの（アプリ・ツール・スクリプト）が、WordPress と会話するための窓口」です。...
Web WordPress Tips | セキュリティ：XML-RPCのアクセス制御
XML-RPCってそもそも何者？まず「XML-RPCって何？」からいきましょう。WordPress のルートにある xmlrpc.php というファイル、見たことありますよね。これはざっくり言うと、外...
Web WordPress Tips | セキュリティ：コアファイル書き込み権限の制限
「コアファイル書き込み権限の制限」とは何をすることかまず言葉をほぐします。ここでいう「コアファイル」は、WordPress 本体のファイルのことです。wp-admin/wp-includes/ルート直...
Web WordPress Tips | セキュリティ：WordPress バージョン情報を隠す
なぜ「WordPress バージョン情報を隠す」とセキュリティが上がるのかまず前提として、WordPress はデフォルトの状態だと「自分のバージョン番号」をけっこうあちこちでベラベラしゃべります。ペ...
Web WordPress Tips | セキュリティ：.htaccess で管理URLへのIP制限
管理URLへのIP制限って、ざっくり言うと何をするのか「.htaccess で管理URLへのIP制限」というのは、WordPress の管理画面（例：/wp-admin/ や /wp-login.ph...
Web WordPress Tips | セキュリティ：ディレクトリインデックスの無効化
ディレクトリインデックスってそもそも何？まず「ディレクトリインデックス」という言葉を、イメージでつかみましょう。ブラウザで、こんなURLを開いたとします。本来なら、ここには「index.php」や「i...