簡単ユニバーサル・ウェブ P2:BG実習

4. オーサリングツールを用いたウェブサイト作成

ここからは初級編として，オーサリングツール（ウェブサイト作成支援ソフト）を用いたサイト作成の演習をします．（中級編では，HTMLやCSSのソースを見て修正したり，ページデザインやナビゲーションを工夫することを学びます．）簡単な小課題でスキルの確認をした後，このセクションの最後に，授業の最終目標である最終課題の説明もします．

4.1 HTMLとCSSを分離したウェブページを作成する方法

今まで見た例でわかるかもしれませんが，HTMLとCSSを別々のファイルで編集するのは，結構大変です．HTMLファイルを書くときは，CSSファイルにどのようなスタイル要素があるのか知っておく必要があります．見栄えを変更したくなったら，CSSファイルを編集しなければなりません．それに，HTMLやCSSの文法を知らなければ，このようなソースコードを書くことができません．このような作業を簡単にしてくれるのが，オーサリングツールです．以下にオーサリングツールを3つ紹介します．

Adobe Dreamweaver: プロ用のオーサリングツール．Web標準に準拠したサイト作成ができる．ウェブサイト作成を大幅に楽にしてくれる有用な機能が満載．基本的な使い方を取得するのは難しくないし，学生版は値段も高くない (Adobe全製品が使用可能なCreative Cloud版のアカデミック価格は1,980円/月．)．Windows版とMac OS X版がある．
BlueGriffon: 無料のオーサリングツール．（2006年度のCompIIEの授業で使用していたNvu，2010年度まで使用していたKompozerの後継版とも言えるソフト．）WindowsでもMac OS XでもUbuntu Linuxでも利用できる．ソースを書く作業が不要になるようにデザインされているので，HTMLやCSSの細かな文法を覚えていなくても，ウェブ標準に即したページを作成できる．HTML5への対応も進んでいてSVGエディタも附属している．2011年5月10日にバージョン1.0が公開され，日本語メニューも選べるようになりました．2013年にはアクセシビリティチェック機能もついてますよ！（この授業では初級編で使用．）
Brackets: オープンソース（無料）のWeb用テキストエディタ（オーサリングツール）．Adobe社が開発したソフトがベースになっているので高機能．エディタ＋αの機能を持っていて，プラグインを入れるとDreamweaverに近い機能を持つ事ができる．日本語でも利用可能．WindowsでもMac OS Xでも利用可能．最近は Brackets以外にも高機能なエディタは色々あるが，この授業では中級編で使用．

上記のうち，DreamweaverとBlueGriffonは，作者にHTMLやCSSの知識がなくても，WYSIWYG（What You See Is What You Get）なGUIエディタでウェブサイトを構築できます．DreamweaverとBracketsは，自分で（HTMLやCSSの）ソースコードを直接書いてサイトを作成できます．今回はBlueGriffonを使うところからスタートしますが，後述するようにBlueGriffonにはサイト作成の限界があるので，中級編以上のレベルでウェブ標準を勉強したい場合は，DreamweaverやBracketsを使ってソースコードを自分で書くことが必要です．

『HTML5+CSS3の新しい教科書』の「Lesson1 05 HTMLを作成するための専用アプリケーション」でもいくつかのソフトが紹介されています．

4.2 BlueGriffonのインストールと初期設定

自分のWindowsパソコンやMacパソコンでBlueGriffonを使うときには，下記手順でインストールしてください．東女の情報処理教室にはBlueGriffonがインストール済みです．

まず，BlueGriffonの公式ダウンロードページから，Windows用あるいはMac OS X用のインストーラをダウンロードして（2020年4月時点ではv3.1が最新版），ダウンロードしたインストーラをダブルクリックしてBlueGriffonをインストール．

4.2.1 初期設定

以下，初期設定の仕方を説明します．

BlueGriffonが起動するとTips表示（使い方のヒントを表示する画面）がでるが，今は関係ないのでTips表示のウィンドウは閉じてよい．
BlueGriffonの初期設定を変更：Windowsの場合は，BlueGriffonの「ツール」メニューから「オプション」を選ぶ．（Mac OS Xの場合は，「BlueGriffon」メニューの「オプション」を選べばよい．）
- 「オプション」ダイアログの「全般」タブをクリックして，「構成バー」のID，クラス，ARIA roleの3つがチェックされていることを確認．（他のチェックボックスはお好みで．）
- 「文書」タブをクリックして，「著者名：」に自分の名前を入れる．「段落の中でリターンキーを押した場合，常に新しい段落を入力する」にチェックが付いていることを確認する．
- 「ソース」タブで，「長い行を折り返す」のチェックを外す．（あるいは，「次の言語には折り返しを適用しない」に「ja-JP」と入力する．）
- 「スタイル」タブで，「CSSの編集方法」が「手動」になっていることを確認．
- Windowsの場合は「閉じる」ボタン，Macの場合はダイアログを閉じるボタンを押して設定終了．

4.2.2 新規ファイル作成ウィザード

次に新規ファイルを作成します．

まず，「ファイル」メニューから「新規作成ウィザード」を選ぶ（「新規作成」ではないので間違えないように注意）．
「文書の種類」の設定で，「言語」がHTML5になっていることを確認．「次へ（Macの場合は「続ける」） >」をクリック．
「文書のプロパティ」でウェブページの「タイトル」欄を書く．今は練習なので「BlueGriffon使い初め」にする．「言語」の欄は「ja」にする（言語を選択の一覧から選んでも良い）．「文字セット」は「Unicode（UTF-8）」にする．他は空欄でよい．「次へ >」をクリック．
今回は「色と背景」はスキップして「次へ >」をクリック．
今回は「文書の背景」もスキップして「次へ >」をクリック．
今回は「ページレイアウト」の「CSSレイアウトをパターンから選択する」のチェックボタンを外す．「完了」をクリックして完了．新規ページの編集画面に変ります．
BlueGriffonには「プレビュー」「ソース」「Print Preview」の３つのビュー（HTMLファイルの表示方法）があります．デフォルトは「プレビュー」で，Webブラウザと同じように表示されます．まだ何も書いていないので白紙表示です．
「ソース」に切り替えると，HTMLファイルのソースを見ることができます．

