第６章　DIVによるレイアウトの演習０２

6-1.演習０2の完成形

過去には画面のレイアウト（部品の配置）は主として<table>タグを利用して、そのセルの中に画像や文字列を配置して行われていました。

然し、CSSの標準化が進むにつれて<table>タグによるレイアウトは色々問題があり、最近では<div>タグによるレイアウトが一般に行われるようになりました。

これから学習するページは「奥の細道の出立」に関するもので、その画面の中の写真とその説明文の配置を<div>タグによって自在に実現しようとする演習です。
これから作成しようとする演習０２のＳａｍｐｌｅ０5の完成形を先ず示します。

4-2. ホームページの絵コンテを書いてみる

ウェブ・サイトをデザインするにあたって重要なことは、先ず映画監督が通常するような絵コンテを描いてそのサイトの大雑把な構成とイメージを描いてみることです。

このサイトの絵コンテは次のようなものです。

4-3. ホームページの材料作り

上の絵コンテから判断して予め用意しなければならない部品はheaderの壁紙と丸くトリミングした写真と大きいサイズの写真（440pxX225px）6枚と小さいサイズの写真（200pxX112px)です。

4-4. 新規ｻｲﾄとトップ頁の作成

ウェブ・ページは必ずウェブ・サイトの中に作ら中ればならないので、真っ先にやらなければならないのはサイトの新規作成です。

その前の準備として、Windowsのエクスプローラーを使って、「ライブラリー」の中に「ウェブ演習02」のフォルダーを作り、その中に「サンプルサイト05」のフォルダーを作っておく。
その上で、「サンプルサイト05」のフォルダーの中に「image」フォルダーを半角英数字で作っておく。

Step-01:
　　新規サイトの作成：
　 「サイト」メニュー　→　「サイトの新規作成」　→　「サイトの新規作成画面」を表示　→

　　＜サイト名入力＝サンプルサイト05＞（これはサイトのニックネームなので日本語で良い）

Step-02:
　　新規サイトの中にブランクのトップ・ページを作成する：
　　「次へボタン」　→　「サイト新規作成画面で」　→　「トップ・ページを作成する」を選択

Step-03:
　　「次へボタン」　→　「サイト新規作成画面で」　→　「トップ・ページのファイル名がindex.htmlを
　　確認」　→　「参照ボタン」で「サンプルサイト05」のフォルダーを探し　→　「完成」
　　これで「サンプルサイト05」のフォルダーの中にブランクのトップ・ページが作成された。

Step-04:
　　トップ・ページを開いて、タイトルを入力する：
　　メニュー「編集」　→　「ページの属性」　→　「ページ・プロパティー」　→　
　　<タイトル＝サンプルサイト05ーDIVによるレイアウトの演習>と入力　→　「OK」
　　トップ・ページのタイトルは多くの人にアクセスしてもらうために必須のですから、忘れないように。
　　また、開発中にはホームページ・ビルダーの画面上段に表示されるので役に立つものです。

Step-05:
　 　トップ・ページの大枠を作成する：
　　メニュー「挿入」　→　「レイアウト・コンテナ」　→　「右上隅の属性ボタンでDIVの属性を選択」　→　
　　<コンテナーの属性画面で　id欄＝container>入力　→　<ソース・コードで　container生成を確認>
　　この大枠（英語でcontainer）はウェブ・ページを締まりあるものにするための囲い込みです。

　　≪注≫右上隅の属性ボタンを使わずに、ソース画面で<div id="container">と手入力しても良い。

Step-06:
　　containerのスタイル（書式）を規定する：
　　メニュー「表示」　→　「スタイルシート・マネジャー」　→　<ルール情報欄の「追加」ボタン>　→
　　<下のような「スタイル設定」ダイアログ・ボックスを表示し＞

　　

　　上の「スタイル設定」ダイアログで以下のように設定する：
　　　　「色と背景」タブ　→　「背景画像」　→　＜参照でwallppr01.gifを指定する＞　→
　　　　「位置」タブ　→　＜幅＝900pxに設定＞　　


