Webエンジニアのブログ

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

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

PHPでユーザーが利用しているデバイスを判別して処理を切り分ける場合は、スーパーグローバル変数を利用して情報を取得して処理をします。ここでは、PHPでのユーザーのデバイス判別を、これまでのHTTP_USER_AGENTとUser-Agent...
続きを読む>>

Web制作では必要に応じて、WindowsやMac、iPhone、iPad、Androidなど、ユーザーが利用するデバイスを判別して処理を切り分けることもあります。ここでは、userAgent（UA）とUser-Agent Client H...
続きを読む>>

共有ボタンの設置は、ボタンのデザインがある程度決まっているプラグインを利用する方法などいろいろありますが、Webサイトのデザインにあった共有ボタンを設置したい場合は、自作できてカスタマイズが可能な方法がいいでしょう。ここではThreadsや...
続きを読む>>

Blueskyでは公式で実装された埋め込み機能や、Embed Blueskyというサービスを利用することで、Blueskyの投稿をWebページに埋め込むことができます。ここではBlueskyのポスト（投稿）をWebページに埋め込む方法を、レ...
続きを読む>>

WordPressの投稿や固定ページなどで、定型コンテンツのブロックとして自作できる便利な再利用ブロック（パターン）。主に投稿や固定ページで利用していきますが、ここでは、再利用ブロック（パターン）をテーマ内のPHPファイルで呼び出す方法につ...
続きを読む>>

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

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

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