Webエンジニアのブログ

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

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

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

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

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

CSS3から追加されたFlexboxは、PCからタブレット端末、スマートフォン端末に対応したレスポンシブWebデザインのレイアウト構築に優れています。要素の横並びから要素の高さを揃えたり、また上下左右中央寄せなども手軽に実装することができま...
続きを読む>>

Webデザインでwebフォントを利用してデザインを構築していくことがよくありますが、そこで使えるのがCSSの@font-face規則です。ここでは、CSSの@font-face規則の使い方をGoogle Fontsのwebフォントを利用する...
続きを読む>>

Webサイトでアニメーションを実装する中で、JavaScriptなどのプログラミングではなくCSSのみでデザインできることも増えてきました。Variable Font（可変フォント）を利用すれば、CSSのfont-variation-set...
続きを読む>>

WindowsやMacといったOSからアプリケーション、webサイトなどなどダークモード対応が進んできています。ここではCSS3のメディアクエリの特性「prefers-color-scheme」を利用して、端末のダークモード設定を判断し、w...
続きを読む>>

Webサイトの構築の際にCSS3でアニメーションを実装することはよくありますが、ユーザーによっては動かされても見にくかったり操作しづらいと感じることもあります。スマートフォンではiPhoneの視差効果を減らす設定をオンしているユーザーもいま...
続きを読む>>