設定の意味：

上記のように設定すると，BlueGriffonが作成するHTMLソースは以下のようになります．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>BlueGriffon使い初め</title>
    <meta name="author" content="Takayuki Watanabe" />
    <meta name="generator" content="BlueGriffon wysiwyg editor" />
 </head>
 <body>
   <p><br>
   </p>
 </body>
</html>

つまり，HTMLの言語がja(日本語)に指定され，UTF-8という文字コードが使われます．（BlueGriffonを使うだけならこういうことまで知る必要はありませんが，裏側の理屈を知っていると，トラブルシューティングに役立ったり，応用がきいたりします．）

4.3 BlueGriffonの解説

BlueGriffonの日本語ユーザマニュアルはありません（英語なら有料マニュアルがある）が，『BlueGriffonによるホームページ作成』（内田著，工学社．2300円）という本があります（ただし，Web標準に即したページ制作やアクセシビリティに配慮したページ制作に配慮していないので，ソフトの細かい使い方以外は参考にしないで欲しい）．（「BlueGriffon 使い方」で検索すると，いくつかサイトが出てくる．）

4.4 BlueGriffonによる簡単なウェブページ作成

BlueGriffonを使ってみましょう！

4.4.1 ファイル構成

（実際にウェブ公開する場合は他のフォルダに作成する必要がありますが，）以下の例では，作業を簡単にするために，「ドキュメント」フォルダの下に「UnivWeb」フォルダーを作って（大文字小文字に注意），その下に各種ファイル（HTML，CSS，jpeg画像など）を配置します．フォルダーの階層構造やファイルの適切な配置を理解してもらいたいので，まずは演習をします．:-）

簡単な演習：ファイル構造（ディレクトリ，ファイル，絶対パス，相対パス）

4.4.2 BlueGriffonによる簡単なウェブページ作成（HTML編）

習うより慣れろ．まずはBlueGriffonを使って簡単なウェブページを作ってみましょう．（万が一の時に編集中のファイルが失われるのを避けるために，作業中はこまめにファイルを保存すること．）

ページを新規作成

「ファイル」メニューの「新規作成ウィザード」を選択する．（HTML5がチェックされているはず．）タイトルにそのページの内容を表す言葉（日本語が使える）を書く．

注：タイトルはウェブページのtitle要素に使われるもので，ウェブページを表示したときのウィンドウタイトルやブックマーク保存時の見出しに使われる．だからページの内容を簡潔に表すタイトルにし，複数のウェブページで同じタイトルにしないこと．（『Web標準XHTML+CSSデザイン』の「法則13 (X)HTML文書には内容が伝わりやすいタイトルを設定する」参照）

言語はjaにする．説明やキーワードは，必要ならば適切な言葉を書く．文字セットはUTF-8のまま．「色と背景」では何もチェックしない．「文書の背景」はスキップ．「ページレイアウト」では「CSSレイアウトをパターンから選択する」のチェックを外す．「完了」ボタンを押すとページ作成状態になる．

ページを保存

「ファイル」メニューの「名前を付けて保存」をクリックすると，保存場所を聞かれる．今回はドキュメントフォルダーの下に「UnivWeb」フォルダを作って，その下にindex.htmlという名前で保存する．

注：パソコン（Explorer）の設定で拡張子を表示しない設定にしているとindexと表示されるので注意．Explorerの表示メニューで「ファイル名拡張子」にチェックを入れておくと拡張子が表示されるのでindex.htmlと拡張子付きで表示される．
注：ファイル名は半角の英数字と一部の記号だけにして日本語を使わないこと．タイトルとファイル名は全く違う物である．両者は異なっていても構わない．
注：後述する「ソース」表示ではファイルが保存できない時があるので，「プレビュー」表示に切り替えてから保存してください．
補足：「index.html」というファイル名はWebのデフォルトのファイル名なのでURL(URI)で指定するときに省略可能です．なのでサイトのトップページは常に「index.html」というファイル名にすること．
未保存の場合はタイトルの下に赤線が引かれます．保存すると消えるので，保存したかどうかを識別できます．

H1見出し作成

ページには見出しが必要．もっとも大きな見出しがH1要素．ひとつのウェブページにH1が一つ，しかもページの先頭にあることが望ましい（HTML5では，ひとつのページに複数のH1要素があっても構いません．）．私は，H1要素とtitle要素の中身を同じにしています．卒論でいうと，題目に相当します．

H1要素を作るには，まず文字を書き，それを全部選択してから，編集ツールバー1行目左端のドロップダウンメニュー(注2)から「見出し1」を選択する．（BlueGriffon画面下から2行目に，編集中の文字の要素名（今の場合は<body> <h1>）と表示されているはず．又は，「表示」メニューの「All Tagsモード」にチェックを入れると編集中の文字のすぐ横に黄色で要素名を表示してくれる．）

H2見出し作成

見出しにはH1からH6までのレベルがあります．ページの構造として美しいのは，一つのH1見出しの下に，H2，H3が順番に続くことです．H2レベル以下の見出しは複数あっても構いません．卒論で言うと，章がH2で，節がH3で，項がH4でしょう．（私はH5以下の見出しは滅多に使いません．)

何か文字を入力してから，編集ツールバー1行目左端のドロップダウンメニューから「見出し2」を選ぶ．

文章入力

通常の文章は段落（p）要素で囲むこと．（H2見出しなどの後などで）ENTERキー（リターンキー）を押せば自動的に新しい段落（p要素）が挿入されるはず．手動で段落にするには，編集ツールバーのドロップダウンリストから「段落」を選ぶ．次の段落要素を始めるときもENTERキーを押すだけけでよい．ENTERキーを押すと自動的に新しいp要素が作られ，BlueGriffonで入力した文字は，そのp要素の中に書き込まれれる．（「オプション」ダイアログの設定で，ENTERキーで新しい要素が作られないように設定することも可能．）

