「Web制作」の記事一覧
「Web制作」カテゴリーでは、主に HTML や CSS、JavaScript などの言語についての解説や、WordPress の TIPS やプラグインの使用方法などの記事を書いています。
-
Yoast SEOが出力するタイトルやパンくずリストを柔軟にカスタマイズする
WordPress の SEO 対策で定番の Yoast SEO。非常に便利なプラグインですが、出力されるタイトルタグやパンくず…Web制作WordPress2025.04.21 -
WordPressのブロックエディタをカスタマイズ！独自のdata属性を付与する入力欄をインスペクターに追加する
前回、ブロックエディタのカスタマイズとして、カラーバリエーションの選択ボタンをインスペクターに追加する方法について解説しましたが…Web制作WordPress2025.04.17 -
WordPressのブロックエディタをカスタマイズ！カラーバリエーションの選択ボタンをインスペクターに追加する
WordPress のブロックエディタ（Gutenberg）はデフォルトでも便利ですが、カスタマイズすることでさらに使いやすくす…Web制作WordPress2025.04.14 -
CSSだけで視差効果のある立体的な回転カードを作る
最近のウェブデザインでは、ユーザーの目を引くインタラクティブな演出が求められることが多いです。中でも、カード型の UI を立体的…CSSWeb制作2025.04.10 -
16進数カラーコードと、RGB・HSL・HWBなどのカラーモデルを相互変換できるツールをリリースしました
16進数のカラーコード（HEX）と、RGB・HSL・HWB などのカラーモデルを相互変換できる、「カラーコード相互変換ツール」を…CSSWeb制作2025.04.07 -
見た目は変わらないけど便利！UXを向上させるCSSのプロパティ
ウェブサイトのユーザー体験（UX）を向上させるには、デザインの美しさだけでなく、操作性の向上も重要です。CSS には見た目は関わ…CSSWeb制作2025.04.03 -
HTML, CSS, JavaScriptでカラーピッカーを自作する
ウェブサイトで色を選択する UI を作成する場合、<input type="color">を使用すると手軽に実装でき…HTMLCSSWeb制作JavaScript2025.03.31 -
CSSネストの書き方解説！従来の書き方はネストだとどう書くのか
2023 年に正式に仕様として加わり、それまでは Sass などのプリプロセッサを使用しなければ実現できなかったネストが、ネイテ…Web制作CSS2025.03.27 -
HTMLの<dialog>タグでモーダルダイアログを実装する
ウェブサイトでモーダルダイアログを実装する方法はいくつかありますが、ネイティブ HTML 要素である<dialog>…HTMLWeb制作CSSJavaScript2025.03.24 -
WordPressの読み込み開始からHTML出力までの処理速度を計測する
ウェブサイトの表示速度はユーザー体験や SEO に大きく影響します。特に WordPress サイトでは、プラグインやテーマの影…Web制作WordPress2025.03.20 -
【WordPress】mu-pluginsで、必ず実行されるプラグインを作る
WordPress のプラグインは通常、管理画面から有効化・無効化できます。しかし、特定の機能を常に有効にしておきたい場合や、誤…Web制作WordPress2025.03.17 -
【CSS】subgridで、横に並べたカード内の要素の水平位置を揃える
ウェブサイトのデザインにおいて、横に並べたカード内の要素の水平位置を揃えることは視認性を向上させる上で重要です。以前は、この水平…Web制作CSS2025.03.13 -
<input type="range">スライダーの見た目をCSSでカスタマイズする
<input type="range">によるスライダーは、フォームで数値を入力するのに便利な UI 要素ですが、デ…Web制作CSS2025.03.10 -
最短2行！CSSで上下左右中央に配置する方法
かつては、要素を上下左右中央に配置するのに、position: absolute;とtransform: translate(-…Web制作CSS2025.03.06 -
FlexboxやCSS Gridで、nowrapやpreによってレイアウトが崩れる場合の対処法
CSSのwhite-space: nowrap;やwhite-space: pre;を使用すると、テキストが折り返されずに表示さ…CSSWeb制作2025.03.03 -
JavaScriptによるダークモードの切り替え機能の実装方法
以前、CSSでダークモードに対応する方法についてご紹介しましたが、JavaScript を使って動的に切り替えたい場合には少し工…CSSWeb制作JavaScript2025.02.27