　　　　次に、headの中のstyle sheetで、大枠をブラウザー画面の中央揃えするために、
　　　　　　 　　margin : 0 auto;　　を指定します。これはスタイルシート・マネジャーでは生成出来ない
　　　　からです。

Step-07:
　 　中枠<div id="header">を作成する：
　　　　　＜大枠の左上隅にポインターを置き＞　→　メニュー「表示」　→　
　　　　　「スタイルシート・マネジャー」　→　<ルール情報欄の「追加」ボタン>　→
　　　　　<「スタイル設定」ダイアログ・ボックスを表示し＞　→　次のようなスタイルを設定する　　　　　　　　　　＜左右の１ｐｘの実線の枠線を指定＞→<枠線色の#999はプロが良く使う枠線の色に指定>
　　　　　＜横幅は左右の枠線幅２pxを差し引いた898ｐｘを指定＞→＜高さは指定せず＞→
　　　　　＜枠線色の#999（grey）はプロが良く使う枠線の色に指定＞→
　　　　　＜背景色をLightCyanに指定する＞

　　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　#header{
　　　　　　　　　　　　　　background-color : LightCyan;　　　背景色名は手入力で入れる
　　　　　　　　　　　　　　width : 898px;
　　　　　　　　　　　　　　border : 1px solid gray;　　　　　枠線の指定はこのように手入力の方が簡単
　　　　　　　　　　　　　　border-radius:7px; 　　　　　　　これは後から手入力で入れる（四隅を丸角にする）
　　　　　　　　　　　　　　margin-bottom : 5px;
　　　　　　　　　　　　　　background : url(image/wallppr01.gif) repeat;
　　　　　　　　　　　　}
Step-08:
　　中枠<div id="yoko_navi">：
　　　　　<中枠headerのクロージング・タグの直下にポインターを置き>　→
　　　　　メニュー「表示」　→　「スタイルシート・マネジャー」　→　<ルール情報欄の「追加」ボタン>　→
　　　　　<「スタイル設定」ダイアログ・ボックスを表示し＞　→　次のようなスタイルを設定する　
　　　　　 この中枠は横並びのナビゲーション・メニューを入れるための枠で、
　　　　　＜サイズは横898px高さ30px＞　→　＜背景色のWheatは小麦色＞
　　　　　＜枠線を１px、実線、灰色＞　→　＜この枠の下に3pxの空白を入れる＞
　　　　　＜この中枠を左揃えにする＞

　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　#yoko_navi　{
　　　　　　　　　　　　　　　background-color : Wheat;　　　背景色は手入力する
　　　　　　　　　　　　　　　width : 898px;
　　　　　　　　　　　　　　　height : 30px;
　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　border : 1px solid gray;　　　　枠線の指定はこのように手入力の方が簡単
　　　　　　　　　　　　　　　border-radius:7px;　　　　　　　これは後からソース・コードで入力する
　　　　　　　　　　　　　　　margin-bottom : 3px;
　　　　　　　　　　　　　　}

Step-09:
　　中枠<div id="contents">の作成：
　　　　これはこのページの中央にあって主要な内容物を入れる重要な中枠で、今回の学習の焦点
　　　　です。

　　　　この中枠の中に<div id="basho_area">（芭蕉エリアの意味）と<div id="history_area">
　　　　（史跡エリアの意味）の2つの小枠が配置されます。
　　　　これらの小枠は従来のTableのようなものと考えて下さい。
　　　　その各々の小枠の中に6個づつの<div class="cell">（細胞または小ブロックの意味）が配置
　　　　されます。
　　　　これら12個のcell（セル）はTableのTDのようなもので、これらにはid名でなく、class名が付け
　　　　られるのが味噌です。classセレクターは同一ページの中に幾つも指定出来るからです。
　　　　写真やその説明文はこのcellの中に臨機応変に配置されます。
　　　　芭蕉エリアでは写真と説明文は上下に配置し、史跡エリアでは横並びに配置されます。

