劣化が少なく画像を軽量化できる画像フォーマット「AVIF」の利用
Webで扱える画像フォーマットが増え、Webページの構築でマークアップしていく際も、用途に合わせて画像を準備していくことでしょう。多くの画像フォーマットが作られる中でさらに、劣化が少なく画像を軽量化できる画像フォーマット「AVIF」が開発さ...
続きを読む>>
Webで扱える画像フォーマットが増え、Webページの構築でマークアップしていく際も、用途に合わせて画像を準備していくことでしょう。多くの画像フォーマットが作られる中でさらに、劣化が少なく画像を軽量化できる画像フォーマット「AVIF」が開発さ...
続きを読む>>
昨今、多くのデバイスやブラウザの対応によって、Webサイトも目に優しいと言われているダークモードのデザインが求められるようになりました。 ダークモードとなると暗い色調のデザインをCSSで用意していくことになるので、既存のWebサイトでは対応...
続きを読む>>
Webページで載せる画像が多いと、画像の数だけ読み込み処理が発生するので、表示速度に大きな影響を与えます。画像のファイルサイズの大きさもそうですが。ファーストビュー(above the fold)の可視範囲だけでも素早く表示するために、スク...
続きを読む>>
Webページのコンテンツの見せ方として、アニメーションの動きを加えることもユーザーの目を引く一つのデザインです。スクロール時のアニメーションはいろんなデザインで採用されています。ここでは、jQueryのみでスクロール時に要素が可視範囲に入っ...
続きを読む>>
Webサイトのheaderやfooterは多くのページで内容が共通なため、編集時にすべてのページのファイルを書き換えていくとなると時間がかかるのでメンテナンス性に欠けます。 WordPressで構築しているサイトでは、すでに共通のheade...
続きを読む>>
Webサイトに関係するファイルのキャッシュについては。Webページの表示速度にも関わってくるところですので、サーバ側やhtaccessファイルでキャッシュの設定を行うこともあります。しかし、サーバのキャッシュを設定することで不便になるのが、...
続きを読む>>
Webサイトのデザインを構築していくうえで、画像に対してクリックアクションで表示に変化を加えることはよくあります。画像ギャラリーや画像にフォーカスし画像を効率良く見せる方法として、ポップアップで拡大表示するなどを実装したいこともあるでしょう...
続きを読む>>
WordPressで構築したWebサイトやブログでは、サイト内のニュース記事やブログ記事をユーザーが目的の情報を探しやすいように、検索フォームを設置していくでしょう。 WordPressでは、ウィジェットで簡単に検索フォームを設置できるよう...
続きを読む>>
フォームのデザインでユーザーに選択してもらう機能として、表示はしておかないけれども選択項目を用意しておく、プルダウンメニューとして構築するセレクトボックスがあります。ここでは、HTMLで構築したセレクトボックスをPHPで取り扱う時の利用方法...
続きを読む>>
Webで使える画像のフォーマットは、JPEGやPNG、GIFなど多くのフォーマットがありますが、「WebP(ウェッピー)」という画像フォーマットの登場で画像の軽量化して、Webサイトの表示速度を改善することもできるようになりました。ここでは...
続きを読む>>