All Tagsモード

BlueGriffonのAll Tagsモード（「表示メニュー」の下にある）を用いれば，入力した文字がどの要素になるのか一目瞭然なので便利．邪魔になるときは消せば良い，

表示方法を変えてみる

BlueGriffonにはページを見る方法（View）が3つあり，BlueGriffon画面下の「プレビュー」と「ソース」と「Print Preview」で切り替えられる．「ソース」表示にすれば，HTMLのソースを見ることができる．また，（BlueGriffonが許す範囲で）ソースを直接編集することもできる．

ウェブブラウザでプレビュー

ある程度できたら自分が普段使っているブラウザーでどのように見えるかチェックしてみましょう．メニューバー直下のアイコンが並んでいるツールバー右端にある地球のアイコン（ブラウザーでプレビュー）をクリック．（初回使用時は閲覧に使用するブラウザを聞かれるので，エクスプローラーに「C:\」とタイプして，「Program Files (x86)」フォルダーの中の「Google」フォルダーの中の「Chrome」フォルダーの中の「Application」フォルダーをクリックして，「chrome.exe」を選ぶ．この場所にChromeがなかったら，C:\Program Files\Google\Chrome\Application か C:\Users\ユーザー名\AppData\Local\Google\Chrome\Application\ を探してください．WindowsでEdgeを使う場合は C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe にあります．あるいは，自分好みのブラウザの実行ファイルを探して選ぶ．）

保存

作成中のファイルはこまめに保存するようにしましょう．ファイルメニューには「保存」と「名前を付けて保存」の2種類があり，ツールバーにも「保存」アイコンがあります．

ページのタイトルの変更

ページのタイトル，説明，キーワードなどを追加・変更したい場合は，「書式」メニューの「ページのプロパティ」を使う．

リストを作る

リスト要素は，順序付きと順序なし（箇条書き）と定義リストの3種類あります．定義リストの話は後回しにして，ここでは番号付きで表示されるol (ordered list)要素と箇条書きになるul (unordered list)要素の作り方を説明します．（注：番号付きリストは，1番目，2番目というように，リストの各項目(li要素)に順番があることを暗示しています．）

基本的にはWordと同じです．まずリスト項目を書いたら改行して，次の項目を書く．全項目を書き終わったら，全項目を選択して，左ツールバーのアイコン（記号付きリストか番号付きリストのどちらか）を選択する．あるいは，最初の項目を書いた段階で書式ツールバーのアイコン（記号付きリストか番号付きリストのどちらか）を選択して，改行すると自動的に2番目の項目を入力できる状態になる．

後から項目を追加したかったら，改行キーを押せば新しい項目が追加される．改行によって新しい項目が追加されるのを止めるには，書式ツールバーのアイコンをもう一度クリックしてアイコンが選択されていない状態にすればよい．（あるいはEnterキーを空打ちすると消える．）

画像を挿入

まず，画像を用意する．また，画像を挿入する前に作成中のウェブページを保存します．画像の場所は，ローカル（自分のコンピュータ）にある画像ファイル（を作成中のファイルと同じレベル以下のフォルダーにコピーして，コピーしたそのファイル）を参照しても良いし，インターネット上の画像ファイルのURLを指定しても良いです．ただし，著作権を侵害しないように注意．（ウェブで公開しないならば，私的利用の範囲で使えるかも知れません．）ここでは，「コミュニケーション学科のロゴ」を，作成中のHTMLファイルと同じフォルダにダウンロードしたものを挿入します．

BlueGriffonの編集ツールバーから「画像を挿入または編集」アイコンを選択すると「画像を挿入」ダイアログボックスが表示されるので，まず，「URLをページに対して相対にする」にチェックを入れる．次に，「画像の場所」に画像ファイルのURLを入力するかローカルファイルを選択します．また，画像ファイルには「代替文字列」(alt属性)を指定する（これを入力しないと「OK」ボタンを押せません．:-）．代替テキストとは，画像が表示されないときに画像の代わりに表示される文字のことで，「コミュニケーション学科のロゴ」のように簡潔に書く必要がある．意味のない装飾画像の場合は，「空の代替文字列を許す」を選択してください．

<img src="deptC-logoChars.png" alt="コミュニケーション学科のロゴ" />

画像要素を段落要素で囲んでおくこと！

<p><img src="deptC-logoChars.png" alt="コミュニケーション学科のロゴ" /><p>

リンクを張ってみる

文字列をリンク要素にしたいときは，文字列を選択してから編集ツールバーの「リンクの挿入または編集」アイコンを選択する．すると，「リンク」ダイアログボックスが現れるので，「対象」にリンク先のURLを入力するかローカルファイルを選択する．

画像にリンクを張りたい場合は，画像をクリックしてから編集ツールバーの「リンクの挿入または編集」マイコンを選択すると，「リンク」ダイアログボックスが表示されるので，「対象」にリンク先URLを入力すればよい．画像リンクを使う場合は，画像に，リンク先がわかるような代替テキストを付与するのを忘れないこと．

表を作ってみる

表の作成も簡単です．「表の挿入，または表の設定を編集」アイコンを選択するとダイアログボックスが表示されるので，マウスでドラッグして表の大きさ（何行何列）を決めると表が挿入される．

挿入された表をダブルクリックして選択してからもう一度「表の挿入，または表の設定を編集」アイコンをクリックするか，右クリックすると表示されるコンテクストメニューから「表のプロパティ」を選ぶと，セルや表全体の詳細（何行何列，表の枠線の太さなど）も設定できる．

