高校「情報Ⅰ」単語帳 - 全用語 - 効果的なコミュニケーション

要件定義では、利用者がそのシステムで何がしたいのかを元に、それを実現するために実装しなければならない機能や、達成しなければならない性能などを開発者が検討して明確にしていく。

まとめられた成果は「要件定義書」として文書化されることが多い。一般的にこの段階では「何が」必要なのかを定義するに留め、それを「どのように」実現するかは後の工程で検討される。

主に利用者側の視点から業務手順を明確化して分析し、情報システムで何がしたいのかをまとめる工程と、これを元に開発者側の視点からシステムが何をすべきか、何が必要かをまとめる工程に分割して考える場合もあり、前者を(狭義の)要件定義と区別して要求定義と呼んだり、両者とも要件定義内の工程として業務要件とシステム要件と呼び分けたりする。

主に大企業などが専門の事業者にシステム開発を委託する際に用いられるウォーターフォール型の開発モデル(前工程を完全に終わらせて次工程に移る方式)では、要件定義はプロジェクトの最初に一度だけ行われ、これを元にシステムの仕様や設計が固められる。

一方、アジャイル開発など同じ工程の流れを循環的に繰り返す反復型の開発モデルでは、前の反復で作られた半完成品に触れながら要件定義を繰り返し、段階的に要件を明確化・詳細化していく手法が用いられる場合もある。

すぐには使わないが後で取り出して参照するかもしれないデータを長期的に保管するため、専用の保存領域や記録装置に移動させることや、そのような保管領域、蓄積されたデータ自体のことをアーカイブという。

例えば、電子メールのクライアントソフトやWebメールサービスの操作画面などで、長期間保管しておきたいメッセージを受信ボックスなどから専用の保管領域に移動させることがある。そのような領域やメッセージ群のことをアーカイブという。

コンピュータシステムではすぐに参照しないが長期間残しておきたいファイルなどを、データ圧縮して容量を減らしたり複数のファイルやディレクトリをまとめたりして特定のファイル形式に変換して保管することがある。そのようなファイルを「アーカイブファイル」(archive file)と呼び、これを作成するためのソフトウェアを「アーカイバ」(archiver)という。

ハードディスクやSSDなどコンピュータの内蔵ストレージの空き領域を増やすため、アーカイブファイルは専用の記憶媒体(記録メディア)やストレージシステムに移して保管することが多い。個人用途ではCDやDVD、Blu-ray Discなどの光学メディアが、業務用のシステムでは磁気テープなどがアーカイブ用途に用いられることが多い。

なお、一般の外来語としては、将来に残すために施設や制度を設けて長期保存された記録物や文書類、また、それらの保管設備・施設などを指すことが多い。これらをコンピュータに取り込んでデジタル化し、データとして保管するようにしたものを「デジタルアーカイブ」(digital archive)という。

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

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

類義語と語源

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

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

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

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

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

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

開発者やユーザーインターフェース設計の専門家などが少人数で行なう評価法で、ユーザビリティに関する原則(ヒューリスティクス)をまとめたチェックリストやガイドラインなどを用意し、各評価者がそれぞれの項目に照らしてサイトをチェックし、問題点を列挙する。

各評価者の評価作業が終わったら集まって各項目について議論し、問題の整理を行う。評価は組織内で策定した原則や、専門家の提唱しているガイドラインなどを用いて、観点や評価項目、基準などをある程度揃えて行なうのが望ましいとされる。

専門家でもなく制作にも携わっていない外部の被験者を集めて実施する「ユーザビリティテスト」(ユーザーテスト)に比べ、時間や費用がかからず、被験者に実際に見せられるものが用意できない開発の初期段階でも実施できる。ただし、評価の質が評価者の知識や経験に大きく左右されるという問題もある。

1990年にユーザビリティの専門家であるヤコブ・ニールセン(Jakob Nielsen)博士らが開発した手法で、同氏は評価時に用いるヒューリスティクスである「ニールセンのユーザビリティ10原則」も提唱している。このような原則に加え、評価者自身の知識や経験則なども加味して評価を行う手法は「エキスパートレビュー」とも呼ばれる。

