Webエンジニアのブログ

Webページで載せる画像が多いと、画像の数だけ読み込み処理が発生するので、表示速度に大きな影響を与えます。画像のファイルサイズの大きさもそうですが。ファーストビュー（above the fold）の可視範囲だけでも素早く表示するために、スク...
続きを読む>>

CSSで要素の高さをWebブラウザの高さに合わせる場合には、height: 100vhのようにビューポートの高さを指定しますが、スマートフォンやタブレット端末では、画面下にツールバーが表示されるので、画面全体にコンテンツを表示させても、ツー...
続きを読む>>

WordPressでWebサイトを運用する中で、お問い合わせを受けるコンタクトフォームを、Contact Form 7というプラグインで実装されることが多いでしょう。 Contact Form 7を利用する中で、実際にWebページにフォーム...
続きを読む>>

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

Webページのコンテンツの見せ方として、アニメーションの動きを加えることもユーザーの目を引く一つのデザインです。いろんなアニメーションがある中で、スクロールした時に可視範囲に入った要素がフェードインする動きもよくあるアニメーションです。 そ...
続きを読む>>

CSSのnth-child擬似クラスでは、指定した要素からいろんな条件でスタイルをあてることができます。セレクタの指定がある場合は、指定したセレクタの兄弟要素のグループの中の対象の要素を表します。 以下、様々な:nth-child()擬似ク...
続きを読む>>

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

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

私たちが生きていくために必要な情報は、新聞や雑誌をはじめ、デジタル時代の今はニュースアプリやWeb検索で情報を収集していきます。しかし、情報を発信するメディア・媒体は多数あり、情報の収集はとても大変です。 インターネットの世界ではSNSを通...
続きを読む>>

昨今のWebサイトのフォームデザインでは、UXの面でユーザーにストレスなくわかりやすいデザインが求められます。ラベルや入力フィールドをグループ化したレイアウトからプレースホルダテキスト、ヘルプテキスト、エラー表示などなど、フォームのデザイン...
続きを読む>>