セルには見出しセル（th要素）とデータセル（td要素）があるが，（左端や上端などで）見出しの役割をしているセルは見出しセルに変更する必要がある．セル（複数のセルを選択してもよい）のコンテクストメニューから「表のプロパティ」を選び，「表を挿入または編集」ダイアログボックスの「セル」タブの一番下の「スタイル」の中の「ヘッダー」にチェックを入れると，そのセルが見出しセルになる．th要素への変更は，「選択」で編集対象を選ぶことにより，セル単位でも行又は列単位でもできる．

セル内のテキストの配置も指定できる．また，マウスで隣りあったセルを複数選択してから右ボタンをクリックして，「セルを結合」とすると，セルが結合される．（←情報処理教室の環境ではエラーになる．）

表は凝るといろいろ複雑な物を作成できるが，レイアウトテーブルに使わないことをお薦めする．また，レイアウトテーブルでなくても，表の中に別の表を入れるとややこしくなるので，表を使う場合はシンプルにすること．

定義リストを作ってみる

定義リスト(dl要素)は，定義項目(dt要素)と定義内容(dd要素)のペアで構成される．今，皆さんが見ているこのリストも定義リストです．

定義リストの作り方はいろいろな方法があるが，たとえば，最初の定義項目を書いたらそれを選択し，左ツールバーにある「定義のタイトル」と選ぶ．次に，（最初の定義項目がハイライトされているのをはずしてから）最初の定義項目の最後尾にカーソルを移動し，そこでEnterキーを押すと，自動的に定義内容(dd要素)を書き込む場所が作られる．定義内容を書いてからEnterキーを押すと，次の定義項目を書く場所が作られる．あるいは，最初に定義項目と定義内容を書いておいて，左ツールバーを使って，あとから各行を定義項目にしたり定義内容にしたりすることもできる．（「All Tagモード」で作業すると，要素の左側に要素名が表示されるのでわかりやすい．）

要素にアンカーを打って，ページ内リンクを張ってみる

ページ内の任意の要素にジャンプするようなページ内リンクを張ることもできる．

まず，リンク先の要素にアンカーという固有の名前（目印）を付ける必要がある．次に，そのアンカーを指すようなリンクを張るわけ．

リンク先にしたい要素を選択してから編集ツールバーの「アンカーの挿入または編集」アイコンを選択し，わかりやすい名前を付ける（BlueGriffonはこの名前をname属性で使います）．例：top
リンク元となる文字列を選択してから「リンクの挿入または編集」アイコンを選択し，「対象」のドロップダウンリストの中から先ほど付けた名前を探して選択する．（名前の前に#が付いているはず．例：#top）

ソースビューで見ると下記のようになっています．

<a href="#top">アンカーにジャンプ！</a>
......
<p><a id="top">ここにジャンプするよ</a><p>

リンク挿入のドロップダウンリストに作成したアンカーが表示されない場合，リンク先を手で書き込んでください（アンカーの名前の先頭に#を付けるのを忘れないこと）．

ブロックレベル要素とインライン要素：

HTML5になってから，それ以前のブロックレベル要素とインライン要素という概念がなくなりましたが，この考え方はわかりやすいので，下記に説明します．（HTML5ではコンテンツ・モデルという分け方をしており，どの要素はどの要素の中に入れることができるかを決めています．）

ウェブページに文章（文字）を直接書き込むことはできません．なぜなら，body要素の中（直下のレベル）にはブロックレベル要素しか置くことができないからです．ブロックレベル要素の中には，インライン要素を置くことができます．

ブロックレベル要素の例：: p，h1からh6，，ul，ol，dl，table，form，blockquote（まとまった引用文），address（サイト制作者の情報），pre（整形済み要素），hr（水平線），div（汎用ブロックレベル要素）
インライン要素の例：: a，img，br（改行），object（外部データを埋め込むための要素），em，strong，span（汎用インライン要素）

文字(列)はインライン（行内）で使うものなので，そのままではbody要素の中におくことができませんが，p要素（段落要素）はブロックレベル要素なので，<p>タグで文字(列)を囲めば，body要素の中におくことができます．

（ブロックレベル要素とインライン要素の詳細は，『現場のプロから学ぶXHTML+CSS』の「1-6 本文を構成する要素」，「1-7 ブロックレベル要素」，「1-8 インライン要素」参照）

BlueGriffon編集ツールバー1行目左端のドロップダウンメニューは，ブロックレベル要素の種類を指定する場所になっています．ただし，メニュー先頭にある「body text」は例外で，マークアップをしない裸の文字列になります．

『HTML5+CSS3の新しい教科書』の「Lesson3 03 body要素で使われる2種類の要素の性質」でもブロックレベル要素とインライン要素の説明がしてあります．

4.4.3 BlueGriffonによる簡単なウェブページ作成（CSS編）

前章では，見栄え（表現）を全く指定しませんでした．今度は見栄えを指定してみましょう．

CSS練習用のHTMLファイル作成

以下のCSS練習のために，h1要素とh2要素とp要素があるHTMLファイルを作成し，保存．

外部スタイルシートの指定

「パネル」メニューから「スタイルシート」を選択すると，BlueGriffonウィンドウの右側に「スタイルシート」タブが表示される．
左下の「＋」（スタイルシートを追加）をクリックすると，「スタイルシートのプロパティ」ダイアログが表示される．
「文書からリンクする」をチェックしてから，「新しいファイル」をクリックして，（作成中のHTMLファイルと同じフォルダに）CSSファイルを（例えば nabe.css という名前で）新規作成する．（ファイル名は任意だが拡張子はcss．）
「URLをページ相対にする」を必ずチェックしてから，「OK」を押して「スタイルシートのプロパティ」ダイアログに戻る．

作成中のHTML文書にスタイルシートを結びつける方法には複数ありますが，この授業では「外部スタイルシート」をlink要素で読み込む方法を使います．HTML文書中のhead要素内にstyle要素を挿入して指定する「内部スタイルシート」や，HTMLの各要素にstyle属性で指定する「インラインスタイル」は,この授業内では特別な場合にしか用いません．各方法の詳細は，『HTML5+CSS3の新しい教科書』の「Lesson3 04 HTMLにCSSを組み込む」にも説明がしてあります．この本の「リンク」が外部スタイルシート，「エンベッド」が「内部スタイルシート」のことです．

