わきあいあいネット
現在時刻
基本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 >→機能しない

2.複数行の文字を表示させる(改行)

文字を記述していく際に、改行がない延々と続く文字列は
閲覧者の集中力を弱めてしまいます。
 長い距離を左右に移動させる目の運動は疲れますし、
次の行がわからなくなる事が起こりやすいものです。
適切に改行された短い文章は、読み易いものです。

悪い例:文字を記述していく際に、改行がない延々と続く文字列は閲覧者の集中力を弱めてしまいます。 長い距離を左右に移動させる目の運動は疲れますし、次の行がわからなくなる事が起こりやすいものです。 適切に改行された短い文章は、読み易いものです。

<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body>
ここに内容を記述していきます。<br>
二行目を記述していきます。<br>
三行目を記述していきます。
</body>
</html>

表示結果

<br>とは、改行を意味します。
これについては、かこむ必要はなく、単独で機能します。
<br>内容</br>とする必要はないわけです。


ステップアップ! CSS:line-height


以下のコードを記述すると、
文字の縦方向の行間を調整することができます。
文字を読み易くする際には効果的です。

<div style ="line-height:120%">
改行が延々と続く長い文章は、例え折り返しても、
次の行が見つけずらくなります。
そんな時は、「line-height」で
上下の行間を調整すると、とても読み易くなります。
</div>

■line-height:100%の場合
改行が延々と続く長い文章は、例え折り返しても、
次の行が見つけずらくなります。
そんな時は、「line-height」で
上下の行間を調整すると、とても読み易くなります。

■line-height:150%の場合
改行が延々と続く長い文章は、例え折り返しても、
次の行が見つけずらくなります。
そんな時は、「line-height」で
上下の行間を調整すると、とても読み易くなります。

*横方向の行間には、「letter-spacing」があります。

ステップアップ! PREでそのまま表示


文章が長くなると、 <br> のオンパレードで
コードが長くなってしまいます。
そんな時に便利なのが、<pre> タグです。

<pre>
これで囲んだ文字は、
入力したそのままの折り返し形式で
画面に表示されます。
中には各種HTMLタグも使えます。
<b>太文字</b>
</pre>

表示結果
これで囲んだ文字は、
入力したそのままの折り返し形式で
画面に表示されます。
中には各種HTMLタグも使えます。
太文字

入力を簡易にし、コードを短く抑えたい場合に最適です。


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