ホームページやブログを始めるにあたって、おそらくこの記事に辿り着いたのでしょうか。
そしてホームページやブログのデザインに興味があって、このページを見ているのでは無いでしょうか。
そんな初心者に向けて『何から学べば良いのか』そして『コーディングとは何か』を解説していきたいと思います。
まずは自分が何がしたいのかが重要ですよ。
突然何がしたいか聞かれてもなぁ。。。
そうだね。難しいよね。
じゃあ一つ一つ説明していくから、そこから『自分のやりたい事』を見つけて行こうか！
フロントエンド派？それともバックエンド派？
まずはあなたが『何をしたいと考えているか？』で覚えるべき言語は決まります。
ホームページ制作現場では、セクション毎に担当が分かれています。
まずは大きく分けて『フロントエンド』と『バックエンド』です。
フロントエンジニア
ユーザーが見ているWebサイトの見た目の部分を製作するエンジニアです。
サイト設計などのデザインを元に、HTMLやCSS、JavaScriptなどの言語を使用してユーザーに対して視覚的効果を与える状態にします。
HTML・・・・・単語や文章に意味を持たせる言語
CSS・・・・・・単語や文章、画像などに対して装飾を与える言語
JavaScript・・・サイト画面上でイベントや動作を実行させる言語
バックエンドエンジニア
ホームページやブログをサポートする裏側の部分を担当するエンジニア
案件に応じて裏側の動的な処理やデータベースの要件定義や設計・開発、運用保守などをおこないます。
例えば、ECサイトの場合、会員情報登録であったり、クレジットカード決済などの個人情報のデータを読み込むなどのユーザから見えない部分の処理を行います。
まずはフロントエンドの知識
フロントエンドの知識がなければバックエンドを正常に動かすことはできません。
フロントエンドを学ぶ中で、データを処理したいなどの知識が必要となった場合に勉強していくことをお勧めします。
例えばネットショップを作成したいと思い、フロントエンドが出来たけど在庫情報や顧客情報を処理したいなど。
そしてバックエンドには、そのフロントエンドに適した言語が求められる場合が多くあります。
まずはHTMLを覚えることをお勧めします。
私は見栄えのいいホームページを作りたいと思っています。
だったらフロントエンドだね。
コーディングとプログラミングの違い
一般的にはコーディングとは『HTML』や『CSS』といったマークアップ言語を指す場合が多いようです。
『HTML』や『CSS』では定められた内容を伝達、表示されるものです。
しかしプログラミングでは複雑な計算や処理必要となります。
例えば『もしユーザーが○○と入力した場合、▲▲と処理をする』など、いくつもの分岐点を必要とする場合などです。
ECサイトであれば処理をした後、在庫から引くなどの処理も発生しますね。
コーディングの具体例
ここではどのようにサイトを作っていくか簡単に説明するね
デザインカンプでサイト設計する
デザインカンプでは『それぞれの画像やコンテンツの幅や高さ、余白』を決めていきます。
HTMLコーディング
それぞれの画像や文章、更にはコンテンツに意味を持たせます。
大きな流れはこのような感じです。
しかし、HTMLではコンテンツや文章、画像にそれぞれ意味を持たせているだけです。
この後、CSSで配置（レイアウト）や枠やフォントに変化を与えていくコーディングを行います。
なるほど！HTMLから覚えていかないといけないんですね。
そうだね。
HTMLが出来ないと、CSSも出来ないんだ。
HTMLを学ぶ。シリーズはこちら
