「Web制作」の記事一覧
「Web制作」カテゴリーでは、主に HTML や CSS、JavaScript などの言語についての解説や、WordPress の TIPS やプラグインの使用方法などの記事を書いています。
-
WordPressのブロックエディタにCSSを読み込んでサイト側の見た目と合わせる
WordPressのブロックエディタ（Gutenberg）を使っていると、エディタ上の見た目と実際のサイト上のデザインが異なるた…Web制作CSSWordPress2025.02.24 -
#FFFやrgb()だけではない、CSSの色指定の方法
CSS で色を指定する方法は多岐にわたります。単純なキーワードや 16 進数での指定だけでなく、関数や相対指定など、柔軟な方法が…Web制作CSS2025.02.20 -
【CSS】ダークモードに対応する方法と実装する際のコツ
近年、ダークモードの人気が高まり、ユーザーエクスペリエンスの向上や目の負担軽減のために、多くのウェブサイトやアプリがダークモード…CSSWeb制作2025.02.17 -
シャドウDOMの情報をChromeやFirefoxの開発者ツールに表示させる
Web 開発をしていると、<select>や<input>などの要素が、ブラウザによってどのように実装さ…Web制作デバッグ2025.02.13 -
CSSのグラデーションやcolor-mix()の色空間による色の変化の違い
CSS では、linear-gradient()やcolor-mix()を使ってグラデーションや色のブレンドができますが、どの色…Web制作CSSWEBデザイン2025.02.10 -
CSSだけで中間色が作れるcolor-mix()が便利
Web デザインでは、2つの色を混ぜた中間色を作ることがよくあります。従来は、Sass のmix関数やJavaScript を使…Web制作CSSWEBデザイン2025.02.06 -
HTMLで数値入力のスライダーを設置 & JavaScriptで値を取得
ウェブサイトでユーザーが数値を入力できる UI として、スライダーはとても便利です。特に、数値の範囲を視覚的に選択させたい場合に…HTMLWeb制作JavaScript2025.02.03 -
CSSで数字やアルファベットだけ別のフォントに変更する方法
ウェブデザインにおいて、特定の文字だけ異なるフォントを適用したいことはよくあります。例えば、数字だけスタイリッシュなフォントにし…CSSWeb制作2025.01.27 -
CSSのみでスムーススクロールを実装する
クリックしたリンクに応じてページ内を滑らかに移動するスムーススクロール。一昔前までは、これを実装するには JavaScript …CSSWeb制作2025.01.23 -
日本語と英語が併記された見出しのHTMLマークアップ
ウェブサイトの見出しデザインとして、英語と日本語を併記したものは、よく見かける形式の一つです。シンプルでありながら適度に見た目の…HTMLWeb制作CSS2025.01.20 -
【WordPress】絵文字関連のスクリプトとスタイルシートを無効化する
WordPress で構築したページのソースを見ると、絵文字関連のスクリプトやスタイルシートが出力されているのを見ることができま…Web制作WordPress2025.01.16 -
@propertyルールを定義してCSS変数（カスタムプロパティ）をアニメーションに対応させる
前回の記事で、CSS 変数（カスタムプロパティ）の使い方について解説しましたが、定義した変数を@keyframes内で変更してア…Web制作CSS2025.01.13 -
CSS変数（カスタムプロパティ）の使い方と:rootの小話
CSS を書いている時に、背景色や文字色など、同じ値が複数の箇所で必要になる場合が出てくることがあると思いますが、そういった場合…Web制作CSS2025.01.09 -
【JavaScript】ドラッグ＆ドロップされた画像をBase64形式にエンコードして表示
今回は、JavaScript を使って、ブラウザにドラッグ＆ドロップされた画像を Base64 形式にエンコードし、<im…Web制作JavaScript2025.01.06 -
XAMPPのMySQLで「Aria recovery failed.」エラーが発生した際の対処法
XAMPP の MySQL で「Aria recovery failed.」というエラーが発生した際の対処法についてご紹介します…Web制作XAMPPMySQL2024.12.30 -
【WordPress】画像に自動で付くsrcset属性を削除する
WordPress で、the_post_thumbnail()などの関数を使って画像を表示させると、以下のように<img…Web制作WordPress2024.12.26