（確認）

HTMLファイルからCSSにリンクが張られていることを確認するために，BlueGriffonのソースビューでHTMLソースを見てみよう．

<link href="nabe.css" rel="stylesheet" type="text/css" />

この一行で外部スタイルシートとHTMLファイルを関連づけているわけです．

新しいスタイル（見栄えを決めるルール）作成

CSSスタイルを設定する前にHTMLファイルを保存する．
スタイルを適用したい要素（今回はh1要素）にカーソルがある状態で「パネル」の「スタイルプロパティ」にチェックを入れると，BlueGriffonウィンドウの右側に「スタイルプロパティ」タブが表示される．
「スタイルの適用先：」として「要素名で指定する．．．」を選択．するとその右側に「h1」と表示されるはず．（うまくいかないときは，プレビューでh1要素にフォーカスがあるか確認する．）
「スタイルプロパティ」では「一般」，「色」，「大きさ」，「位置とレイアウト」，「枠線」，「影」，．．．など様々なスタイルをGUIで指定できる．
今回は，「一般」で揃えをセンタリング，「色」で前景色を適当な色に変えてみましょう．
それ以外に，色々遊んでみて下さい．
スタイルの設定をすると，BlueGriffonで編集中のページがリアルタイムで変っていくのがわかると思います．
注：外部スタイルシート（nabe.css）に設定を書き込んでいるので，HTMLファイル（index.html）のソースを見てもスタイルの設定は書き込まれていません．別のエディタでスタイルシート（nabe.css）の中身を見るか下記に示す方法で見てみると，スタイルシートに設定が書き込まれているのがわかります．

BlueGriffonでCSSのソース（中身，ルール）を見る方法：

さきほど同様に，「スタイルシート」タブに表示されている外部スタイルシートを選択．
「スタイルシート」ダイアログの下端にある歯車のアイコンをクリックし，「コード」を選ぶと，選択したCSSファイルのソースが表示される．（この画面でCSSファイルを直接編集することも可能．「Commit Changes」で編集を保存．）

☆スタイルのルールが内部スタイルシートに書かれてしまった場合，下記手順で外部スタイルシートに移動させることができます．

「スタイルシート」タブに表示されている<style>をダブルクリックして，表示されたルールをコピー．
「スタイルシート」タブに表示されている外部スタイルシート（外部スタイルシートを作成していなかったら，先ほどの手順で新規作成）をダブルクリックして，さきほどコピーしたルールをペースト．
「スタイルシート」タブに表示されている<style>を削除．（<style>を選択した状態で「－」アイコンをクリック）

BlueGriffonのスタイルの作成には，「この要素のみ（ID指定）」，「クラスで指定する．．．」，「要素名で指定する．．．」，「この要素のみ（インラインスタイル）」の3+1種類があるが，これはスタイルセレクタの種類に相当している．

スタイルセレクタ：

CSSでは，要素ごとに表示スタイルを指定することもできるし，特定のclass属性をもった要素に対して表示スタイルを指定することもできる．BlueGriffonの「スタイルの適用先」でいうと，下記のようになる：

クラスで指定する．．．：

同じ名前のclass属性を持った要素にだけ適用される．後述する，文字を赤色で表示する例がこれを使っている．

<span class="red" >ここは大事</span>

書式ツールバー2行目左端のドロップダウンリストには，CSSエディタで作成した名前付きスタイルの一覧が表示される．

要素名で指定する．．．：

h1要素とか，p要素とか，ある種類の要素全部に適用される．この教材で言うと，h2要素やh3要素で，これを使っている．

『HTML5+CSS3の新しい教科書』の「Lesson4 04 CSSの基本ルール」にセレクタなどの基本的なことが，「Lesson4 05 よく使うセレクタを知る」に，「要素セレクタ」，「IDセレクタ」，「classセレクタ」などのセレクタの種類について詳しく説明してあります．

H2見出しの色を変えてみる

h2見出し全部の見栄えを変更したいので，「要素名で指定する．．．」を用いる．要領はh1見出しのスタイルを指定したときと全く同じ．今回は，H2要素を選んでから，「一般」で「太さ」を「太字」に，「色」で前景色を赤色，背景色を薄い水色にする．さらに「枠線」で，「すべてに同じ枠線を使用する」をチェックしてから，色をオレンジ，その右横の（太さを選択する）ドロップダウンリストを中，さらに右横の（線の種類を選択するドロップダウンリストを）直線にする．スタイルを変更するとリアルタイムで，編集中のページの色などが変るのがわかると思う．また，すべてのh2要素のスタイルが一度に変るのもわかる．

h2見出しの見栄えを変更

一度設定したh2見出しの見栄えを変更するには，h2要素が選択された（カーソルがh2要素内にある）状態で「スタイルプロパティ」タブの内容を変更する．ここでは，行揃えをセンタリングしてみよう．また，「大きさ」で，「全ての余白を同じ大きさにする」チェックボックスを外してから，右側の余白（灰色のボックス領域の右側に表示されているドロップダウンリスト）を20％にしてみる．（まず，％を選んでから，数字を20に変えればよい．）

文字を赤色で表示するためのスタイルを作成し，文章の一部に適用してみる．（class属性）

今度は，特定のclass属性を持つ要素に適用される規則を作ってみる．

