親方.info
もっと楽しく!
インターネットショッピング!
便利なページを創りましょう!
CONTENTS
◆Top
◆Shopping
◆オンラインカジノ
◆アフィリエイトを始めよう!
◆ホームページ作成
◆フリー素材集
◆懸賞情報をチェック
◆Search&Link
◆ホームページ製作
◆Gallery
◆BBS
◆Fishing
◆リンク集
◆Profile
◆ゲームセンター
 
楽天フリマ
古本・ブランド・PC等300万商品を激安ショッピング!
サーチ:
Keyword:
Amazon.co.jpアソシエイト

 
簡単ホームページ作成講座

※用語解説のリンクにつきましては、「 IT用語辞典 e-Words (株式会社インセプト)」 様の許可を得てリンクしています。 下記の検索窓もご利用ください。
 
IT用語検索
 |INDEX|6|
罫線をひく
 
 横に簡単に線をひくには、<HR>タグを使います。簡単に区切りをつけたい時に便利なタグです。
Sample
<HTML>
<HEAD>
<TITLE>罫線をひく1</TITLE>
</HEAD>
<BODY>
横罫線をひくと、見た目の区切りが簡単です。
<HR>
これがデフォルトで、属性をつけられるよ。
<HR>
</BODY>
</HTML>
25.html
 上記のように、何も属性を指定しないと、2ピクセルの太さの罫線がページいっぱいにひかれます。HRの属性には、太さ、長さ、位置、影をつけない等を指定できます。色も一応指定できますが、対応していないブラウザもありますので、注意してください。
Sample
<HTML>
<HEAD>
<TITLE>罫線をひく2</TITLE>
</HEAD>
<BODY>
これは何も指定無し。
<HR>
太さを指定するとこんな感じ。
<HR SIZE="5">
長さを指定するとこんな感じ。
<HR WIDTH="50">
長さはパーセントでも指定できます。<BR>
この場合、ページの大きさに比例するよ。
<HR SIZE="50%">
長さを指定したら、位置も指定しよう。<BR>
何も指定しなければ、中央揃えです。敢えて書けば、
<HR WIDTH="50" ALIGN="CENTER">
次は左寄せ。
<HR WIDTH="50" ALIGN="LEFT">
次は右寄せ。
<HR WIDTH="50" ALIGN="RIGHT">
影を付けないとこんな感じです。
<HR NOSHADE>
あまり変わらないかな?
<BR><BR>
色を付けるとこんな感じ。
<HR COLOR="#FF0000">
</BODY>
</HTML>
26.html
 色つきの罫線をひく場合は、基本的に画像を使って表現するのが殆どです。これは、COLOR属性非対応のブラウザで見ても同じように見せたいからなのです。画像を表示しない設定のブラウザもありますが…。
 画像を使うと言っても、例えば700ピクセルの長さの罫線をひくのに、わざわざ700ピクセルの長さのものを用意する事はしません。1ピクセル×1ピクセルの画像を用意して、WIDTHとHEIGHT属性を使って引き伸ばすという方法をとるのが普通です。前章では、イメージサイズを属性で拡大すると荒れてしまうのでやめるように書きましたが、単色であればあまり気にしなくても大丈夫です。
 1×1 ピクセルの画像なら、大体50バイト位のサイズになると思います。ページを表示する際にサーバにアクセスし、ダウンロードしてくる画像は 1×1 ピクセルの小さい画像だけです。ブラウザに表示される時は引き伸ばされて大きい画像に見えるわけです。最近は高速ブロードバンド全盛ですので、あまり気にしなくなってきましたが、大きい画像は、ダイヤルアップ接続の頃はタイムアウトエラーの原因になっていました。画像サイズはなるべく小さくする事を心がけます。
 この方法なら、画像を一つ用意すれば、自由に引き伸ばしできるので、便利ですね。ソースは下に書いておきます。 1×1 ピクセルの画像はここを右クリックして「対象をファイルに保存」で img フォルダに保存してください。 line.gif という名前です。
