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

米認知科学者ドナルド・ノーマン(Donald A. Norman)が提唱した概念で、人間がモノに接したときに知覚される、行動の手掛かりとなる要素のことである。典型的には物体の形状やデザインなど視覚的な要素だが、発する音(聴覚)や表面の質感(触覚)などが手掛かりとなる場合もある。

例えば、ゴミ箱の設計者が上部に小さな丸い穴の空いた形状にデザインすれば、特に文字や絵文字で案内しなくても、それがビンや缶、ペットボトルなどを入れるものであることが伝わる。これは意図されたシグニファイアだが、通路で大きなプラ容器を雨漏りの水受けに使っていたらゴミを捨てられてしまう、といった意図しない(あるいは意図に反する)シグニファイアが生じることもある。

類義語と語源

似た概念に「アフォーダンス」(affordance)がある。モノと人間の間に生じる相互作用の可能性を表し、人間が知覚するかどうかに関わらずモノが宿している性質であるとされる。ノーマンは当初、デザインによって適切にアフォーダンスの手掛かりを与えることの重要性を説いていたが、デザイン上の手掛かりがアフォーダンスであるとする解釈が広まってしまったため、改めてシグニファイアの概念を提唱した。

「シグニファイア」の語は記号学の用語「シニフィアン」(仏語 “signifiant”、英語では “signifier” )から取られたもので、記号学ではある特定の内容を指し示す文字による表記や発話などを意味する。それによって指し示された実際の内容である「シニフィエ」(signifier)と対になる概念である。

印刷物の場合、横書きの場合は図版の下に、縦書きの場合は右に、本文より小さな文字で書き入れることが多い。本文が縦書きでもキャプションは横書きとすることもある。見出しなどと同じゴシック体のフォントが好まれる。

電子的な文書やWebページなどでも、印刷物の組版を踏襲して図版の下や右などにキャプションを配置することが多い。HTMLにはtable要素にキャプションを付記するcaption要素や、figure要素にキャプションを付記するfigcaption要素が用意されている。いずれも本体の直下に指定した文字列を表示する。

なお、英語の “caption” には、画像や図版の説明という意味以外にも、記事やページの見出し、タイトルのことや、映像中に表示される字幕( “subtitle” とも言う)、テロップなどの意味でも用いられる。映像の字幕のうち、表示・非表示を切り替えることができ、セリフや効果音など内容を文字に起こしたものを「クローズドキャプション」(CC：Closed Caption)という。

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

トップページにはサイトの概要や内容の案内、主要なページへのリンクが掲載されることが多く、ここを起点に閲覧を開始することが期待されるが、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サイトを「サイト」と呼ぶことがある。

