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

スタイルシート(CSS)の基本

スタイルシートとは、HTML文の見栄えを指定する文書のことで、
HTML文内、外部ファイル両方で指定できます。

HTML文内でその都度スタイル指定をしていると、ファイルサイズが膨大になってしまいます。
それを防ぐために、各要素に名前を付けてまとめて指定、さらに外部ファイル化することで、
HTMLファイル本体のファイルサイズを抑えることができます。
無駄な記述が減るので、SEO効果も高くなります。

HTML内に記述する場合


■ボディ内にその都度直接指定する場合

<div style="text-align:left;font-family:arial;">文字</div>

■ヘッダー内にまとめて指定する場合

<head>
<style type="text/css"><!--
td {color:#482900;}
.group {color:#482900;}
--></style>
</head>

外部ファイルから指定する場合


■1.HTMLファイルのヘッダー内にスタイルシートの位置を指定

<head>
<link rel="stylesheet" type="text/css" href="http://w-i-i.net/css/style.css">
</head>


※様々な状況に備えるために、「相対位置による指定」よりも「絶対位置による指定」の方が安全です。

× href="css/style.css"
○ href="http://w-i-i.net/css/style.css"


■2.スタイルシートの文字コードを指定

@charset "UTF-8";

ここでは、スタイルシート(CSS)の文字コードを指定します。
HTMLファイルの文字コードに合わせて記述します。
一般的なSHIFT-JISの場合は記述する必要はありませんが、
PHPやPerl等のプログラミング言語とHTMLを混在させる場合に、記述しておくと安全です。
@charset "SHIFT-JIS";
@charset "EUC-JP";
@charset "UTF-8";


■3.拡張子(.css)、文字コード「UTF-8」で保存。

style.css
@charset "UTF-8";

/*CSSで実際に使用する文例はそれ程多くありません。*/
/*ここにコメントを書いてわかりやすくしておきます。*/

body {/*全体の指定*/
	background-color: #3a6ea5;/*背景色*/
	color:#482900;/*文字の色*/
	font-size: 12px;/*文字の大きさ*/
	font-family: sans-serif;/*文字の種類*/
	font-weight:normal;/*太字にしない。太字にする場合は「bold」*/
	text-align:center;/*文字を中央揃えにする。左揃えにする場合は「left」*/
	margin: 0px;/*周囲との距離。上下左右を一括指定*/
	padding: 0px;/*内側の余白。上下左右を一括指定*/
}

h1{/*見出し*/
	font-size: 18px;
	font-weight: bold;/*文字を太字にする*/
}

td {/*表のセル(中身部分)の指定*/
	color: #482900;
}

.green {/*グループ名「green」の指定*/
	border: 1px solid #555555;
	margin: 0px 5px 0px 5px;/*周囲との距離。上、右、下、左、と時計回りに指定*/
}

a:link {/*リンクの指定*/
	font-size: 12px;
	color: #482900;
	font-family: verdana;
	text-decoration: none;
}
a:visited{/*訪問済み*/
	color: #482900;
}
a:hover{/*ポイント時*/
	color: #cc0000;
	border-bottom: 1px solid #cecece;/*下に線を引く*/
}
a:active {/*選択時*/
	color: #cc0000;
	border-bottom: 1px solid #f0cbcb;
}

.block{/*グループ名「block」の指定*/
	background-color: #000000;/*背景色*/
	background-image: url(http://w-i-i.net/img.gif);/*背景画像の場所。絶対位置指定を推奨*/

	/*背景画像の繰り返し方。*/
	background-repeat: no-repeat;
	/*	repeat    繰り返す
		repeat-x 水平方向に繰り返す
		repeat-y  垂直方向に繰り返す
		no-repeat 繰り返さない */

	background-position: 50px 100px;/*背景画像の表示位置 X(左右) Y(上下)*/
}


名前 {
  項目: 指定;
  項目: 指定;
  項目: 指定;
}

の順に記述します。

「;」(セミコロン)を忘れると、エラーでそれ以降の指定が無効になってしまいますので要注意です。

「項目:指定;」の部分が右にずれているのは、キーボード左端の[Tab]キーで右側にずらしています。
「インデント」と呼びます。

※改行や、タブ[Tab]キーによるインデント(右ずらし)は、絶対に必要なものではありませんが、
コード全体を見やすくし、作成者の見落としを防ぐためのものです。


グループ化してまとめて記述する方法


グループ指定の記述方法

.green {border: 1px solid #555555;}

「ドット」+「グループ名」。 このように記述すると、

<div class="green">文字</a>

としたもの全てに上記の指定がまとめて適用されます。 

<div class="green"> → class= 何回も使用するグループ
<div id="green"> → id= 1回しか使用しないパーツ(その時一回限りの指定)

※構文エラーが起こりやすいので「id」 は使用しない方が無難です。

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