タダでネットでホームページを作ろう!
● 大きい文字にする ● 小さい文字にする
はじめに
「
HP(ホームページ)を作りたい!」と思いました。右も左もわからない初心者では何を見てもチンプンカンプンですよね?
私もそうでした。初心者支援サイトを見ても何を書いてあるのかさえ分かりませんでした。ですが、沢山のサイト様を閲覧しているうちに簡単なものは
少しずつ理解できるようになりました。そこからは見よう見まねで何とかHPを作れるようになったので、これからHPを作りたいと言う方はあせらずに
ゆっくりと少しずつスキルアップしていけば良いでしょう。はじめは物まねでも少しずつ自分のイメージに合うページを作れれば楽しいです。
ただし、サイト様によっては二次使用禁止やそのサイトへのリンクが使用条件だったりするので、利用規約などを良く理解したうえで使用させていただきましょう。
二次使用や物まねなどがあり、そこから新しい技術などが生まれ発展して行くのですから使用できなければ「ほんの一握り」の方たちの技術でしかありません。
あまり神経質にならずに、利用規約を守って楽しんでHPを作りましょう。
ホームページを開設するサーバー(場所)はタダのところもあれば有料もあります。個人の楽しみ程度なら広告が表示されますがタダのスペースで十分でしょう。
ただし、お小遣いサイトやアフィリエイトなどの利益が発生するものはタダのスペースでは、ほとんどが禁止されているので利用規約をよく理解してから開設しましょう。
タダのスペースでも商用利用が可能なところもあるので、ホームページ・お小遣いサイト・アフィリエイト・アクセスアップなどに関しては
タダでネットでお小遣い〜本館〜の方を参考にして頂ければ幸いです。
Webページ(HP)はHTMLというものを使って記述します。このHTMLは
タグといわれるものを使ってテキストに
色や形・レイアウトなどの指示を書き込んでコンピュータがその情報を読み込み、ブラウザ(Internet Explorer など)で表示するというものです。このタグを使ってさまざまなデザインを作ります。
HTMLの基本構造
<html>
<head>
<title>タダでネットでお小遣い〜別館〜</title>
</head>
<body>
<h1>ホームページを作ろう!</h1>
</body>
</html>
これはhtmlですよ
<head>〜</head>の中にページの紹介文やキーワードを書き込む
<title>〜</title>の中にホームページ名(ブラウザの上に表示されるタイトル)
headを閉じる
<body>〜</body>の中にコンテンツ
これは見出しといって数字を変えることで挟んだ文字の大きさが変わる(タイトル・サブタイトルなど)
bodyを閉じる
htmlを閉じる
上記のタグをコピー&ペーストで試して見て下さい。方法はWINDOWSならスタートをクリック→すべてのプログラム→アクセサリ内のメモ帳かワードパッドを開いてペーストする。
それを保存して拡張子を
.txt から
.html か
.htm にかえたものを
ダブルクリックするとブラウザ(Internet Explorer など)が立ち上がり
ホームページを作ろう!という文字が表示されます。
<h1>
ホームページを作ろう!
<h2>
ホームページを作ろう!
<h3>
ホームページを作ろう!
このように
<body>〜
</body>
の中にさまざまなタグを書き込むことでページを作っていきます。
注意点は対になっているタグは<★★
>からはじまり、必ず</★★
>で閉じること。閉じ忘れるとそれ以降のすべてのタグに適用されてしまうので注意!
※コピー&ペーストのやり方はコピーしたい文字の上でマウスの左ボタンをクリックしたままで、スライドさせると文字の色が反転します。そこにカーソルを合わせて右クリックでコピーを選択。
メモ帳かワードパッドの何もないところで右クリックして貼り付けを選択で OK。拡張子の変え方はメモ帳かワードパッドで保存したファイルを右クリックで名前の変更を選択して index.html などとする。
拡張子が表示されていない場合はマイコンピュータをダブルクリックでツールを選択→フォルダオプションを選択→表示を選択して詳細設定内の「すべてのファイルとフォルダを表示する」にチェック→
「登録されている拡張子は表示しない」のチェックをはずす→「すべてのフォルダに適用」を選択→「適用」を選択で OK。
スタイルシートについて
スタイルシート(CSS)とは、ひとことで表現するなら「Webページのレイアウトを定義する技術」と言えるでしょう。もともと、表現方法を指定するためのものではなかったそうですが Webの発展により、
色やフォントサイズの指定、レイアウトのためのテーブルの利用、文章の体裁やデザイン(見栄え)などを定義するようになっていったようです。
簡単に言うと、スタイルシートを使うことにより一つ一つタグで指示しなければならないところを部分的にかえたり、ページ全体に指定したり、全てのページに適用したりすることができるようになります。
例えば、季節ごとに壁紙を変えたり、文字の色や大きさを変えたりするのに、本来なら全てのページをタグなどで指定し直さなければならないのですが、スタイルシートではこれらを簡単に変更することができます。
ページ数が増えれば増えるほど、必要となるでしょう。方法はそのページだけに適用する場合は<head>〜</head>の中に記述したり、すべてのページに適用する場合は
外部ファイルを作って読み込ませるなどの方法があります。
<html>
<head>
<title>タダでネットでお小遣い〜別館〜</title>
<style type="text/css">
<!--
h1 {
color:blue;
font-style:italic
}
-->
</style>
</head>
<body>
<h1>ホームページを作ろう!</h1>
<h2>ホームページを作ろう!</h2>
<p>このページにスタイルシートを適用。
</p>
</body>
</html>
これはhtmlですよ
<head>〜</head>の中にページの紹介文やキーワードを書き込む
<title>〜</title>の中にホームページ名(ブラウザの上に表示されるタイトル)
<style type="text/css">〜</style>これはスタイルシートです(
<head>〜
</head>)
コメントアウト
ここではh1を指定しています
ここでは文字の色を指定してみました
ここでは文字の形を指定してみました
styleを閉じる
headを閉じる
<body>〜</body>の中にコンテンツ
これは見出しなど
bodyを閉じる
htmlを閉じる
上記のサンプルはそのページにのみスタイルシートを使用しています。
この場合
<head>〜
</head>に
<style type="text/css"><!--スタイルの指定--></style>のように記述します。
外部ファイルの場合は<head>〜</head>の中に
<LINK rel="stylesheet" href="半角アルファベットでお好きなファイル名.css" type="text/css">と記述します。
外部ファイルはメモ帳かワードパッドにスタイルの指定を書き込み、拡張子を
.css と変えて下さい。
※タグやスタイルなどを全て憶えて手書きで作成するのでは大変な作業となってしまいます。私の場合は、メモ帳などにタグやスタイルを分けてそれぞれをコピーして保存しています。こうすれば使いたいときに
コピー&ペーストですむので、とても簡単です。
それぞれの詳細はメニューより参照して下さい。