高校「情報Ⅰ」単語帳 - 実教出版「最新情報Ⅰ」 - 効果的なコミュニケーション

国際規格のISO 9241-11では、ユーザビリティを「特定の利用状況において、特定の利用者によって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、利用者の満足度の度合い」と定義している。漠然とした「使いやすさ」よりは限定された概念で、ある人がある状況下である目的を達することがどれくらい容易であるかを表している。

ユーザビリティは利用者への情報やメッセージの提示の仕方やタイミング、言い回し、操作要素や選択肢の提示の仕方、操作の理解のしやすさや結果の想像しやすさ、操作のしやすさや誤りにくさ、誤操作に対する案内や回復過程の丁寧さ、利用者の操作に応じた表示や状況の変化(インタラクション)などの総体で構成される。

高いユーザビリティのために必要な実践は対象の種類(機器・ソフトウェア・Webページ等)や想定される利用者の属性、文脈や利用目的によって異なるため個別性が高く、ある状況では良い事例とされたものが別の文脈では悪い事例になる場合もある。

開発者が期待するユーザビリティが備わっているかどうか確かめるには、利用者(やそれに近い属性の人物)の協力を得て実際に使ってみてもらい、想定通りの操作が行われるか、利用者が不満や戸惑いを感じないかなどをテストするのが有効であるとされる。このような試験を「ユーザーテスト」(user testing)あるいは「ユーザビリティテスト」(usability testing)という。

言語や文化、人種、性別、年齢、体型、利き腕、障害の有無や程度といった違いによらず、できるだけ多くの人が同じものを同じように利用できるよう配慮されたデザインのことを意味する。

「バリアフリー」を始めとする従来の考え方では、「高齢者用」「左利き用」「車椅子用」のように特性に応じた専用のデザインを用意する発想が基本だったが、ユニバーサルデザインではこうした発想を極力排し、単一のデザインで万人が利用できることを目指している。

ユニバーサルデザインという用語は1985年に米ノースカロライナ州立大学のロナルド・メイス(Ronald Mace)教授によって提唱されたが、それ以前から実践されていた考え方を整理して名前をつけたものとされる。氏はユニバーサルデザインの7つの原則として「公平に使える」「柔軟性がある」「簡単で自明」「必要なことがすぐに理解できる」「間違いを許容する」「弱い力で使える」「十分な大きさと空間」を唱えている。

ユニバーサルデザインの具体例として、施設内の案内などを言葉ではなく絵文字で伝えるピクトグラム、様々な視覚特性を持つ人による調査・テストを経て開発された視認性の高いフォント、容器に刻まれた凹凸を触れば何が入っているか識別できるシャンプーやコンディショナー、手や指の状態によらず持ちやすく使いやすい文房具やカトラリーなどがある。

Webページや印刷物のデザイン、文書ファイルの編集などにおいて、文字や画像などの表示要素の見栄えや配置など、見た目に関する要素や属性のことをスタイルという。

文字(文章)の場合、書体(フォント)の種類や文字の大きさ、太さ、色、文字間や行間の余白の広さ、縦横の変形度合い、周囲の影の有無やその濃さ、文書内での配置などがスタイルに含まれることが多い。画像や図形、動画などの場合も同様に、その配置や見た目の指定をスタイルという。

また、何かのやり方や方法について、定まった流儀や型のことをスタイルということがある。例えば、ある言語でプログラミングをする際に守るべきプログラムコードの記述様式のことを「コーディングスタイル」(coding style)と言ったりする。

一般の外来語としても流儀や様式、定まった型などを意味する用法が多い。服装の(流行りの)様式という意味から派生して「体型」(の美しさ)「体つき」のことを指す場合もあるが、英語の原義には体型の意味はなく、一種の和製英語となっている。

サイト内の各ページには他のページへのハイパーリンクが設置され、これをたどってページ間を互いに行き来できるようになっている。入口や表紙にあたるページを「トップページ」または「ホームページ」(あるいはメインページ、フロントページ、インデックスページなど)という。

トップページにはサイトの概要や内容の案内、主要なページへのリンクが掲載されることが多く、ここを起点に閲覧を開始することが期待されるが、Webの特性上、検索エンジンの検索結果ページや他サイトからのリンクなどでトップ以外のページに直接訪問されることも多い。

Webサイトの構成

管理者があらかじめ作成した内容を提供する静的コンテンツ(静的ページ)と、Webサーバの拡張機能を用いて、ページの一部が動的に変化したり、電子掲示板(BBS)やコメント欄のように訪問者が内容を投稿できるコーナーが設けられる場合もある。

アプリケーションソフトのように閲覧者が対話的に操作して何らかの処理を行えるような構成になっているものもあり「Webアプリケーション」と呼ばれる。また、そのような仕組みを用いて利用者にサービスを提供するものを「Webサービス」と呼ぶことがある。

Webサーバ/ドメインとの違い

Webサーバは「IPアドレス」または「ドメイン名」(ホスト名まで含むFQDN)、個別のWebページは「URL」(Uniform Resource Locator)という識別子で指し示されるが、Webサイトそのものを指し示す識別子やサイトの範囲を定義する設定情報のようなものはない(補助的に利用される技術はあるが必須ではない)。