　　　　中枠<div id="contents">の横幅は、padding: 4pxを指定したために4px小さい894pxを指定し
　　　　ました。このpadding: 4pxは内容物を左から4px離れた所に一直線に揃えるという重要な意
　　　　味を持っています。内容物にmargin-leftを指定する方法もありますが、それではすべての
　　　　内用物にmargin-leftを指定しなければならず、良い方法ではありません。

　　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。


　　　　　　　　#contents {
　　　　　　　　　　　　　　　　border : 1px solid #999;
　　　　　　　　　　　　　　　　width : 894px;
　　　　　　　　　　　　　　　　height : 1757px;
　　　　　　　　　　　　　　　　background-color : Tan;
　　　　　　　　　　　　　　　　overflow : auto;
　　　　　　　　　　　　　　　　margin-top : 3px;
　　　　　　　　　　　　　　　　padding-top : 7px;
　　　　　　　　　　　　　　　　padding-left : 4px;
　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　border-radius:7px;
　　　　　　　　　　　　　　}

Step-10:

　　小枠<div id="basho_area">と<div id="history_area">の作成：
　　　　この2つの小枠は芭蕉関連の内容物と史跡関連の内容物を分けて格納する為のもので、
　　　　この目的はこの小枠の中に入る6個づつの<div class="cell">を階層パスによって別々の
　　　　セレクタターとして別々のスタイル・ルールを適用するためです。完成版のSampleをご覧
　　　　になれば芭蕉関連のエリアと史跡関連のエリアとでは写真と説明文の配置が異なってい
　　　　ることにお気づきと思います。
　　　　2つの小枠のサイズは横幅872pxを指定しました。これは<div id="contents">の正味横幅
　　　　898pxから小枠自身のpadding-left: 18pxと中枠<div id="contents">の両脇のpadding4px
　　　　を差し引いた数字です。実際には、このような正確な計算をしなくとも、内容物を入力後、
　　　　レイアウトの崩れが生じたら、試行錯誤でwidthの値を変更して行き、崩れが直った時に、
　　　　この数字になる筈です。

　　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　　#basho_area {
　　　　　　　　　　　　　　　　　　margin : 0 auto;
　　　　　　　　　　　　　　　　　　width : 872px;
　　　　　　　　　　　　　　　　　　overflow : auto;
　　　　　　　　　　　　　　　　　　background-color : LightYellow;
　　　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　　　padding-left : 18px;
　　　　　　　　　　　　　　　　}
　　　　　　　　　#history_area {
　　　　　　　　　　　　　　　　　　margin : 0 auto;
　　　　　　　　　　　　　　　　　　width : 872px;
　　　　　　　　　　　　　　　　　　overflow : auto;
　　　　　　　　　　　　　　　　　　background-color : LightCyan;
　　　　　　　　　　　　　　　　　　padding-left : 18px;
　　　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　}

Step-1１:
　　#basho_areaの中の <div class="cell">の作成：
　　　　これは「#basho_area .cell」という階層パスでセレクトされます。横幅の430pxは写真の横幅
　　　　の400ｐｘより30px大きくしてあります。
　　　　<div class="cell">はこのままだと縦に並びますが、後にfloat: leftと display: inlineの指定
　　　　で2つの<div class="cell">が横並びに並びます。写真と写真表題は<h3></h3>の中に
　　　　<br/>を挟んで入れれば、写真の下に説明が付きます。
　　　　写真の詳細な説明文はその下に付け加えられます。

　　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　　#basho_area .cell {
　　　　　　　　　　　　　　　　　　　width : 430px;
　　　　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　　　　display : inline;
　　　　　　　　　　　　　　　　　　　margin-top : 20px;
　　　　　　　　　　　　　　　　　　　}

