超超初心者向け漫画サイトのつくり方【漫画と漫画のすき間を調整する】

縦スクロールタイプの漫画サイトで配置する、漫画と漫画のすき間をあけていきます。

漫画間のすき間をつくる記述

style.cssファイルをサクラエディタで開いて、以下のコードを記述してください。

img {margin: 30px;}

指定前

指定後

すき間が広がりましたー！！

漫画の画像は、htmlで＜img src=”漫画画像の名前.png”>で指定しています。

この、＜img＞タグを使っているものに対して30pxのすき間（余白）を作ってね。というコードです。

ただ、これだと上下左右に30pxずつのすき間をつくってしまいます。

左右のすき間に関しては、中央寄せによって打ち消されますが、左寄せにしたいひとは左のすき間も調整したいですよね。

２通りの方法を紹介します。どちらでも結果は同じです。

img {margin-top: 10px;}

もしくは、

img {margin: 10px 0 0 0;}

img {margin-bottom: 10px;}

もしくは、

img {margin: 0 0 10px 0;}

img {margin-left: 10px;}

もしくは、

img {margin: 0 0 0 10px;}

img {margin-right: 10px;}

もしくは、

img {margin: 0 10px 0 0;}

全ての方向の、一番目の方法は「margin-すき間をあけたい方向:すき間の幅;」という指定方法でOKです。

二番目は、「margin:上のすき間　右のすき間　下のすき間　左のすき間;」という指定方法です。

超超初心者のうちは、一番目を使うのをオススメします。

なぜなら、二番目は最初のうち方向がどっちか混乱して「指定したのに反映されない！」となってしまう危険が高いからです。

慣れてきたら、二番目を使う方がメリットがあります。

この、すき間をあける＝marginは、とってもよく使います。

嫌でも覚えるので、頑張って覚える必要はありません。

お疲れさまでした。