一つのWebサイトが複数のWebサーバ(ドメイン)にまたがって設置・運営されたり、一つのWebサーバがサブディレクトリごとに異なるWebサイトを提供している場合もある。WebサーバとWebサイトは一対一に対応するとは限らず、ページがどのサイトに属するのか確実に見分ける仕組みもない。

このため、「Webサイト」という括りは技術的に厳密に定義できるものではなく、便宜上のものと言える。通常はトップページのURLをWebサイトの所在とし、同一の管理者の管理権限の及ぶ範囲をWebサイトの範囲と考えることが多い。

ネットサービスの個人スペースと区別する用法

近年では、ブログやSNS、動画共有サービスのように登録利用者が内容を投稿できる専用のスペースを設け、インターネット上に公開できるサービスが普及している。巨大なサービス全体のWebサイトが利用者ごとのスペースに分割されている。

これも外形的にはWebサイトの一種に違いないが、利用者側から見て、「私のブログ」「私のInstagram」「私のサイト」といったように、ネットサービス上の「借り物」のスペースと区別して、従来のような構成のWebサイトを「サイト」と呼ぶことがある。

標準的なWebページは「HTML」(Hypertext Markup Language)と呼ばれるマークアップ言語で記述されたテキストファイルと、その中でページ中に埋め込んで表示するよう指定された画像ファイルなど外部のデータから構成される。

HTMLファイル中には見出しや文章など表示される文字データが記述されているほか、特殊な記法により文書全体や個々の構成要素の構造や設定、レイアウト、見栄えなどに関する指示や設定が記載される。近年では見栄えに関する情報は「CSS」(Cascading Style Sheet)と呼ばれる別の言語で記述し、さらにCSSファイルとして画像などと同じように文書本体から分離されることが多い。

JavaScriptなどのプログラミング言語で簡易なコンピュータプログラム(スクリプト)を記述することもでき、動きのある特殊効果や閲覧者による対話的な操作などを実現することができる。動的に表示内容を変化させ、アプリケーションの操作画面としてWebページを用いる方式を「Webアプリケーション」という。

Webページは印刷物のページのようにあらかじめ固定されたサイズが決まっているわけではなく、ページごとに大きさはまちまちなのが一般的で、ブラウザなど表示するソフトウェアの画面やウィンドウに収まりきらない分は途中で途切れて表示され、スクロール操作や拡大・縮小表示などで表示範囲を閲覧者が指定することができるようになっている。

リンクとWebサイト

Webページ中に別のページへの「ハイパーリンク」(hyperlink、単にリンクとも)と呼ばれる参照情報を埋め込むことができ、閲覧者が指定することにより即座に参照先のページを開くことができる。平面上にページを点、ページ間を繋ぐハイパーリンクを線として書き表すと、張り巡らされた網目がクモの巣(英語で“web”)のように見えることが “Web”という名称の語源となった。

関連する複数のWebページを互いにリンクしてひとまとめにして公開することが多く、そのような一連のページ群のことを「Webサイト」(website)という。本の表紙や目次に当たるサイトの入口となるWebページを「トップページ」(top page)「フロントページ」(front page)「メインページ」(main page)あるいは「ホームページ」(home page)などという。

ホームページとの違い

Webページのことを「ホームページ」と呼ぶこともあるが、ホームページという語は当初はWebブラウザを起動した時に最初に表示されるWebページのことを表していた。これは「スタートページ」「起動ページ」とも呼ばれる。

転じて、「Webサイトのトップページ」という意味でも用いられるようになった。さらにWebが一般に普及する過程で、「Web」という英単語に馴染みがなかったことなどから、Webページそのもののことをホームページと呼ぶ用法が広まった。

ハイパーリンク (hyperlink)

Webの分野では、ある文書の中に記述された、別の文書など何らかの情報資源の所在を指し示した要素のことを「ハイパーリンク」(hyperlink)と呼び、これを略してリンクという。

資源の所在はURL/URIと呼ばれる統一された記法が用いられ、Webサイト内に別のWebページや、インターネット上の別のWebサイト上のページ、ローカルファイル、電子メールアドレスなど様々な対象を指し示すことができる。

Webブラウザ上では何らかの表示要素(文字や画像など)の付加的な属性として扱われ、マウスポインタを合わせてクリック(タッチスクリーンの場合は指先やペン先でタップ)すると、指し示した先の資源を読み込んで表示が切り替わる。

通信機器間のリンク

通信ネットワークの分野では、一対の機器の間などで信号やデータを送受信できる状態にある回線や伝送路のことをリンクということがある。

機器間で物理的に信号の送受信が可能で、一定の伝送手順に従って特定の形式のまとまった単位のデータ(フレームやセル、データグラムなど)を互いに伝送するすることができる状態を指す。このような接続状態を確保することを「リンクする」「リンクを確立する」などと表現することがある。