Step-1２:
　　#history_areaの中の <div class="cell">の作成：
　　　　これは「#history_area .cell」という階層パスでセレクトされます。 横幅の420pxでその中に
　　　　写真と説明文は後で横並びに配置されます。このcellもこのままですと縦に並びますが、
　　　　後にfloat: leftと display: inlineの指定で2つのセルが横並びに並びます。

　　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　　　#history_area .cell {
　　　　　　　　　　　　　　　　　　　　width : 420px;
　　　　　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　　　　　display : inline;
　　　　　　　　　　　　　　　　　　　　margin-left : 10px;
　　　　　　　　　　　　　　　　　　　　margin-top : 10px;
　　　　　　　　　　　　　　　　　　　　height : 150px;
　　　　　　　　　　　　　　　　　　　}

Step-13:

　<div>の階層構造の確認
　　　　これでこのページノレイアウト構造が出来上がりました。
　　　　そこで階層構造が<div>タブによって正しく指定されているかの確認をソース・コードを表示して
　　　　行ってください。
　　　　<div>〜</div>のペアがちゃんとなされていないかチェックして下さい。
　　　　Sampleのソース・コードのようにインデントで下部階層の<div>を文字下げして、
　　　　階層が判るようにすると良いと思います。
　　　　TABキーで字下げする桁数は「ツール」メニュー　→　「オプション」　→　「ソース編集」
　　　　　→　「文字下げ」で指定を変更できます。
　　　　また、FirefoxのアドオンのFirebugを立ち上げればコーディングのエラーが判りますし、
　　　　階層構造もはっきり判ります。 FirefoxもそのアドオンのFirebugも無料ですので、ダウンロード
　　　　して是非試してみて下さい。

Step-14: これから出来あがったレイアウトの中に内容物を入力して行きます。

　　<div id="ｈｅａｄｅｒ">に見出し文字と写真とその説明文を入力し、それらにCSSを設定する。
　　　　☆　メニュー「挿入」　→　「段落」　→　「見出し２」　→　＜”奥の細道紀行”を入力＞
　　　　☆　<h1>〜</h1>の中に楕円形に切り抜かれた芭蕉像を挿入する事が重要　
　　　　　　（imgを裸で入れない事が重要！）
　　　　　　　メニュー「挿入」　→　「段落」　→　「見出し１」　→　「挿入」　→　「画像ファイル」　→　
　　　　　　　＜芭蕉像指定＞
　　　　☆　メニュー「挿入」　→　「段落」　→　「標準」　→　＜”深川の墨田川畔に建つ芭蕉像”
　　　　　　　を入力＞
　　　　☆　芭蕉像が中央揃いされ、下段の写真説明との間隔を付けるCSSを設定する
　　　　　　　h1 { text-align: center; margin-bottom: 20px;}　　　
　　　　☆　見出し文のCSSを設定する
　　　　　　　#header h2 { font: 36px HGP行書体; font-weight: bold; margin-left;: 20px; color; teal;}
　　　　☆　写真説明を枠内に収めるCSSを設定する
　　　　　　　#header p{ font: 20px HGP行書体; margin-top;: -43px; text-alighn: right; color; teal;} 　
　　　　☆　headerの枠線の角に7ｐｘの丸味を付けるCSSを設定する
　　　　　　　#header　｛border-radius:7px;｝　　　
　　　　☆　写真説明を枠内に収めるCSSを設定する
　　　　　　#header p{ font: 20px HGP行書体; margin-top;: -43px; text-alighn: right; color; teal;} 　
　　　　☆　枠線の角に7ｐｘの丸味を付けるCSSを設定する
　　　　　　#header　｛border-radius:7px;｝　

　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　#header h2 {　　　　　　　　　　　　　　　　　/* ページ見出し”奥の細道紀行”を入れる容器　*/
　　　　　　　　　　　　　font : 36px HGP行書体;
　　　　　　　　　　　　　font-weight : bold;
　　　　　　　　　　　　　text-align : left;
　　　　　　　　　　　　　margin-left : 20px;
　　　　　　　　　　　　　color : teal;
　　　　　　　　　　　　　}
　　　　　　　#header p {　　　　　　　　　　　　　　　　　　/* 芭蕉像の説明を入れる容器　*/
　　　　　　　　　　　　font-size : 22px;
　　　　　　　　　　　　color : teal;
　　　　　　　　　　　　text-align : right;
　　　　　　　　　　　　font-family : "HGP行書体";
　　　　　　　　　　　　margin-top : -43px;
　　　　　　　　　　　　}

