Webエンジニアのブログ

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

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

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

Googleアナリティクスを活用してWebサイト全体のアクセス状況を把握する中で、どのページからどこの外部サイトに移動したのかを計測したいこともあるでしょう。ここでは、Googleアナリティクスのデータ探索機能を活用して、外部サイトへのリン...
続きを読む>>

HEICの画像ファイルフォーマットは、高度な圧縮アルゴリズムによって高品質を維持したままファイルサイズを削減できます。JPEG形式の画像と比べても品質は変わらず、Webパフォーマンスを意識するのであれば、HEIC形式の画像もホームページやブ...
続きを読む>>

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

WordPressで構築しているWebサイトでは、管理画面からの投稿や固定ページのコンテンツ制作でも、時にHTML構造を必要としたり、共通で利用していきたい埋め込みコードを使ったりと、WebやHTMLに詳しいかたはそれほど問題ありませんが、...
続きを読む>>

テキストや写真だけよりも情報量が多い動画は、コンテンツを充実させるためや情報に対する理解を深めるために、Webサイト内で使うのはとても効果的です。中でも多くの方が利用している動画配信プラットフォームのYouTubeは、とても使われる動画コン...
続きを読む>>

Webサイトのコンテンツ制作では、SNSの投稿を活用してコンテンツを作っていくこともあるでしょう。Threadsの投稿はホームページやブログなどにも埋め込んで活用することができます。ここでは、埋め込みコードの取得からThreadsの投稿を埋...
続きを読む>>

ブログなどの投稿記事に目次を入れることで、読者は記事の全体構造を把握しやすくなり、ユーザビリティが向上します。また、目次はSEOにも影響を与え、検索エンジンが記事の内容を理解しやすくなります。長い記事やQ&Aなどのガイド形式のコンテ...
続きを読む>>