素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

December 29, 2005

HTML教えます　その13

(2)

テーマ：ホームページ作成の悩み(550)

カテゴリ：ホームページ作成教室

■　「HTML教えます」ブログ方針

こんなデザインもいかがでしょう？

右下にブログランキングのリンクバナーなどを貼り付けておいた

こういうテンプレートを作っておけば

毎回このHTMLををコピペするだけで

同じデザインで楽に書くことが出来ますし

自分のブログの統一感も生まれます。

上下左右を囲んでいる背景画像はどんなものでもOKです。

自由にどんなものでも選ぶことが出来ますし

この書き込んでいる背景（現在は白）もまた別の背景にすることが可能です。

色々なデザインの可能性を含んでいるのが

このHTMLタグなのです

私もまだまだ勉強中ですが

出来る範囲で

みなさんにお伝えして行きたいと思っていますので

これからもどうぞよろしくお願いします。

HANMANI情報局　局長

ブログランキングに参加しておりますので良かったらクリックお願いします　

いつのものような表のセットで説明すると、入りきらなかったのでポンっともってきました

あ、ちなみにテーマは前回と同じで「 スクロール 」ですので

上の例は、少し上級テクニックを盛り込んでいまして、なかなかいきなり作るのは難しいので…

一つずつ部分部分に分けて説明したいと思います。

まず、スクロールしたい文章の周りをデザインすることからはじめたいと思います。

例でいうと、黒くなっている部分なんですが

どうやっているのでしょうか？

<table> タグを用いているんです！

↓に見えるのような３×３の表があります

*	*	*
*	*	*
*	*	*

この表を作りだすHTMLは

何度もいいますが、表関係<table>タグのHTMLをコピペする際は<table><tr><td>などの>と<の隙間をなくし全て一行にしてください！

このHTMLの中で赤くしましたところは注意ポイントです！

今までにチラッとは説明してきましたが、ここできちんと説明しておきます

<width="○○"> と <height="○○"> タグは、性質は同じもので、お互い「 長さを指定 」するものです

<width>は横幅を指定し、<height>は高さを指定します

そして、この指定の方法には二通りあります

これ以上説明すると、本題に戻れなくなりそうなので、まだ少し疑問がある方は、コメントか掲示板まで質問等お願いします。

本題に戻りますが…

この３×３の表の真ん中に大きくとった部分がありますよね？

ここにスクロールのHTMLを持ってきてやればいんですよ

実際にやってみるのが一番わかりやすいのでやってみます！

*	*	*
*	こんなデザインもいかがでしょう？右下にブログランキングのリンクバナーなどを貼り付けておいたこういうテンプレートを作っておけば毎回このHTMLををコピペするだけで同じデザインで楽に書くことが出来ますし自分のブログの統一感も生まれます。上下左右を囲んでいる背景画像はどんなものでもOKです。自由にどんなものでも選ぶことが出来ますしこの書き込んでいる背景（現在は白）もまた別の背景にすることが可能です。色々なデザインの可能性を含んでいるのがこのHTMLタグなのです私もまだまだ勉強中ですが出来る範囲でみなさんにお伝えして行きたいと思っていますのでこれからもどうぞよろしくお願いします。 HANMANI情報局　局長	*
*	*	*

<table border="1" bgcolor="#000000" width="60% align="center"">
<tr height="20" ><td width="5%" bgcolor="#ffffff"></td><td width="50%" bgcolor="#ffffff"></td><td width="5%" bgcolor="#fffff"></td></tr>
<tr height="140" ><td width="5%" align="center" bgcolor="#ffffff"></td><td width="50%" bgcolor="#ffffff">
<DIV style="height:140px; width=:600px; overflow-y:scroll;">
こんなデザインもいかがでしょう？

右下にブログランキングのリンクバナーなどを貼り付けておいた

こういうテンプレートを作っておけば

毎回このHTMLををコピペするだけで

同じデザインで楽に書くことが出来ますし

自分のブログの統一感も生まれます。

上下左右を囲んでいる背景画像はどんなものでもOKです。

自由にどんなものでも選ぶことが出来ますし

この書き込んでいる背景（現在は白）もまた別の背景にすることが可能です。

色々なデザインの可能性を含んでいるのが

このHTMLタグなのです

私もまだまだ勉強中ですが

出来る範囲で

みなさんにお伝えして行きたいと思っていますので

これからもどうぞよろしくお願いします。

HANMANI情報局　局長

</DIV>
</td><td width="5%" bgcolor="#ffffff"></td></tr>
<tr height="20" ><td width="5%" align="center" bgcolor="#ffffff"></td><td width="50%" bgcolor="#ffffff"></td><td width="5%" bgcolor="#ffffff"></td></tr>
</table>

この青い部分がスクロールで指定される文章の範囲です

すなわち、この<div style…></div>囲まれた所に入力した文章が上のようになるわけですね

最後の仕上げとして、スクロールの文章以外のセルを黒くしてみましょう

これは「 HTML教えます　その９」で講義した内容ですね

あと、この日記の文字限度の10000文字を越してしまったので表記できません…

と、いうことで今回は表記しないので頑張ってみて下さいね

…

どうですか？できましたでしょうか？

この白い部分を一番上の例のような画像に、または別に色にするというのは、また別の機会に説明します

と、いうことでまず第一段階として終了です

これから何回かかけて完成に至りたいと思います

今日は以上です！

お気に入りの記事を「いいね！」で応援しよう