Step-15:

　　<div id="yoko_navi">に4個のナビゲーション・メニューをリストとして入力し、
　　それらにCSSを設定する
　　　　☆　メニュー「挿入」　→　「リスト」　→　「番号なしリスト」　→　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　＜”千住から小山へ”を入力＞→　Ｅｎｔｅｒキー
　 　　　　　　　　　　　　　　　　　　　　　　　　　　　→　＜”鹿沼から日光へ”を入力＞→　Ｅｎｔｅｒキー
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 →　＜”玉生から黒羽へ”を入力＞→　Ｅｎｔｅｒキー
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 →　＜”那須から芦野へ”を入力＞→　Ｅｎｔｅｒキー
　　　　☆　メニュー全体を中心揃えして、下線に揃えるCSSを設定する
　　　　　　ul　{text-align : center;　margin-left : 160px;　margin-top : 5px;｝
　　　　☆　ナビ・メニューを横並びにして、下線がない、白抜きの文字にして、適当に配置するCSS

　　　　　　li　{font-size : 16px;　font-weight : bold;　float : left;　display : inline;　list-style-type :
　　　　　　　　none;　color : white;　border : 1px 　　　　solid #999;　width : 130px;　height : 15px;
　　　　　　　　padding : 4px;　margin-top : 0 2px 0 4px;　background-color : teal;
　　　　　　　　text-align : center;　}
　　　　☆　yoko_naviメニューの枠線の角に7ｐｘの丸味を付けるCSSを設定する
　　　　　　｛border-radius:7px;｝　

　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　ul {　　　　　　　　　　　　　　　　　　　　　/* メニュー全体　*/
　　　　　　　　　text-align : center;
　　　　　　　　　margin-left : 160px;
　　　　　　　　　margin-top : 5px;
　　　　　　　　}
　　　　　　　li {　　　　　　　　　　　　　　　　　　　　　/* メニュー項目　*/
　　　　　　　　　font-size : 16px;
　　　　　　　　　font-weight : bold;
　　　　　　　　　float : left;
　　　　　　　　　display : inline;
　　　　　　　　　list-style-type : none;
　　　　　　　　　color : white;
　　　　　　　　　border : 1px solid #999;
　　　　　　　　　width : 130px;
　　　　　　　　　height : 15px;
　　　　　　　　　padding : 4px;
　　　　　　　　　margin-top : 0 2px 0 4px;
　　　　　　　　　background-color : teal;
　　　　　　　　　text-align : center;
　　　　　　　}

Step-16:

　<div id="basho_area">の先頭に「芭蕉エリアの見出し」と6個のcellの写真と写真タイトルと説明を
　　 入力し、それらにCSSを設定する。

　　　　　　　　　　　☆　メニュー「挿入」　→　「段落」　→　「見出し２」　→　＜”奥の細道・深川の巻”を入力＞
　　　　　　　　　　　☆　最初のcellに<h3>〜</h3>入れて、その中に最初の写真を挿入し、
　　　　　　　　　　　　　 改行（<br/）の後写真タイトルを入力する
　　　　　　　　　　　　　 メニュー「挿入」　→　「段落」　→　「見出し3」　→　「挿入」　→　「画像ファイル」　→＜最初の画像指定＞

　　　☆　<div id="basho_area">の残り５個cellに同様にして写真、写真タイトル、詳細説明を入力する
　　　☆　<div id="basho_area">を親枠の中央に配置するCSSを設定する
　　　　　　margin : 0 auto;　
　　　☆　写真の位置をpaddingで決め、その為横幅を調整するCSSを設定
　　　　　　padding-left : 18px;width : 872px;
　　　☆　中に入るfloatする写真を認識するCSSをせっていする
　　　　　　overflow : auto;　
　　　☆　中に入るセルを横並びに配置するCSSを設定
　　　　　　#basho_area .cell{ width : 430px;　float : left;　display : inline; margin-top : 20px; }
　　　☆　写真を入れるh3を介して写真と写真タイトルをcell（セル）の中央に配置するCSSを設定
　　　　　　#basho_area h3{ font-size : 12px; font-weight : normal; color : #cc0000; width : 420px;
　　　　　　 text-align : center; }

　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　h2 {　　　　　　　　　　　　　　/* 見出し　”奥の細道・深川の巻”　*/
　　　　　　　　　　font-size : 30px;
　　　　　　　　　　font-weight : bold;
　　　　　　　　　　color : green;
　　　　　　　　　　text-align : left;
　　　　　　　　　　margin-top : 10px;
　　　　　　　　　　argin-bottom : 10px;
　　　　　　　　　　margin-left : 310px;
　　　　　　　　　　font-family : "HGP行書体";
　　　　　　　　　　width : 400px;
　　　　　　　　　　height : 25px;
　　　　　　　　　}
　　　　　　　#basho_area h3 {　　　　　　　　　　　　/* 写真と写真タイトルを入れる容器　*/
　　　　　　　　　　　　　　　　font-size : 12px;
　　　　　　　　　　　　　　　　font-weight : normal;
　　　　　　　　　　　　　　　　color : #cc0000;
　　　　　　　　　　　　　　　　width : 420px;
　　　　　　　　　　　　　　　　text-align : center;
　　　　　　　　　　　　　　　　}
　　　　　　　.photo_tx t {　　　　　　　　　　　　　　　/* 写真の詳細説明を入れる容器　*/
　　　　　　　　　　　　　　　　font-size : 12px;
　　　　　　　　　　　　　　　　width : 400px;
　　　　　　　　　　　　　　　　color : #cc0000;
　　　　　　　　　　　　　　　　text-align : left;
　　　　　　　　　　　　　　　　margin-top : 5px;
　　　　　　　　　　　　　　　　margin-bottom : 5px;
　　　　　　　　　　　　　　　　padding-left : 10px;
　　　　　　　　　　　　　　　　line-height : 1.4;
　　　　　　　　　　　　　　}
　　　　　　

