ホームページ制作入門

ホームページ制作入門ブログです。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML内で、
制作中の部分や、説明を書いておきたい場合に、
そのまま文章を書くと、表示されてしまいます。

HTML内で、書いたものを非表示にしたいに使用する場合、
「コメントアウト」という方法を使います。

コメントアウトしたい部分がある場合、



で囲みます。

「HTML - HTMLの基本構造」の説明で書いた

<!DOCTYPE html>
<html lang="ja">
<head>

</head>
<body>

</body>
</html>

の場合も、



この部分はコメントアウトされていますので、表示されません。

※コメントアウトを外すと表示されますので、
実際にアップロードして試してみると分かりやすいと思います。

・コメントアウト内では、スペースや記号などもコメントアウトされます。
・コメントアウトは、複数行に対しても有効です。
・コメントアウトを2つ入れ子にして使いたい場合、2つ目の開始タグがコメントアウトされてしまう為、一部表示されてしまいます。

コメントアウトの例）
▼1行のコメントアウト


▼コメントアウトに記号やスペースを入れた例



▼複数行のコメントアウト


▼コメントアウトを入れ子構造にして、失敗している例

↑に終了タグがあるので、この部分はコメントアウトされません。
↓の終了タグはコメントアウトされないので、表示されてしまいます。
-->

HTML - HTMLの基本構造

今回からHTMLの書き方のルールについて、説明していきます。

HTMLの基本的な構造について
HTMLは、基本的な構造が決まっています。

「HTMLです」という宣言

「html」
ここからここまでがHTMLです。という枠組みを書きます。

「head」
ページのタイトルや、説明文、キーワード、使用している文字コード、読み込みたいファイル、著作権、制作者etc･･･など、
検索用のロボット向けの情報や、ページに関する情報など、主にユーザーがブラウザで表示しない内容を書いていきます。
「body」
文章や画像などの、ユーザーがブラウザに実際に表示する内容を書いていきます。

書き方は色々ありますが、とりあえずは、ひとつ覚えていれば大丈夫です。

「HTMLです」という宣言は、この様に書きます。

<!DOCTYPE html>

HTMLのスタートする場所に

<html lang="ja">

HTMLを終了する場所に

</html>

と書きます。

「head」を開始する場所に

<head>

「head」を終了する場所に

</head>

と書きます。

「body」を開始する場所に

<body>

「body」を終了する場所に

</body>

と書きます。

まとめると、下記の様な書き方になります。

<!DOCTYPE html>
<html lang="ja">
<head>

</head>
<body>

</body>
</html>

HTML - HTMLは書類のようなもの

HTMLのイメージとしては、書類（申込書とか、契約書とか）のイメージに近いと思います。

ここにホームページのタイトルを記入します。
「ホームページのタイトル」

ここにホームページの見出しを記入します。
「ホームページの見出し」

ここに文章を記入します。
「文章」

という様な内容を、決められた形で書いていきます。

あとで細かく説明しますが、例えばタイトルの場合

ホームページのタイトル

という様に書くことになります。

がタイトルの書き始めで、<br />がタイトルの書き終わりを表しています。

「なので、○○を書きたい場合はどうするのか」

というルールさえ分かってしまえば、割合簡単に書く事が出来ると思います。

HTML - HTMLとは何か？

HTMLはホームページの構造を書く為のものです。

「ここの内容はこれ」

というのを書いていくものです。

HTMLはテキストで出来ています。

テキストなので、メモ帳とかでHTMLを作る事も出来ます。
オススメできませんが・・・。

実際にはテキストエディタを使用して書いていきます。

※テキストといっても、拡張子を「.txt」にしてしまうと、HTMLになりませんので、拡張子は「.html」にして保存します。

どこでも良いので、ホームページを開いて「ソース」を表示すると分かるのですが、

文字がずら～っと書いてあります。

いきなりソースを見ると難しそうって思うかもしれませんが、ルールさえ分かれば割合簡単に書く事が出来ます。

ソースを表示する方法

IEの場合
ツールバーの「表示」⇒「ソース」と選択すると見る事が出来ます。

Chromeの場合
「右側の工具のアイコン」⇒「ツール」⇒「ソースを表示」で見る事が出来ます。
「Ctrl」＋「U」を押してもソースが表示されます。

ホームページ制作の準備 - 画像編集ソフトをダウンロードする

ホームページ制作はHTMLやCSSなどのテキストが基本ではありますが、
やはり、見た目に強く影響するのは画像です。

画像に関しては、大きく分けて3つ、選択肢があると思います。
・有料のソフトを購入する
・無料のソフトを購入する
・画像は全て無料素材から手に入れる

有料のソフトを購入する
画像編集ソフトについては、正直、Adobeのイラストレーターやフォトショップが良いと思います。
・・・が、値段が高いんですよね。。。
あと、扱うのも慣れるまでは難しいんです。。。

無料のソフトを購入する
無料のソフトとしては、
Windowsだと、最初からペイントというソフトが入っています。
簡単に扱えますが、機能が少なく、クオリティの高い画像を制作するのは難しいと思います。

他に、「GIMP」というソフトが、無料なのに、結構良い機能がたくさんついています。
ただし、Adobeのソフト同様、使いこなすのは大変だと思います。

画像は全て無料素材から手に入れる
「無料　イラスト　素材」などで検索すると、無料の素材を配布しているサイトも結構あります。
※中には、リンクやクレジット表記、会員登録などの使用条件がある場合もあります。
最初はホームページ制作の練習をすることになると思うので、こういったサイトを有効活用してみるのも良いかと思います。

リンク

通販かわいくなりたい

カレンダー

2026/06

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

カテゴリー