対象物の機能や性能、内容、使い勝手といった性質そのものよりも、それを通じて利用者が得られる経験がどのようなものであるかに着目する概念である。対象物の持つ特性だけでは決まらず、利用者側の属性や個性、利用者を取り巻く環境や利用時の状況などにも強く影響を受けるため、作り手側ですべてを制御することは難しい。

よく混同されるが、「ユーザーインターフェース」(UI：User Interface)は対象物の具体的な使用・操作の方法や様式を定めたもので、「ユーザビリティ」(usability)は対象物の使い勝手、使いやすさを指す。ユーザエクスペリエンスはこれらの要素を含むが、これらを通じて得られる最終的な体験、および体験を通じて惹起される感情が中心となる。

また、従来は製品の使用感をある一回(初回)の使い方や印象に限定して捉えることが多かったが、ユーザエクスペリエンスはこれを通時的に捉える。すなわち、製品やサービスと利用者との出会い(プロモーションや販売・加入など)、使用の開始(開封や初期設定など)、使用の継続や反復(様々な状況・環境を含む)、使用の終了(廃棄や買い替え、解約など)といった各場面における利用者の感じ方をそれぞれ検討する。

“user experience” という表現自体は以前から使われていたようだが、1990年代半ばに当時の米アップルコンピュータ(Apple Computer)社(現アップル)に勤務していた認知心理学者のドナルド・ノーマン(Donald A. Norman)博士により、コンピュータやソフトウェアなどの分野で現在の用法が広まったとされている。

現在ではITの分野に限らず工業製品や小売業など様々な分野で引用される概念となり、また、「対象者の体験の総体に着目する」という考え方から「カスタマーエクスペリエンス」(CX：Customer Experience)など様々な “～ experience” という派生概念を生み出している。

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

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

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

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

どんな身体的な特性がある人も等しく使うことができる、あるいは使いやすいデザイン・設計のことを「ユニバーサルデザイン」(universal design)というが、これを表現物の配色に適用し、色覚の特性によらず認識することができる、あるいは見やすいデザインを目指す考え方である。

人間の色覚(色の感じ方)は一様ではなく個人差があり、先天的な色覚異常や、緑内障、白内障など目の病気によっても大きな影響を受ける。カラーユニバーサルデザインでは、色によって情報の認知に差が生じないよう「なるべく多くに人が見分けやすい配色を選ぶ」「色が見分けられなくても情報が伝わるようにする」「色の名前を併記するなど色を言葉で伝達できるようにする」という3つの原則に沿ってデザインを進める。

カラーユニバーサルデザインは生物学者の伊藤啓氏と医学者の岡部正隆氏が「カラーバリアフリー」(color barrier-free)として提唱し始めたもので、2004年に両氏が中心となってNPO法人カラーユニバーサルデザイン機構(CUDO)が設立された。以降は「カラーユニバーサルデザイン」の名称で普及活動が進められている。同法人では見分けやすい色の組み合わせを集めた推奨配色セットを公表したり、カラーユニバーサルデザインに配慮した製品などの認証制度の運用などを行っている。

高齢や障害、病気、あるいは他の身体的・認知機能的な特性により運動や視聴覚機能に制約や偏りがあっても、機器やソフトウェアの操作、情報の入手、ネットサービスの利用などが可能である状態を意味する。

例えば、マウスなどによる画面上の位置指定が困難な場合に備え、キーボードやボタン型の入力装置、音声認識など他の入力機能のみで操作が行えるようにしたり、視力や視覚の状況に応じて、画面表示や文字の拡大、画面上の文字の読み上げなどの機能を選択できるといったように、様々な人が利用できるような備えが行われている状態を指す。

単にアクセシビリティといった場合はWebページについての「Webアクセシビリティ」のことを指すことが多い。また、IT分野以外でも、例えば建物や施設、設備などへの出入りや内部の移動のしやすさ、利用しやすさ(段差がない、スロープやエレベーターが整備されている等)のことをアクセシビリティということもあるが、これは日本語では「バリアフリー」(barrier free)という外来語で表現されることが多い(厳密にはバリアフリーはアクセシビリティより狭い概念を指すとする見解もある)。

