Webエンジニアのブログ

ブログなどの投稿記事に目次を入れることで、読者は記事の全体構造を把握しやすくなり、ユーザビリティが向上します。また、目次はSEOにも影響を与え、検索エンジンが記事の内容を理解しやすくなります。長い記事やQ&Aなどのガイド形式のコンテ...
続きを読む>>

Webサイトではコンテンツ幅に対するテキスト量や、左揃え、中央揃え、右揃えとテキストの配置によってテキストの折り返し位置が変わり、場合によっては見栄えが悪い表示となることもあります。CSSのtext-wrapプロパティを使って「balanc...
続きを読む>>

文章中のとある文言にわかりやすい説明が必要な時は、定義リストを意味づけするdl, dt, ddといったHTMLタグを使って情報を載せていくことでしょう。GoogleやBing、Yahoo、またAIチャットボットなどの検索エンジンに、しっかり...
続きを読む>>

様々なWebブラウザでPopover API（ポップオーバー API）がサポートされ、これまではJavaScriptを使って実装していた、ポップアップやオーバーレイと呼ばれるポップオーバーUIを、HTMLのみで実装することができるようになり...
続きを読む>>

Sassで記述していくことができたネスト構造ですが、ブラウザでのCSS Nestingのサポートが進み、主要ブラウザではChromeやEdge、Safariなどで、ネイティブなCSSでネスト構造を書くことができるようになります。ここでは、ネ...
続きを読む>>

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

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

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

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

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