top > Part-3 > Lesson-7
※ファイル名がLesson6と同じになっていますが、特に問題はありません。
カバー画像：p3l7_cover.psd
リード文：
スタイルシートによるレイアウトデザインは、テーブルレイアウトのように複雑にはなりません。HTMLファイルは、文書構造を示しているだけですから、シンプルなソースで分かりやすくなります。無意味な情報は、一切含まれませんので、サーチエンジンが解析しやすいという大きなメリットもあります。このLessonでは、ブロックレイアウトの初歩的な学習をおこないます。また、定義したスタイルを外部ファイルに書き出す方法についても学びます。
Part-2 Lesson-1〜5でHTMLによる基本ページを作成しました。段落と行揃え、リストといったタグで文書構造を決める作業でした。（図の左）Part-3
Lesson-6では、テーブル（表組み）をレイアウトに応用して、印刷物のデザインのように作成しています。（図の中央）スペーサーイメージファイルなどの裏ワザを駆使した見栄え重視の作業だったと言えるでしょう。（構造も複雑になっています。）
このLessonでは、テーブルを使わずスタイルシートで基本デザインをおこないます。スタイルシートの場合もテーブルレイアウトのようにボックス（箱）で構成していくやり方が一般的です。（図の右）HTMLの<div>タグを使って、コンテンツ部分をグループ化してボックスを作ります。（ブロックレイアウトという手法です。）このボックスに対して、ページ端との間隔や余白などを設定することができます。
画像：p3l6_s01_1.psd
画像：p3l6_s01_2.psd
画像：p3l6_s01_3.psd
ブロックレイアウトに利用される<div>は、スタイルシートの設定に使われるタグなので、これだけ記述しても画面表示に変化はありません。（前後に改行が入るだけです。）グループ化したいテキスト（および画像など）を挟むように<div>〜</div>を記述してボックス（箱）を作ります。その後、<div
id="main">、<div class="contents">といった定義をおこない、スタイルを適用します。
（１）マイドキュメント＞admnフォルダ＞simpleフォルダ＞old_index.htmlを開いてください。[挿入]バーは[レイアウト]を表示しておきます。
画像：p3l6_s02_1.psd
（２）ページのコンテンツ部分を全て選択します。「WHAT'S UP」の行頭にカーソルをあわせて、最後の行「〜ご意見・ご感想などもお待ちしています。」の末尾までドラッグしてください。
画像：p3l6_s02_2.psd
（３）[挿入]バーの[Div タグを挿入]をクリックしてください。ダイアログが表示されます。[ID]欄に「main」と入力して、[OK]をクリックします。これでコンテンツ全体を（見えない）ボックスの中に入れたことになります。
画像：p3l6_s02_3.psd
（１）次は、[CSSスタイル]パネルを確認します。現在、定義されているスタイルは、見出し「「知」を伝える暗黙知伝達型ラーニング・サイト〜」とページ左右の間隔を「0」にしている部分です。プロパティインスペクタとページプロパティで定義しましたので、ページ内に記述されています。
画像：p3l6_s03_1.psd
（２）ページの中に記述されているスタイルを外部ファイルに書き出します。[CSSスタイル]パネルの<style>にカーソルをあわせて右クリック（MacはControl+クリック）、メニューから[書き出し]を選んでください。
画像：p3l6_s03_2.psd
（３）ダイアログが表示されますので、[保存する場所]をadmnフォルダ＞simpleフォルダにします。「simple_top.css」というファイル名を付けて、[保存]をクリックしてください。
画像：p3l6_s03_3.psd
（４）外部ファイルとして保存されましたので、（[CSSスタイル]パネルの<style>をクリックしてから）[CSSスタイルの削除]をクリックしてください。ページがスタイルなしの表示に変りました。
画像：p3l6_s03_4.psd
（１）[CSSスタイル]パネルの[スタイルシートを添付]をクリックします。[外部スタイルシートの添付]ダイアログが表示されますので、[次の形式で追加]の[リンクさせる]がチェックされていることを確認してください。
画像：p3l6_s04_1.psd
（２）続けて、[ファイル/URL]欄の[参照]をクリックします。[スタイルシートファイルを選択]ダイアログが表示されますので、STEP 03で保存した「simple_top.css」を選んで、[OK]をクリックしてください。
画像：p3l6_s04_2.psd
（３）[外部スタイルシートの添付]ダイアログも[OK]をクリックします。これで、最初の状態に戻りました。ページのスタイルは外部スタイルシートファイルに定義されていることになります。
画像：p3l6_s04_3.psd
（１）[CSSスタイル]パネルの「simple_top.css」をクリックしてから、[スタイルシートの編集]をクリックしてください。
画像：p3l6_s05_1.psd
（２）ダイアログが表示されますので[新規]をクリックします。[新規CSSスタイル]ダイアログが表示されます。[セレクタタイプ]の[詳細]をクリックしてから、[名前]欄に「#main」と入力して[OK]をクリックしてください。（ID名の頭には「#」を忘れずに付けてください。）
画像：p3l6_s05_2.psd
（３）[#main（simple_top.css 内）用のCSSスタイル定義]ダイアログが表示されます。[カテゴリ]の[ボックス]をクリックして、[マージン]の[すべて同一]のチェックを外してください。
画像：p3l6_s05_3.psd
（４）次に、[右]と[左]の入力欄に「40」と入力します。自動的に単位が[ピクセル]になりますので確認してください。[OK]をクリックします。続けて、[simple_top.css]ダイアログの[終了]をクリックしてください。
画像：p3l6_s05_4.psd
（５）ページの左右に40ピクセルの空きができました。正しい表示を確認してみましょう。[F12]を押して、ブラウザで確認します。
画像：p3l6_s05_5.psd
（６）スタイルを適用したコンテンツ部分を選択してみます。「WHAT'S UP」を囲む（非表示になっている）枠線にカーソルをあわせてください。カーソルが重なると赤い枠線が表示されますので、クリックしてください。「main」ブロックが選択され、プロパティインスペクタに内容が表示されます。
画像：p3l6_s05_6.psd
（１）[CSSスタイル]パネルの「simple_top.css」横にある＋をクリックして展開します。次に「#main」をクリックしてから、[スタイルシートの編集]をクリックしてください。
画像：p3l6_s06_1.psd
（２）[#main（simple_top.css 内）用のCSSスタイル定義]ダイアログが表示されます。[ライン高]に「140」と入力して、単位を「%」にしてください。[OK]をクリックします。
画像：p3l6_s06_2.psd
（３）[F12]を押してください。ブラウザで確認してみましょう。確認後、ページを保存します。[ファイル]メニューの[すべてを保存]を実行してください。（これで外部スタイルシートファイルも同時に保存されます。）
画像：p3l6_s06_3.psd
スタイルシートが適用されなかった場合の表示（文書構造だけのページ）
画像：p3l6_s06_3_3.psd
（４）変更前のファイルを削除しておきましょう。[ファイル]メニューの[すべて閉じる]を実行します。[ファイル]パネルの simpleフォルダ＞index.htmlを選択して、Deleteを押してください。ダイアログが表示されますが、[はい]をクリックします。
画像：p3l6_s06_4.psd
（５）今度は、old_index.htmlのファイル名を変更します。old_index.htmlをクリック、もう１度クリックしてください。（ダブルクリックにならないように。）入力可能になりますので、index.htmlに変更してEnter（MacはReturn）を押します。最後に、不必要になったcontents_text.css（変更前のHTMLファイルが参照していたスタイルシート）も削除してください。表示されるダイアログは、[はい]をクリックします。
画像：p3l6_s06_5.psd
文章
完成見本ファイル（tfn3-07フォルダのtfn3-07.html）と練習問題ファイル（try3-07フォルダのtry3-07.html）を開いてください。完成見本ファイルは、スタイルシートによるブロックレイアウトが適用されています。完成見本の[CSSスタイル]パネルを確認しながら、練習問題ファイルを同様の表示になるよう変更してください。
画像：p3l7_try.psd
ヒント
作業の初めに、HTMLファイル内に記述されているスタイルを外部ファイルに書き出してください。<div>タグを挿入する際は、確実に全てのコンテンツ（タイトル、BACKの画像以外）を選択してください。選択されると反転しますので、必ず確認しましょう。
●ブロックレイアウトは、スタイルシートによるレイアウトデザインで最も使われる手法です。
●ブロックレイアウトは、HTMLの<div>タグを使って、コンテンツ部分をグループ化してボックスを作ります。このボックスに対して、ページ端との間隔や余白などを設定することができます。
●ボックスを作るには、グループ化したいコンテンツを選択して、[挿入]バー[レイアウト]の[Div タグを挿入]をクリック、表示されるダイアログでクラス名やID名を入力します。
●定義したボックスに対するスタイルは、[CSSスタイル]パネルで設定します。
●原稿（テキストファイル）
●画像（PSD）データ、Lessonデータ、レッツ・トライ！！練習問題データのダウンロード [p3l7.zip]
[ back ]