Webエンジニアのブログ

Amazonアソシエイトでは2024年1月1日から、これまで商品リンクの作成方法ではテキストリンクしか作成することができず、商品画像の表示が必要とする場合は、Product Advertising API（商品情報API）を使って商品情報を...
続きを読む>>

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

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

BlueskyにもX Pro（旧TweetDeck）に似たWebクライアント「deck.blue」が公開されており、アプリ使いに情報収集がしやすくなります。ポストや検索はもちろん、ハッシュタグが対応していたり、どのようなカラムを追加するのか...
続きを読む>>

X（旧Twitter）の代替SNSとして注目されているBluesky（ブルースカイ）。Xとデザインが似ておりそれなりの機能も備わっていますので、とても使いやすいSNSです。アカウントの設定や投稿時のリンクカードの表示方法、タイムラインの設定...
続きを読む>>

Zoom Clipsは、カメラやPC画面を短時間の高品質な動画として手軽に録画でき、簡単な編集や共有ができる機能になります。PCの画面を使って情報共有する際に便利に活用できるでしょう。ここでは、Zoom Clipsの利用方法や細かな設定につ...
続きを読む>>

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

Webで利用する画像データの形式は様々で、ロゴやアイコンそして見出しなどで使うテキストデータは、可変しても劣化しないベクターデータのSVG形式で扱っていくこともあります。ここでは書き出す際の設定も含めて、FigmaでのSVG形式の書き出し方...
続きを読む>>

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

Google AnalyticsはGA4から、ページビュー数の項目が表示回数という名称に変更になり、ページビュー数（PV数）の確認に少し戸惑う方も多いでしょう。ここではGoogle Analytics 4でのページビュー数の確認について、標...
続きを読む>>