超超初心者向け漫画サイトのつくり方【いちからつくってみる。】

自分でイメージした完成図を元に、ホームページをつくっていきます。

プロの手法ではありません。

わたしが実際にホームページをつくるときに取っている方法です。

完成イメージ図を描く

いわゆる、カンプってやつです。

ただ、自分が分かればいいし、カンプ通りになんて素人はつくれないので、すっごくざっくりしたもので大丈夫です。

つくっていく内に、「やっぱこうしよう」が出てくると思います。それでいいんです。

なので、フリーハンドでささっと描きます。

これに、ざざっと自分が必要な注釈を書き加えます

注釈は、「どのタグをつかうか」とか「どんな名前を付けるか」なんかです。サイズにこだわりがあるなら、「〇px」なんて書くのもOK。

絵の用意が出来ているなら、ぜひ実際に載せる絵を埋め込んでください。

上の例でいくと、全体を「zentai」というdivで囲う。ロゴをh1で囲う。Twitterアイコンに「sns」と名前を付ける。メニューをnavで囲う。メニューまでをheaderで囲う。メイン絵を「main-image」という名前にする。コピーライトをfooterで囲う。

……と、こんな感じです。

index.htmlを作成する(ファイルの準備)

1ページを完成までつくります。

この手順については、慣れてきたら自分のやりやすい方法を見つけてください。一気に全ページのhtmlを書ききってからcssを記述する手もあります。たぶんプロは全htmlを書ききってcssを記述かな?

作成していきます。

デスクトップ上で「右クリック」→「新規作成」→「フォルダー」でフォルダ作成し

「site」という名前にする。

テキストエディタ(サクラエディタ)を開いて

「名前を付けて保存」

名前を「index.html」、文字コードを「UTF-8」にして保存

CSSファイルもつくります。テキストエディタ(サクラエディタ)で新規作成

「名前を付けて保存」→名前を「style.css」、文字コードを「UTF-8」にしてsiteフォルダに保存

フォルダの中身が、こんな感じになればOK

アイコンの絵柄は、PC環境によって違うこともあります。

index.htmlを作成する(htmlの記述)

イメージ図を元に、htmlを記述していきます。

htmlの記述が終わった状態で、ブラウザ開くと

こんな感じです。

完成図………。まだまだほど遠い。

画像を用意していないので、altに入れておいた文言が画像の代わりに表示されています。画像の代わりに表示してくれているだけなので、画像を用意すれば「ロゴ」などの文字は消えます。

style.cssを作成する(CSSの記述)

完成図に近づけます。

CSSの記述……の前に、画像は適当に用意しました。「サイト名ロゴ画像」「twitterのアイコン画像」「トップ画像」の3つです。

とりあえず、画像もindex.htmlと同じ階層に保存しました。

↑こんな感じで、同じ階層に全部入れてます。ついでに、画像は透過pngです。

CSSは、一行記述したら保存してブラウザで確認。それを繰り返してちょこちょこと調整していくと失敗が少ないです!

ちゃちゃっと、完成図っぽく整えましょ~

ブラウザは…

完成図と近い形になりました~!

私の絵ではショボショボ感が増すので、イケメンの写真をメイン画像にしてみました。(フリー画像です)

絵が良ければ、デザインがコレでもそれなりに見栄えがする。というのが分かっていただけたと思います。

理想の漫画サイトをつくれるように、頑張ってください(*’▽’)

コメント