Sample
<HTML>
<HEAD>
<TITLE>罫線をひく3</TITLE>
</HEAD>
<BODY>
これは普通の罫線です。
<HR>
<BR>
画像を使って赤い罫線をひいてみます。
<BR><BR>
<IMG SRC="img/line.gif" WIDTH="500" HEIGHT="1">
<BR>
高さも変えて、太くして見ましょう。
<IMG SRC="img/line.gif" WIDTH="500" HEIGHT="10">
<BR>
あまり色が荒れてるイメージはないでしょ?
</BODY>
</HTML>
27.html
※右段の<MARQUEE>タグのネットスケープ7での動作確認。
・BGCOLOR
・ALIGN
・HSPACE
・VSPACE
・BEHAVIOR=”SLIDE”
・LOOP
上記の属性は無視されるようです。

 ホームページを運営するようになったら、色々な環境でテストするのが好ましいです。WINDOWSとMacをテストするのは難しいかもしれませんが、インターネットエクスプローラーとネットスケープは無料で手に入りますので、できれば両方で見てみましょう。ダウンロードは以下よりできます。
 
インターネットエクスプローラー
インターネットエクスプローラー
 
ネットスケープ
ネットスケープ
テキストの位置を指定しよう
 
 左のページに ALIGN の属性が出てきましたので、文字を左揃え、中揃え、右揃えにする方法をご説明します。左揃えはデフォルトですので、特に指定する必要はありません。<P>(2章参照)タグ、<H>(3章参照)タグ、<DIV>タグに、ALIGN="(LEFT)・CENTER・RIGHT"で指定します。通常
DIVタグに指定する事が多いようですが、用途にあわせて使ってください。
Sample
<HTML>
<HEAD>
<TITLE>行揃えをする</TITLE>
</HEAD>
<BODY>
最初はPタグでやってみます。<BR>
改行の幅が大きいかな?
<P ALIGN="LEFT">これは指定しなくて良いです。</P>
<P ALIGN="CENTER">
中揃え<BR>
途中で改行しても大丈夫です。
</P>
<P ALIGN="RIGHT">右揃え</P>
<HR>

次はHタグに付けました。<BR>
この場合文字の大きさも変えられるので便利?
<H1 ALIGN="LEFT">
これは指定しなくて良いです。</H1>
<H2 ALIGN="CENTER">
中揃え<BR>
途中で改行しても大丈夫です。
</H2>
<H5 ALIGN="RIGHT">右揃え</H5>
<HR>

次はDIVタグに付けました。<BR><BR>
<DIV ALIGN="LEFT">
これは指定しなくて良いです。</DIV>
<DIV ALIGN="CENTER">
中揃え<BR>
途中で改行しても大丈夫です。
</DIV>
<DIV ALIGN="RIGHT">右揃え</DIV>
</BODY>
</HTML>

28.html
 PやHで行揃えを行う場合、終タグの後に一行入ってしまいます。更に、Hタグは太字になってしまいます。これらをしないためには、DIVタグを使うと良いでしょう。
 ページのレイアウトとして、上記の方法を説明しましたが、あまり見やすいとは言えないですね。あくまでも、簡単な方法として覚えてください。ALIGNはこの後にも出てきます。
  実際にページ作りのレイアウトは、後ほど説明する「テーブル」という手法を多様します。簡単に言ってしまうと、表のようなものですが、テーブルでは各セルごとに ALIGN 属性を設定できます。設定の仕方は同じですので、ここで覚えてしまいましょう。このページも複数のテーブルを組み合わせて作られているのですが、小見出しは中揃え、Sample は右揃えだと分かると思います。

 テキストの位置を指定するのに便利なタグを紹介しましょう。HTMLソースに書いたとおりに文字を表示をさせるタグです。ソースのイメージどおりに空白スペースや、<BR>タグを入れなくても改行してくれます。それが<PRE>タグです。
