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

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

a_bl1208.gif

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

一番外側の箱を入れる

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

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

bl_1step_12_11.gif

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

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

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

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

bl_1step_12_12.gif

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

レイアウトコンテナ【DIV】に、作ったスタイルを設定する手順です

ここからの作業は、このあと繰り返し行います。
手順は、その都度、書きませんので、この四角の枠内の手順を参考にしてください。

bl_1step_12_13.gif

図の通りに押してください

bl_1step_12_14.gif

この画面が開きますので、スタイルを押します

bl_1step_12_4.gif

こんな画面が開きます。

定義済みIDの指定(1)の右の端のをプルダウンします。

すると、作ってきた、IDが並んでいると思います。

bl_1step_12_5.gif

外の箱なので、#box-sotowakuを探して選んでください。
そして、OKです

bl_1step_12_15.gif

こんな画面になります。
OKを押します。

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

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

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

bl_1step_12_16.gif

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

bl_1step_12_17.gif

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

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

ヘッダーの部分をつくる

bl_1step_12_18.gif

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

bl_1step_12_19.gif

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

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

bl_1step_12_20.gif

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

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

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

bl_1step_12_21.gif

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

(前回やった、見出し(H1)の挿入の仕方を思い出してくださいね)

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

・やり方2
ツールバーの挿入を開いて、段落から、見出し1(1)

bl_1step_12_23.gif

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


 
 

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

  1. まとめteみた.【1カラムの簡単なページを作る 13 HTMLタグを挿入してスタイルを設定する(1)】

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

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Post Navigation