Step-17:
　　<div id="history_area">の先頭に「深川界隈史跡の見出し」と6個のcellの写真と写真の説明を
　　入力し、それらにCSSを設定する。
　　　　☆　メニュー「挿入」　→　「段落」　→　「見出し２」　→　＜”深川界隈の史跡”を入力＞
　　　　☆　最初のcellに<h3>〜</h3>入れて、その中に最初の最初の写真を挿入する

　　　　　　（imgを裸で入れない事が重要！）
　　　　　　メニュー「挿入」　→　「段落」　→　「見出し3」　→　「挿入」　→　「画像ファイル」　→
　　　　　　＜最初画像指定＞
　　　　☆　写真の後に、<p>〜</p>入れて、その中に最初の最初の詳細説明を入力する
　　　　　　　詳細説明の1行目を写真タイトルとし、改行（<br/）の後詳細説明を入力する
　　　　☆　<div id="history_area">の残り５個cellに同様にして写真と詳細説明を入力する
　　　　☆　<div id="history_area">を親枠の中央に配置するCSSを設定
　　　　　　　margin : 0 auto;　
　　　　☆　中に入る写真の位置をpaddingで決め、その為横幅を調整するCSSを設定
　　　　　　　padding-left : 18px;　width : 872px;
　　　　☆　中に入るfloatする写真を認識させるCSSを設定
　　　　　　　overflow : auto;　
　　　　☆　中に入るセルを横並びに配置し、セルの高さを写真の高い方に揃えるCSSを設定
　　　　　　　#history_area .cell{ width : 420px; float : left; display : inline; margin-left : 10px;
　　　　　　　　margin-top : 10px; height : 150px; }
　　　　☆　写真を入れるh3を介して写真と写真タイトルをcell（セル）の中央に配置するCSS設定
　　　　　　　（imgを裸で入れない事が重要！）　　　　　　　　　　
　　　　　　　#history_area h3 { width : 200px; float : left; display : inline; margin-left : 10px; }
　　　　☆　写真の詳細説明を写真の横に配置するCSSを設定
　　　　　　#history_area p.photo_txt margin-left : 2px; width : 150px; float : left; display : inline;}

　　　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　　h2 {　　　　　　　　　　　　　　/* 見出し　”深川界隈の史跡”　*/
　　　　　　　　　　font-size : 30px;
　　　　　　　　　　font-weight : bold;
　　　　　　　　　　color : green;
　　　　　　　　　　text-align : left;
　　　　　　　　　　margin-top : 10px;
　　　　　　　　　　argin-bottom : 10px;
　　　　　　　　　　margin-left : 310px;
　　　　　　　　　　font-family : "HGP行書体";
　　　　　　　　　　width : 400px;
　　　　　　　　　　height : 25px;
　　　　　　　　　}
　　　　　　　#history_area h3 {　　　　　　　/* 写真と写真タイトルを入れる容器　*/
　　　　　　　　　　　　　　　　　width : 200px;
　　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　　display : inline;
　　　　　　　　　　　　　　　　　margin-left : 10px;
　　　　　　　　　　　　　　　　}
　　　　　　　#history_area p.photo_txt {　　　　　　/* 写真の詳細説明を入れる容器　*/
　　　　　　　　　　　　　　　　margin-left : 2px;
　　　　　　　　　　　　　　　　width : 150px;
　　　　　　　　　　　　　　　　float : left;
　　　　　　　　　　　　　　　　display : inline;
　　　　　　　　　　　　　　　　}

