Webエンジニアのブログ

Webページ内でページ内リンクを設置し、対象のコンテンツまで移動させる場合には、動きを滑らかにするためにJavaScript（jQuery）を使ってスムーズスクロールを実装するでしょう。 CSSのscroll-behaviorプロパティを利...
続きを読む>>

遅延読み込みについては、Lazy loadingはよく聞くかと思います。img要素やiframe要素では「loading=”lazy”」と、loading属性を付けることで対応できます。 Google Chromeの...
続きを読む>>

Webサイトやブログで画像や動画を使う際、コンテンツの中で綺麗に見せていくには、素材の品質もそうですがアスペクト比も重要な要素になります。 Web制作では画像や動画コンテンツを多くのデバイスに対応していくため、特に動画ですが、アスペクト比の...
続きを読む>>

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

Webページのデザインを作成する中で、見出しや文章のコンテンツに対して、画像や動画をフルスクリーンまたはワイドに表示させるデザインを採用することもあるでしょう。ここでは、画像や動画を通常のコンテンツ幅より大きくするデザインについて、HTML...
続きを読む>>

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

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

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

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

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