HP作成支援講座

ここではコミュニティーでHPを作成なさる場合に役立つ必要最低限のHTMLタグの基本を紹介しています。
永遠にβバージョンですのでご要望などにより追加していきます。
Q&Aのページとあわせて活用してください。

テキストエディタ等で次のように打ち込んでみてください。

<html>
<head>
<title>
左上に表示される文字
</title>
<head>
<body>
本文の内容
</body>
</html>

ここまでです。ちなみにこの「タグ」は半角英数で入力しないと働きません。「ブラウザの左上に表示される文字」と「本文の内容」は自由に書き換えてみてください。そして、ファイルメニューのところの名前をつけて保存を選んで、任意のファイル名で保存してください。
パソコンに詳しい方はお分かりかと思いますが、拡張子といわれる、ファイルの種類をあらわす
ものが.htmに書き換えられていますね。これはＨＰの文書、適切にいえばＨＴＭＬ文書だということを
パソコンに判別させるためのものです。
そのファイルを開いてみます。するとこうなります。できた方は本文の内容をいろいろ書き込んだりして遊んでなれるといいと思います。ちなみに、<html>はここから</html>の範囲はＨＴＭＬ文章だということを示しています。
<title>～</title>の意味は、この範囲は左上に表示されるタイトルだということを表しています。
ここのページの場合は<title>ＨＰ作成支援</title>と入力されているはずです。
理解するまで練習することをおすすめします。
<body>～</body>ここに表示したい本文の内容を入れます。

文章を改行したい場合は<br>と入力してください。すると改行されるはずです。改行してさらにもう一行開けたい場合には<P>タグを入力してください。
文字位置には左寄りや、真ん中より、右寄りなどがあります。上から順に左、中、右の順番で説明していきます。

リンク関連

ここではリンクしたいファイル名をtest.htmlとして解説いたします。
また、test.htmlはhttp://yahoo.co.jpなどのurlでも使うことができます。

と記述してください。そして、ブラウザで確認してみると、「testへのリンク」が青くなってアンダーラインが引かれているはずです。このアンダーラインは以下のように記述すると消すことができます。

と記述してください。文字がシアンカラーになりましたね。"#00ffff"の部分は自由に変更できます。文字パレットについてはフォントのところでご説明いたします。
画像にリンクを張るには

<a href="ファイル名またはURL"><img src"画像ファイル名"></a>です。

しかし、この場合、枠として青い線が回りにつきます。この線を消すには以下のように記述してください。

<a href="ファイル名またはURL"><img src="qa1.gif" border="0"></a>です。

画像関連

これの上にマウスのポインタを持っていって右クリック。「名前をつけて画像を保存」を選らんで
保存先を決定。ファイル名はqa1.gifとなっているはずです。
では、画像を張りましょう。どこでもいいので次のように記述してください。

このタグにはタグ閉じ（/）はいりません。ちなみにheightは高さを表し、widthは横幅を示しています。なぜこんなことをするのかというと、読み込みのときに少し早くなるからです。
altというのは代替テキストといって目に障害のある人も音声でネットサーフィンを楽しんでいるので画像の意味をお知らせするためのもです。具体的に見るにはずっと画像の上にマウスのポインタを置いて動かさなければ見ることができます。試しに「画像」の上にマウスのポインタを置いて３秒くらい動かさないで見てください。すると、代替テキストに「Q&A」と出てくるのがわかります。よく分からない人はこのページのソースと言うものを「表示」ボタンから見ることができるので（どのページのソースでも自由に見ることができます。）
見て参考にして見ていただくといいでしょう。

実際には画像をアップしないといけませんので、この画像に関しては、

このようになります。ファイル名だけ張り付けても見れませんので、ご注意ください。

「.jpg」はＪＰＥＧというファイルの形式です。インターネットで利用できる画像ファイルの形式には、ほかに拡張子が「.gif」のＧＩＦと言う形式を使うことができます。ＪＰＥＧは圧縮の自由度が高く、解像度も高いです。その点ＧＩＦは圧縮してない状態ではＪＰＥＧより軽いですが、ＪＰＥＧより画像の質は落ちます。

ここでborder="0"が出てきますが、これはリンクしたときの枠線を消すために入れています。

文字修飾関連

のように入力します。
固定幅と言うのもあり、これは「、」や「。」などの幅が少ない文字でも「あ」などの通常の文字と同じ幅の文字としてブラウザに表示させることができます。

でできる下線もあります。リンクと間違いやすいので気をつけてください。

次に「文字のサイズを変える」です。これを使えば文字の大きさを通常サイズ以外の６サイズに変えることができます。基本は

です。「*」には１～６の数字が入ります。数字が大きいほど文字が大きくなります。また通常のフォントのサイズは３になっております。

<font size="6">xxx</font>
<font size="5">xxx</font>
<font size="4">xxx</font>
<font size="3">xxx</font>
<font size="2">xxx</font>
<font size="1">xxx</font>

「#??????」についてですが、000000～FFFFFFまでの１６進数で表します。左から二つづつ組でRGB（赤、緑、青）となっています。「#000000」は赤、緑、青どれも０なので黒になります。逆に「#FFFFFF」にすると全部の色がついているということで、光の三原色に基づいて白になります。また、数字ではなく色の名前で色を指定することも可能です。
色の名前で使えるものはこちらに紹介させていただきます。

