漫画サイトの決まったスタイルは当然なく、自由です。
トップページで、突然漫画を掲載するのもアリだと思います。ですが、画像が多いと表示に時間が掛かる。表示に時間が掛かると離脱率が上がり、作品紹介前に離脱されてしまう…なんて事もあるので、その辺も考慮して作っていくのがいいと思います。
ですので、トップページは入口、漫画ページに遷移するというスタイルで作っていきます。
（まぁ、かと言って、ページ遷移が続くとそれもまた離脱率を上げてしまう…。難しいところですが、その辺は作者さんの裁量で決めてください。）
リンク文字を縦に並べる
ホームページ作成フォルダから、index.htmlをブラウザでひらいてください。
リンクを２か所つくっていますが、仲良く横並びになっています。これだと何個のリンクがはられているのか一見して分からないので縦並びにしていきましょう。
見た目だけを整えるなら、＜a＞～＜/a＞を＜ｐ＞～＜/ｐ＞で囲えば縦並びになります。（＜ｐ＞＜a＞～＜/a＞＜/ｐ＞、って感じに包む）
<a href="comic.html">漫画ページへ移動</a>
↑これを
<p><a href="comic.html">漫画ページへ移動</a></p> <p><a href="https://mangasite.work">いまから漫画サイトつくる</a></p>
↑このようにすれば、
リンクが縦並びになりました。
簡単お手軽に漫画サイトを作るなら、これもアリです。
が、サイト界では「意味のあるタグの使い方をしろ」と叱られてしまいます。
意味のあるタグでメニューをつくる
そもそも「意味のあるタグ」とは。
例えば、＜ｐ＞～＜/ｐ＞は「段落」という意味を持っています。
段落にリンク先を置いておくのも間違いではないです。多分。なので、タグを多種多様に使いたくない（覚えたくない）ならｐを使ってください。
メニューに適したタグで記述したいひとは、「リストタグ」を使いましょう。
<ul>
<li><a href="comic.html">漫画ページへ移動</a></li>
<li><a href="https://mangasite.work">いまから漫画サイトつくる</a></li>
</ul>サクラエディタは、こんな感じです
ブラウザで開いてみましょう。
文字の前のポッチが気になるところですが、後で消すので安心してください。
これで、<ul＞～＜/ul＞で囲われた部分が「仲間」として括られました。<li＞～＜/li＞は何個でも追加可能です。
あれ？でもメニュー作ってたのに、意味のあるタグがリスト？？？
ってなりますよね。はい。まだ不十分です。
画面に何の変化もないけど、大事なタグを記述していきます。
＜nav＞～＜/nav＞で囲ってください。これで括ればナビゲーションという意味を持ちます。
この違いを図であらわすと…
って感じです。
ついでに、漫画サイトらしいメニューにしていきましょう～
<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>サクラエディタ
ブラウザ
もー少し頑張って、メニューの文字頭のポッチ消しましょう。style.cssをサクラエディタで開いてください。
以下のコードを記述しましょう
ul {list-style: none;}
デフォルトで付いてくるポッチをナシにして～っていうコードです。
赤い背景に疲れたので、背景色も変更しておきます。
body {background: #dddda0;}
ブラウザで開いてみましょう。
これで、メニューが出来ました。
おまけ
コードをまとめます。
HTML（今回追加した分だけ）
<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>CSS
body {background: #dddda0;}
ul {list-style: none;}お疲れさまでした。
コメント