特定のスタイルを適用したい箇所（文字）をマウスで選択し，「書式」メニューから「span」を選ぶ．（すると，選択した箇所がspanタグで囲まれる．）
そのspan要素が選択された状態で，（Formatツールバーの）「(クラスなし)」と表示されているドロップダウンリストに「red」とタイプしてEnterキーを押す．
（画面最下行に<body><p><span.red>と表示されていて，最後の<span.red>が選択された状態になっていることを確認してから，）「スタイルプロパティ」タブを表示する．
「クラスで指定する．．．」を選ぶと，その右横に「red」と表示されるはず．
「色」で前景色を赤色にする．（本当は，"red"というクラス名は見栄えを示しているので良い名前ではない．"Zyuuyou"とかにすべきですが，今は練習なのでわかりやすさを優先しています．）
これで完成．選択した文字だけが赤色で表示されているはず．

HTMLソースは次のようになっている．（CSSファイルには「.red」というセレクタが作成されている．）

<p>あれこれ，<span class="red">ここは赤色</span>だよ，かれこれ．</p>

先ほど作成したスタイル（class属性）を他の箇所にも適用する

別の箇所の文字を選択し，先ほどと同じ要領で，スタイルを変更したい箇所だけをspan要素で囲む．次に，編集ツールバー2行目の（クラスなし）と表示されているドロップダウンリストをクリックして，「red」を選択する．（span要素だけでなく，任意の要素にclass属性を付加することができます．）

ID属性

さきほどはclass属性を作ったが，FormatツールバーでID属性を作ることも出来る．ID属性はHTMLファイル中で1箇所にしか適用できない（例：id="TOC"，つまり目次）が，class属性は複数の要素で使える．（例：<p class="note">注意．．．</p>）

おまけ：メディアごとに表示スタイルを変更

印刷用のスタイルを追加します．

これまでと同様の手順で「print.css」を作成．
「新しいメディアを追加する」を選択して，真ん中のドロップダウンメニューから「印刷メディア」を選択して，「OK」

すると，HTMLファイルのソースが以下のようになっているはず．

<link media="print" href="print.css" rel="stylesheet" type="text/css" />

このprint.cssに印刷用スタイルのルールを書き込めば，印刷時に適用されます．

なお，複数メディア用のスタイルを一つのスタイルシートに書き込むこともできます．

CSSファイルに印刷用CSSを挿入する例

@media print {

  body {
    font-size: 10.5pt;
    font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
  }

  .TOCBackLink {
    display: none;
  }

  h2 {
    page-break-before: always;
  }

}

フォントサイズを10.5ポイント，フォントは明朝体，「目次に戻る」リンクは印刷しない，h2見出しの前で必ず改ページするという指定をしています．

詳細は，『Web標準XHTML+CSSデザイン』の「法則39 出力メディアに合わせて適用するスタイルを制御する」及び「法則69 印刷に適した印刷用スタイルシートを作成する」参照．

4.5 CSSの基礎

詳細はテキストやウェブで調べて欲しいのですが，CSSの大事なところだけ解説します．

4.5.1 CSSで使用する単位

CSSで使う単位は大きく分けて2種類あります．

絶対値を示す単位：cm，mm，in（インチ），pt（ポイント），px（ピクセル），
相対値を示す単位：%（デフォルトの大きさの何倍か），rem（フォントの大きさを1とする単位），ex（小文字xの高さを1とする単位）

両者を比較すると，相対的な単位のほうが利用者の環境に応じて適切な値で表示されることを期待できます．remを単位にしておけば，ユーザがブラウザで見ている文字の大きさの何倍にするかを表示できるわけです．（ただし，img要素などは画像ファイルの大きさがpxになるので，pxで指定する場合が多い．）

『HTML5+CSS3の新しい教科書』の「Lesson2 05 Webサイト制作で使う単位」にも相対単位と接待単位の説明と，よく使う単位の使い方（em, %, pxの使い分け方）が説明してあります．

4.5.2 スタイルシートの指定方法

前述したように，スタイルの指定方法には，外部スタイルシート，内部スタイルシート，インラインスタイルの3種類があります．

a) 外部スタイルシートを使う方法

<head>
  <link rel="stylesheet" type="text/css" href="http://www.foo.org/example.css" />
</head>

外部スタイルシートを使えば，複数のページで同じデザインを共有できるなどのメリットがあります．（HTML文書のhead要素内の）link要素で外部スタイルシートのURLを指示することで，HTMLファイルとCSSファイルを結びつけます．

外部スタイルシートの場所として，上例のようにURLを用いても良いし，HTMLファイルからの相対パスを用いても構いません．また，複数のスタイルシートを読み込んでも構いません．

b)内部スタイルシートを使う方法

<head>
  <style type="text/css"><![CDATA!
　　　　/* ここにスタイルのルールを書く */
  ]]</style>
</head>

内部（埋め込み）スタイルシートは，head要素の中にstyle要素としてデザインのルールを書き込みます．他のページとデザインを共有できないというデメリットがあるしマークアップとスタイルが分離しないという問題点がある．HTMLファイルの中にCSSのルールを書くので，CSSのルールが間違ってHTMLと解釈される可能性があります．それを避けるために内部スタイルのstyle要素全体をHTMLのコメントで囲む方法や，上記のようにCDATA（Character data）と明示的に指定してHTMLとして解釈されることを防止する方法もあります．

c) インラインスタイルの例

<img src="foo.jpg" alt="適当" style="width: 100px; height: 50px;" />

インラインスタイルは，要素のstyle属性でデザインを指定する方法です．table要素やimg要素など，その要素のその場所でしか使わない特殊なルールを指定する場合のみで使うこと．BlueGriffonの「スタイルの適用先：」で「この要素のみ（インラインスタイル）」を選択すると，外部スタイルシートではなくてインラインスタイルで書くことができます．

4.5.3 CSSのルール

BlueGriffonではGUI画面でCSSのルールを指定しましたが，実際のCSSファイルには下記のように書き込まれています．（「パネル」／「スタイルシート」からスタイルシートを選択してから，歯車アイコン，コードと選べばCSSファイルのソースが見える．）

実際のスタイルシート