通信手順や仕様を階層化したモデルでは、何らかの物理回線上でリンクを確立してデータを伝送するための伝送手順や伝送形式を定めた階層のことを「リンク層」あるいは「データリンク層」という。物理層(第1層)とネットワーク層(第3層)の中間であるため「第2層」(L2：Layer 2)とも呼ばれる。リンク層の技術規格としてEthernetやWi-Fi、PPPなどがよく知られる。

ファイルシステムのリンク

コンピュータのストレージ内でデータをファイルやディレクトリなどの単位で管理するファイルシステムでは、ファイルやディレクトリを本来の位置とは別の位置から参照できるようにしたものをリンクという。

このうち、あるファイルやディレクトリの実体に複数の名前を付け、それぞれが実際のファイル名やディレクトリ名として等しく機能するようにしたものを「ハードリンク」(hard link)という。

一方、すでに存在するファイルやディレクトリを指し示す特殊なファイルなどを作成することにより、本来とは別の位置にそのファイルやディレクトリへの参照を作成することができる機能を「ソフトリンク」(soft link)という。この機能はWindowsでは「ショートカット」、macOSでは「エイリアス」、UNIX系OSでは「シンボリックリンク」として知られている。

プログラムのリンク

ソフトウェア開発やプログラミングの分野では、機械語などで書かれたプログラム(オブジェクトコード)が収められた複数のファイルを結合し、実行可能形式のファイルを生成することをリンクと呼ぶ。

開発者が作成したソースコードから変換されたオブジェクトコードに、そのコード中から参照されているライブラリなど既存のコード群を統合して実行可能な状態にする。「リンカ」(linker)と呼ばれる専用のソフトウェアで自動的に行われる。

一つのファイルにすべてのコードを連結する方式を「静的リンク」(static link/スタティックリンク)、実行時に必要に応じて外部のファイルをメモリ上に呼び出す方式を「動的リンク」(dynamic link/ダイナミックリンク)という。

ハイパーリンクは参照先の識別情報や所在情報などを特定の記法で記述したもので、コンピュータシステムによって参照先を容易に呼び出したり照会したりできるようになっている。このようなハイパーリンクの仕組みによって様々な文書などの情報資源を相互に結びつけた情報メディアを「ハイパーテキスト」(hypertext)あるいは「ハイパーメディア」(hypermedia)という。

現代において最も身近で最も普及しているハイパーテキストシステムはインターネット上に構築されたWeb(ウェブ、WWW：World Wide Web)であり、単にハイパーリンクといった場合はWebページなどWeb上の様々な情報を相互に結びつけるリンクのことを指すことが多い。

Web/HTMLのハイパーリンク

Webページでは文書の構造化に用いるHTMLおよびネット上の所在情報を表すURL(Uniform Resource Locator)の記法に従って、ページ内の構成要素から他のWebページなどインターネット上の情報資源へハイパーリンクを設けることができる。

HTMLではa要素(アンカータグ)で文字や画像などにリンクを設定でき、リンク先としてURLやパスなどを指定できる。例えば、「<a href=“リンク先URL”>リンクテキスト</a>」のように記述すると、リンクテキストで示された文字列がハイパーリンクとなり、飛び先としてhref属性で記述したリンク先URLが設定される。

href属性に「href="https://www.example.com/"」のようにURLを設定すれば外部の任意のサイトを指定できるが、「href=“/index.html”」のように絶対パスを指定したり、「href="../about.html"」のように相対パスを指定することでサイト内リンクとすることもできる。

また、「href="#section9"」のように同じページ内の別の箇所を指定したり(ページ内リンク)、「href="mailto:info@example.com"」のようにメールアドレスなどWeb以外の資源をURI記法に従って指定することもできる。

同じWebサイト内のページ間を連結するハイパーリンクを「内部リンク」、外部の別のサイトへ(あるいは外部から)繋ぐリンクを「外部リンク」という。画像ファイルなどページ(HTMLファイル)以外の資源へ外部から直接繋いだリンクを「直リンク」、サイトの深い階層にある個別のページを外部から直に参照するリンクを「ディープリンク」という。

Microsoft Excelのハイパーリンク機能

表計算ソフトのMicrosoft Excel(エクセル)では、Webページのリンクと同じように、セル内のテキストや画像にハイパーリンクを設定し、シート内の他のセルや、他のシート、他のExcelファイル、外部のWebページ(URL)などを参照することができる。

セルに対する右クリックメニューの「リンク」などから設定できる。リンクを設定したセルのテキストは文字色が変わり、マウスホバーするとマウスポインタが指の形に変化してクリッカブルであることを知らせる。そのままクリックあるいはタッチすると、埋め込まれたリンク先へ移動する。

現代ではWeb上のハイパーリンク機能は単に「リンク」と呼ぶのが一般的となっており、「ハイパーリンク」はもっぱらExcel(やWordなど他のMicrosoft Officeアプリケーション)のリンク機能を指す用語として用いられるようになってきている。

他のハイパーリンク技術

