第8章　Web ページを作る

「＋ パーツを追加」の 「Web」カテゴリにあるパーツです。ふつうの文書パーツと同じように置いて編集でき、保存されるのもこれまでと同じ 1 つの HTML ファイルです。そのままサーバーに置けば Web ページとして公開できます。

ページ上部に置く、サイト名＋メニュー＋右端のボタンの横並びです。パーツ追加では「ナビバー」と「ナビバー（ロゴ＋2段ラベル）」の 2 種類から選べます。

ナビバーの下に、次のパーツを順に置いていきます。いずれも「Web」カテゴリにあります。

背景色・グラデーション・画像・模様・波などを重ねて作る面です。「パーツを追加」→「パネル」→「レイヤーブロック」、またはページ上部用に「ページ」→「ページヘッダー（レイヤーブロック）」を挿入します（通常のページヘッダーとは入れ替えになります）。

挿入したらダブルクリックで専用の編集画面が開きます。上部にプレビュー、下に設定が並び、レイヤーを足す・並べ替える・透明度や拡大率を変える、といった操作ができます。プレビューと設定の境界バーはドラッグで動かせます（ダブルクリックで既定に戻ります）。

「内容レイヤー」には、見出し・文章・ボタンなどふつうのパーツを置けます。文字が背景に負けるときは、編集画面の「内容の文字色」を「白」にしてください。

高さを決める

「低め／標準／高め」から選ぶほかに、「高さ（自由入力）」へ 240px や 40vh のように書けます（単位を省くと px）。書くと上の選択より優先します。用紙から高さを決めるボタンが 2 つあります。「用紙1ページ分」は紙 1 枚をまるごと埋める高さです。ブロックの前に改ページを置いて使ってください（前に内容があるままだと次の紙へ続きます。そのときはメッセージでお知らせします）。前後に改ページを置けば、企業ロゴなどを紙のほぼ中央に印刷できます。「このページの残り」は、いまの置き場所でその紙に残っている高さです。ページの途中に置いたブロックを、紙の下端でぴたりと終わらせたいときに使います。どちらも同じ紙に出るものだけを差し引きます（その紙で自分より前にある内容／最初の紙ならページヘッダー／後ろに内容が無いときはページフッターと印刷の下余白）。何を差し引いたかは、押したときのメッセージに出ます。これは最小の高さなので、内容が多いときはそれより高くなります。

内容レイヤーは使わなくてもよい

背景を重ねるだけの飾りの帯にもできます。パーツ追加の「レイヤーブロック（背景だけ・内容なし）」を選ぶか、編集画面のレイヤー一覧で「内容」の × を押してください。内容レイヤーが無いときは高さがクラスと自由入力だけで決まるので、「内容なり」は選べなくなります。

内容レイヤーは1枚まで

あとから足すときは「＋ レイヤーを追加」で「内容」を選びます（すでにあるときは候補に出ません）。2枚あると前面のものがクリックを奪って、背面の内容を選べなくなるためです。

写真の上に見出しを載せる（カバー/ヒーロー）

パーツ追加の「カバー/ヒーロー画像」を選ぶと、写真＋黒い暗幕＋中央の見出しが組み上がった状態で入ります。写真は「画像」レイヤー、暗さは暗幕レイヤーの透過度、見出しの位置は内容レイヤーの配置で変えられます。写真が切れる位置は「画像」レイヤーの横の焦点／縦の焦点（%・50 で中央）で調整します。

※ 内容レイヤーの中身を空にしても、ブロックの高さは指定したままです（縮みません）。

ページのプロパティ

「ファイル」→「ページのプロパティ」で、ブラウザーのタブに出るタイトルや、検索向けの説明（description）などを設定できます。

画像の扱い

画像は文書に埋め込むか、ファイルを参照するかを選べます（第4章）。サーバーに置くときは、参照した画像ファイルも一緒にアップロードしてください。

ページ間のリンク

複数ページのサイトにするときは、ナビバーのリンク先に index.html のようなファイル名を書きます。同じフォルダーに置けばそのままつながります。

ページの幅

用紙の幅がそのままページの幅になります。広くしたいときは「ファイル」→「ページ設定」で余白を調整してください。

CSS の置きかた

ふつうの文書は CSS が HTML の中に取り込まれ、ファイル 1 つで完結します。複数ページのサイトでは、CSS を別ファイル（外部 CSS）にして各ページから読み込む形もよく使われます（このマニュアルもその形です）。

取り込まれる CSS は圧縮されます

ファイル 1 つで完結する形で保存すると、中に入る CSS は説明のコメントと余分な改行を取り除いた形になります（見た目や印刷結果は変わりません）。ファイルはおよそ半分の大きさになり、AI に読ませるときの負担も減ります。別ファイルとして書き出される CSS は圧縮しませんので、手で編集したいときはそちらを使ってください。

複数ページのサイトでは、ナビバー・サイトフッター・お知らせのように「どのページにも同じものを置く」部分が出てきます。メニューを 1 つ増やすたびに全ページを開いて直すのは大変です。共有コンテナを使うと、1 つのページで直した中身を、ほかのページへまとめて配れます。

1. 共有コンテナを置いて、共有名を付ける

1. パーツを追加する画面で「構造」→「共有コンテナ」を選びます。

2. その器の中に、共通で使いたいもの（ナビバーなど）を入れます。

3. 器を右クリックして編集画面を開き、「共有名」に名前を付けます（例: グローバルナビ）。

4. 同じ手順で、ほかのページにも同じ共有名の共有コンテナを置きます。

共有コンテナは見た目を持たない器です。編集画面では青い点線と共有名が出ますが、保存した HTML の見え方は何も変わりません。

2. まとめて置き換える

1. 配りたい中身が入っているページを開き、「編集」→「共有コンテナの一括置換...」を選びます。

2. 上の一覧で、配る共有コンテナにチェックを入れます。

3. 探すフォルダーを指定します（はじめは編集中のファイルのフォルダーです）。子フォルダーも探すかを選べます。

4. 「検索」を押すと、同じ共有名の器を持つファイルが一覧に出ます。置き換えたくないものはチェックを外します。

5. 「共有コンテナ置換」で書き換えます。

対象になるファイル

StyleDocx で保存した HTML だけです。ほかのソフトで作った HTML は、探しても一覧に出ません。

編集中のファイル

いま開いているファイルは対象から外れます（配る側なので置き換える必要がありません）。

タグの対応が取れないファイル

手で編集して閉じタグが足りなくなっているファイルは、範囲を正しく決められないため触らずに見送ります（一覧に理由が出ます）。

元に戻すには

置き換える前の中身はすべてバックアップします。「ファイル」→「バックアップの管理」から書き戻せます（→ 第2章）。