/* 要素全体に適用するスタイル */
h1 {                   
  font-size:170%;         /* 文字サイズ：170% */
  text-align:center;      /* 中央揃え */
}
　
/* class属性が"red_important"である要素全体に適用するスタイル */
.red_important {                 
  color: #FF0000;         /* 文字色：赤 */
}
　
/* id属性が"TOC"である要素に適用するスタイル */
#TOC {
  background: red;
}
　
/* class属性が"nobullet"であるul要素の中のli要素全部に適用するスタイル */
ul.nobullet li {             
  list-style: none;          /* リスト項目に中点などをつけない */
}

上記の例で，"h1"とか".red"とか"#TOC"とか書いてあるのが「セレクタ」です．"h1"は「要素セレクタ」，".red"は「クラスセレクタ」，"#TOC"は「IDセレクタ」に該当します．セレクタではもっと複雑な宣言もできますが詳細を知りたい人はCSSを勉強してください．

『HTML5+CSS3の新しい教科書』の「Lesson4 05 よく使うセレクタを知る」に，「要素セレクタ」，「IDセレクタ」，「classセレクタ」の説明があります．CSSの詳細は，「Lesson4 04 CSSの基本ルール」から「Lesson04 07セレクタを使った実例」を勉強すると良いと思います．

セレクタの後の"{"と"}"で囲まれた部分に「宣言」を書きます．各宣言の間は";"で区切ります．一つの宣言は"font-size: 170%;"のように，プロパティ"font-size"の値が"170%"と指定します．

"/* コメント */"はCSSのコメントです．

上記スタイルシートに対応したHTMLの例

<div id="TOC"><h2>目次</h2>
<!-- ここに目次が書かれる -->
</div>

<div class="red_important">重要</div>

<p>ここが<span class="red_important">重要</span>です．</p>

<ul class="nobullet">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>

4.5.4 ボックスモデル

ウェブブラウザが，ウェブページに文字や画像などの要素をレイアウトする際，各要素が入る箱を左上から順番にウェブページに詰め込んでいくと考えてください．この箱（ボックス）は，内容，パディング，枠線，マージンという4つの部分から構成されています．CSSで枠線(border)に色を付けると，枠線が表示されます．内容と枠線の間の隙間がパディング(padding)です．枠線は箱の中に入っていますが，箱と枠線の隙間がマージン(margin)です．

もしmarginもpaddingも0にすると，隣り合った内容がぴったりくっついて表示されます．また，p要素に左マージンを取ると，少し下がって（段落全体がインデントされて）表示されるようになります．

この教材の印刷版のh2見出しとh3見出しは，このボックスモデルを使って以下のようにCSSで見栄えを指定しています．

h2 {
	color: #003300;	                  /* 文字色：薄い緑系の色 */
	background: #FFFFCC;              /* 背景色 ：レモンイエロー系の色 */
	padding: 5pt;                     /* パディング（4方向とも同じ値を使う） */
	border-top: thin solid #003333;   /* 枠線の上側：細い実線で，色は#003333 */
	border-bottom: thin none #003333; /* 枠線の下側：線を描写しない */
	border-left: thick solid #006633; /* 枠線の左側：太い実線で，色は#006633 */
}

h3 {
	color: black;                         /* 文字色：黒 */
	background: #FFFFFF;                  /* 背景色：白 */
	padding: 2pt;                         /* パディング */
	margin-right: 100pt;                  /* 右側のマージンは100pt */
	border-bottom: medium dashed #006600; /* 枠線の下側：中太の波線，色は#006600 */
}

枠線はdefaultでは見えないけれど，CSSで borderを指定すると表示されるようになり，パディングやマージンを調整することで，いろいろアレンジできることがわかったでしょうか．

『HTML5+CSS3の新しい教科書』の「Lesson10 01 ボックスモデルを理解する」も参照してください．

4.6 Validate

人間に間違いはつきもの．チェックツールで検査して間違いを修正しましょう．

4.6.1 文法チェック

BlueGriffonのGUIで編集していると，空のp要素やbr要素が混入していしまっていることに気づきません．このような余分な要素を整理するために，「ツール」メニューの「HTMLマークアップを整理」を選択して，「整形」ボタンを押してください．画面のレポート欄に表示されている数が全部0になるまで何回も「整形」を押すと，HTMLがきれいにクリーンアップされます．

整理が終わったら，作成したウェブページが文法(DTD)通りに書かれているかどうか，Validator（文法チェッカー）でチェックしてみましょう．BlueGriffonでページを保存してから，Markup Validation Serviceをブラウザで開いて，「Validate by File Upload」タブでローカルにあるファイル（つまり自分が作成したHTMLファイル）を指定して「Check」ボタンを押してください．

DTDの仕様と一致していたら"This document was successfully checked as HTML5!"と表示されます．

Validatorなどの文法チェッカでチェックすると，もしかしたらかなりの数のエラーを指摘されるかも知れません．BlueGriffonは賢いので，注意深く使えばValidatorに指摘されるようなエラーは出ないはずなのですが，インライン要素である文字列や<br />要素がbody要素の下に書かれてしまったりしてエラーになることもあります．

コードを掃除するには，BlueGriffonの「ツール」メニューにある「HTMLマークアップを整理」で，余分なコードを2，3回繰り返して掃除してください．それでも残った不要なコードは，「ソース」タブで直接チェックして手動で削除すると良いと思います．これらの掃除が終わってから，文法チェックしてみてください．

（「ツール」メニューの「Opquast Accessibility First Step」を使うと，簡単なアクセシビリティチェックを行ってくれます．チェック結果で赤色で表示されている行に修正すべき点が含まれています．）

4.6.2ソース編集

Validatorで指摘されたエラーを修正する時は，ソースを直接編集した方が早い場合が多いと思います．また，BlueGriffonには限界があり，グラフィカル（GUI）画面で編集するだけでは意図したとおりのHTMLにならない場合もあるので，そういう場合もソース表示で編集する必要性に迫られると思います．ソースを直接編集する場合は，HTMLの知識が（ある程度）あることが必要になってきます．

