未分類 【デザイン基礎】8. ソースコードボックスが正しく表示されない
ソースコードボックスが正しく表示されない問題の根本原因と解決策Web開発において、技術ブログやドキュメントサイトを構築する際、ソースコードを美しく、かつ正確に表示させることは、ユーザーエクスペリエンス（UX）の根幹を成す要素です。しかし、多...
2026-05
未分類 未分類 【デザイン基礎】SANGOのショートコード一覧
概要WordPressテーマ「SANGO」は、その高いデザイン性と機能性から多くのブロガーやWebサイト制作者に支持されています。SANGOの魅力の一つは、HTMLやCSSの知識がなくても、直感的にリッチな表現を可能にする「ショートコード」...
未分類 【デザイン基礎】CSSで中央寄せする9つの方法（縦・横にセンタリング）
CSSにおける要素のセンタリング：現代的なアプローチと実務的解法Webデザインにおいて「要素を中央に配置する」という課題は、CSSの歴史と共に進化してきました。かつては`text-align: center`やネガティブマージンを用いたハッ...
未分類 【デザイン基礎】Gutenberg開発の知識がなくてもブロックが作れる【SANGO カスタマイズブロック】の使い方
Gutenberg開発の知識がなくてもブロックが作れる SANGO カスタマイズブロックの全貌WordPressの標準エディタであるGutenbergは、Reactベースの高度な開発環境を要求します。しかし、Webサイト制作の現場では、クラ...
未分類 【デザイン基礎】HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）
概要Webデザインの世界に足を踏み入れたい、あるいは既に学習を始めているけれど、さらにスキルアップしたいと考えている方々にとって、良質な学習教材の選択は非常に重要です。特にHTMLとCSSはWebサイトの骨格と装飾を担う基本的な技術であり、...
未分類 【デザイン基礎】head内に書くべきタグを総まとめ：SEO対策に有効なものは？
概要Webサイトのパフォーマンスや検索エンジンからの評価を左右する重要な要素、それがHTMLの<head>セクションに記述されるタグ群です。<head>セクションは、ブラウザや検索エンジンのクローラーに対して、そのページがどのような内容であ...
未分類 【デザイン基礎】記事一覧カードのアイキャッチ画像のまわりに余白ができてしまい不格好
記事一覧カードのアイキャッチ画像における余白問題の根本的解決Webサイトのデザインにおいて、記事一覧ページはユーザーが最も頻繁に目にする重要なUIコンポーネントです。しかし、カード型レイアウトを実装する際、多くのジュニアデザイナーやフロント...
未分類 【デザイン基礎】スライダーの上に画像を表示させる方法
スライダーの上に画像を表示させるための高度なレイアウト戦略Webサイトのデザインにおいて、ヒーローセクションやキャンペーンバナーなどで「スライダーの上に別の画像やロゴ、テキストを重ねる」という表現は非常に一般的です。しかし、レスポンシブ対応...
未分類 【デザイン基礎】モバイル用フッター固定メニューの設定方法
モバイル用フッター固定メニューの設計と実装：UXを最大化するベストプラクティスモバイルWebサイトにおいて、フッター固定メニュー（スティッキー・ボトム・ナビゲーション）は、ユーザー体験（UX）を決定づける極めて重要なUIコンポーネントです。...
未分類 【デザイン基礎】【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？
HTML見出しタグの階層構造とSEO・アクセシビリティにおける最適解Webサイトの構造を設計する際、最も基本的でありながら、最も誤解されやすい要素の一つが「見出しタグ（h1〜h6）」です。単に文字を大きくしたり太くしたりするための装飾ツール...