２カラムのページを作ろう　９　今日で完成！

2013年3月10日 18:14 ⋅ Leave a Comment ⋅


 

２カラム……

いよいよ、今日で、完成ですよ！

頑張っていきましょう！



今日は、この続きからです。（サンプルページはこの続きから。）

ＨＴＭＬを入力していく順番は、
・右側メイン部分
・左側サイドメニュー
・フッター
以上です。

では、いきますよ～～～

右側メイン部分のＨＴＭＬ入力＆スタイル指定

右メイン部分構造図

↑↑↑上の通り。
【#box-nakawaku-right】をスタイル指定する、ＤＩＶタグを最初にいれます。

このあたりが、ホームページビルダーの操作上、難しい所です。
難しい時は、ソース画面を併用するのが、一番早い。

・ソース画面からＤＩＶタグを入れる

ＨＰＢ操作画面・タグの入力参考画面

画像のように、ソース画面には、ＤＩＶの終了タグが３つ並んでいます。
それぞれは、注釈で書いている通り、上から、

・ヘッダーの飾りを入れたボックスの終了タグ

・ヘッダー自体の終了タグ

・外枠の終了タグ

です。
右メイン枠のＤＩＶタグを入れるのは、ヘッダー自体の終了タグと外枠の終了タグの間です。
そこにカーソルを合わせ、マイ・アイコンで、ＤＩＶタグを挿入します。

ＨＰＢ操作画面

すると、ＤＩＶタグが入ったことで、ピンクの枠が広がります。
でもこれ、実は、一番外側の枠を選択している状態なのです。

えーー、それって、わかんないよ！！

そう、ちょっと、わかりにくいですよね。

でも、よく見てください。
上の画像は、カットしているので、わかりませんが、ご自分の操作画面を見ると、ピンクの枠は、全体を包んでいるはずです。

ピンクの枠は、それぞれの要素を選択している印なので、今挿入したＤＩＶタグは、こんなに大きいピンク枠には、なりません。
上の画像のピンクの枠の中の一番下辺りに、マウスポインター（矢印）を置きクリックしてみてください。

すると……↓↓↓

ＨＰＢ操作画面・挿入されたタグを選択

ほら、出てきたでしょ！

細いピンクの枠で、今入れたＤＩＶタグが選択されました。
この辺りの操作は、慣れです。

分かりずらければ、【タグ一覧】で選択したり、面倒ですが、右上の赤い囲みのＤＩＶをポチっと開くと「ＤＩＶ属性」と出ますので、それをクリックしさらに「スタイル」という項目をクリックすると、何のスタイル指定されているタグかが、分かります。面倒だから使わないけどね。

と、いうことで、ここに、ＩＤのスタイルを挿入してください。
やり方は、こちらか、こちらを参考に。

・右メインの枠（ボックス）が入った状態

ＨＰＢ操作画面・右フロート挿入画面

ＩＤのスタイルを指定すると、ピンクの枠は、画面右側に寄ります。

これが、フロートですよ！

この後は、サンプルの中身をここに挿入し、見出しＨ２タグとＰタグを入れ、それぞれに、スタイルを指定していきます。

New!
2013/2/10
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
2013/2/11
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
2013/2/12
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
2013/2/13
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
About
当HPへようこそ
どうぞごゆっくり、お楽しみください。
このページは、
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
Profile
当HPへようこそ
どうぞごゆっくり、お楽しみください。
このページは、
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

中身を貼り付けたら、タグを入れたい内容をドラッグし、アイコンでタグを入れ、スタイルを設定の手順です。
こちらか、こちらのページを参考にしてください。

左側サイド・メニューのＨＴＭＬ入力＆スタイル指定

左側サイドメニュー構造図

・外枠のボックスを入れる

ＨＰＢ操作画面・左サイドのＢＯＸ挿入

まず最初に左側のサイドメニューを包み込む外側のボックス【#box-nakawaku-left】を入れます。
やり方は、右メイン部分と同じで、ソース画面で、ＤＩＶタグを入れてください。

入りましたか？

あれ～、入れたはずのＤＩＶのピンク枠がないよ？？

画面の上の方を見てください。↓↓↓ほら、こんな感じよ！

ＨＰＢ操作画面・左サイドボックス挿入

入れたＤＩＶタグにスタイル【#box-nakawaku-left】を指定してください。
あとは、中身を入れてから、Ｈ３タグとリストタグを入れます。
中身は、よかったら、こちら↓↓をそうぞ。

menu1
おおるり
やまげら
きつつき
ごじゅうから
ライチョウ
こんどる
ももんが
キングギドラ
menu2
Blog
Link
保護活動

・Ｈ３タグ入力

ＨＰＢ操作画面・左サイドメニューＨ２タグ

ドラッグして、Ｈ３タグをポチ

・リストタグ入力

ＨＰＢ操作画面・左サイドメニューリストタグ挿入

ドラッグして、マイアイコンの番号なしリストをポチ。

リストタグについての詳細下の記事をご参照ください。
・リストタグの装飾
・リストタグの装飾　２

・リストタグを入れ終わると、こんな感じ

ＨＰＢ操作画面・左サイドメニュー

なんか違うよ？？？

これで、いいんですよ。

スタイルの設定は、Ａタグに指定しているので、リンク先を入れれば、ちゃんと表示されます。
リンク先を地道に入れてみてください。
入れるアドレスがないよって方は、aでもbでもcでも記号でも、何か入れておけば、大丈夫です。

どうですか？　形になってきたでしょ？

続いて、下の部分にもＨ３タグとリストタグを入れます

フッターのＨＴＭＬ入力＆スタイル指定

いよいよ最後ですよ！

・ＤＩＶタグの挿入

ＨＰＢ操作画面・フッターの作成

同じように、ソース画面から入れてね。

あれ？　フッターのピンク枠がないよ？

ＨＰＢ操作画面・フッター

操作している画面の上を見てください。

ほら、いるでしょ？

操作しにくいので、さっさとスタイル【#box-nakawaku-left】を指定しちゃってください。

ＨＰＢ操作画面・フッター

あとは、文字をいれて完成です。

HTMLはこんな感じ↓↓

<body>
<div id="box-sotowaku">

<!--======================▼ヘッダー▼-->
<div id="header">
<div class="head">
<h1></h1>
<p class="head-p"></p>
</div>
</div>
<!--======================中枠ここから-->
<!--======================▼右メイン▼-->
<div id="box-nakawaku-right">

<h2></h2>
<p class="nakawaku-p2"></p>

<h2></h2>
<p class="nakawaku-p"></p>

<h2></h2>
<p class="nakawaku-p"></p>

</div>
<!--======================▲右メインここまで▲-->
<!--======================▼左サイド／メニュー▼-->
<div id="box-nakawaku-left">

<h3></h3>
<ul>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
</ul>

<h3></h3>
<ul>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
</ul>

</div>
<!--======================▲左サイド／メニューここまで▲-->
<!--======================▼フッター▼-->
<div id="footer"></div>

</div>
</body>

こちらのページと同じようになりましたか？

出来た！

 かな？

出来たよ！方は、クリックしてね！
ブログランキング・にほんブログ村へ

 

Posted in: ２カラムのページ作成（簡単） ⋅ Tagged: , ,

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Post Navigation