１カラムの簡単なページを作る　１３　HTMLタグを挿入してスタイルを設定する(1)

これから、下記の図のような箱を作っていきます。
順番は、
一番外の箱　→　ヘッダー入れて、その中に、タイトル　→　メニュー　→　
→中の箱見出し入れて、その中に、見出しとコメント（繰り返し）　→　フッター

ポイントです。
改行キーに注意してください。

一番外側の箱を入れる

「１カラムの簡単なページを作る　１１　フッタ―とアンカー（リンク）の設定」が、
終わったところからのスタートです。

↓スタイルの設定が全て終わった状態の画面です。

カーソルは、画面の一番左上の端にあること
そして、BODYとなっていることを確認してください。
（この属性を表すアイコンは、普通はもう少し右側にあると思います。今は、画面を縮めていますのでこの位置にあります）

この状態でない場合は、
キーボードのバックスペースをこうなるまで、押してください。

この状態で、レイアウトコンテナ【ＤＩＶ】を挿入します。

ツールバーの挿入一番下にあるその他　レイアウトコンテナを押します。

するとこうなります
薄い線が（頼りないけど）
レイアウトコンテナ（DIV）が、入っている印です。

操作している画面上では、全くわかりませんが、
今、一番外側の箱に、スタイルの設定が、入った状態なのです。

つづいて、文章を入れます。
↓このサンプルの文章を、ドラッグして、右クリックで、コピーしてください。

ホームページビルダーに初挑戦
INDEX | TOP | GALLERYⅠ | GALLERYⅡ | LINK | BLOG
New !
先日の旅行の写真をUPしました。
About
当HPへようこそ
どうぞごゆっくり、お楽しみください。
このページは、
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
Profile
当HPへようこそ
どうぞごゆっくり、お楽しみください。
このページは、
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
Menu
メニューについて・・・・・・・
GALLERYⅠ
花の写真を中心にしています。
GALLERYⅡ
風景が中心です。
Copyright (C) 2012 RUBY All Rights Reserved.

ここに、コピーした文章を貼り付けます。

こんなかんじです。
いま、どういう状態かといいますと、
この画像の薄いブルーの四角＝外側の大きな箱＝【#box-sotowaku】の設定がされたＤＩＶです。
その外側の大きな箱に、文章が入った状態です。

続いて、中の箱を入れていきます。

ヘッダーの部分をつくる

画像のように、ドラッグして、その状態で、レイアウトコンテナ【ＤＩＶ】を挿入してください。
ツールバーの挿入を開いてその他 レイアウトコンテナ

薄い枠が見えると想います。
これで、ヘッダー部分をつくるレイアウトコンテナ（ＤＩＶ）が入りました。
このレイアウトコンテナ（ＤＩＶ）に、作ったスタイルの装飾（ＩＤ）を入れます。
選ぶＩＤの名前は、【#box-header】です。

作業は、先ほどと同じです。

この先は、上の囲みの中を参考にして行ってください。

ヘッダーの部分は、はいりましたか？

次は、ヘッダーの中に、見出し【Ｈ１】を入れます。

図のように、文字の部分をもう一度、ドラッグしてください。
その状態で、見出し１（１）のタグ【Ｈ１】を挿入してください。

（前回やった、見出し（Ｈ１）の挿入の仕方を思い出してくださいね）

・やり方１
アイコンから入れる。▼開いて選んで押すだけ

・やり方２
ツールバーの挿入を開いて、段落から、見出し１（１）

これで、ヘッダー部分が出来あがりました。