超超初心者向け漫画サイトのつくり方【HTML基本】

漫画サイトに限らず、htmlを記述していく際のルールを説明します。理解して進めた方が後々楽ができます。

ＨＴＭＬの構成

それぞれを説明します。今は意味が分からなくてもいいので、なんとなく頭に入れておいてください。

ドキュタイプ宣言と呼んであげてください。

ＨＴＭＬにはバージョンがあって、「わたしは〇〇バージョンで記述しますよ」って伝えてあげる文言です。

これを記載しなくても、賢いブラウザは〇〇バージョンだな。と察してくれて、ちゃんと表示してくれるのですが、察してくれないブラウザもあるのでちゃんと教えてあげてください。

ついでに、当サイトではＨＴＭＬ５というバージョンで記載していきます。

ハイパーテキストマークアップランゲージ。フルネームです。ＤＯＣＴＹＰＥ宣言で伝えてるので不要に思えますが、再度ＨＴＭＬですよ～と主張しておくための記述です。たぶん。

主に、ブラウザに伝えたい情報を記述していくところです。

漫画サイトに準備する絵で説明した、ブラウザのタブに表示されるアイコン、サイト名もＨＥＡＤに記述します。

実際のコードを見ると、拒絶反応が出そうですが、ＨＥＡＤは定型的なので言われるままに記述すれば何も怖い事はありません。

ブラウザで表示したいものを記述していくところ＝漫画を置くところです。

縦スクロールで読む漫画サイトにするのか、ページめくりで読む漫画サイトにするのか。そういった構図を記述していくところです。

難易度でいくと、縦スクロールは★、ページめくりは★★★～★★★★といった具合です。

わたしは漫画雑誌世代なので、どうしてもページめくりタイプにしたくて苦労しましたが、今のスマホ時代を考えると縦スクロールの方が読者さんに喜ばれるかも知れません。

フォルダの準備の記事で用意したフォルダを開いてください。

index.htmlファイルを右クリック、「プログラムから開く」、「サクラエディタ」の順に選択し、ファイルを開いてください。

「プログラムから開く」の中にサクラエディタが無いひとは、サクラエディタを開き、「ファイル」→「開く」からindex.htmlファイルを開いてください。

まだ記載ゼロですね。開くとき文字コードがどうとか言われたら、「UTF-8で開く」を選択してください。

ＤＯＣＴＹＰＥ宣言を記述します。

以下のコードを打ち込んでください。コピペでもOKです。

<!DOCTYPE html>

DOCTYPEと、htmlの間は半角スペースを入れてください。

↑このようになっていたら、ＤＯＣＴＹＰＥ宣言は完了です。

ＨＴＭＬの記述って言ったら、ＤＯＣＴＹＰＥ宣言も含まれそうなので、ＨＴＭＬタグの記述って言い方します。反対にややこしかったら、すみません。

ＨＴＭＬタグは、「こっから、ここまでＨＴＭＬだよ～」と伝えるタグです。なので「こっから」に当たる「開始タグ」と「ここまで」に当たる「終了タグ（閉じタグ）」の２つセットで記載します。

開始タグ→<html>
閉じタグ→</html>

同じようになっていたらOKです。

次に、ＨＥＡＤタグを記述します。ＨＴＭＬタグ同様、開始タグと閉じタグのセットです。そして、ＨＴＭＬタグの開始と閉じの間に入るようにして記載します。

開始タグ→<head>
閉じタグ→</head>

<html>に<head>が包み込まれました。

これも、開始タグと閉じタグのセットになります。一つで完結するタグの方が少ないと思ってください。

順番ですが、ＨＥＡＤの次にＢＯＤＹ、これは揺るがないルールです。そしてＢＯＤＹもＨＴＭＬタグの中に入るよう記載します。

開始タグ→<body>
閉じタグ→</body>

このようになっていたら完璧です。お疲れさまでした。

いいから、はよ作りたい。ってひと用に。

<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>

コピペしてください。とりあえず作ってから理解を深めるのも手です。