Webエンジニアのブログ

各デバイスに対応したレスポンシブWebデザインを構築していく中では、可変に対応した要素の幅をpxやemのほか、パーセントの単位もCSSで指定していくこともあります。 ここでは、要素を横並びにするレイアウトで少しつまづきそうなパーセントの指定...
続きを読む>>

Webページのデザインを作成する中で、見出しや文章のコンテンツに対して、画像や動画をフルスクリーンまたはワイドに表示させるデザインを採用することもあるでしょう。 スマートフォンやタブレット端末でも、画像を大きく表示するほうが、コンテンツに関...
続きを読む>>

昨今、多くのデバイスやブラウザの対応によって、Webサイトも目に優しいと言われているダークモードのデザインが求められるようになりました。 ダークモードとなると暗い色調のデザインをCSSで用意していくことになるので、既存のWebサイトでは対応...
続きを読む>>

Web制作において、コンテンツの横並びには、flexboxやfloatプロパティを利用していくと思います。 flexboxを利用する場合には、横並びの他にもいろんなオプションで変化を加えることができます。またシンプルに横並びを実装する場合は...
続きを読む>>

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

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

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

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

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

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