Webエンジニアのブログ

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」とすることで、日本語のテキスト...
続きを読む>>

Webデザインの配色は、サイトのイメージや与える印象、そして情報の見やすさなど様々な要素が関係してきますので、ユーザーが利用する環境にも合わせる必要があります。ここでは、CSSのlight-dark()関数を使ってライトモードとダークモ...
続きを読む>>

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