Step-18:
　　<div id="footer">このページ学習の目的と注目点を入力し、CSSを設定する。
　　　　☆　メニュー「挿入」　→　「段落」　→　「見出し４」　→　
　　　　　　　＜”これは<div>によるレイアウトの勉強用・・・・”を入力＞
　　　　☆　メニュー「挿入」　→　「段落」　→　「標準」　→　
　　　　　　　＜”特に中間枠内の写真とその説明文のdivタグによる配置の柔軟性に注目して下さい。
　　　　　　　 ”を入力＞
　　　　☆　「見出し４」のCSSを設定
　　　　　　　#footer h4としたのは他の h4と区別するため
　　　　　　　#footer h4 { font-size : 16px; color : #cc0000; text-align : center; } 　
　　　　☆　<p>〜</p>のCSSを設定
　　　　　　　#footer pとしたのも同様に他の pと区別するため
　　　　　　　#footer p{ font-size : 12px; color : #cc0000; margin-top : 5px; text-align : center; }　
　　　　☆　clear : both;　でこれまでのfloat状態をリセットする

　　　上の設定の後、CSSのソースを表示してみると次のようになっている筈です。

　　　　　　　　#footer h4 {
　　　　　　　　　　　　　　　font-size : 16px;
　　　　　　　　　　　　　　　color : #cc0000;
　　　　　　　　　　　　　　　text-align : center;
　　　　　　　　　　　　　　　}
　　　　　　　　#footer p {
　　　　　　　　　　　　　　　font-size : 12px;
　　　　　　　　　　　　　　　color : #cc0000;
　　　　　　　　　　　　　　　margin-top : 5px;
　　　　　　　　　　　　　　　text-align : center;
　　　　　　　　　　　　　　}