Sample
<HTML>
<HEAD>
<TITLE>ソースをそのまま表示させる</TITLE>
</HEAD>
<BODY>
<PRE>
  テキストエディタに入力したとおり、
改行タグ       とか入れなくても
  そのまま、
      自由に表示されます。
い       で
 ろ     が き
  ん   と   そ
   な こ      うだね。
</PRE>
</BODY>
</HTML>
29.html
 如何ですか?なかなか面白いタグですね。実際にテキストエディタ上で(ほぼ)見たとおりに表示されます。
 面白いのをもうひとつ。i-mode等でよく使われるもので、文字がスクロールする<MARQUEE>タグです。ネットスケープは非対応でしたが、7からはほぼ動作します。
Sample
<HTML>
<HEAD>
<TITLE>文字をスクロールさせる</TITLE>
</HEAD>
<BODY>
<MARQUEE>
スクロール
</MARQUEE>
何も指定しないと右から左に文字が流れます
</BODY>
</HTML>
30.html
 このタグは属性がいっぱいあります。
HEIGHT・WIDTH属性。文字が流れる部分を一つの帯だと思ってください。高さと幅を指定できます。HEIGHT="50"(ピクセル指定)又はHEIGHT="50%"(パーセント指定)ができます。今は、ALIGN属性により、top 上段、middle 中段、bottom 下段、の指定は無視されるようなので、高さはあまり指定しても意味が無いかも知れません。
BGCOLOR。背景の色を設定できます。
HSPACE(横マージン)・VSPACE(上マージン)。左からの横マージンと、上からのマージンをピクセルで指定します。HSPACE=”100”なら横から100ピクセルの位置。
BEHAVIOR=scroll slide alternate を指定できます。デフォルト(指定無し)は scroll で、端から端への動きを繰り返します。slide は、端から出て、反対側にくると停止します。alternate は、移動を繰り返します。
DIRECTION。どちらの端から出るかを指定します。デフォルト(指定無し)は左に流れる left です。DIRECTION="right"とすれば、左から出ます。
LOOP。回数を指定します。2回で止めたければ”2”を指定します。何も指定しなければ無限に表示しますが、”-1”または、”infinite”を指定しても無限です。
SCROLLDELAY。スクロールの速さを調節します。何も指定しないと”85”です。85より値を大きくすると遅く、小さくすると早く動きます。
SCROLLAMOUNT。これも速さを調整しているように見えます。実は再描画する距離を指定しています。デフォルトは”6”で、小さくすると移動距離が少ないので遅いように、大きくすると早く移動しているように見えます。
Sample
<HTML>
<HEAD>
<TITLE>文字をスクロールさせる2</TITLE>
</HEAD>
<BODY>
<MARQUEE HEIGHT="100" WIDTH="300" VALIGN="middle" BGCOLOR="FF0000">
高さ、横幅、中段、色を指定。中段を指定しても上段に出てるでしょ?
</MARQUEE><br>
<MARQUEE WIDTH="300" HSPACE="100" BGCOLOR="FF0000">
右のマージンを100ピクセル取ってみました。
</MARQUEE>
<MARQUEE BEHAVIOR="scroll">
スクロール
</MARQUEE>
<MARQUEE BEHAVIOR="slide">
右から出て左端で止まります。
</MARQUEE>
<MARQUEE BEHAVIOR="alternate">
行ったり来たりします。
</MARQUEE>
<MARQUEE DIRECTION="right">
左から右に流れます。右に行くからright
</MARQUEE>
<MARQUEE LOOP="2">
2回で止まります。
</MARQUEE>
<MARQUEE SCROLLDELAY="30">
早いよ!1
</MARQUEE>
<MARQUEE SCROLLDELAY="200">
遅いよ!1
</MARQUEE>
<MARQUEE SCROLLAMOUNT="10">
早いよ!2
</MARQUEE>
<MARQUEE SCROLLAMOUNT="3">
遅いよ!2
</MARQUEE>
</BODY>
</HTML>
31.html

INDEX|6|

Copyright(c)2004 oyakat All rights reserved