Webエンジニアのブログ

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で、スクロール時...
続きを読む>>

Webデザインでは要素に装飾する下線などで、線の長さを調整したいことがありますが、汎用性の高い線を実装する場合は、before擬似要素やafter擬似要素などで要素を追加して実装するのがベストです。ここでCSSでborderの長さを調整する...
続きを読む>>

Webページの表示において、様々なデバイスの幅でのコンテンツの文章の折り返し位置は、見やすさや読みやすさを保つために調整したいところですが、CSSのword-breakプロパティの値を「auto-phrase」とすることで、日本語のテキスト...
続きを読む>>

Webページにアクセスした時に、コンテンツが綺麗に表示されるまでの時間が長いとユーザーにストレスを与えてしまいますが、ストレスを軽減するのにローディングアニメーションは非常に効果的です。ここでは、リソースが読み込まれるまでのローディングアニ...
続きを読む>>

デジタルホワイトボードのFigJamは、ホームページやブログなどのWebサイトに埋め込むことができます。ここでは必要なコードの読み込みだけでなく、レスポンシブWebデザインに対応する方法も合わせてご紹介します。...
続きを読む>>

Google ChromeやMicrosoft Edge、Firefoxなど、多くのWebブラウザでYouTube動画やHTMLのVideo要素のスクリーンショットを撮ることができます。フルHD/WQHD/4Kなど動画の画質によっては、高解...
続きを読む>>