皆さんが普段見ているウェブページのソースは簡単に見ることができます．気になったページがあったら，HTMLファイルのソースやCSSファイルのソースを見てみると良いと思います．（CSSファイルのURLは，HTMLファイルのソースを見れば分ります．）

でも，BlueGriffonを使えば，かなりのところまでソースを編集せずにウェブページを作ることができるのがわかったと思います．しかもそのウェブページは，標準に（かなりの程度）準拠した「正しい」ウェブページになっています．「BlueGriffonでは物足りないな，直接ソースを編集したいな．」と思ったあなたはもうウェブの初心者ではありません．今後はHTML5とCSS3(2)の仕様を勉強して，より高度で正確なウェブページを作成してください．また，そういうあなたは，Dreamweaverなどの本格的なオーサリングツールややBracketsのような高機能なエディタを使用することをお薦めします．

（BlueGriffon「挿入」メニューの「HTMLエレメント」を使えば，カーソル箇所に任意のHTMLソースを手で書き込むことも出来ます．）

4.7 サイトの公開

今までは，作成したページを公開することを全然考えていませんでした．Wordなどの他のファイルと同じ場所に作成しても，自分以外の人はそのページを見ることはできません．しかし，作成したページを適切な場所（ウェブサーバが指定する場所）に置くと，世界中に公開できます．

東京女子大学のサーバーで公開する場合

情報処理センターの「Webページ（ホームページ）の公開」を参考にしてください．まずは，ファイル転送ソフト（WinScp）の設定が必要になりますが，情報処理センターの「Webサーバーへのファイル転送設定(WinSCP）」を参考に設定してください．

4.8サイト作成の練習（小課題）

小課題

この授業で学んだことを使って，以下の条件を満たしたWebサイトを作ってください．

BlueGriffonを使って作成する．（Windows版とMac版のどちらを使っても良い．）
HTML5で作成する．
https://www.cis.twcu.ac.jp/~学生番号/UnivWeb/index.htmlで公開する．（自分のホームディレクトリのどこにどういうファイルを作ればよいか考えてください．「UnivWeb」は大文字小文字の使い分けにも注意．）
title と h1 は，「UnivWebのまとめ」．
少なくとも3つのh2見出しを作る．（例：「授業の概要」，「Web標準」，「BlueGriffon」，「リンク集」）
ul（順序なしリスト，つまり箇条書き）要素を使って，学生番号，氏名，出身地を書く．
ol（順序付きリスト）要素を必ず使う．
ひとつ以上の画像を使う．画像には代替情報を必ずつける．
h2要素で「リンク集」という見出しを作り，ul要素を使ってリンクリストを作る．リンクリストには，少なくとも，東女のホームページと簡単ユニバーサルウェブのページと，下記に示すtest.htmlへのリンクを張る．
test.cssという名前の外部スタイルシートを使って，見栄えを指定する．スタイルの指定を外部スタイルシート以外でしてはならない．（ただし，table要素とimg要素は，テーブル幅や画像の大きさの指定でインラインスタイルを使ってもよい．）
h1はセンタリングする．h2は文字色を濃い青系の色，背景色を薄い黄色系の色にする．それ以外は自由．
W3CのHTML Validation ServiceでValidateした結果をページの最後に書く．この結果を（授業で学習した方法で）赤色で表示する．（例1：エラーの数：0，例2：エラーの数：2）
index.html以外に，test.htmlというページも作成する．test.htmlの内容は自由だが，h1要素とh2要素を使うこと．
test.htmlもindex.htmlと同じtest.cssを使用する．
それ以外にも，授業で学んだ技術や自分で学んだ技術を出来るだけ使って，「楽しい」＆「使いやすい」＆「アクセシビリティに配慮した」＆「Web標準に準拠した」サイトを造ってください．

課題が完成したら，「課題閲覧（限定公開）」の自分の名前をクリックしてみてください．うまくいっていたら，自分が作った課題のページが見えるはずです．また，他の人の成果も見てみましょう．他の人のページのソースやCSSファイルを見て，良いアイデアを（著作権や一般的なエチケットに反しない範囲で）まねしてみるのも良いと思います．

4.9 初級から中級にステップアップ！

ここまでくると，BlueGriffonだけでは物足りなくなり，自分で直接ソースを編集したくなると思います．また，文法エラーの理由を理解するためには，HTMLやCSSの技術仕様（文法）を勉強する必要が出てきます．つまり，文法などのの技術的知識をBlueGriffonにおおまかせした初級段階が終わり，自分でも知識を持って詳細なウェブページを作成する中級段階に来たわけです．

4.9.1 文法エラーの解決法

Validatorで指摘されたerrorの理由を知りたい人は，以下の手順で修正すると良いかも知れません．ただし，ソースを直接編集する必要が生じます．

文法チェッカ：Another HTML-LINT5 Gateway でチェックしてみる．
Another HTML-LINT5 Gateway を開いたら，「FILE」タブをクリックして，「ファイルを選択」ボタンで，チェックしたいHTMLファイルを指定する．
「チェック」ボタンを押して文法チェック．
（必要以上に）厳格にチェックして採点します．エラーが多いと，点数が負の値になることもあるかも．60点を超えていたら良い出来だと思います．満点なら素晴らしい！
Validatorよりも詳細な結果が日本語で表示されるので，エラーメッセージなどを参考にしながら，BlueGriffonでソースを修正する．（解説の内容が難しいと思いますが，どこが間違っているかを理解する参考にはなると思います．）

4.10 最終課題の準備

最終課題では，数ページで構成されるウェブ「サイト」を作ってもらいます．ウェブサイト開発では，1ページのウェブページを作成するのとは違った知識や技術が必要になります．以下，「ウェブのユーザビリティ」，「ウェブの開発プロセス」，「ナビゲーションの工夫」の章で，最終課題のために知っておいてほしいことを書きます．

どのようなサイトを作るのかを考え，コンテンツを集める準備を始めておくとよいと思います．

参考：最終課題の情報