Java
Java | 基礎文法：無限ループ
CSS
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － font-display制御
font-display は「Webフォントが読み込まれるまでの見え方」をコントロールする仕組みWebフォントは便利ですが、読み込みが遅いと文字が消える（FOIT） や 途中でフォントが切り替わる（F...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － Webフォント読み込み戦略
Webフォント読み込み戦略は「速さ・見え方・安定性」を同時に満たすための設計Webフォントはデザインの質を上げる強力な武器ですが、読み込みが遅いと 文字が一瞬消える（FOIT）、または 途中でフォント...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － フォントスタック設計
フォントスタック設計は「どの環境でも破綻しない文字の見え方」を作る技術フォントスタック（font-family の並び順）は、「ユーザーの環境にフォントが無いとき、どのフォントにフォールバックするか」...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － z-index設計
z-index は「どのレイヤーが手前に来るか」を決める番号z-index は、要素の「前後関係（レイヤーの順番）」を数字でコントロールするためのプロパティです。値が大きいほど手前、小さいほど奥に表示...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: sticky
position: sticky は「スクロールにくっつく、途中まで普通の要素」position: sticky は「最初は普通に流れの中にいるけど、ある位置までスクロールされたら、そこからは固定され...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: fixed
position: fixed は「画面に貼り付けて、スクロールしても動かさない」position: fixed は、要素を「画面（ビューポート）」に固定するためのプロパティです。スクロールしても、そ...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: absolute
position: absolute は「レイアウトの流れから抜けて、好きな場所に貼り付ける」position: absolute は、普通の要素と違って「文書の流れ（通常フロー）」から外れます。その...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: relative
position: relative は「その場にいながら、ちょっとだけズラす＆基準点になる」ものposition: relative は、ざっくり言うと普段どおりその場所に配置されるそこから top...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － レスポンシブカラム
レスポンシブカラムのゴールをまずイメージするレスポンシブカラムは、ざっくり言うとこういう動きです。スマホ：1カラム（縦一列）タブレット：2カラムPC：3〜4カラム「画面幅に応じてカラム数が変わるカード...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － 固定＋可変レイアウト
「固定＋可変レイアウト」とは何かをまずイメージで掴む固定＋可変レイアウトは、片方（または一部）の幅を「固定」、残りを「可変」にするレイアウトです。代表的な例はこうです。左：サイドバー 240px 固定...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － repeat関数
repeat 関数を理解すると「同じパターンのカラム・行」が一瞬で書けるrepeat() は CSS Grid 専用の関数で、「同じ定義を何回も書くのを省略するためのショートカット」 です。grid-...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － auto-fill / auto-fit
auto-fill / auto-fit を理解すると「カードが自動で詰まるグリッド」が作れるGrid の auto-fill と auto-fit は、「画面幅に応じてカードの数を自動で増減させたい...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － grid-template-areas
grid-template-areas を使うと「レイアウトの設計図」をそのまま CSS に書けるGrid の中でも grid-template-areas は、複雑なレイアウトを“文字で描く”ように...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Grid 3カラム
Grid 3カラムを理解すると「カード一覧・3分割レイアウト」が一気に楽になる3カラムレイアウトは、カード一覧、サービス紹介、ブログ一覧などでめちゃくちゃよく使います。Flexbox でも組めますが、...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Grid 2カラム
Grid 2カラムを理解すると「左右にきれいに分けるレイアウト」が一瞬で作れるCSS Grid の 2 カラムレイアウトは、「左に画像・右にテキスト」「左にラベル・右に入力欄」「2カラムのカード一覧」...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － gapプロパティ
gap を理解すると「要素間の余白管理」が一気にシンプルになるgap は、Flexbox や Grid で 「要素同士の間隔」だけをまとめて管理できるプロパティです。今まで margin-right ...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-basis戦略
flex-basis を理解すると「初期幅の戦略」が一気に上手くなるflex-basis は Flexbox の中でも、「要素が最初にどれくらいの幅を取るか」を決めるプロパティです。flex-grow...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-shrink制御
flex-shrink を理解すると「狭くなったときの振る舞い」をコントロールできるflex-shrink は、コンテナが狭くなったときに「どの要素をどれだけ縮めるか」を決めるプロパティです。flex...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-grow活用
flex-grow を理解すると「余った幅の配分」が思い通りになるflex-grow は、Flexbox の中でも 「余ったスペースをどの子要素にどれだけ渡すか」 を決めるプロパティです。「このボック...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － align-items全パターン
align-items を理解すると「縦方向の揃え」が一気に気持ちよくなるalign-items は Flexbox の中で、「交差軸（メイン軸と直角の方向）の揃え方」を決めるプロパティです。横並びな...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － justify-content全パターン
justify-content を理解すると「横方向の配置」が思い通りになるjustify-content は Flexbox の中でも、「子要素を横方向にどう並べるか」を決める超重要プロパティです。...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox縦並び
Flexbox 縦並びを理解すると「縦方向レイアウト」が一気に整理されるFlexbox は横並びだけじゃなく、縦方向のレイアウト（縦積み・上下の余白調整・フッターを下に押し下げる）にもめちゃくちゃ強い...
CSS CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox横並び
Flexbox 横並びを理解すると「並べる・揃える・余白を配る」が一気に楽になる横並びレイアウトは、ナビメニュー、カード一覧、ボタンの並びなど、どのサイトでも必ず出てきます。Flexbox を使うと、...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 複数背景指定
複数背景指定を理解すると「1つの要素に何層ものデザイン」を重ねられるCSS の 複数背景指定（multiple backgrounds） は、1つの要素に 複数の背景画像・グラデーション・パターンを重...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － background-clip:text
background-clip:text を理解すると「文字にグラデーションを流し込む」表現ができるbackground-clip: text は、CSS の中でも“映えるデザイン”を作るための強力な...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － 背景クリッピング
background-clip（背景クリッピング）を理解すると「背景の見え方」を自在にコントロールできる背景クリッピング（background-clip）は、背景色や背景画像を“どこまで表示するか”を...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － outline活用
outline を使いこなすと「枠線とは違う強調」ができるoutline は border と似ていますが、ボックスモデルの外側に描画される“外枠”です。フォームのフォーカスリング、アクセシビリティ対...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － box-shadowパターン
box-shadow パターンを理解すると「立体感・奥行き・質感」が一気にプロレベルになるbox-shadow は、ただの影ではありません。UI の雰囲気・奥行き・軽さ・重さ・浮遊感をコントロールする...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － border-radius応用
border-radius 応用を理解すると「角のデザイン」で一気にプロっぽくなるborder-radius は「角を丸くする」だけじゃなく、カード・バッジ・吹き出し・ピル型ボタン・円形サムネイルなど...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － borderの省略記法
border の省略記法を理解すると「短く・正確に・読みやすく」書けるborder は CSS の中でも使用頻度が高いプロパティですが、省略記法（ショートハンド）を理解するとコード量が減り、意図が明確...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － line-heightセンタリング
line-height を使ったセンタリングは「テキストを縦方向に揃える」ための最もシンプルな方法line-height は本来「行の高さ」を決めるプロパティですが、単一行のテキストを縦方向に中央揃え...
CSS CSS Tips | 超実務コアCSSテクニック：ボックスモデル － vertical-align
vertical-align を理解すると「インライン要素のズレ」が自在にコントロールできるvertical-align は名前だけ見ると「縦方向の中央揃え」に使えそうですが、実際は インライン要素・...
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 の表現力が一気に広が...