ハイパーリンク (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では、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾についての情報を文書に埋め込んで記述することができる。例えば、HTMLファイル中で <br> と書かれた場所はブラウザなどにおける表示では改行が行われ、<h1>HTMLの概要</h1> のように括られた箇所は大見出しとみなされ(通常の設定では)上下の要素から少し離れた独立した行に大きくて太い文字で表示される。

様々な機能や意味を持つタグが定義されており、文章の中で表題や見出し、段落の区切りを指定したり、箇条書きの項目を列挙したり、縦横に項目が並んだ表を定義したり、文書の一部として画像や音声、動画を埋め込んだり、他の文書へのハイパーリンクを設定したりすることができる。

HTML文書の構造

典型的な構造のHTMLは冒頭にHTMLのバージョンなどを示すDOCTYPE宣言があり、以下ページ全体がhtml要素(htmlタグで括られた領域)となる。

html要素内にはhead要素とbody要素に分かれ、head要素には文書についての情報が記述される。ページタイトルや言語、文字コード、他の文書との繋がり、読み込むスタイルファイルやスクリプトファイルなどを指定する。body要素が表示されるページの本体で、具体的な内容が記述される。

他の言語の混在

他の言語による記述をHTML要素として文書中に記述することができる。例えば、CSS(カスケーディングスタイルシート)による要素の見栄えの記述を文書中にまとめて記したい場合は<style>と</style>で括られた領域に記述することができる。

また、<script>と</script>で囲った領域にはJavaScriptという簡易なプログラミング言語を用いてスクリプトを記述することができ、ページがブラウザなどに表示された後に実行される。

これら別の言語による記述はHTMLタグ中の属性(style属性やonclick属性)の値として記述することもできる。

歴史

HTMLは元々SGML(Standard Generalized Markup Language)の簡易版として生まれ、最初の標準規格は1993年にIETFによって発行された。1994年にW3Cが設立され、以降の改訂はW3Cが担当している。

当初は主に文章の論理構造を記述する言語だったが、Webの普及が進むにつれて要素の見栄えに関する仕様がブラウザメーカー主導で相次いで追加されていった。その後、表示の仕方を記述する専用のスタイル言語としてCSS(Cascading Style Sheet)が考案され、文書の論理的な構造の記述をHTMLに、見栄えの記述をCSSに分離すべきとされるようになった。

2000年前後には汎用的なマークアップ言語であるXML(Extensible Markup Language)に準拠するよう一部の仕様を改めたXHTMLへの移行が企図されたが普及せず、以後も独立した規格として維持されている。

「<!DOCTYPE」で始まる記述で、ルート要素のタグ名(マークアップ言語の種類)、DTDの参照方法(SYSTEMまたはPUBLIC)、DTDの種類や所在を示す識別子(規格で定められた公開識別名またはDTDの存在するURI)を順に記述する。

Webブラウザなどマークアップ文書を解釈・処理するソフトウェアは、冒頭のDOCTYPEに従って言語の種類やバージョンを認識し、指定されたDTDなどを読み込んで文書の解釈を始める。文書の記述内容が同じでもDOCTYPEが異なっていると解釈の仕方が変わり、最終的な表示結果などが変化することがある。

バージョン4までのHTMLやXHTMLの場合は「<!DOCTYPE HTML PUBLIC “公開識別子” “W3Cなどが公開しているDTDのURI”>」という書式になり、公開識別子は “-//W3C//DTD HTML 4.01 Transitional//EN” のようにHTMLのバージョンや表示モードなどを指定する。HTML5のDOCTYPEは「<!DOCTYPE html>」のみと定められている。

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

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

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

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」を指定する。タブやウィンドウに識別名がつけられている場合は開く先を名前で指名することもできる。

直接の子要素として、キャプションを表示するcaption要素、列のグループを定義するcolgroup要素、最上段のヘッダ行を定義するthead要素、2段目以降の各行を定義するtbody要素、最下段を定義するtfoot要素を含むことができる。

項目の並びは行単位で追加することができる。thead要素内には最上段に各列の表題が並んだ行を定義でき、tr要素を行を作成して子要素として列の数だけth要素を並べる。多くのWebブラウザはth内の文字列を特に指定がなければ太字で表示する。

表の本体はtbody要素内に定義する。tr要素で行を作成し、列の数だけtd要素でセルを配置していく。tdの内部には文字列や画像など任意のコンテンツを配置することができる。最下段に集計値などを起きたい場合はtfoot要素の中にtr要素を置き、thやtdを置いていく。行全体に適用したい属性やスタイルはtrに指定することができ、列全体に適用したい属性やスタイルは冒頭のcolgroupおよび内部のcol要素に指定することができる。

以前の規格では、bgcolor属性で背景色を、background属性で背景画像を、border属性で枠の太さを、cellspacing属性でセル間の隙間を、cellpadding属性でセル内の枠線とコンテンツの隙間を指定することができたが、こうした見た目に関する属性はHTML5で廃止され、同等の機能を持つCSSプロパティで指定すべきとされる。

HTMLではtable要素で表を作成することができ、tr要素で項目が横に並んだ行を定義する。tdタグは行の中にセルを作成する要素の一つで、列の数だけ並べると先頭の要素が左端に、末尾の要素が右端に順に表示される。

行や列の表題を表示するセルを作りたい場合は、tdタグではなくth要素を置く。多くのブラウザは何指定がなければth要素の中の文字を太字で表示してくれる。th要素は表題であるため通常は各行あるいは各列の先頭となる位置に置き、他のセルはtdタグで定義する。

tdタグにはcolspan属性で列幅を、rowspan属性で行数を指定することができる。例えば、colspan="2" とすると右隣のセルを併合した横長のセルを定義することができ、rowspan="2" とすると一段下のセルを併合した縦長のセルを定義することができる。この両方を指定して広いセルを作ることもできる。

HTMLではtable要素で表を作成することができ、tr要素で項目が横に並んだ行を定義する。thタグは行の中にセルを作成する要素の一つで、行や列の先頭に置いて表題を表示するためのものである。多くのブラウザは特に指定がなければ内部の文字を太字で表示してくれる。表題以外のセルにはtd要素を用いる。

最上段を各列の表題が並んだ行にしたい場合は、table要素の下にthead要素を置き、その中にtr要素で行を定義してth要素を並べる。各行の先頭を表題にしたい場合は、各行のtr要素の先頭にth要素を置く。最下段に集計値などを記述する場合などに用いられるtfoot要素でも、tr要素の先頭をth要素にすれば集計値などの表題を表示することができる。

thタグはtd要素と同じくcolspan属性で列幅を、rowspan属性で行数を指定することができる。例えば、colspan="2" とすると右隣のセルを併合した横長のセルを定義することができ、rowspan="2" とすると一段下のセルを併合した縦長のセルを定義することができる。この両方を指定して広いセルを作ることもできる。

表を定義するtable要素の子要素として配置されるもので、項目が横方向に並んだ行を定義することができる。最上段に表題などを並べたい場合はthead要素の中に、データ本体はtbody要素の中に、最下段に集計値などを並べたい場合はtfoot要素の中にそれぞれtrタグを置く。

trタグの内部には列の数だけth要素かtd要素を並べる。thは表題(header)を記述するためのもので、多くのブラウザでは何も指定がなければ文字を太字で表示するようになっている。一般的な項目内容はtd要素に記述する。thにもtdにも、文字以外に画像など任意のコンテンツを配置できる。

行内の各セルに共通の属性やスタイルを指定したい場合はtrタグに指定する。table要素の下にcolgroup要素およびcol要素を定義すれば、同じ列に当たるセル同士をグループ化して共通の属性やスタイルを適用することもできる。

長い文章を記述する際などに、段落分けを行うために用いられる。デフォルトでは終了タグにより自動的に空行が挿入されて次の段落や見出しとの間に空間が設けられる。これに加えて、先頭行の最初の文字を字下げしたり、上下に空白を追加するスタイル指定を行うことも多い。

内部に別の要素を包含することもでき、文章だけでなく画像や他の要素を加えて一つの段落を構成してもよいが、h1やulのようなブロックレベル要素が現れるとその直前で自動的に閉じられる。その場合は終了タグは必須ではなく省略してよい。

HTML4以前はalign属性で文字の左寄せ(align=“left”)やセンタリング(center)、右寄せ(right)が指定できたが、HTML5では廃止されており、CSSの同等のプロパティ(text-alignなど)を用いることが推奨される。

マークアップ言語のタグ

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

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

タグによる情報の分類

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

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

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

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ページの見栄えを記述するCSS(Cascading Style Sheet)では、「セレクタ {スタイル}」という記法を基本とし、セレクタで指定した要素に対してスタイルを適用する。要素を何に基づいて選択するかによっていくつかのセレクタが用意されている。

IDセレクタは「#」で始まるセレクタで、指定された値がid属性の値に一致する要素を選択する。例えば、「#page-title」と記述すると、HTMLファイル内で「id="page-title"」と設定されている要素が選択される。

セレクタは「,」(カンマ)で区切って複数指定することもでき、「#page-title, #page-subtitle {スタイル}」と記述するとid属性がpage-titleの要素とpage-subtitleの要素の両方に対してそのスタイルが適用される。

Webページの見栄えを記述するCSS(Cascading Style Sheet)では、「セレクタ {スタイル}」という記法を基本とし、セレクタで指定した要素に対してスタイルを適用する。要素を何に基づいて選択するかによっていくつかのセレクタが用意されている。

クラスセレクタは「.」で始まるセレクタで、指定された値がclass属性の値に一致する要素を選択する。例えば、「.myClass」と記述すると、HTMLファイル内で「class="myClass"」と設定されている要素群が選択される。

セレクタは「,」(カンマ)で区切って複数指定することもでき、「.red-text, .bold-text {スタイル}」と記述するとred-text、bold-textのいずれかに対してもスタイルが適用される。class属性もスペース区切りで複数のクラスを指定することができ、「class="red-text bold-text"」とするとその要素はred-textクラス、bold-textクラスの両方に属する。

通常、Webサイトを構築するには、見出しや文章、画像など個別の要素の作成に加え、HTMLやCSSなどのコンピュータ言語でレイアウトやデザイン(スタイル)を記述し、ページ間にリンクを設定するなどの作業を行う必要がある。

CMSではこうした要素の入力や編集、登録を行うことができ、専用のデータベースで一元的に管理する。コンテンツの登録や編集、サイトの管理は専用のWebアプリケーションで行う方式が多く、利用者がWebブラウザで編集や設定変更を行うと、Webサーバ側のソフトウェアがサイトへの反映・更新を自動的に行なってくれる。

HTMLの記述など専門的な知識や技能が要求される作業の多くをソフトウェア側が肩代わりしてくれるため、利用者は文章や画像などの掲載内容の作成や編集に専念できる。サイト内のナビゲーション要素なども自動生成されるため、ページが追加されるたびに関連ページにリンクを追加するといった作業も不要となる。

知識があればページのデザインやサイトの構造などを作り込むことができる機能が提供されている場合もあるが、デザインなどは何種類かのテンプレート(雛形)があらかじめ用意されており、一つを選択するだけですぐにサイトを開設できるようになっていることが多い。

CMSの種類

狭義のCMSは、サイトの種類や構造を限定しない汎用的なWebサイト構築・運用ソフトを指し、多くは商用ソフトウェア製品として企業が開発・販売している。XOOPSやDrupal、Joomla、concrete5のように著名なオープンソースソフトウェアもある。

広義には、ブログツールやWiki、SNS構築ソフト、ECサイト構築ソフトなど、特定ジャンルのサイト構築・運用を行うためのソフトウェア全般が含まれる。WordPressやMovable Typeのようにブログツールから発展して汎用的なCMSのように使われている例も多い。

近年ではインターネット上でのCMSの運用と、制作したWebサイトの公開を請け負うネットサービスとして、各種のブログサービスやレンタルWiki、ホームページ作成サービス(WixやJimdoなど)なども発達している。自らWebサーバを構築・運用するのが難しい個人利用者や中小事業者の多くはこのようなサービスを通じてCMSを利用している。

Webページをパソコンやスマートフォン、タブレット端末など複数の機器や画面サイズに対応させる際、内容が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、Webサーバが端末に応じて送信ファイルを出し分けたり、それぞれに適したURLにHTTPリダイレクトするなどしてアクセスを振り分ける手法がよく用いられる。

レスポンシブデザインではこのような対応はせず、すべての機器に同じURLで同じファイルを送信する。HTMLやCSS、JavaScriptなどの機能を組み合わせ、現在表示されている機器の種類やサイズ応じて表示内容やレイアウトを調整し、最適な状態になるようにする。

例えば、パソコンなどの横長の画面では、同じ幅の要素が縦に並んだ領域(カラム)が2～3列横に並んだレイアウトにしておき、スマートフォンなど横幅の狭い画面で表示するとこれらがすべて縦一列に並んで表示されるようなデザインを指す。

複数のファイルやURLを用意する場合に比べ、デザインや機能の自由度は下がり、サイズごとの調整を行う複雑なコードが必要になるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。

検索エンジンやアクセス解析に同じ内容のWebページが複数の異なるURLが出現することも避けられるため、Web検索大手の米グーグル(Google)社などではWebサイト運営者に極力レスポンシブデザインでサイトを構成するよう推奨している。

検索エンジンはWeb上のリンクをたどって様々なWebサイトを巡回し、各ページの内容を解析して索引付け(インデクシング)する。利用者が検索したい語句を入力すると、その語句に関連性が高いと思われるページを検索結果リストとして表示する。

このリストは検索エンジン内部で様々な指標を元に算出した関連性の高さに基づいて順位付けされており、上位に掲載されるほど利用者の目に付きやすく、サイトを訪れてもらえる可能性が高まる。例えば、多くの検索サイトは初期設定では1ページ目に1位から10位までの結果しか掲載しないため、10位以内と11位以降では訪問される確率に大きな差がつく。

企業などが自らのサイトへの訪問者を増やしたい場合、関連する語句が検索された際に少しでもリストの上位に表示されるよう、サイトの構成や掲載内容、外部からのリンク状況などをより好ましい状態に最適化することがある。そのための一連の施策を検索エンジン最適化と総称する。

最適化を行うためには検索エンジンが各ページをどのように評価しているかを知る必要があるが、インターネット上で運営されている検索サイトのほとんどは順位の計算手順(アルゴリズム)の詳細を公開しておらず、また、頻繁に評価の仕方を変更することが知られている。

このため、公式あるいは確実に正しいと確認され、効果の程度が正確に算出できるような具体的な手法はほとんど存在せず、過去の経験則や検索サイト事業者が公表しているWebサイト運営者向けガイドラインなどを分析し、現在有効であると推測される手法を試していくしかない。

ただし、大まかな指針としてどのようなサイトやページが好ましいかはある程度分かっている。検索者の検索意図(どんな問題を解決しようとしているのか)を満たし、内容が最新かつ詳細で充実しており、当該分野の知識や経験が豊富な専門家によって記述され、外部の人気の高いサイトから多数のリンクを集めているページは比較的上位を獲得・維持しやすいとされる。

検索最大手の米グーグル(Google)社では、これを「E-A-Tの原則」としてまとめている。Eは “Expertise” の略で「専門性」を、Aは “Authoritativeness” の略で「権威性」を、Tは “Trustworthiness” の略で「信頼性」を、それぞれ表している。

内部SEOと外部SEO

Webサイト内の改善によって最適化を行うことを「内部SEO」(on-site SEO/on-page SEO)あるいは内部対策という。各ページがターゲットとする検索キーワードやフレーズの選定、キーワードに見合った適切なテーマ設定や内容の記述、質や量の充実、サイト内のリンク構造の最適化、見出しや段落、画像の代替テキストといったHTML要素の文書構造に沿った適切な使用、図表や画像など補助的なコンテンツの充実などが含まれる。

一方、Webサイト外の状況が自サイトにとって有利になるよう働きかける手法を「外部SEO」(off-site SEO/off-page SEO)あるいは外部対策という。主に外部から自サイトへのリンク(被リンク/バックリンク)を獲得するための諸活動を指すが、外部のサイトの内容や構成は自由に編集することはできないため、直接できることは限られる。サイト運営者に報酬を支払ってリンクを記述してもらう行為(有料リンク/リンク購入)は多くの検索サイトで違反行為とされている。

また、各種SNSへの投稿ボタンをページ内に設置したり、SNS上で公式アカウントを運用して情報発信を行い、自サイトの認知度を高めたり来訪を促すといった施策も外部SEOの一環として行われる場合がある。

ホワイトハットSEOとブラックハットSEO

検索サイトの発行するサイト運営者向けガイドラインなどを遵守し、訪問者の利益に適うまっとうなサイト改善手法を「ホワイトハットSEO」(white hat SEO)という。オリジナルで正確なコンテンツの充実や、読みやすく目的の情報にたどり着きやすいページデザインやサイト構造などが該当する。

これとは逆に、検索サイト側が禁じている行為を行ったり、検索サイトのソフトウェアや訪問者を欺いて不当に順位を向上させようとする施策を「ブラックハットSEO」という。検索サイトの巡回システム(クローラー)と人間の閲覧者にそれぞれ異なる内容を見せる「クローキング」(cloaking)や、同じ語句や関連語句を何度も繰り返し無意味に詰め込む「キーワードスタッフィング」(keyword stuffing)などがよく知られる。

他にも、背景色と同じ文字色にするなどして訪問者のWebブラウザには表示されないがクローラーには掲載内容として認識させる「隠しテキスト」(hidden text)、他のサイトや著作物からの剽窃、意図的な虚偽の内容の掲載、外部サイトからの「リンク購入」(リンク売買)などが該当する。

検索サイトによってブラックハット的な手法が用いられていると認定されたページやサイトは「検索スパム」「スパムサイト」などと呼ばれ、順位の大幅な低下や検索結果ページからの排除といったペナルティが課されることがある。一部の手法はランキングに影響せず単に無視される場合もある。

図形の輪郭

画像処理の分野では図形を囲む輪郭線のことをアウトラインということが多い。特に、フォントやドローソフトで、輪郭線を複数の点の座標とそれらを結ぶ曲線のパラメータで表した、ベクタ形式のデータのことを意味することが多い。

そのような形式で表されたフォントデータのことを「アウトラインフォント」と言う。字形を点の集まりで表したビットマップフォントに比べ描画処理は複雑だが、どれだけ拡大や縮小、変形を行なっても画質が低下しないという特徴がある。

物事の概略

計画立案や文書作成などでは、これから作る文書や文章、計画などの構想や素案、大要などを簡潔にまとめたものをアウトラインということが多い。

分野や対象によって表現形式は様々だが、例えば文章を構成する章や節、項などを階層的に箇条書きしたものなどが該当する。文書作成ソフトなどにはアウトライン作成を補助する機能があることが多く、アウトライン作成・編集に特化した「アウトラインプロセッサ」(outliner)と呼ばれるソフトウェアもある。

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

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

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

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