超超初心者向け漫画サイトのつくり方【絵の位置を指定する】

絵を自分の思い通りの位置に配置します。

一枚絵をどーん。ではなく

複数の絵を、指定した位置に配置してページを作ります。

配置方法を理解すればサイトデザインの幅が広がります。

今回つくる完成図
構成と準備する画像
ｈｔｍｌを記述する
ｃｓｓで配置指定する
メニューのスライダーの設置
まとめ

今回つくる完成図

お馴染み、センスはともかく。

完成図は、↓です。

構成ですが

女の子の絵
犬の絵
メニューのスライダー

以上の３種類を配置しています。

女の子の右手の上にメニューがあり、スライダーになっています。comic、news、contactの３メニューを用意してみました。

デモページ

（リンク先が無いので、メニューのリンクははっていません。）

構成と準備する画像

フォルダ構成は、こんな感じ

画像は、すべて透過ｐｎｇで作っています。

絵（画像）の背景色が、白と黒の２種類ありますが、白と黒の背景色で作っているのではなく両方とも「背景色のない画像だよ」という意味です。

これらを、普通にｈｔｍｌで配置すると重なる事なく配置されるはずです。

それを、↓のように配置します。

ポイントを押さえれば、そんなに難しくないです。難しく考えると難しいので肩の力を抜きましょー。

ｈｔｍｌを記述する

配置を指定したいもの全てを、divで囲って名前を付けます。

合わせて、配置指定する絵とメニューにも名前を付けておきます。

<div class="配置指定したい範囲の名前">
    <img src="image1.png" alt="" class="girl">
    <img src="image2.png" alt="" class="dog">
    <div class="menu">
      <img src="menu1.png" alt="">
      <img src="menu2.png" alt="">
      <img src="menu3.png" alt="">
    </div>
</div>

女の子の絵を「girl」犬の絵を「dog」メニューをdivで「menu」という名前にしました。

ｈｔｍｌは、これでOKです。

ｃｓｓで配置指定する

positionという方法で、思い通りの位置にしていきます。

説明はともかく、記述内容を書いていきます。

body { background: #bcd4e2;}
.配置指定したい範囲の名前 {
  width: 500px;
  position: relative;
  margin: 0 auto;
}
.girl {
  position: absolute;
  top: 10px
  left: 80px;
}
.dog {
  position: absolute;
  top: 750px;
  left: 10px;
}
.menu {
  position: absolute;
  top: 100px;
  left: 20px;
  width: 200px;
}

これでOKです。

メニューのスライダーの設置

優秀スライダーslickさんを使います。

slickの読み込み方については

jQueryで画像をしゅっしゅって流すという記事を読んでみてください。

slickの読み込みができたら、＜/body＞の直前に

<script>
    $('.menu').slick();
</script>

以上の記述でOKです。

まとめ

カスタマイズをする人へ。

ｈｔｍｌとslickは、あんまり触る必要なさそうなので説明は省きます。CSSの説明だけしていきます～。

body { background: #bcd4e2;}　→　青色の背景色です。色を変えたい人は、ここの＃以降の数字を書き換えてください。

.配置指定したい範囲の名前 {
width: 500px;
position: relative;
margin: 0 auto; }
→上から順に、横幅を500pxにする。positionをrelativeにする（意味不明な説明）。中央寄せにする。

横幅は、用意した絵に合わせて好きな幅に指定してください。

relativeは、配置指定するために必要な呪文です。

中央寄せが不要な場合は、marginを削除してください。

次は、女の子も犬も、同じような内容なのでメニューのみ説明します。

.menu {
position: absolute;
top: 100px;
left: 20px;
width: 200px;
}
→メニューの配置場所を、relativeの位置を元に指定するため、absoluteという呪文をかけます。
relativeの位置から上100px、左20pxの位置に配置。横幅を200pxに。