Webエンジニアのブログ

CSS 一覧

CSSのcalc()関数で要素の可変幅を調整する

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

2020/12/06|WEB

メインコンテンツより画像や動画のコンテンツ幅を広くするHTMLマークアップとCSS設計

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

2020/10/14|WEB

display: flow-rootによるfloatの回り込み解除

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

2020/08/04|WEB

CSSのfocus-within擬似クラスを使った要素のデザイン

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

2020/03/01|WEB