WebおよびHTML以外にもハイパーリンクの機能を実装した技術規格やシステムは存在する。例えば、XMLに高度なハイパーリンク機能を提供する「XLink」では、複数の資源の同時参照や要素外からのリンク設定、外部資源間のリンクの設定など、HTMLのリンク仕様にはない強力な機能が定義されている。

文書の論理構造を記述するHTMLの目的をより貫徹し、ナビゲーション要素を表すnavタグ、節を表すsectionタグ、前置き部分を表すheaderタグなど、文書の構造を表現する要素が追加された。

一方、fontタグやcenterタグ、bigタグなど、現在ではCSS(Cascading Style Sheets)で記述すべきとされる見た目を指定するタグの多くが廃止された。埋込みではないフレームを定義するタグ(frame、frameset、noframe)も廃止されている。

また、マルチメディア対応が強化され、音声を埋め込むaudioタグ、動画を埋め込むvideoタグ、任意のグラフィックスを描画できるcanvasタグなどが追加され、こうした要素の再生やアニメーションなどの制御に関するAPIなども整備されている。

Webアプリケーション対応

Webページをソフトウェアの表示・操作画面として利用するWebアプリケーションを開発する場合、従来はJavaアプレットやAdobe Flash、ActiveXコントロール、Microsoft Silverlightといった追加のソフトウェアを必要とする場面が多かった。

HTML5ではHTMLとJavaScript(ECMAScript)、CSSなど標準規格のみでこれらに劣らない高度なアプリケーションを開発することを目指し、スクリプトからページ内のHTML要素を参照するための標準オブジェクトモデル(DOM：Document Object Model)およびブラウザの機能を呼び出すための様々な標準インターフェース(API)が整備された。

これにはローカルファイルの読み込みや保存(File API)、ネットワーク上でのソケット通信(WebSocket)、ローカル環境へのデータ保存(Web Storage)、要素のドラッグ＆ドロップ、簡易なデータベース機能(Indexed Database API)、GPSなどによる位置情報の取得(Geolocation API)などが含まれる。

歴史

Web技術の標準化を行うW3C(World Wide Web Consortium)によって2008年にドラフト(草案)が提起され、2014年に正式な規格として勧告された。2016年に一部の仕様を追加したHTML 5.1が、2017年にはHTML 5.2が発表されている。

仕様の多くは主要なWebブラウザ開発元などで構成される業界団体のWHATWG(Web Hypertext Application Technology Working Group)が取りまとめたもので、W3Cはほとんどの仕様についてこれを追認する一方、一部の仕様について両者の規格に僅かな差異が生じる形となっていた。

これを受けて両団体でHTMLの標準化プロセスについて議論が行われ、2019年からはWHATWGが随時更新していく「HTML Living Standard」をHTML標準と認め、W3Cが独自に規格を策定しないことなどが合意された。

マークアップ言語は元になるテキスト文書に構造や表示方法などを表す制御情報を埋め込む形で記述する言語で、HTMLの場合は「<br>」のように「<」と「>」で括った「タグ」(tag)と呼ばれる記法を用いる。

改行を表す「<br>」や画像を埋め込む「<img src="image.png">

」のように単体で完結するものと、「<p>段落</p>」「<a href="/index.html">リンク</a>」のように開始タグと終了タグで内容を括って範囲を表すものがある。

(開始)タグの内部は「<要素名 属性名1="値1" 属性名2="値2" …>」という書式になっており、要素名でタグの種類を、属性名(attribute)と値(value)のセットでオプションの指定などを記述する。終了タグは「</要素名>」のように「/」(スラッシュ)と要素名のみで構成される。

HTMLではタグによって文書内に設けられた構造のことを「要素」(element)というが、単体のタグはタグ自体が要素に、開始と終了があるタグでは開始タグから終了タグまでの間が一つの要素になる。「<div><p>段落1</p><p>段落2</p></div>」のように要素を入れ子状にすることもできる。

HTMLでは一枚のページ全体をhtml要素で囲み、その内部にはheadタグ、body要素がこの順に並んでいる。headタグは制御情報を記した「ヘッダ」(header)と呼ばれる領域で、内容はページ上に描画されない。描画する要素はbody要素の内部に記述する。

headタグの内部には、外部CSSファイルや前後のページなどを対応付けるlink要素や、スタイルシート(CSS)を記述するstyle要素、JavaScriptの記述や読み込む外部スクリプトファイルを指定するscript要素、メタデータを記述するmeta要素などを記述する。

ページ上部にサイト名やグローバルメニュー、サイト内検索フォームなどを並べた領域を設け、これを「ヘッダ」と呼ぶこともあるが、これはページ上に表示する内容であるためhead要素ではなくbody要素に記述する。HTML5では表示するヘッダ領域を定義する要素として「header要素」が規定されている。

HTMLでは一枚のページ全体をhtml要素で囲み、その内部にはhead要素、bodyタグがこの順に並んでいる。head要素は制御情報を記した「ヘッダ」(header)と呼ばれる領域で表示は行われず、実際の表示内容はbodyタグの内部に記述する。

