Webエンジニアのブログ

Webページで番号付きリストを作成する際は、olタグを使って項目の順序付きリストとして番号を表示していきますが、シンプルな数字のほか、type属性の設定でのローマ数字やアルファベットくらいしか表現方法がありません。 CSSのcounters...
続きを読む>>

Webサイトでのテーブルを使ったデザインは、レスポンシブWebデザインに対応する際には、表の作成で使うtableタグで構築されたものを、CSSでセルを縦並びにしたりいろいろスタイル調整を駆使して、画面幅に合わせて最適化していくことでしょう。...
続きを読む>>

CSSのContainer Queries（コンテナクエリ）は、要素を基準としてスタイルを適応することができる機能です。レスポンシブWebデザインのレイアウト構築をしていく際に便利に活用することができます。ここでは、CSSのContaine...
続きを読む>>

CSSでWebデザインのレイアウトを調整していく中、レスポンシブWebデザインではよく利用していくビューポート単位（vwやvh等）ですが、表示領域の幅を指定するvw単位において、WindowsとMacで少し表示が異なることがあります。 それ...
続きを読む>>

Webサイトにアクセスした際に、オープニングビデオのように動画を流してから、動画再生後にフェード効果でメインコンテンツを表示するなど、動画を活用することで文字情報だけでなく、動きのある映像で豊富な情報をわかりやすく伝えることができます。 フ...
続きを読む>>

Webサイトを利用しているユーザーが現在どのページ（カテゴリ）のコンテンツを閲覧しているのかを、ナビゲーションメニューのリンクの色を変更するなどして、わかりやすくデザインしていくこともあるでしょう。現在表示しているWebページのリンクだけス...
続きを読む>>

image-set()は画像オプションをセットして背景画像を適応させることができる便利なCSS関数で、ユーザーの端末にあった解像度の画像や、軽量化した形式の画像の適応など、Webに最適化した画像を適応させることができます。...
続きを読む>>

Webサイトのスマートフォンやタブレット端末に対応したメニューは、よくある3本線アイコンのハンバーガーメニューで、グローバルナビゲーションの表示・非表示を切り替える仕様で、主にCSSとJavaScriptまたはJavaScriptライブラリ...
続きを読む>>

通常、Webページは縦にスクロールしながらコンテンツを閲覧していくといった既成概念がありますが、縦幅を固定して横スクロールで魅せていくWebページも、デザインによっては面白いWebサイトに仕上がるのではないでしょうか。 ここでは、横スクロー...
続きを読む>>

様々な要素の高さやアスペクト比（縦横比）がバラバラな画像ギャラリーなどでデザインするMasonryレイアウト。Webブラウザのサポートはそれほど進んではいませんが、ここではCSSのみで実装するブロック積みのような組積造レイアウトについてご紹...
続きを読む>>