超超初心者向け漫画サイトのつくり方【超シンプルサイトをつくる。縦スクロールタイプ】

超お手軽簡単につくる方法で、縦スクロールタイプの漫画サイトをつくります。

スマホ時代の今は、縦スクロールの方が良いのかも知れません。作成難易度も、ページめくりタイプに比べてぐっと下がります。

  1. 縦スクロールタイプの漫画サイト
    1. 縦スクロールタイプのメリット
    2. 縦スクロールのデメリット
  2. デモサイトのファイル構成
  3. 縦スクロール漫画サイトのコード

縦スクロールタイプの漫画サイト

デモサイトを作ってみました。

デモページ

漫画ページ用のhtmlファイルが１つで済むので、管理も楽です。

表示の真ん中寄せは、bodyに対して指定するという超お手軽簡単手法をとっています。

縦スクロールタイプのメリット

何といっても作成の難易度が低い。

スマホならスワイプするだけ、PCでもマウスホイールがあれば操作楽々で読んでもらえます。

正直、時代は縦スクロールなのかな…と思っています。

向いている漫画タイプとしては、ほんわか漫画、エッセイ漫画だと個人的に思っています。

縦スクロールのデメリット

んー、紙派のひとに好まれない。これが一番だと思います。

次のページが気になる！はよ！という焦らされる感じが好きなんですよね。

わずかコンマ何秒の話なんですけど。

ホラー漫画を描いているひとは絶対ページめくりタイプにした方がいいです。少女漫画や少年漫画も個人的にはページめくりタイプをすすめたいです。

あと、超超初心者が作れる範囲で縦スクロールタイプをつくると、大量の画像を一気に読み込まなければならなくなり表示に時間が掛かります。

解決策はあるのですが、難易度がググっと上がります。HTMLやCSSでは解決できない領域なので、新たな助っ人を呼ぶ必要があります。結果、ページめくりタイプの方が難易度が低くなります。

デモサイトのファイル構成

こんな感じです。

imageフォルダの中身は、こんな感じ

縦スクロール漫画サイトのコード

HTML(index.html)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="description" content="サイトの内容説明文">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
  <title>サイト名</title>
</head>

<body>

  <h1><img src="image/logo.png" alt="サイト名" width="400"></h1>
  <img src="image/top.png" alt="トップ画像">

  <nav>
    <ul>
      <li><a href="comic.html">漫画</a></li>
      <li><a href="contact.html">ご感想・お問合せ</a></li>
      <li><a href="blog.html">ブログ</a></li>
      <li><a href="news.html">お知らせ</a></li>
    </ul>
  </nav>

</body>

</html>

HTML(comic.html)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="description" content="サイトの内容説明文">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
  <title>漫画名</title>
</head>

<body>

  <h1><img src="image/logo.png" alt="サイト名" width="400"></h1>
　<p><img src="image/comic_1.png" alt="漫画１ページ目" width="400"></p>
  <p><img src="image/comic_2.png" alt="漫画２ページ目" width="400"></p>
　<p><img src="image/comic_3.png" alt="漫画３ページ目" width="400"></p>

  <p><a href="index.html">トップへ戻る</a></p>
</body>

</html>

CSS

@charset "utf-8";
body {
  background: #dddda0;
  text-align: center;
}

ul {list-style: none;}

少ない記述でつくれます。お疲れさまでした。

コメント

ホーム
トップ