スライドプロジェクタで映写するスライドフィルムを作成するためのソフトウェアが起源で、見出しや文章、箇条書き、図、表、画像、背景などをレイアウトして発表用の資料を一枚ずつ作成する。動画や音声を配置して適宜再生する機能を持つものもある。

作成した資料は全画面表示モードで一枚ずつ順に再生することができ、大画面のディスプレイやプロジェクタで投影する。発表者の話の展開に合わせて、本人あるいはコンピュータ操作の担当者がスライドをめくっていく。一枚のスライドの中で操作によって順に新しい要素が登場するといった仕掛けを組み込むこともできる。

多くのソフトは発表のジャンルやデザインごとにテンプレート(雛形)を用意しており、ゼロからすべての要素を配置しなくても、雛形に発表内容を組み入れていくだけで手軽にスライドを作成することができる。特定のソフトウェア向けのテンプレートを提供・販売しているWebサイトなどもある。

米マイクロソフト(Microsoft)社のMicrosoft Officeファミリーに含まれる「PowerPoint」(パワーポイント)が代表的なソフトウェアであり、スライド方式のプレゼンテーション資料を指して「パワポ資料」のように呼ぶことも多い。他に、米アップル(Apple)社のiWorkに含まれる「Keynote」(キーノート)や、米グーグル(Google)社のGoogle Workspaceに含まれる「Googleスライド」などがよく知られている。

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

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

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

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

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

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

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

ある目的や形式に沿って作成されたデータの雛型で、利用者はこれを複製して個別の内容を記入してくだけで目的のデータを完成させることができる。あらかじめ記入例が書き込まれており内容を上書きしていく形式と、空欄を埋めて作成する形式がある。

文書作成などを行うためのアプリケーションソフトの中には、伝票や履歴書など一般的な形式の書類についてテンプレートが同梱されており、項目を埋めていくだけで簡単に文書が作成できるようなっているものもある。

また、雛型の意味から転じて、典型例、標準的な方法、紋切り型、型通りのやり方、様式、定石、王道、といった意味合いで比喩的に用いられることも多く、俗に「テンプレ」と略されることがある。(問い合わせに対する)「テンプレ対応」(ストーリーなどの)「テンプレ展開」のように使う。

C++言語のテンプレート

プログラミング言語の一つであるC++言語の機能の一つにテンプレートがあり、データ型に依存しない関数やクラスを定義することができる。

関数などを定義する場合、引数や返り値のデータ型を指定しなければならないため、様々な型の値を投入する可能性がある場合は中身の処理は同じでデータ型だけが異なる関数を定義しなければならなかった。

テンプレートでは関数などを宣言する際にデータ型の部分を引数(テンプレート仮引数)にしておき、呼び出し時にどのデータ型でその関数を呼び出すかを指定(テンプレート実引数)する。一度の定義で様々なデータ型による呼び出しを実装することができる。

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

トップページにはサイトの概要や内容の案内、主要なページへのリンクが掲載されることが多く、ここを起点に閲覧を開始することが期待されるが、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では、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾についての情報を文書に埋め込んで記述することができる。例えば、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への移行が企図されたが普及せず、以後も独立した規格として維持されている。

文書の論理構造を記述する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が独自に規格を策定しないことなどが合意された。

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

直接の子要素として、キャプションを表示する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など)を用いることが推奨される。

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

言語によってマークアップの構文や記法、指定できる内容などは異なっている。例えば、文書中に見出しを設定するには、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ページの見栄えを記述する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を利用している。

RGB(赤緑青)各色を16進数の「00」から「FF」まで均等に6段階の「00」「33」「66」「99」「CC」「FF」に分割し、「#336699」「#FF66CC」といったようにこれらの値の任意の組み合わせで色を定義する。「#000000」(黒)から「#FFFFFF」(白)までの間に、赤(R)6段階×緑(G)6段階×青(B)6段階の計216色が定義される。

値を等間隔に区切って機械的に組み合わせたものであるため、視覚的に区別する必要が薄い暗色側が豊富な一方、明色側は逆に大雑把すぎてデザインに用いるには難しい配色となっている。フルカラー表示が一般的になった現在はほとんど意識されることはない。

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

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

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

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

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

