文字でいろいろ遊ぶ

文字の修飾をする（基本編） １．文字の修飾 ★太字（ボールド）　　　太い文字見本 <B>太い文字</B> ★斜体（イタリック）　　　斜めの文字見本 <I>斜めの文字</I> ★下線付き　　　下線つき文字見本 <U>下線つき文字</U> ★抹消線つき　　　抹消線つき文字見本 <S>抹消線つき</S> ２．文字の大きさを変える <FONT size="数値">文字</FONT> 　数値は"1"〜"7"　大きいほど文字も大きくなるよ。 　　これが　1 　　これが　2 　　これが　3 　　これが　4 　　これが　5 　　これが　6 　　これが　7 （注：font style を使って、もっと細かく大きさを変えたり、size=7 よりも大きな文字を表示したりも出来るけど、初めのうちは上記のタグの範囲で充分だと思います。） ３．文字の色を指定する 　緑とか　青とか　いろんな色を使いたい。 　（色は「色の名前」または「色コード」です。ウェブセーフカラーコードをお勧めします。） <FONT color="色">文字</FONT> ４．１〜３を組み合わせる 　斜めの、大きな、赤い文字　の場合 <I><font size="6" color="#ff0000">斜めの、大きな、赤い文字</font></I> ５．文字化けを直す いろいろなＨＰを見ていると、たまに「文字化け」して変な記号のような文字になってしまい、正しく日本語が表示されない場合が有ります。 そんな時は　［右クリック］→［エンコード］→［日本語（自動選択）］を選んで下さい。 それで殆どの場合、文字化けが直り正しい文字で表示されます。 また、右クリック禁止のページの場合は、ブラウザのメニューバーから［表示］→［エンコード］→［日本語（自動選択）］で同じ処理が出来ます。

文字の位置を揃える

文字を揃える １．文字を画面の中央に表示する（中央揃え） ＬＯＶＥ３７ <center>文字</center> ２．範囲の行揃えを指定する 　ページ内での文字列の表示位置を揃えることを”行揃え”といいます。行揃えには、左（left）・中央（center）・右（right）があります。 　殆どの場合、無指定の場合は左揃えになります。但し、無指定の時に中央揃えになるものも有るので注意だよ。 　左揃え　 　左揃え　 　中央揃え　 　中央揃え 　右揃え　 　右揃え　 <DIV align="left">左揃え</DIV> 　　<DIV align="center">中央揃え</DIV> 　　<DIV align="right">右揃え</DIV>

罫線（ライン）を引く

タグを使って罫線を引く １．簡単タイプ 見本　↓ <HR> ２．応用タイプ 見本 ↓　（太めの赤で画面比率９０％の罫線） <HR width="90%" size="数値" color="色"> ※　width= は、画面比率（％指定）または数値（ピクセル）で指定。 　　size=数値が大きいほど太くなります。色は色コードです。

プルダウンメニューを作る

プルダウンメニュー １．簡単タイプ　　　簡単タイプ見本ここに文字を書く基本のタイプこれは簡単でシンプル！ <SELECT><OPTION selected>項目タイトル<OPTION>１段目<OPTION>２段目<OPTION>３段目<OPTION>４段目</SELECT> ２．色付きタイプ　　色付きタイプ見本使う色を三色とか四色とか増やしてチャレンジしてね <SELECT><OPTION style=background-color:背景の色;color:文字の色>項目タイトル<OPTION style=background-color:背景の色;color:文字の色>１段目<OPTION style=background-color:背景の色;color:文字の色>２段目<OPTION style=background-color:背景の色;color:文字の色>３段目</SELECT>

ボタンを作る

簡単なアラートボタン １．押すとメッセージが出るボタン　　　見本 <INPUT TYPE=button VALUE="ボタンに表示される文字" onClick=alert('メッセージ文')></INPUT> ２．押すとＯＫかキャンセルかを聞いてくるボタン　　　見本 <input type='button' value='ボタンに表示される文字' onClick=if(confirm('メッセージ文')){alert('ＯＫのメッセージ');}else{alert('キャンセルのメッセージ');}>

画像を貼る

