第6回目
日 時：2015年2月7日 13:30～16:00
場 所：かるがも団体交流室 Ⅰ Ⅱ
出席者：受講者 12名、HPWG 13名
講 師：内山 啓次郎、松本 恭彦
内 容：
CSSファイル作成
- スタイルシートマネージャを起動する
- ［スタイルシートの追加］ボタンをクリック
- ［リンク］をクリックし、チェックオンにする
- ［参照］ボタンを押し、先に作成している［styles］フォルダーを開く
- ［ファイル名］ボックスにファイル名を入力
ここでは「xxx_style01」と入力 - ［開く］ボタンを押す
- ［外部スタイルシート名］ボックスに、styles フォルダーと css ファイル名が入っているのを確認し、［OK］ボタンを押す
- ［スタイルシートマネージャ］画面に戻るので、
- ［スタイル構成］タブには外部スタイルシート（CSS）ファイルが追加されているのを確認し、［OK］ボタンをクリック
埋め込みで記述されていたスタイルシートを書き出す
埋め込みのスタイル記述は、「画像垂直隙間の調整」が相当します。
- ［スタイルエクスプレス］ビュー［スタイル構成］パネルで <style>を右クリック
- ［書き出し］を選択
- ［ルールの書き出し］ダイアログで［参照］をクリック
- 前項で「styles」フォルダー内に新規作成した xxx_styles01.css ファイルを指定
- ［ファイル］ボックスに書き出し先のファイル名とフォルダがセットされたのを確認し、［OK］をクリック
- ［スタイル構成］パネルで埋め込みスタイルシートが無くなり、代わりに外部スタイルシートで、元々埋め込まれていたスタイルが記述されているのを確認
- さらに「<link>style/xxx_style01.css」を右クリックし、［編集］を選択して現れるCSSエディターで、imgに対する「vertical-align : bottom;」が書き出されているのを確認し、上書き保存する
- ［文字コードの修整］ダイアログが表示されるので、［@charset "UTF-8" の追加を指定する］を選択して｢OK｣をクリック
ページ全体のフォントの種類を設定
- ビューにある［スタイルエクスプレス］アイコンをクリック
- ［カーソル位置］タブを選択
- ［body］タグを右クリック
- ［ルールの新規作成］を選択
- ［ルールの追加］ダイアログボックスで、ルールの追加をするファイルを選択
ここでは先に作成した外部 CSS ファイルxxx_style01.cssを選択 - 追加するルールの［タグ］が［body］になっていることを確認し、［OK］ボタンをクリック
- 表示される［外部CSSファイルの更新確認］ダイアログで「はい」をクリック
- ［スタイルの設定 - body］ダイアログボックスが表示されるので［フォント］タブを選択
- ［フォントの候補］ボックスに「メイリオ」と入力
- フォントのリストから「メイリオ」を選択
- ［追加］ボタンをクリック
- 続いて［フォントの候補］ボックスに「ＭＳ Ｐゴ」と入力
- フォントのリストから「ＭＳ Ｐゴシック」を選択
- ［追加］ボタンをクリック
- ［OK］ボタンをクリック
内容全体を中央に配置する
- メニューの［編集］から［すべて選択］を選択
- メニューの［挿入→レイアウトコンテナ］をクリック
- 編集領域で、文字または画像など、内容がある部分をクリック
- 編集領域で、文字または画像など、内容がある部分をクリックし、［スタイルエクスプレス］ビューの［カーソル位置］パネルで、上方にある div を右クリック
- 表示された［ルールの追加］ダイアログボックスの［スタイルを追加する場所］で xxx_style01.css を選択
- ［追加するルール］の［ID］ボタンを選択し、ボックスに 「main」と入力
- ［OK］ボタンをクリック
- ［外部 CSS ファイルの更新確認］ダイアログで［はい］ボタンをクリック
- ［スタイルの設定－#main］ダイアログで、［レイアウト］タブを選択
- スタイルを設定する方向で［左方向］を選択
- マージンの単位ボックスで▼をクリックして「予約語」を選択
- 値ボックスで▲をクリックして「自動」を選択
- 同じく右マージンに「自動」を設定
- ［位置］タブを選択
- ［幅］の単位が［ピクセル］になっていることを確認
- 値ボックスに「700」と入力
- ［OK］ボタンをクリック
ページの背景に画像を指定する
- 文字または画像がある箇所をクリック
- ［スタイルエクスプレス］ビューの［カーソル位置］タブで、タグ body を右クリック
- ［タグ（body）のスタイルを編集］を選択
- ［外部CSSファイルの更新確認］ダイアログで「はい」をクリック
- ［スタイルの設定］ダイアログで［色と背景］タブを選択
- ［背景画像］の［参照］ボタンをクリック
- ［素材集から］を選択
- ［素材集から開く］ウィンドウで［壁紙用素材］→ ［gr6b.gif］ を選択
- ［開く］ボタンをクリック
- ［スタイルの設定］ダイアログに戻るので、ファイルボックスに選択した素材集の背景画像のファイルを確認
- ［OK］ボタンをクリック
- 上書き保存
- ［素材ファイルをコピーして保存］ダイアログで、ファイル名を［xxx_wall.gif］に変更
- 保存場所を画像専用のimgsフォルダ―になっていることを確認
- ［保存］をクリック
レイアウトコンテナに背景色を設定する
- 文字または画像がある箇所をクリック
- ［スタイルエクスプレス］ビューの［カーソル位置］タブで、全体を囲むレイアウトコンテナ div id="main" を右クリック
- ［ID（#main）のスタイルを編集］を選択
- ［外部CSSファイルの更新確認］ダイアログが表示されたら、［はい］ボタンをクリック
- ［スタイルの設定］ダイアログの［色と背景］タブで背景色の選択
- ［背景色］の▼をクリックし［白］を選択
- ［OK］ボタンをクリック
- ［上書き保存］し、
- 設定されたスタイルを、［スタイルエクスプレス］ビューで確認
レイアウトコンテナに余白を設定する
- 「シニアになっても～」の文章があるところでクリック
- ［スタイルエクスプレス］ビューの［カーソル位置］タブで、二つ目のレイアウトコンテナ div を右クリック
- ［ルールの新規作成］を選択
- 表示される［ルールの追加］ダイアログの［追加する場所］で、外部スタイルシートファイルxxx_style01.css (link)をクリックして指定
- ［追加するルール］の種類は［ID］を選択し、新規ID名「conts」と入力
- ［属性も設定する］にチェックが入っていることを確認し、［OK］ボタンをクリック
- ［外部CSSファイルの更新確認］ダイアログが表示されたら、［はい］ボタンをクリック
- 表示される［スタイルの設定 ‐ #conts］ダイアログで［レイアウト］タブを開く
- ［４方向とも同じ値］を選択
- ［マージン］の単位を［ピクセル］に変更し、［マージン］のサイズボックスに「30」と入力
- ［OK］ボタンをクリック
- 上書き保存し［スタイルエクスプレス］ビューでのスタイル設定を確認
フッターのテキストを中央に配置する
- フッターの文字がある箇所をクリック
- ［スタイルエクスプレス］ビューの［カーソル位置］タブで、div id="main"の下にあるレイアウトコンテナdivを右クリック
- ［ルールの新規作成］を選択
- ［ルールの追加］ダイアログで、追加するルールを記述する場所を外部スタイルシートファイルxxx_style01.css (link)をクリックして指定
- ［追加するルール］の種類では［ID］を選択し、新規ID名をボックスに「footer」と入力
- ［外部CSSファイルの更新確認］ダイアログが表示されたら、［はい］ボタンをクリック
- ［スタイルの設定 ‐ #footer］ダイアログで［文字のレイアウト］タブを開く
- ［水平方向の配置］で中央揃え（のボタン）を選択
- ［レイアウト］タブを開く
- ［左方向］を選択し、［パディング］の値を 20 ピクセルとする
- ［下方向］を選択し、［パディング］の値を 20 ピクセルとする
- ［右方向］を選択し、［パディング］の値を 20 ピクセルとする
- 上書き保存し、［スタイルエクスプレス］ビューでスタイルを確認
補足説明
- 外部スタイルシートの書き出し：本講習で学習した方法以外にも様々な方法があります。予めCSSファイルを用意しておく方法を紹介しました。
- スタイルの継承：bodyに背景を設定すると、全体にその背景が適用されます。異なる背景を設定したい場合は、その子要素に改めて背景を設定する必要があります。
- ボックスの中央揃え：左右のマージンを「自動」に設定することにより、結果的に画面の中央に配置されます。
- フォントの種類：指定しない場合はブラウザ毎にの既定のフォントで表示され、意図したイメージと異なる結果になることがあります。種類を列記すると先に指定フォントが第一候補でそのフォントがない場合は、順次後に指定したものが採用されます。
- メイリオ：Windows用フォントとして開発された解像度を調整して文字を鮮明に見せるスムージングの技術を生かしたフォントで日本語版用ゴシック体フォントです。