Webエンジニアのブログ

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

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

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

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

Webサイトからのお問い合わせは、コンタクトフォームなどを設置して対応されるサイトが多いのではないでしょうか。人気で利用が多いWordPressなどでは、プラグインを使って手軽にコンタクトフォームが設定できたりします。 ただ、迷惑メール対策...
続きを読む>>

HTML5から導入されたiframe要素のsandbox属性。Webページに外部のHTML文書を埋め込むことができるiframe要素において、セキュリティを高めるために利用できる設定です。 埋め込まれる側のWebサイトでは、HTTPヘッダー...
続きを読む>>

Webページではコンテンツの掲載方法としてアコーディオンメニューをデザインとして実装することがあります。状況によって1ページに膨大なコンテンツとなり得るQ&Aなどで利用することがあるでしょう。 アコーディオンメニューはクリックアクシ...
続きを読む>>

Webサイトのheaderやfooterは多くのページで内容が共通なため、編集時にすべてのページのファイルを書き換えていくとなると時間がかかるのでメンテナンス性に欠けます。 WordPressで構築しているサイトでは、すでに共通のheade...
続きを読む>>

Webサイトでは多くの画像を利用してデザインしながらコンテンツを作っていきますが、利用する画像のサイズが大きいと表示速度に影響します。またPCやタブレット端末、スマートフォンなど多くのデバイスにあう画像を表示させたいときは、デバイス幅によっ...
続きを読む>>

レンダリング処理でサーバとのデータのやり取りが行われる中で、Webブラウザに表示されるまでの時間をなるべく速くすることで、ユーザー体験としてもSEOとしても最適なWebページと言えるでしょう。画像や動画、SNSの埋め込みはlazy load...
続きを読む>>