こんにちは！最近、自家製のレモンシロップでレモネードを飲むのが日課になっているchieitoです。自分で作ると、好みの甘味や酸味に調節できるので良いですね！
では本題ですが、プログラマーやWebデザイナーなどの求人情報を見ていると、業務内容に「Webサイトのコーディング」などと書かれているのを見たことがありませんか？またWebデザインの勉強法として「模写コーディング」という言葉を聞いたことがある人も多いのではないでしょうか。
プログラミング初心者だと、「コーディング」と聞いてもなかなかイメージするのが難しいと思います。そこで今回は、Webサイトのコーディングについて、具体的な内容や作業の手順などを詳しくご説明します。ぜひ参考にしてみてくださいね！
目次
コーディングとは？
ではまず、そもそも「コーディング」とは何？というところからご説明します。
Webサイト制作では主に、
- HTML
- CSS
- JavaScript
などを使ってコードを記述していきます。
このように、プログラミングは企画から始まり、作ったものをテストしたり修正したりと全ての工程が含まれているのです。
サイトコーディングの流れ
ではここで、サイトのコーディング作業の具体的な流れをご説明していきます。
①レイアウトの作成
まずは、どのようなサイトデザインにするか、ターゲットやコンセプトなどを元にレイアウトを作成します。
- ヘッダー
- メイン
- フッター
基本的には、大きく分けてこの３つでWebサイトは構成されています。これを基準に、コンセプトに沿ったデザインを考えていくのです。そしてここからさらに、
- トップページ…会社概要・店舗情報・お問い合わせ
- 店舗情報…各店舗リンク・ブログ
といったように次のページへ枝分かれしていくようにレイアウトを決めていきます。
サイトのトップページは「顔」になる部分。ユーザーが興味関心を持てるようなデザインに仕上げることが重要ポイントになります。そのため、レイアウトの作成はしっかり丁寧に行うこと大切です。
②ファイルの作成
レイアウトが決まったら、次はそれぞれのページ、HTMLやCSSのフォルダーやファイルを作ります。
まずはサイトのフォルダーを作成します。そしてそのフォルダーの中に、
それぞれのページ、HTMLやCSSファイルなどを作成します。
③HTML＆CSSのコードの記述
準備が整ったら、HTMLやCSSコードを記述していきます。
HTMLルール
- DOCTYPE宣言を忘れずに！
- HTMLでは<h1><p><li>などのタグを使用し、またタグを閉じる時はスラッシュ</>を記述する
- HTML内にCSSをリンクさせる
CSSルール
- CSSはプレビューで確認しながら装飾
- 見やすさ、統一感などに気をつける
- プロパティと値の間には（:）を、記述の最後には（;）を忘れずに
など、それぞれのルールに従って記述していきましょう！間違った記述をしているとエラーや非表示になってしまいます。また、たくさんコードを記述した状態で間違いを見つけるのはとても大変です。正しくコードを作成し、その都度プレビューで確認しながら進めていくのがおすすめです！
④レスポンシブ対応
一通りサイトのコーディングが終わったら、次は微調整です。最近は、パソコンよりもスマホやタブレットなどでのインターネット利用が多い傾向にあります。そのため、レスポンシブ対応はWebサイトコーディングの作業で必須！これからコーディングの勉強をする人は、レスポンシブ対応もできるようになっておきましょう！
1,HTMLで、表示領域を設定する「viewport」をmeta要素を使って追加する
|
1 |
<meta name="viewport" content="width=device-width,initial-scale="1.0"> |
このように指定します。
2,CSSでサイズを指定する
PCの場合
|
1 2 3 4 |
@media screen and(min-width:600px) { 通常のCSSを記述 } |
例えば、上記のように記述すると表示画面が600px以上の場合はPC表示になります。
スマホの場合
|
1 2 3 4 |
@media screen and(max-width:600px) { 通常のCSSを記述 } |
このように記述すると、表示画面が0~600pxの場合はスマホ向けに指定した表示になります。
スマホ対応サイトを作るHTMLの書き方｜レスポンシブデザインの基本
⑤最終確認・調整
最後に、画像のサイズや文字の大きさなどの微調整をします。プレビュー表示で確認し、必要に応じて手直しすることが大切です。
- 画像のサイズは適切かどうか、粗くなっていないか
- 文字のサイズや色が見づらくなっていないか
- 文字や装飾などが重なってしまったりエラーになっている部分がないか
など、細かな部分までしっかりとチェックしましょう！より良いサイトを作り上げるには、丁寧な最終チェックや微調整が重要なポイントになります。最初に組み立てた構成が実際に制作してみて使いやすいかどうか、という点もしっかり確認し、必要に応じて変更していくことが大切です。
サイトコーディングに必要な知識は？
サイトのコーディングをするためには、HTMLやCSS、JavaScriptなどの知識が必要です。またこれ以外にも、
- レスポンシブデザインの知識
- Webデザイン知識（Illustrator・Photoshop・XDなど）
- 色彩に関する知識
- SEOの知識
上記の知識を持っていると、より良いサイトを作成できます。また就職・転職などでも、求められる人材になれるのではないでしょうか！
プログラミングの勉強でオススメな方法とは？具体的な方法を解説
まとめ
いかがでしたでしょうか！IT業界は職種がとても多いので、コーディングとプログラミングは何が違うの？と疑問に思ったり、具体的な業務のイメージができなかった人も多いのでは？と思います。
具体的にコーディングとはどんな作業をするのか、プログラミングと何が違うのかがわかると、求人情報などを見ていてもイメージがしやすくなるのではないでしょうか。また、これからどんな仕事をしたいのか、何を学べば良いのかも明確にできます。
将来的に、コーダーからプログラマー、SEとステップアップを目標にするのも良いですね！
HTML/CSSコーディングの基本と手順を徹底解説！副業の案件例も紹介
