超現場ブログ

Technique,Design and Events

まずはじめに何をするんだっけ…初コーディング!

Twitter Facebook Google+ はてブ

20170906

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

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

「……」

 

みなさん、こんにちは。

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

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

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

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

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

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

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

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

2.文字を全て記述

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

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

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

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

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

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

4.スライス

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

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

5.CSSの記述

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

 

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

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

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

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

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

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

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

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

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

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.