Webエンジニアのブログ

CSSで普通にビューポートでウィンドウの高さに調整すると、アクセス時のファーストビューではツールバーの高さ分だけ重なって表示されません。デザイン上あまり影響なければいいですが、気になる方にここでは、CSSでツールバーを除いた高さで全画面表示...
続きを読む>>

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

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

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

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

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

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

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

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

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