表示されるブラウザウィンドウ全体を表す要素であり、文字や画像、入力フォームなど表示されるすべての要素はbodyタグの子孫要素として記述される。ページ内を複数の領域に分けてそれぞれ別のページを表示する「フレーム」を用いる場合は、bodyタグの代わりにframeset要素を記述する。

以前は背景色を指定するbgcolor属性、背景画像を指定するbackgroud属性、ウィンドウ端からの余白を指定するtopmargin属性、bottommargin属性、leftmargin属性、rightmargin属性なども指定できたが、現在は規格上は廃止され、こうした見た目に関する指定はCSSのプロパティで定義すべきとされている。

HTMLで長い文章を記述する場合、段落ごとにp要素やdiv要素で囲むと段落の終わりごとに改行されるが、任意に改行を行いたい場合はbrタグを記述することで、その位置で強制的に改行させることができる。終了タグの無い空要素で、子要素や領域を持たない。

行頭でbrタグを記述すると空行とすることができるため、連続してbrタグを記述することで次の段落や要素までの隙間を調整することがあるが、このような使用法は本来の要素の意味とは異なるため、CSSのmarginプロパティなど空き領域の広さを設定するための機能を用いるべきとされる。

src属性で画像ファイルの位置を指定すると、imgタグがある位置に埋め込んで表示することができる。位置はサーバ内のパス(ドキュメントルートからの絶対パスあるいはHTMLファイルを基準とする相対パス)あるいはURLで指定する。位置の代わりに src="data:image/png;base64,画像データ" のように記述することで、Base64エンコードされた文字列として画像データを直接埋め込むこともできる。

alt属性で画像付が表示できない場合に代わりに表示される文字列(代替テキスト)を指定する。画像ファイルの取得ができず表示できなかった場合や、読み上げブラウザなどを利用していてそもそも画像の表示自体が不可能な環境では重要な情報となる。

画像内にいくつも領域を設けてそれぞれ特定のURLにリンクを張ることができる「イメージマップ」という機能があり、これを利用する場合はusemap属性で利用するイメージマップ名を指定する。サーバサイドイメージマップを利用する場合はismap属性を指定する。

width属性で表示幅を、height属性で表示高を指定することができる。これらが無指定の場合は画像ファイル側のサイズ情報を利用するが、ファイルの読み込みが完了するまで表示サイズを決定できず、ページの表示状態が崩れたり後から位置やサイズがずれる場合がある。また、画像のサイズと属性値で指定した幅や高さが異なる場合は、自動的に拡大・縮小・変形して表示される。

imgタグで読み込むことができる画像データの形式はWebブラウザによるが、一般的にはJPEGやPNG、GIFが用いられ、最近ではWebPなども普及している。ベクター形式のSVG画像を指定することもできる。HTML5では複数の画像データから状況に応じて適切なものを選択させるpictureタグが導入され、imgタグはその子要素として記述されることがある。

画像や文字列などに外部へのリンクを設定するには、要素をaタグで囲って「<a href=“https://www.example.co.jp/”>イグザンプル社</a>」のように記述する。ブラウザでその要素を選択してクリックやタップをすると、href属性で指定したリンク先が開かれる。

リンク先の指定はURLによって行うが、同じWebサーバ内にリンクする場合は “/index.html” のようにパス(path)を指定することもできる。パスは「/」で始めるとサーバの最上位階層からの絶対パスとなるが、リンク元ページの位置を起点として「./」で現在のディレクトリ、「../」で上位階層のディレクトリを表す相対パスで記述することもできる。

フラグメント識別子

ページ内にリンクの到達点を作成するのにも用いることができる。例えば、「<a name=“sec2”>第2節</a>」のように記述すると、ページ中のその位置を「#sec2」というフラグメント識別子で指し示すことができるようになる。

ページ内の他の要素から「<a href=“#sec2”>」のようにページ内リンクを設定したり、URLの一部として「https://www.example.co.jp/page.html#sec2」のように指定することで外部からその位置へ直接リンクすることができる。

ターゲットの指定

target属性でリンク先を開くタブやウィンドウなどの表示領域を指定することができる。何も指定しなければ現在の表示領域がリンク先のページに遷移するが、「targe=“_blank”」のように指定すると新しい表示領域を開いてその中にリンク先を表示する。

同じ表示領域を明示的に指定したい場合は「_seft」、フレーム分割されている場合に親フレームに表示したい場合は「_parent」、分割を解除を一画面に戻したい場合は「_top」を指定する。タブやウィンドウに識別名がつけられている場合は開く先を名前で指名することもできる。

人間が用いる自然言語(日本語、英語など)で書かれた文書の中に、特定の記法を用いてコンピュータ向けの制御データを埋め込むことをマークアップという。マークアップはソフトウェアによって解釈され、文書の見栄えを変更したり、表のような構造化されたデータ集合を定義することができる。

言語によってマークアップの構文や記法、指定できる内容などは異なっている。例えば、文書中に見出しを設定するには、HTMLでは「<h1>見出し</h1>」のように、TeXでは「\section{見出し}」、MarkDownやWiki記法では「# 見出し」のように記述する。

