1. ホーム   >>
  2. Web漫画サイト構築   >>
  3. HTMLコーディング

Web漫画サイト構築


●HTMLコーディング

机上で決められることが大体決まったなー、重大な見落としはないなーという段階に来たら、HTML、CSSの作成に入っていく。

私の場合当初の予定ではホームページ作成ソフトを使ってHTMLページを作る予定だったが、ここまでお試しやらテストのために作ったHTML、CSSで手打ち作成に慣れてしまったので、結果的にはほぼ全て手打ちでHTML、CSSを作ってしまった。
もちろん、ホームページ作成ソフトで作成してもなんら問題ないと思う。

コーディングの際は、HTMLのタグだとかCSSのプロパティとかのリファレンスが傍らにあると便利、というか手打ちの時は必須だ。本を買っても良かったが、今はネット上にHTML、CSSのリファレンスが見易くまとめられたているサイトもあるので、私の場合は今のところ特に本を買う必要もなく済んでいる。検索もできるし頭文字をクリックして目的の用語までジャンプも出来たりするので、もはや本より便利かもしれない。

コーディングの序盤は、主にレイアウト周りについて作る。
ヘッダーとかフッターとか、サイドバーの枠の部分などをHTMLで定義し、CSSでサイズを指定したり装飾したりする。
ヘッダーやフッター、その他スペースの中に入る文言はこの段階では適当なものを入れておいた。骨組みの部分をしっかり作っておけば、中身の文言などを変えるのは簡単だ。

ちなみに、慣れている人なら別だが、初めてHTMLでWebページを作る場合は、1つのページのHTMLとCSSに集中して取り組んだほうが良いと思う。
HTMLとCSSを1組完成させることが出来れば、他のページはその応用で作っていける。私もそのように作業していった。

●コーディングしたHTMLをブラウザで確認する

コーディングしたHTML、CSSはちょくちょくブラウザで表示を確認する。

特に手打ちで作る場合、慣れるまでは少し作っては確認、少し作っては確認、という風にした方が良いと思う。

例えばHTMLやCSSで100行分新しく作って、いざブラウザで表示してみたらレイアウトが崩れた、となった場合、その原因は多くの場合その100行の中にある。
しかし5行追加してレイアウトが崩れたとするとその原因はその5行の中だ。100行の中からレイアウト崩れの原因を探すより5行の中から探すほうがより簡単だ。

Webページの見た目をそのまま編集できるホームページ作成ソフトの場合は、あまりそういうことは気にする必要がないが、やはり本当に自分で思った通りにブラウザで表示されるかの確認はした方が良い。

ちなみに私は普段使っているブラウザのブックマークバーが溢れるほどに埋まっていたので、確認用のブラウザは普段使っているブラウザとは別に用意して、Webサイト制作関連のブックマークもそちらに集めてしまった。どうせあとでブラウザテストはやるので、早めに別のブラウザを用意しておいても損はない。

実際にブラウザで表示されるWebページが、完成イメージと違うと思ったらその点は随時修正するようにした。私の場合でも細かい部分はこの時点でかなり多数の修正を要した。



Web漫画サイト構築 トップページに戻る

富士宗 孔 オンラインコミック トップページに戻る

広告

広告