January 1, 2006
テーマ： ホームページ作成の悩み(545)
カテゴリ： ホームページ作成教室
■ 今年もヨロシク
A HAPPY NEY YEAR！
今年からもどんどんHTMLを教えさせて頂きますので
今年もどうぞヨロシクお願いします
…っとこのように
この「スクロール」のデザインが作れるようになるまで
ここに、簡単にですが
ちょっこっとコメントしていきますので
お暇な人は読んで下さいね 「゜
HANMANI情報局 局長
今年からもどんどんHTMLを教えさせて頂きますので
今年もどうぞヨロシクお願いします
…っとこのように
この「スクロール」のデザインが作れるようになるまで
ここに、簡単にですが
ちょっこっとコメントしていきますので
お暇な人は読んで下さいね 「゜
HANMANI情報局 局長
ブログランキングに参加しておりますので良かったらクリックお願いします
スクロール機能の応用 」です
つまりは上のような例のデザインが作れるようになるということです
前回、字数制限のため、前回の説明が最後まで出来なかったので…
ちなみに前回というのは コチラ
今回の最初に説明します
| * | * | * |
| * | こんなデザインもいかがでしょう？
右下にブログランキングのリンクバナーなどを貼り付けておいた こういうテンプレートを作っておけば 毎回このHTMLををコピペするだけで 同じデザインで楽に書くことが出来ますし 自分のブログの統一感も生まれます。 上下左右を囲んでいる背景画像はどんなものでもOKです。 自由にどんなものでも選ぶことが出来ますし この書き込んでいる背景（現在は白）もまた別の背景にすることが可能です。 色々なデザインの可能性を含んでいるのが このHTMLタグなのです 私もまだまだ勉強中ですが 出来る範囲で みなさんにお伝えして行きたいと思っていますので これからもどうぞよろしくお願いします。 HANMANI情報局 局長 |
* |
| * | * | * |
前回に問いかけた「 最後の仕上げとして、スクロールの文章以外のセルを黒くしてみましょう 」ということの答えなんですが
どうでしょう？どうやったか分かりますか？
<bgcolor="#ffffff"> を <bgcolor="#000000"> に変えればいいだけです
このHTMLを紹介すると、また字数制限をオーバーしちゃいますので勘弁を…
と、復習が終わったところで今回の詳細な「テーマ」を発表したいと思います
今回のテーマは「 スクロールの文章の下側に画像や文章を入れる 」事です
つまり、一番上の例で言うと…
ブログランキングに参加しておりますので良かったらクリックお願いします
という部分！
何か複雑なのかな？っと思っている人もいるでしょうが実はこれも簡単！
２）まとめた一番下のセルに、文章や画像を書き込む
たったこれだけです
ただ「 ３×３の表の３列目（横方向）を１つのセルにまとめる 」という部分は知識がなかったら出来ませんよね？
と、いうことでそういう表が作れる例をやってみます
HTML
<table border="1" bordercolor="#000000" cellspacing="0">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td colspan="3" >789</td></tr></table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td colspan="3" >789</td></tr></table>
表示
1
2
3
4
5
6
789
<colspan="3"> というタグが 横方向のセルを１つにまとめます
ちなみに、縦方向のセルを１つにするタグもあるんですが
それはまた別の機会に説明したいと思います
この「セルをまとめる」機能が使えれば、一番に書き込むことができますが…
このままでは白と黒がちぐはぐなので、表の中央を透明色（背景と同じ）、それ以外を黒、そして下の欄に書き込む文字を白で、適当な例をやってみます
HTML
<table border="1" bordercolor="#000000" cellspacing="0">
<tr><td bgcolor="#000000" >1</td><td bgcolor="#000000" >2</td><td bgcolor="#000000" >3</td></tr>
<tr><td bgcolor="#000000" >4</td><td>5</td><td bgcolor="#000000" >6</td></tr>
<tr><td colspan="3" bgcolor="#000000" > <fontstyle="color:#ffffff;"> 789 </font> </td></tr></table>
<tr><td bgcolor="#000000" >1</td><td bgcolor="#000000" >2</td><td bgcolor="#000000" >3</td></tr>
<tr><td bgcolor="#000000" >4</td><td>5</td><td bgcolor="#000000" >6</td></tr>
<tr><td colspan="3" bgcolor="#000000" > <fontstyle="color:#ffffff;"> 789 </font> </td></tr></table>
表示
1
2
3
4
5
6
789
こんな感じですね
そして、この表の中央に前々回、前回で説明したスクロールのタグを
サイズを調整しながらいれ
また、それにあわせて、この表のサイズも調整していくと一番上の例のような感じになっていきます
まぁまだこれだけでは完成できません
と、あといる知識は…
「画像やテキストの上下関係の配置指定方法」
「背景に画像を持ってくる方法」
「画像をクリックすると指定した場所へリンクさせる方法」
などです
これらは基本の基本の基本ですので、次の「その15」「その16」「その17」で、一時、この「テーブル」のテーマを離れ、この３つのテーマをやっていこうと思います
と、いうことで本日は以上！
お気に入りの記事を「いいね！」で応援しよう
[ホームページ作成教室] カテゴリの最新記事
-
HTML教えます その36 February 12, 2006 コメント(6)
-
HTML教えます その35 February 10, 2006
-
HTML教えます その34 February 7, 2006 コメント(1)
【毎日開催】
15記事にいいね！で1ポイント
PR
Freepage List
HANMANI
あくまでも趣味の範囲で、お家で美味しい珈琲を飲もうと頑張る人を応援するブログサイトです。
Category
© Rakuten Group, Inc.