例えば、「振り仮名のことをルビといいます」という文章中にHTMLを用いて「<ruby>振り仮名<rt>ふりがな</rt></ruby>のことをルビといいます」というマークアップを挿入すると、Webブラウザがこれを解釈して「振り仮名ふりがなのことをルビといいます」のように表示する。

文書中にマークアップを記述するための記法や語彙、文法などを定めたコンピュータ言語を「マークアップ言語」(markup language)という。HTMLやTeX、Markdown、Wiki記法のように文書を構成するためのマークアップが有名だが、画像データやソフトウェアの設定ファイルなどへの応用例もある。

また、SGMLやXMLのように、マークアップ言語の記法のみを規定しており、特定の対象や用途に特化した語彙を定義することで新たにマークアップ言語を作り出すことができるメタ言語も存在する。例えば、SVGはXMLの仕様と記法を用いて画像の構成要素を記述することでベクター画像を構成することができる。

マークアップ言語のタグ

Webページなどの記述に使われるHTMLやXMLなどのマークアップ言語では、元になる文書に「<」と「>」で囲まれた標識を埋め込むことにより、表示ソフトに対して文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができるようになっている。

このように、地の文とは別の主体や階層によって解釈され(文章を読むのは人間だがタグを表示に反映するのはソフトウェア)、付加情報を埋め込む特殊な文字列などのことをタグと言う。

タグによる情報の分類

ソフトウェアやネットサービスで情報を分類・整理する際に、その属性や特徴を表す単語や短いフレーズをタグという。利用者が考えた様々なタグを対象に対応付けて分類していく手法をタギング(tagging/タグ付け)という。

単語を書いた付箋をたくさん貼り付けるようなイメージの分類法で、共通点の乏しい多様な対象が集まっていて階層構造などで整理・分類するのが難しい場合や、様々な側面から情報を検索・抽出したい場合などに用いられる。

例えば、ある歌手の歌唱した音声を保存したファイルに対して、曲名、収録媒体、歌唱者、作曲者、作詞者、発表年などをタグ付けしておけば、大量のファイルがあってもこれらの情報に基いて検索や分類、共通の属性を持つファイルの抽出・一覧などを容易に行なうことができる。

画像など文字以外の要素をページ内に配置する際、そこに何が置かれているのかを説明する短い文字列を代替テキストとして指定する。この文字列を「altテキスト」「代替テキスト」(alternate text)などと呼ぶ。何を記述するかは制作者が任意に決められるが、HTMLの仕様上はその要素の代わりとして要素が伝達したい内容を記述すべきとされる。

グラフィック表示の通常のWebブラウザでページを表示した際には画面上には表示されないが、ブラウザによってはマウスホバー(マウスポインタを要素の上に重ねて静止すること)など特定の操作によって表示させることができる場合もある。

また、テキストブラウザや音声ブラウザなどグラフィック表示以外のブラウザソフトでは文字以外の要素は直に扱うことはできないが、代替テキストが設定されていれば利用者にその要素の意味を伝えることができる。

検索エンジンの情報収集ソフト(クローラやインデクサ)などの中にも、要素が何を表しているのか理解する参考として代替テキストの内容を読み取って処理するものがある。

文書内の各文字要素(見出しや本文など)について、字体(フォント)や大きさ、文字色、字間や行間、下線や斜体などの修飾を定義することができる。画像など他の要素について枠線や陰影などの表示形式を定義したり、文書内での各要素のレイアウト規則などを記述する場合もある。

ワープロソフトなどの文書作成ソフトでは、用途などに応じてあらかじめ複数のスタイルシートを作成しておくことにより、文書作成の度に個別に要素の見栄えを定義しなくても、適したスタイルシートを選択・適用するだけで望みの表示スタイルに変更することができる。

また、帳票や記入用紙などの定型的な書類や、互いに関連性や共通性のある複数の文書を作成する場合などにも、同じスタイルシートを適用することで文書間の見栄えに統一感を持たせることができる。

Webページのスタイルシート

Webページの記述に用いられるHTMLなどにもスタイルシートの概念があり、一般的にはCSS(Cascading Style Sheets)と呼ばれる専用の言語によりスタイルシートを記述する。単にスタイルシートといった場合はCSS形式のデータやファイルなどを指すことが多い(XSLなど他の方式も存在する)。

HTML文書にスタイルシートを適用すると、文書本体から表示形式やレイアウトなどに関する情報を分離し、文書の構造だけをHTMLファイル本体に記述することが可能になる。

これによって、HTML文書の論理的な構造が把握しやすくなるほか、サイト内の複数のページで同じスタイルを共有でき、変更を一括して適用するなどの効率的な管理ができるようになる。

CSSのみを記した単体のファイル(.cssファイル)を用意してHTMLファイルからlink要素などで指定する方法が一般的だが、HTMLファイル内部にstyle要素で記述する方法(<style>(CSS文)</style>)や、HTML要素の属性(attribute)として開始タグのstyle属性に記述する方法(<div style=“(CSS文)”>...</div>)も用意されている。HTML内に記述する場合は他ページとの共有という利点は損なわれる。

