Webエンジニアのブログ

Blueskyでは、Web版で埋め込み機能が実装されており、対象の投稿をWebページに埋め込むことができます。ここでは、Blueskyのポスト（投稿）をWebページに埋め込む方法を、レスポンシブWebデザインに対応する方法と合わせてご紹介し...
続きを読む>>

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

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

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

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

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

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

CSSの@scope規則を利用することで、参照する範囲を指定してスタイルを適用させることができます。これまでの階層構造でのセレクタの指定、ほか属性やid、classでの指定とはまた違った、ピンポイントでスタイルを適用させることが可能になりま...
続きを読む>>

CSSの@starting-style規則を追加することで、トランジションでの変化前のスタイルを適用させることができ、Webページのアクセス時にトランジション処理を実装することができます。ここでは、CSSの@starting-style規則...
続きを読む>>

Webでは様々なフォーマットの画像が利用でき、よく使われるところでいくとJPEG、PNG、GIF、WebPなどがあります。最近ではiPhoneやiPadのカメラで撮影した画像のフォーマットが、設定によってはファイルの拡張子が「.heic」と...
続きを読む>>