HTML/CSS

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

Flexboxを使ったレイアウトでは、align-items と align-content の違いが分からず、「指定しても効かない」「なぜ位置が変わらないのか理解できない」と感じることがよくあります。この2つは似た名前を持っていますが、作...
HTML/CSS

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

Flexboxでレイアウトを組んでいると、「画面幅を縮めたら折り返さない」「意図せず横スクロールが発生する」「flex-grow や flex-basis が効いていないように見える」といった現象に遭遇することがあります。これらの原因として...
HTML/CSS

【CSS】flex-basisの基本とwidthとの違い

Flexboxを使ったレイアウトでは、「width を指定しているのに思った通りの幅にならない」「flex-basis を指定すると挙動が変わる」といった疑問を持つことがよくあります。flex-basis は一見すると width と似た役...
HTML/CSS

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

UI実装では、アイコンや装飾図形を「SVGで作るべきか」「CSSだけで表現すべきか」で迷う場面が頻繁にあります。どちらも正解になり得る手段ですが、基準が曖昧なまま選択すると、後から修正しづらい構成になったり、保守コストが増えたりします。本記...
HTML/CSS

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

CSSの ::before や ::after は、装飾表現をHTML構造から切り離すための非常に強力な仕組みです。アイコンの追加、装飾線、背景表現、UIパーツの補助など、実務の現場ではほぼ必ず使われる一方で、「何でもかんでも before...
HTML/CSS

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

CSSで三角形を作る方法としては、border を使ったテクニックがよく知られています。しかし、通常の border 三角形はエッジが鋭く、UIパーツとして使うと少し硬い印象になりがちです。吹き出しの矢印やツールチップ、ボタンのポインタなど...
HTML/CSS

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

WebサイトやアプリのUIでは、チェックマークや矢印といったシンプルなアイコンが頻繁に使われます。これらを画像やSVGで用意する方法もありますが、色変更やサイズ調整、ダークモード対応のたびに管理コストが増えるという課題があります。実務では、...
HTML/CSS

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

HTMLのリストをネストして使っていると、「階層が深くなるにつれてインデントがズレる」「ブラウザごとに余白の量が違う」「デザイン通りに揃わない」といった問題が起こりがちです。これはCSSの不具合というより、ul・ol が持つデフォルトスタイ...
HTML/CSS

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

リストレイアウトを実装していると、「liごとに高さが揃わない」「同じデザインなのに一部の行だけズレて見える」といった違和感に直面することがあります。この問題は、margin や padding の指定ミスと思われがちですが、実務では lin...
HTML/CSS

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

リストのマーカーを画像で用意すると、デザインの自由度は上がる一方で、画像の管理コストや読み込み負荷が増え、ダークモード対応や色変更にも手間がかかります。実務では「画像を使わずにCSSだけでマーカーを作りたい」という要件がよく出ます。CSSだ...
HTML/CSS

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

番号付きリストは、手順説明やランキング、注意事項の整理などで頻繁に使われるHTML要素です。しかし、標準の ol はブラウザ依存の数字デザインになるため、デザインに統一感を持たせたい場合や、UIとして見栄えを整えたい場合には物足りなく感じる...
HTML/CSS

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

Webフォントを使ったサイト制作では、font-weight を指定しているにもかかわらず、文字の太さが思ったように変わらないという問題が頻繁に発生します。この原因の多くは、CSSの書き方ではなく、Webフォントと font-weight ...
HTML/CSS

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

CSSで font-weight を指定しているにもかかわらず、文字の太さが変わらないという問題は、Web制作の現場で非常によく遭遇します。bold を指定しても見た目が変わらなかったり、数値指定をしても同じ太さのまま表示されたりする原因は...
HTML/CSS

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

日本語コンテンツを扱うWebサイトでは、縦書きレイアウトを求められる場面が少なからずあります。CSSでは writing-mode と text-orientation を使うことで縦書きを実現できますが、単に指定するだけでは「英数字の向き...
HTML/CSS

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

text-overflow: ellipsis は、テキストが要素の幅を超えたときに末尾を「…」で省略できる便利なCSSプロパティです。しかし実際の制作現場では、「指定しているのに効かない」「一部の環境だけ省略されない」といったトラブルが頻...
HTML/CSS

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

Webページで文章を読みやすく整える際、段落の字下げは古くから使われてきた基本的な表現手法です。CSSでは text-indent を使うことで、HTML構造を崩さずに段落の先頭だけを下げることができます。しかし、使い方を誤るとレイアウト崩...
HTML/CSS

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

Webサイトの文字組みを調整する際に、line-height や font-size は意識していても、letter-spacing は感覚的に指定してしまっているケースが少なくありません。しかし letter-spacing は、可読性や...
PL/SQL

【PL/SQL】BULK COLLECTとFORALLによる一括処理パターンの最適化

逐次処理で1行ずつFETCHしてDMLを発行する構造は、SQLエンジンとの往復とコンテキストスイッチが支配的になりスループットが頭打ちになる。PL/SQLはBULK COLLECTとFORALLを併用することで、抽出・検証・適用を「行の塊」...
PL/SQL

【PL/SQL】再帰WITH句と階層問い合わせの実用パターン

データモデルに潜む入れ子構造や親子関係を、アプリケーションのループや一時表に頼らずSQLで直接表現するためには、Oracleの階層問い合わせ(CONNECT BY)と再帰WITH句(Recursive Subquery Factoring)...
PL/SQL

【PL/SQL】分析関数(Analytic Function)を活用した集計ロジックの簡素化

カーソル処理や一時表を多用して段階集計を作り込むよりも、分析関数を用いて「結果セットの各行に、同一パーティション内の集約・順位・前後関係を付与する」発想へ転換すると、SQL一発でロジックを簡素化できる。PL/SQLのループや状態変数を置き換...