Web規格では、文書内の文字情報と論理的な構造(見出しや本文、箇条書きなど)、画像など文字以外の要素の組み込みなどはHTMLで記述し、それらの画面上での位置関係や見た目の指定、装飾などはCSSで記述した「スタイルシート」により指定することとされている。

CSSによるスタイル指定はHTML文書中に直接記述することもできるが、外部のファイルにまとめて記述してHTMLから呼び出す形が望ましいとされる。CSSをファイルに格納する際の標準の拡張子は「.css」である。

基本的な書式

基本的な書式は「要素の一致条件 {プロパティ名1:値1;プロパティ名2:値2;…}」というもので、文書内で条件に一致する要素に対し、各プロパティに値が適用される。例えば「p{font-size:16px}」という指定は文書中に登場するHTMLのp要素のfont-sizeプロパティ(文字サイズ)を16ピクセルに指定することを表す。この文を必要なだけ列挙して文書の書式を設定する。

指定できるプロパティは要素の大きさや配置、要素間の位置関係や空白、要素の境界線や余白、要素間の間の空白や周囲の余白、文字の大きさや文字や行の間隔、書体(フォント)の種類や変形(太字や斜体、上付き、下付きなど)、箇条書き(リスト)の表示書式、背景色や背景画像など多岐にわたる。

HTMLタグが親子関係(包含関係)にある場合、多くの設定値は親要素に指定されたものが子要素、孫要素に引き継がれ、子要素で指定されたものが追加されていく。このように設定値が上から下へ伝播していく様子を階段状の滝を意味する “cascade” (カスケード)になぞらえてこのような名称となった。

見栄えにCSSを用いることでHTML文書に直接見栄えを記述することを避け、文書の論理的な構造をHTMLに、見栄えに関連する情報をCSSに分離することができる。構造のみ、あるいは見栄えのみを修正することが容易になり、対象機器などに応じてCSSを切り替え、それぞれに適した表示や印刷を行えるようになる。

セレクタ

CSSで要素の指定に用いられる一致条件を「セレクタ」(selector)という。要素型(タグ名)やクラス、ID、属性値、先頭からの順番など、様々な指定方法が用意されている。

「div」「a」などアルファベットから始まるものはHTMLの要素型(タグ名)を指定する「要素型セレクタ」(type selector)、「.myclass」のようにドット(ピリオド)から始まるものはclass属性の値を指定する「クラスセレクタ」(class selector)、「#myid」のようにシャープ(ナンバーサイン)から始まるものはid属性(またはname属性)の値を指定する「IDセレクタ」(ID selector)で、この3つの組み合わせが基本となる。

他にも、「要素:nth-child(n)」で子要素の特定の順番を指定したり、「要素[属性名="値"]」で特定の属性値を持つ要素のみを取り出したり、「要素:hover」(マウスオーバー時の挙動を指定)など要素が特定の状態にある場合を指し示す書式などが用意されている。

文書内の要素の階層構造(親子関係)に基づいて特定の位置にあるものだけを指定することもできる。例えば、「p>a」のような大なり記号は「子セレクタ」と呼ばれ、親要素直下の子要素(この例ではp要素直下のa要素)を指す。「p a」のように空白で繋ぐ指定方式は「子孫セレクタ」と呼ばれ、孫要素などすべての子孫要素(この例ではp要素内のすべてのa要素)を指す。

歴史

最初の規格(CSS Level 1)は1996年にW3Cによって標準化され、1998年に拡張された「CSS Level 2」標準が勧告された。長年の間これがCSS標準として定着していたが、2011年に大改訂された「CSS Level 3」(CSS3)が策定された。

CSS3からは仕様がモジュール(部品)化されたため、CSS3準拠のモジュール規格はその後何年にも渡り新たに登場し続けている。メディアクエリやセレクタなどで「Level 4」仕様の検討が始まっているが、今後は「CSS4」(あるいは5、6など)のような単一の統合されたバージョン番号は用いられない可能性がある。

様々な分野や場面で用いられる一般的な用語で、それぞれの対象が持つ固有の属性値やその集合体のことを指す。例えば、「ファイルのプロパティ」と言った場合には、ファイル名やファイルの種類、ストレージ上での所在、アクセス権の設定、作成日時、最終更新日時、データサイズ、読み取り属性などが含まれる。

Windowsなどでは、対象のプロパティの表示や変更を行う設定画面や設定ソフトなどのことを「○○のプロパティ」のように表示するため、文脈によっては「プロパティを開く」といったようにこの設定画面のことを指してプロパティという場合もある。

オブジェクト指向プログラミングにおけるプロパティ

オブジェクト指向プログラミングでは、オブジェクトのフィールド(メンバ変数)を外部から直に操作するように記述できるが、実際には内部的にメソッド呼び出しを利用するよう自動的に変換してくれる機能をプロパティということがある。

通常、フィールドへ外部からアクセスするには「アクセサメソッド」(setterメソッド/getterメソッド)を定義する必要があるが、プロパティ機能のある言語ではこれを簡易化し、少ないコード量で安全にフィールドへアクセスできるようにしてくれる。

