Webエンジニアのブログ

昨今のWebサイトのフォームデザインでは、UXの面でユーザーにストレスなくわかりやすいデザインが求められます。ここでは、対応ブラウザも増えてきたフォームデザインで使えそうな、CSSの:focus-within疑似クラスをご紹介します。...
続きを読む>>

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

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

Webサイトに関係するファイルのキャッシュについては。Webページの表示速度にも関わってくるところですので、サーバ側やhtaccessファイルでキャッシュの設定を行うこともあります。しかし、サーバのキャッシュを設定することで不便になるのが、...
続きを読む>>

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

多くの方がMacを利用していく中で、必要に応じて便利なアプリをインストールして、快適にパソコン作業をおこなっていることでしょう。 そうした便利なアプリはたくさん利用していってもいいですが、ずっと使っていなかったり使わなくなったアプリケーショ...
続きを読む>>

たまに必要になる、観覧しているWebサイトのページのスクリーンショット。表示領域だけでなくページ全体を撮りたいことがありますが、macOSのSafariでは、デベロッパーツールを利用することでWebページ全体のスクリーンショットを撮るこ...
続きを読む>>

スムーズで快適なスクロールはUIの一部として採用するサイトも増えて、表示領域にピタッと合わせるスクロール処理は、主にJavaScriptやJavaScriptライブラリであるjQueryを使って実装することが多いかとおもいます。 もちろん、...
続きを読む>>

エクセル作業を便利にしてくれる様々な関数。シートの表から何かを検索して処理をしたい時、検索処理ができるVLOOKUP関数やHLOOKUP関数を利用してきたかと思います。 2020年1月頃にリリースされたバージョンから、新たにXLOOKUP関...
続きを読む>>

HTML5から追加されたfigure要素は、主に画像を載せる時に利用することが多いかと思います。 figure要素は、写真、挿絵、図表、コードなどをまとまりとして表すときに利用します。そして、注釈を付けるためにfigcaption要素も使用...
続きを読む>>