わきあいあいネット
現在時刻
基本10段階編

ステップアップ編

F r e e T o o l s
TeraPad
高機能なメモ帳で、フリーソフトです。タグを色分け表示が可能なので編集しやすく、 様々な文字コードで保存も可能なので、CGI,PHP作成にも向きます。
FFFTP
FTPソフトとしては、あまりにも有名です。操作性に優れ、いくつものサイトをまとめて管理できます。
FileZilla
表示が素早いのが売りのFTPソフトウェアです。タブで複数起動できるので便利です。著者も最近はこれに移行しました。
PHPエディター
プログラミング言語「PHP」の開発なら、これひとつで充分です。 もちろんこれでHTMLやCSSも含めて管理できますので、PHPを使用しない人でも、HTMLエディターとして使用しても便利です。
WampServer
PHPの開発環境。パソコン内(ローカル)でプログラムをテストしたり、PHPエディターにおけるエラー確認等に活躍。

高価な統合型開発環境を買うよりは、項目ごとに優良な無料プログラムを組み合わせた方が融通が利きます。


T i p s
大文字小文字
タグは大文字、データは小文字と使い分けるとコードが読みやすくなります。
しかし、その分入力の手間が増えます。 私は全て小文字で書いてます。

ファイル名にしても、拡張子にしても、webの世界では小文字しか認識されない場合が 多いです。文章以外は、常に英数小文字で入力するのが無難です。

例)
Japanだ.JPG→×
→FTPで認識されない。リンク作成時に混乱する。

japan.jpg→○
空白(スペース)
日本語入力と半角英数字の直接入力とでは、みかけが同じでも意味が全く違います。

<タグ>の中には半角スペースしか使えませんので注意して下さい。
例)
<br >→機能する
<br >→機能しない

4.■リンク付き画像

次は、リンク付き画像を表示したいときの記述法を説明します。

<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body>
ここに内容を記述していきます。<br>
二行目を記述していきます。<br>
<a href="3.htm"><img src="1.gif"></a>
</body>
</html>

表示結果


<img src="画像ファイル名">
で、画像を配置できます。

<a href="移動するファイル名">「画像ファイル名」</a>と囲みこむ事で
画像をクリックすると移動するようになります。

でもこのままだと画像の周りにリンク用の変な枠が表示されてしまいます。
これを消すには、
<img src="画像ファイル名" border="0">
と指定します。

※画像ファイル名は半角英数小文字で!

表示結果

ステップアップ! 画像に名前を付ける


画像をそのまま配置しただけでは
サーチエンジンや、画像非表示で閲覧している人に、
その画像の意味を伝える事ができません。
そこで、面倒でも画像には全て名前を付けるようにします。

<img src="1.gif" alt="画像の名前">

alt="" で、その画像の名前を指定します。

ステップアップ! 画像のサイズを指定する


画像は何も指定しないと、
元のサイズのままで表示されてしまいます。
もし、多きい画像を小さいサイズで表示したい場合、
<width=""> と、幅だけ指定すればOKです。
また、サイズを指定する事で画像の表示速度が向上します。

<img src="1.gif" alt="画像の名前" width="100px" height="100px">

この時、元の画像の1/2、1/4のサイズを指定すると、
綺麗に縮小されます。
それ以外は、画像がギザギザになってしまう場合があります。
(つまり、画像は偶数サイズで作成!)

ステップアップ! 画像に文字を回り込ませる


画像の右側に文字を配置したい場合は

<img src="1.gif" alt="画像の名前" align="left">
とすると、画像の右に文字が張り付きます。 雑誌のようなページ作りに最適です。 とすると、画像の右に文字が張り付きます。 雑誌のようなページ作りに最適です。 とすると、画像の右に文字が張り付きます。 雑誌のようなページ作りに最適です。
<br clear="left">

とすると、画像の右に文字が張り付きます。

しかし、最後に必ず、<br clear="left">で回り込みを解除しないと、
後の表示が崩れる場合がありますので注意です!

表示結果

猿の惑星 とすると、画像の右に文字が張り付きます。 雑誌のようなページ作りに最適です。 とすると、画像の右に文字が張り付きます。 雑誌のようなページ作りに最適です。 とすると、画像の右に文字が張り付きます。 雑誌のようなページ作りに最適です。

目次にもどる
Copyright © 2004-2017 w-i-i.net All Rights Reserved.