例えば、objオブジェクトのPropフィールドを外部から参照するには、クラス内でgetPropメソッドを定義し、外部から x=obj.getProp() のように記述するのが一般的だが、プロパティとして宣言することにより x=obj.Prop のように記述するだけで内部的にアクセサメソッドを呼び出して値を取り出してくれる。

CSSセレクタ

Webページの見栄え(スタイル)を記述するCSS(Cascading Style Sheet)では、ページ内でスタイルを適用する要素を指定するための記述をセレクタという。

CSSによるスタイル指定の基本的な構文は「セレクタ {スタイル}」という記述で、セレクタによってページ中の要素(一つまたは複数)を特定し、その要素(群)に対して指定されたスタイルを適用する。

セレクタの指定方法はいくつかある。全称セレクタ「*」はすべての要素を選択し、要素型セレクタ「要素名」は指定のHTML要素をすべて選択し、クラスセレクタ「.クラス名」は指定のclass属性を持つ要素を選択し、IDセレクタ「#ID」は指定のid属性を持つ要素を選択し、属性セレクタ「[属性名=値]」は指定の属性が条件に一致する要素を選択する。

セレクタはカンマで区切って複数指定でき、いずれかに一致する要素をすべて選択する。また、複数のセレクタを結合子で連結し、子孫ノードや兄弟ノードを指定することもできる。例えば、「div a」という指定は「div要素の中にあるa要素」という意味になる。

また、「:状態」という記述を付け加えることで、要素の特定の状態のみを指し示すことができる(擬似クラス)。例えば、「a:visited」はa要素のうち訪問済みリンクのみを指す。「::要素」という記述を付け加えると、擬似的に新たな要素を生み出すことができる(疑似要素)。例えば、「a::after」と指定するとa要素の直後に疑似要素を付け加え、表示する文字列やそのスタイルなどを指定することができる。

切替器

物理的な装置についてセレクタという場合は、複数のケーブルなどを接続して入力を受け付け、一つを選んで出力する切り替え装置などを指すことが多い。

例えば、「AVセレクタ」であれば複数のコンピュータや音響・映像機器からの音声・映像出力を受け付け、そのうちの一つの信号をテレビやディスプレイ装置、スピーカーなどへ出力することができる。どの入力元の信号を出力するかはスイッチなどで任意に切り替えることができる。

コンピュータの機種や入出力機器、ソフトウェアの違いや、子どもや高齢者、障害者といった身体的特性の違いによらず、なるべく多くの人がサイト内の情報を見つけ出し、Webページを開いて内容のすべてに触れることができる状態のことを意味する。

例えば、特定の画面サイズや操作法に依存しないレイアウトやメニュー構成にしたり、漢字やアルファベット、外来語にふりがなや言い換えを併記したり、文字サイズや配色を簡単に変更できるようにするといった対応が必要になる。

また、読み上げソフト(スクリーンリーダー/音声ブラウザ)で音声に変換しても意味が通じるよう、文字情報だけで内容が把握できるようにしたり、画像や動画、音声に内容を説明する代替テキスト(alt属性)を付与したり、すべての要素をキーボード操作で指定できるようにしたりといった配慮も必要になる。

Web技術の標準化団体であるW3C(World Wide Web Consortium)は作業部会WAI(Web Accessibility Initiative)を設置して「WCAG」(Web Content Accessibility Guidelines)と呼ばれるガイドラインを発行し、Web制作者・開発者へ対応を促している。1999年に初版(WCAG 1.0)が発行され、2008年に改訂(WCAG 2.0)された。

また、日本工業規格(JIS)にはWebアクセシビリティの国内標準として2004年に「JIS X 8341-3」が策定され、2010年(JIS X 8341-3:2010)と2016年(同:2016)に改訂された。これは一般に「ウェブコンテンツJIS」と通称され、国や自治体ではWebサイトを制作する際の調達要件としてこの標準への準拠を求めている。

文書の見やすいレイアウトとして極めて一般的に見られる手法として、見出しや本文、図版など文書のメインになる内容を中心に、ページの上端と下端に補助的な情報や定型的な情報を各ページ同じレイアウトで掲載するという手法がある。このうち、上端の領域を「ヘッダ」あるいは「ヘッダー」(header)、下端の領域を「フッタ」あるいは「フッター」(footer)という。

書籍など紙の印刷物の場合、フッタはページ番号や脚注などのために用いられることが多い。文書編集ソフトなどでは、文書のフッタ領域に掲載する項目やレイアウト、装飾などを編集し、印刷時などに一括適用する機能が提供されることが多い。

Webページの場合はサイト内で共通する定型的な情報を掲載する領域として使われることが多い。広告や運営者の情報、サイト内の別のコーナーやページへのリンクを並べたグローバルナビゲーション、著作権表示、問い合わせ先の案内などが記載されることが多い。

電子メールを作成する際に末尾に共通の定型的な内容を記載することがあり、これをフッタと呼ぶこともある。メッセージの末尾に連絡先など送信者自身の情報をまとめたものは「シグネチャ」(signature)と呼ぶ方が一般的である。