CSS

スポンサーリンク
プログラミング

WordPressオリジナルテーマ開発②｜投稿一覧・固定ページの作り方とfunctions.phpの基本

WordPressオリジナルテーマの投稿一覧・個別投稿・固定ページのテンプレートファイル作成方法を解説。have_postsとthe_postを使ったループ・カスタムテンプレートのTemplate Name指定・functions.phpでのwp_enqueue_scriptsによるCSS読み込み・add_theme_supportの設定まで紹介します。
2026.07.07
CSSHTMLJavaScriptPHPWordPressプログラミング
プログラミング

HTMLサイトをWordPressオリジナルテーマに変換する方法｜テーマフォルダの構成からheader・footer分割まで

作成済みのHTMLサイトをWordPressオリジナルテーマに変換する手順を徹底解説。テーマフォルダの構成・style.cssへのテーマ情報の記載・get_template_directory_uri()でのCSS・画像パスの書き換え・wp_headとwp_footerの追加・header.phpとfooter.phpへの分割方法を紹介します。
2026.07.06
CSSHTMLPHPWordPressプログラミング
プログラミング

CSS変数（カスタムプロパティ）完全ガイド｜テーマカラーの管理方法とダークモード対応の実装を一から解説

CSS変数（カスタムプロパティ）を使ったテーマカラーの管理方法とダークモード対応の実装を徹底解説。原始値とセマンティック名の2層構造設計・prefers-color-schemeによる自動切り替え・data-theme属性を使った手動切り替え・ちらつき防止スクリプトまで一から紹介します。
2026.06.29
CSSHTMLJavaScriptプログラミング
プログラミング

レスポンシブ対応の実践的コツ完全ガイド｜HTML・CSS両方の観点から使い勝手の良い実装方法を解説

レスポンシブ対応の実践的なテクニックをHTML・CSS両方の観点から徹底解説。box-sizingの設定・pictureタグで画像を切り替える方法・clamp()によるフォントサイズのスケーリング・dvhの活用・Flexboxのmin-width問題・CSS Gridのauto-fillまで使い勝手の良い実装方法を紹介します。
2026.06.27
CSSHTMLプログラミングレスポンシブ
プログラミング

CSSのclip-pathで作る斜めセクション・波形デザイン完全ガイド｜VSCodeフォーマッターも活用してコードを整える

CSSのclip-pathを使った斜めのセクション区切りや波形デザインの実装方法を徹底解説。polygon()の座標指定・clip-pathのアニメーション実装に加えて、インデントを一瞬で整えるVSCodeのShift+Alt+Fフォーマッターとprettierの設定方法も紹介します。
2026.06.24
CSSVS codeプラグインプログラミング
プログラミング

CSSで作るフワフワ浮遊アニメーション完全ガイド｜border-radius・floating・fade・z-indexを組み合わせてサイトに奥行きを出す

CSSのborder-radiusで作った円形要素をfloatingアニメーションでゆらゆらと浮遊させる実装方法を徹底解説。floating-xとfloating-yの周期の組み合わせ・入れ子構造での実装・fade-in-viewによるスクロールアニメーション・z-indexの正しい使い方まで一から紹介します。
2026.06.22
CSSHTMLJavaScriptプログラミング
プログラミング

WordPressブログ収益化完全ガイド｜Googleアドセンス審査対策・アフィリエイトの始め方を一から解説

WordPressブログで収益化を目指すための具体的な手順を徹底解説。Googleアドセンスの審査対策と広告ユニットの設置・ASPに登録するアフィリエイトの始め方・rel="sponsored"の設定方法・記事の方向性と収益化の関係まで、実践的な内容を初心者向けに紹介します。
2026.06.20
CSSHTMLSEOWordPressプログラミング
プログラミング

ポートフォリオサイト公開前の最終チェックリスト完全版｜コード品質・SEO・パフォーマンス・セキュリティ・アクセシビリティを総点検する

ポートフォリオサイトを公開する前に確認すべき項目を完全網羅。W3C ValidatorによるHTMLの検証・PageSpeed Insightsでのパフォーマンス計測・HTTPSとXSS対策のセキュリティ確認・Lighthouseでのアクセシビリティ検証・ブラウザ互換性チェックまで5つの観点で総点検する方法を解説します。
2026.06.17
CSSHTMLJavaScriptSEOプログラミング
プログラミング

ポートフォリオサイトのアクセシビリティ対応完全ガイド｜スクリーンリーダー・キーボード操作・コントラスト比を一から実装する

ポートフォリオサイトのアクセシビリティ対応方法を徹底解説。セマンティックHTMLの書き方・画像のalt属性・キーボード操作のサポート・スキップリンクの設置・ARIAによるスクリーンリーダー対応・コントラスト比の確保・Lighthouseでの検証まで、すべてのユーザーが使いやすいサイトの作り方を紹介します。
2026.06.16
CSSHTMLJavaScriptプログラミング
プログラミング

ポートフォリオサイトのデザイン基本原則｜余白・フォント・配色・レイアウトを押さえてサイトを磨く

ポートフォリオサイトをより魅力的に見せるデザインの基本原則を解説。8pxの倍数で統一する余白・Google Fontsの導入とフォントサイズの階層・3色ルールによる配色・CSS GridとFlexboxを使ったレイアウトまで、コーディングとあわせてデザインの質を高める実践的な方法を紹介します。
2026.06.09 2026.06.10
CSSプログラミング
スポンサーリンク
次のページ