超超初心者向け漫画サイトのつくり方【超シンプルサイトをつくる。ページめくりタイプ】

これまでに書いてきたタグだけで、超シンプル漫画サイトを作ることが出来ます。

漫画ページは、ページめくりタイプです。サンプルを作ってみました。

デモサイト

「漫画」をクリックすると

漫画の1ページ目が表示されます。

左下の「次へ」をクリックすると、2ページ目に飛びます。(3ページ目まで作っています)

これが、極限まで妥協し、記述を削った、漫画サイトです。

これまでの記事を読んだ方は、恐らく簡単に漫画ページを作成できます。

やったー。これで自分のサイトが持てるぞー!………とは、なりませんよね。

左に寄りすぎじゃない?とか

リンク文字、青字にアンダーラインって古臭いよ…。とか

「次へ」をボタンにしたい。とか。

そう。これが、いかに妥協してシンプルに作るか、妥協せず作り直しを重ねて理想に近づけるかの選択所となります。

こんなんじゃないですよね。理想。じゃあ、頑張って記述していきましょう!!今回はしないけど。

おまけ

こんなしょぼい漫画サイトのコードなんていらない。なんて言わないで。これをベースにカスタマイズしていきましょう。少しずつマシにしていこう!

bodyの中身だけ、乗っけます。その他はindex.htmlと同じです。

HTML(漫画ページ1ページ目)

<body>

  <h1><img src="image/logo.png" alt="漫画サイトつくるぞ!" width="400"></h1>
  <img src="image/comic_1.png" alt="漫画1ページ目" width="400">

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

HTML(漫画ページ2ページ目)

<body>

  <h1><img src="image/logo.png" alt="漫画サイトつくるぞ!" width="400"></h1>
  <img src="image/comic_2.png" alt="漫画2ページ目" width="400">

  <p><a href="comic_3.html">次へ</a>
  <a href="comic.html">戻る</a></p>
</body>

お疲れさまでした。

コメント