HTML / CSS

順位表やランキングを作ろう:順序付きリストとreversed属性で1位から並べる・末尾から並べる

HTMLで「順序付きリスト」と呼ばれるものは、番号付きのリストを表現するための仕組みです。ユーザーに対して「1番目、2番目、3番目」のように順番が重要な情報を伝えたいときに使います。HTMLでは、HTMLタグと呼ばれる記号付きのキーワードを使って文書の構造を指定しますが、順序付きリストはその中でも「リスト構造」を表す代表的な要素のひとつです。

続きを読む

デザインと可読性アップ:順序付きリストとstart属性を使ったステップ表示のコツ

HTMLで「順序付きリスト」と呼ばれるものは、ある決まった順番で並べたい項目を番号付きで表示するための仕組みです。たとえば「手順」「ランキング」「ステップ」「工程」など、順番に意味がある情報を表現したいときによく使われます。HTML(エイチティーエムエル)はWebページの骨組みを作るための言語で、ブラウザがどのように内容を表示するかを指定するためのルールの集まりだと考えていただくとイメージしやすいです。

続きを読む

HTMLの定義リストとは

HTMLの定義リスト(Description List)は、用語とその定義を表現するために使用されるリスト形式です。特に辞書的なエントリ、用語集、メタデータ(データに関するデータ)の一覧などの表現に適しています。

続きを読む

レシピや手順書に最適!HTML順序付きリストでステップを整理するコツ

HTMLの順序付きリストとは、項目に「1, 2, 3…」のような順番(番号やアルファベットなど)をつけて並べるための仕組みのことです。ここでいうHTML(エイチティーエムエル)とは、Webページの構造を記述するための「マークアップ言語」という種類の言語です。マークアップ言語とは、文章のどこが見出しなのか、どこがリストなのか、どこがリンクなのかといった「役割」をタグで指定していくための書き方のことを指します。順序付きリストは、その中でも「手順」「ランキング」「手続き」など、順番に意味がある情報を表現するときに使われます。

続きを読む

インラインレベル要素を徹底解説!ウェブデザインに役立つ使い方と注意点

HTMLにおけるインラインレベル要素(またはインライン要素)は、テキストの流れを中断せずに他のテキストと同じ行に配置される要素です。ブロックレベル要素がコンテンツのブロックを形成し、新しい行で始まるのに対し、インライン要素は周囲のテキストや他のインライン要素と並んで表示されます。

続きを読む

見出し・段落・リンク…よく使うHTML要素をまとめて理解しよう

HTML要素とは、HTML文書の中で「意味のあるひとかたまり」を表す最小単位のことを指します。もう少し具体的に言うと、HTML要素は「開始タグ」「内容(コンテンツ)」「終了タグ」の3つ、もしくはそれに近い構成によって成り立っています。たとえば、次のようなコードを考えてみます。

続きを読む

スクリーンリーダーに優しいサイト作り:WAI-ARIA属性の実践テクニック

WAI-ARIA(ワイ・エイ・アイ・エイリア)は、「Web Accessibility Initiative – Accessible Rich Internet Applications」の略称で、直訳すると「ウェブアクセシビリティ・イニシアチブ ― アクセシブルなリッチインターネットアプリケーション」という意味になります。簡単に言うと、WAI-ARIAとは、障がいのあるユーザーを含むすべての人がWebアプリケーションやWebサイトを利用しやすくするために、HTMLに「意味の情報」や「状態の情報」を追加するためのルールや属性の集合のことを指します。

続きを読む

WCAGとは?ウェブアクセシビリティの基礎知識と実践ガイド

WCAG(Web Content Accessibility Guidelines)は、ウェブコンテンツをよりアクセシブルにするための一連のガイドラインです。これらは、国際的な標準化団体であるW3C(World Wide Web Consortium)によって作成されたもので、視覚障害、聴覚障害、運動障害、認知障害など、さまざまな障害を持つユーザーがウェブコンテンツにアクセスしやすくすることを目的としています。

続きを読む