画像の基本 １．バナーなどの画像を表示する 見本　 　 　 　 画像をアップロードすると画像の一つ一つに専用のＵＲＬを取得できます。 バナーや画像等の直リンクはマナー違反です。 画像は必ず一度自分のＰＣに保存した後、自分のサーバースペースにアップロードして下さい。 <img src="バナーなどの画像のURL" height="数値" width="数値" ALT="文字"> height=数値・width=数値 で縦横のサイズ調節。省略可。 ALT="文字" で画像が表示されない時や、マウスが画像にあたった時にコメントを表示する。省略可。 ２．ＢＢＳの書込記事に画像を貼る ＢＢＳには使えるタグが制限されているものがあります。 ＜img src=＞タグが使用できないものもあるので、このタグが便利だよ。 でも、全てのタグが使えないＢＢＳでは、これをやってもダメです。 <font style='background: URL(http://画像のURL) fixed no-repeat 0px; top; padding-left:横数値px;height:縦数値px;'> </font> left（横）と height（縦）は画像のサイズに合わせて指定します。（非文字回りこみ） 数値はピクセルで指定します。（半角数字で） ※　Ｍａｃでは見えないらしいです。 ３．ビットマップファイルをアップロードする 画像アップローダーは拡張子.bmp がアップロードできません。普通は「.gif」「.jpeg」「.png」 .bmp の画像をアップしたい場合は、一旦自分のＰＣで「ペイント」か何かのソフトで画像を開いて［名前を付けて保存］を選んで［ファイルの種類］を.gif か.jpg にして保存すればＯＫです。 ただし、.bmp を .gif に変換すると色などの見た目が変わってしまうので注意です。 ※　Ｍａｃではビットマップファイルは見えません。

リンクを貼る

リンクの基本 １．文字にリンクを貼る 行揃え無指定なら左揃えになります。中央へ表示したい時はリンクタグの前後を CENTER タグで囲ってくださいね。 見本　ｌｏｖｅ３７のお気楽自己満足ＨＰ！ 押しちゃったらブラウザの［←戻る］で戻って下さいね。 <A href="リンク先のURL">リンクさせる文字</A> ２．バナーにリンクを貼る 見本　 押しちゃったらブラウザの［←戻る］ボタンで戻って下さいね。 <A href="リンク先のURL"><img src="バナーのURL" height="数値" width="数値" border="0"></a> border="0"　というのは、画像にリンク枠が付かないようにするものです。無指定の場合、画像にリンクの枠が付きます。 ※リンク先のホームページを新しい窓で表示したい時は、リンクタグの最後に半角開けて TARGET=" BLANK" を追記してくださいね。 　　例：　＜A href="http://〜ＵＲＬ〜" TARGET="_BLANK"＞新しい窓を開く＜/A＞ 　見本：　新しい窓で love37の自己満足ホムペを開く ３．ボタンにリンクを貼る 見本　 押しちゃったらブラウザの［←戻る］ボタンで戻って下さいね。 <FORM><INPUT TYPE="button" VALUE="ボタンの文字" onClick=location.href='http://〜ＵＲＬ〜'></FORM> ※色付きボタンでアクセントを付けたいときは 見本　 押しちゃったらブラウザの［←戻る］ボタンで戻って下さいね。 <FORM><INPUT TYPE="button" VALUE="ボタンの文字" onClick=location.href='http://〜ＵＲＬ〜' style=background:背景色;color:文字の色;></FORM> ※ ワンポイントアドバイス 　フレームを使っていて、リンクを貼ったページを別のフレームに表示させたい場合は 　リンクタグの最後に半角あけて TARGET="フレーム名" を追記してください。 　また、リンク先のページをメインフレームではなく、同一窓のまま新しく表示する場合は 　リンクタグの最後に半角あけて "TARGET=_TOP" を追記してください。

背景画像

背景画像 １．背景に画像を使う 編集画面の＜BODY＞タグの部分で、BODY の後に半角あけて background="背景画像のURL" と記述します。 背景画像無しの場合は、bgcolor="背景色" を指定します。 ２．背景画像を固定する 画面をスクロールさせても背景をスクロールさせずに固定する方法です。 bgproperties="fixed" これを背景画像のＵＲＬの後に半角空けて追記するだけです。 ３．ページ毎に背景を変える 単に、各ページの＜BODY＞タグ毎に、BODY の後に半角あけて background="背景画像のURL" を記述するだけです。 「１．背景に画像を使う」と同じ要領で、背景を変えたいページ毎に 使いたい背景のURLを入れるということです。 ※ 旧ｇａｉａｘ系、ｇｏｏ簡単ＨＰの場合 <style type=text/css><!--body{background:url(http://ここに画像のURL) fixed;}--></style> このタグを背景を変えたいページのお「知らせ欄」に入れてね。 これでダメだったらごめんなさい。 （注：このタグでは背景画像が"固定"させてます）