Webエンジニアのブログ

WordPressでサイトを構築しているサイトでは、Google XML SitemapsやAll in One SEOなどのプラグインを使って、サイトマップを作成していくでしょう。 Webサイト（ホームページ）やブログのサイトマップの作成...
続きを読む>>

Webページ内でページ内リンクを設置し、対象のコンテンツまで移動させる場合には、動きを滑らかにするためにJavaScript（jQuery）を使ってスムーズスクロールを実装するでしょう。 CSSのscroll-behaviorプロパティを利...
続きを読む>>

遅延読み込みについては、Lazy loadingはよく聞くかと思います。img要素やiframe要素では「loading=”lazy”」と、loading属性を付けることで対応できます。 Google Chromeの...
続きを読む>>

Webサイトやブログで画像や動画を使う際、コンテンツの中で綺麗に見せていくには、素材の品質もそうですがアスペクト比も重要な要素になります。 Web制作では画像や動画コンテンツを多くのデバイスに対応していくため、特に動画ですが、アスペクト比の...
続きを読む>>

Webページのコンテンツ内に外部サイトへのリンクを別タブで開くようにするには、アンカーリンク（aタグ）に「target=”_blank”」設定しますが、セキュリティ上の脆弱性がありますので、一緒にrel属性にnoop...
続きを読む>>

WordPressには便利なプラグインが多く、多くの方がプラグインを利用しながらWebサイトの構築をされているでしょう。利用しているプラグインも、WordPressのバージョンのアップデートに合わせたり、バグ修正や機能の追加、セキュリティの...
続きを読む>>

各デバイスに対応したレスポンシブWebデザインを構築していく中では、可変に対応した要素の幅をpxやemのほか、パーセントの単位もCSSで指定していくこともあります。 ここでは、要素を横並びにするレイアウトで少しつまづきそうなパーセントの指定...
続きを読む>>

Webサイトやブログにおいて、文章や画像コンテンツと共に、WebページにYouTube動画を埋め込むことはよくあることでしょう。 YouTube動画は、埋め込みコードを利用することで手軽にWebページ内で再生することができますが、場合によっ...
続きを読む>>

Webページのデザインを作成する中で、見出しや文章のコンテンツに対して、画像や動画をフルスクリーンまたはワイドに表示させるデザインを採用することもあるでしょう。ここでは、画像や動画を通常のコンテンツ幅より大きくするデザインについて、HTML...
続きを読む>>

Webで扱える画像フォーマットが増え、Webページの構築でマークアップしていく際も、用途に合わせて画像を準備していくことでしょう。多くの画像フォーマットが作られる中でさらに、劣化が少なく画像を軽量化できる画像フォーマット「AVIF」が開発さ...
続きを読む>>