Webエンジニアのブログ

WordPressで構築しているWebサイトでは、管理画面からの投稿や固定ページのコンテンツ制作でも、時にHTML構造を必要としたり、共通で利用していきたい埋め込みコードを使ったりと、WebやHTMLに詳しいかたはそれほど問題ありませんが、...
続きを読む>>

テキストや写真だけよりも情報量が多い動画は、コンテンツを充実させるためや情報に対する理解を深めるために、Webサイト内で使うのはとても効果的です。中でも多くの方が利用している動画配信プラットフォームのYouTubeは、とても使われる動画コン...
続きを読む>>

ブログなどの投稿記事に目次を入れることで、読者は記事の全体構造を把握しやすくなり、ユーザビリティが向上します。また、目次は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...
続きを読む>>