コンピュータの機種や入出力機器、ソフトウェアの違いや、子どもや高齢者、障害者といった身体的特性の違いによらず、なるべく多くの人がサイト内の情報を見つけ出し、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サイトを制作する際の調達要件としてこの標準への準拠を求めている。

検索エンジンは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)と呼ぶ方が一般的である。

もともと「ワードプロセッサ」(word processor)と呼ばれる文書作成・編集専用のコンピュータ製品があり、その機能を汎用のパソコンなどの上で動作するソフトウェアとして実装したものであるためこのように呼ばれる。

特定の大きさの紙面に文章や見出し、箇条書き(リスト)などを配置し、文字の大きさや書体(フォント)を指定したり、字間や行間を調整したり、複数の段に分けて表示したり、画像や図表を埋め込んだりすることができる。

同じ文字入力・編集ソフトでも、紙面の構成を前提とせず、文字データの表示、入力、編集のみができる(見栄えを指定する機能がない)ソフトウェアは「テキストエディタ」(text editor)と呼ばれ、区別される。

1980年前後のパソコン(当時はマイコンとも呼ばれた)黎明期から存在するソフトウェアで、業務用の高価なワープロ専用機の機能を安価な個人用コンピュータでも利用できるとあって、家庭向け、オフィス向け共にパソコンの主要なアプリケーションとして広く普及した。現代では表計算ソフトなどと共にオフィスソフト(オフィススイート)の主要な構成要素として提供されることも多い。

歴史

欧米では1980年代には米ワードパーフェクト(WordPerfect)社の「WordPerfect」の人気が高かったが、1990年代になるとマイクロソフト(Microsoft)社の「Microsoft Word」(マイクロソフト・ワード)が同社のWindowsと共に劇的に普及し、事実上の標準に近い存在となった。現在でも他社製品がWordのファイル形式(.docファイル/.docxファイル)の読み書きに対応するなど標準的なソフトとなっている。

日本では日本語の扱いの特殊性などから1980年代の黎明期に国産ソフトが主流となり、管理工学研究所の「松」やジャストシステムの「一太郎」、ワープロ専用機の流れを継ぐ富士通「OASYS」などの人気が高かった。1990年代にはWindowsの普及と共にWordが優勢となった。

現代では単にワープロといった場合は汎用コンピュータ製品のオペレーティングシステム(OS)上で動作するアプリケーションソフトとしての文書作成ソフトウェアを指し、機器としてのワープロは「ワープロ専用機」(word processor appliance)と呼ぶのが一般的である。

欧米には文書作成機器としてタイプライターが19世紀から使われていたが、日本では日本語の壁に阻まれ、そのような機械の開発は無理と考えられていた。しかし、コンピュータの力を借りて、文書作成機械、今日のワープロ専用機の開発に成功した。

最初のワープロ専用機は東芝が1978年10月に発売した「JW-10」(TOSWORD)である。これは事務机のような形態・サイズのコンピュータで、ハードディスクやフロッピーディスクドライブを内蔵した本体、CRTディスプレイ、キーボード、印刷装置などからなる。発売の年に制定されたJIS漢字コード第1・2水準の6802字の入力・表示に対応し、当時としては完成度が高かった。

初期のワープロ専用機は文字入力、簡単な表組み機能を備えたものに過ぎなかったが、高機能化が進むにつれ表計算機能や図表作成機能などの高度なソフトウェアが搭載されたり、イメージスキャナやタッチペン入力など新しい入出力機器が内蔵されるようになっていった。

インターネットの普及が始まると、モデムを内蔵し、Webブラウザや電子メールソフト、HTML文書作成機能などを持つものも現れた。初期の機種は各社間でファイルのフォーマットが異なるなど融通を欠いていたが、ワープロ文書のプレーンテキストへの変換機能、各社間のワープロ文書の相互変換機能などが準備された。

1980年代には電機メーカー各社がワープロ専用機を発売し、一家に一台普及するのではないかと言われるほど活況を呈した。富士通の「OASYS」シリーズなど、根強いファンを持つ名機も登場した。しかし、1990年代後半のパソコンの低価格化と普及率の上昇、パソコン向けワープロソフトの高機能化などに押され、現在では新規の開発・販売などは行われておらず歴史上の存在となっている。