Webエンジニアのブログ

CSSの:hover擬似クラスを利用したhoverアクションの実装は、モバイルデバイスでは予期せぬ動作を起こすことがあります。ここではhover関連のメディア特性を利用してhoverが動作するデバイスを判別し、hoverが動作するデバイスに...
続きを読む>>

Webサイトにはお問い合わせフォームや登録フォーム、ログインフォームなど、フォーム部品を構築することはよくありますが、HTMLのfieldset要素やlegend要素を使うことで、手軽にフォームを装飾することができます。...
続きを読む>>

HTMLとCSSでコンテンツの横並びを実装するCSS Gridでは、subgrid（サブグリッド）を使うことで手軽に横並びレイアウトの要素の中の高さを揃えることができます。ここではCSSのsubgridの使い方を、カード型レイアウトを...
続きを読む>>

CSSの@propertyルールを利用することで、CSSのカスタムプロパティの定義において、プロパティの型や既定値の設定、プロパティが値を継承するかどうかなど、厳密な定義ができるようになります。...
続きを読む>>

高品質でファイルサイズの小さいWebP形式の画像は、アニメーションにも対応していますので、アニメーションWebPとしてもコンテンツで利用していくことができます。利用用途は様々ですが、動画バナー広告としても活用できるでしょう。ここでは動画をア...
続きを読む>>

CSSでのスタイルの調整には様々な方法がありますが、Webブラウザのサポートが進むコンテナスタイルクエリ（Container Style Queries）も、新しい記法として使えそうです。コンテナスタイルクエリで親要素のスタイルに基づいて定...
続きを読む>>

Webページのコンテンツで関心を引かせたり効果的に情報を伝える場合には、そのコンテンツを強調させることが必要になります。CSSでは様々なアニメーション関連のプロパティを使うことで、CSSのみでWebページのスクロール時に関心を引かせたいテキ...
続きを読む>>

WebブラウザのSafari 17.4から、type属性がcheckboxのinput要素にswitch属性を指定することで、簡単にスイッチUIを実装することができます。ここでは、switch属性を適応させたスイッチUIの実装と、デザインの...
続きを読む>>

Webページのコンテンツ内容に合わせて、SNSアカウントの紹介を掲載したり導線を設置することがありますが、カード風のデザインとして掲載することで、SNSの情報をわかりやすく伝えることができます。ここでは、WebページにBlueskyやT...
続きを読む>>

Webページのスクロール時に、可視範囲に入ったコンテンツにアニメーションで動きを加えることで、ユーザーの目を引くことができます。特に重要なコンテンツにインパクトを与えるにはとても効果的です。ここでは純粋なJavaScriptで、スクロール時...
続きを読む>>