HTML/CSS

【CSS】table-layout: fixedとautoの違いと使いどころ

HTMLのテーブルレイアウトでは、table-layout プロパティによって列幅の決まり方が大きく変わります。
HTML/CSS

【CSS】align-contentとalign-itemsの違いと使い分け

Flexboxを使ったレイアウトでは、align-items と align-content の違いが分からず、「指定しても効かない」「なぜ位置が変わらな
HTML/CSS

【CSS】min-widthが原因でflexが崩れるケース

Flexboxでレイアウトを組んでいると、「画面幅を縮めたら折り返さない」「意図せず横スクロールが発生する」「flex-grow
HTML/CSS

【CSS】flex-basisの基本とwidthとの違い|優先順位・ショートハンドの罠・実践パターン

CSSのflex-basisとwidthの違いを優先順位の仕組みから解説。flex-basis: autoの挙動、flex: 1でbasisが0になる罠、flex-direction: columnでの挙動、min-width: 0によるテキスト溢れ対策、サイドバー+メイン等の実践パターンまで網羅。
HTML/CSS

【CSS】SVGとCSS図形の使い分け基準|UI設計で迷わない判断ポイント

UI実装では、アイコンや装飾図形を「SVGで作るべきか」「CSSだけで表現すべきか」で迷う場面が頻繁にあります。どちらも正解になり得
HTML/CSS

【CSS】before/afterの正しい活用方法|CSS疑似要素で装飾をきれいに分離する

CSSの ::before や ::after は、装飾表現をHTML構造から切り離すための非常に強力な仕組みです。アイコンの追加、装飾線、背景表現
HTML/CSS

【CSS】角丸三角形を作る方法

CSSで三角形を作る方法としては、border を使ったテクニックがよく知られています。しかし、通常の border 三角形はエッジが鋭く
HTML/CSS

【CSS】チェックマークや矢印をCSSだけで作る汎用テクニック集

WebサイトやアプリのUIでは、チェックマークや矢印といったシンプルなアイコンが頻繁に使われます。これらを画像やSVGで用意する方法も
HTML/CSS

【CSS】ネストしたリストのインデントを正しく揃える方法

HTMLのリストをネストして使っていると、「階層が深くなるにつれてインデントがズレる」「ブラウザごとに余白の量が違う」「デ
HTML/CSS

【CSS】liの高さが揃わない原因とline-heightの正しい関係

リストレイアウトを実装していると、「liごとに高さが揃わない」「同じデザインなのに一部の行だけズレて見える」といった違和感に
HTML/CSS

【CSS】リストマーカーを画像なしで作る方法|CSSだけで実装するデザインパターン

リストのマーカーを画像で用意すると、デザインの自由度は上がる一方で、画像の管理コストや読み込み負荷が増え、ダークモード対応や色変
HTML/CSS

【CSS】番号付きリスト(ol)の数字デザインをCSSで自由に変更する方法

番号付きリストは、手順説明やランキング、注意事項の整理などで頻繁に使われるHTML要素です。しかし、標準の ol はブラウザ依存の数字デ
HTML/CSS

【CSS】font-weightとWebフォントの関係を正しく理解する|太さ指定が効かない理由と対策

Webフォントを使ったサイト制作では、font-weight を指定しているにもかかわらず、文字の太さが思ったように変わらないという問題が
HTML/CSS

【CSS】フォントの太さが効かない原因と解決方法|font-weightが反映されない理由

CSSで font-weight を指定しているにもかかわらず、文字の太さが変わらないという問題は、Web制作の現場で非常によく遭遇します。bold
HTML/CSS

【CSS】writing-modeとtext-orientationで縦書きを正しく制御する方法

日本語コンテンツを扱うWebサイトでは、縦書きレイアウトを求められる場面が少なからずあります
HTML/CSS

【CSS】text-overflow: ellipsisが効かない原因と解決方法

text-overflow: ellipsis は、テキストが要素の幅を超えたときに末尾を「…」で省略できる便利なCSSプロパティです。しかし実際の
HTML/CSS

【CSS】text-indentで段落の字下げを行う方法と注意点

Webページで文章を読みやすく整える際、段落の字下げは古くから使われてきた基本的な表現手法です。CSSでは text-indent を使うことで
HTML/CSS

【CSS】letter-spacing正解例|可読性を損なわない文字間調整の考え方

Webサイトの文字組みを調整する際に、line-height や font-size は意識していても、letter-spacing は感覚的に指定してしまって
PL/SQL

【PL/SQL】BULK COLLECTとFORALLの再実行設計|部分失敗・二重処理を防ぐ

PL/SQLのBULK COLLECTとFORALLを安全に再実行する設計を解説します。SAVE EXCEPTIONSの添字対応、成功行と失敗行の分離、冪等なMERGE、チェックポイント、コミット境界を実行可能な一括処理テンプレートで整理します。
PL/SQL

【Oracle】再帰WITH句の使い方|SEARCH・CYCLE・CONNECT BYとの違い

Oracleの再帰WITH句を、組織ツリー、部品表(BOM)、承認経路の実例で解説します。WITH RECURSIVEとの構文差、SEARCH句による探索順、CYCLE句による循環検出、CONNECT BYとの使い分け、性能対策まで実行可能なSQLで整理します。