HTML、CSSを勉強し知識が少しずつ固まってきた頃…、

「じゃ～、コーディングしてみましょうか！」

「……」

みなさん、こんにちは。

初めてコーディングをする時、

「あれ、何から始めればいいんだっけ…」

とちょっと戸惑ったご経験はありませんか？

私は初めてのコーディングの時、「何から手を付けるんだっけ…」と戸惑いました。

そこで簡単ではありますが、『Webサイトのコーディングの手順』をちょっとまとめてみました。

 1.デザインデータを受け取る

まずは慌てず、photoshopデータ、画像（jpg、gif、png）などのデザインデータを確認し、紙に箱組と配置を書き出してみる。

この時、文書構造を確認しておくと、後の文字の書出し・タグ付けの際に迷うことを少なくしてくれるかもしれません。

2.文字を全て記述

画像内の（alt属性に入るであろう）文字も全て書き出していきます。

※区切りが分かるように改行しておくとよいですね

3.文字に対してマークアップ

マークアップ = 意味付け = タグ付けをしていきます。

慣れてきたら文字の書出しと一緒にタグ付けもやっていきます。

※画像があれば〈img src=”#” alt=”画像を表す文”〉、リンクがあれば〈a href=”#”〉も記述していきます。

4.スライス

パーツ毎にスライスしていきます。

コーディングしやすいようにあえて余白を含んでスライスしたりなど、その時々でスライスの仕方を変えていくことがあると思います。

5.CSSの記述

見た目を整えていきます。

作業方法や順序などは、人それぞれ違ってくると思います。

繰り返し繰り返しコーディングしていく中で、さらに効率のよい自分なりの作業方法が見つかるかもしれません。

周囲の人にこっそり聞いてみたり、参考にして自分流にしてみてもいいですよね。

少し慣れてくると紙に書き出さず、

「ここはこのタグを使って、スタイルシートではこのプロパティで指定しよう。」など、

頭のなかで組み立てていくことができるようになると思います。

「実際に現場で作業している講師の人達はどんな風にコーディングしているんだろ～？」

もし気になる方がいらっしゃったら無料の体験授業も受け付けておりますので、お気軽にお問い合わせくださいませ。

最後まで読んでくださりありがとうございます。