これが箇条書きのソースです。<UL>ではじまって<LI>で箇条書きの●が出せます。<LI>が終わったら</UL>でタグ閉じしてください。

次は文字を左右に動かす方法です。（IE専用）これはネットスケープナビゲーターでは見ることができません。

<marquee behavior=alternate loop=10 scrolldelay=50 scrollamount=20 bgcolor=#00ffff>こんにちわです</marquee>

behaviorはどうやってスクロールしてるかを設定するもので、
scrollで文字が片方から出てきてページを横切る
alternateで反復運動
slideで片端に来ると停止します。

loopはスクロール回数
scrolldelayは再描画される時間間隔を設定。デフォルト値は85です。この値が大きいと遅く、小さいと速くなります。
scrollamountは再描画までの距離を設定。デフォルトは6です。この値が大きいと速く、小さいと遅くなります。

bgcolorは文字がスクロールするところの背景の色を決めることができます。

次は文字を点滅させる方法です。（NN専用）これはインターネットエクスプローラーでは見れません。

MIDI関連

MIDIをならすにはいくつか方法があります。ここでは、インターネットエクスプローラー、ネットスケープナビゲーター両方に対応したタグを紹介いたします。<bgsound>タグはインターネットエクスプローラー専用ですので、使わない方がよろしいと思います。

autostartというのは自動演奏の設定です。trueで自動的に演奏されます。
repeatは演奏回数を設定しています。falseで１回、trueで無限になります。
width、heightは表示される演奏パネルの大きさを表していて、未表示にする場合は0にします。

また、このタグを書き込む場所なのですが、タグが画面上に表示されないと演奏が始まらないという特徴があります。
ですので、なるべくHTML文書の上の方に書き込むのがよいと思われます。

また、このタグはFLASHやMOVIEを表示させるときにも使えるので覚えておくとよろしいです。

ここではテーブル機能という機能を使って、表について解説いたします。

こういうソースになるのですが、これはここからさきがテーブル、ということを
現わしていて縦・横の線は<tr>（横線）、<td>（縦線）タグで分けていきます。
borderは縁の立体感の太さを現わしています。cellspacingはセルとセルの間に表示される
線の太さを現わしています。いずれもピクセル単位です。bgccolorは表の色を示しています。

で表の中の文字の色も変えることができます。
あと、widthは横幅、heightは縦のサイズを表わしています。
じゃあ、下の表のソースをここに書き記したので、見てください。

これはもう少し複雑な表の場合です。下にソースを書いておきます。

次にテーブル内でのテキストの位置を指定する方法を説明します。

<table width=300 height=300 border=1>
<tr>
<td align=left valign=top>ガイアックス</td>
<td align=center valign=top>ガイアックス</td>
<td align=right valign=top>ガイアックス</td>
</tr>
<tr>
<td align=left valign=middle>ガイアックス</td>
<td align=center valign=middle>ガイアックス</td>
<td align=right valign=middle>ガイアックス</td>
</tr>
<tr>
<td align=left valign=bottom>ガイアックス</td>
<td align=center valign=bottom>ガイアックス</td>
<td align=right valign=bottom>ガイアックス</td>
</tr>
</table>

alignで横方向の位置を決めており、valignで縦方向の位置を決めています。

ここではメールを送信するフォームを例に挙げてフォームを説明いたします。

またこのフォームはメインやメニュー以外の書き込みでお使いになりますとバグって記事が削除できなくなりますので、ご注意ください。

送信ボタンを押していただきますとinfo@gaiax.comにメールが届くようになっております。

<textarea name=area cols=60 rows=10 wrap=hard>なんか書いてね</textarea> <p>

これはフォームタグです。<form>～</form>までがフォーム入力範囲ということです。

typeの部分で入力方式をかえられます。textだと普通に文字をうてますが、passwordにすると入力した文字が

直接表示されずに*で表示されるようになります。nameはフィールド名で、なんでもよろしいです。

colsで横の文字数、rowsで縦の行数を指定してます。wrapは改行方法で、hardにすると自動的に改行してくれます。送信データも改行されています。softにすると自動的に改行されますが、送信データは改行されません。offにするとまったく改行されません。

これはプルダウンメニューというものです。<option>～</option>で挟まれた文字が表示されます。

これはラジオボタンです。最後にcheckedとしておくと最初からそれを指定したところにチェックが入ります。

こちらはチェックボックスです。ラジオボタンと同様にcheckedで最初からチェックが入ります。

送信ボタンとリセットボタンです。typeのところでsubmitにすると送信ボタン、resetにするとリセットボタンになります。また、valueに書き込んだ文字がボタンに表示されます。

ＨＰ作成支援講座βバージョン

基本

リンク関連

画像関連

文字修飾関連

MIDI関連

表・テーブル関連

フォーム関連

ガイアックス	ガイアックス	ガイアックス
ガイアックス	ガイアックス	ガイアックス
ガイアックス	ガイアックス	ガイアックス

ア行	あ	い	う	え	お
カ行	か	き	く	け	こ

TEST	TEST1	xxx
xxx		xxx
xxx		xxx
TEST2