HTML/CSSのコーディング教材を公開【準備編】

コーディング練習準備編

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg

今回は、HTML/CSSのコーディングの準備を行います。
超初心者にもわかるように解説します。
安心して読み進めてください。

今回の概要

  • 所要時間:20分
  • 使用言語:なし
  • 作業内容:コーディングを始める準備をする。

それでは始めていきましょう。

手順1、コーディング全体の流れを把握する

まずは、コーディング全体の流れを把握しましょう。狙いは次の通り。

  • コーディングに必要な時間を把握する
  • 作業の順番を明確にできる

全体を俯瞰することで、コーディングの所要時間を把握しながら、効率を最大化できます。

今回の場合は、次のようなステップになります。

コーディングの下準備編
  • 所要時間:40分
  • 使用言語:HTML&CSS
  • 作業内容:コーディングの下準備をする
ヘッダー部分のコーディング
  • 所要時間:40分
  • 使用言語:HTML&CSS
  • 作業内容:ヘッダー部分を作る
ヒーローセクションのコーディング
  • 所要時間:60分
  • 使用言語:HTML&CSS
  • 作業内容:ファーストビューを作る
アバウトセクションのコーディング
  • 所要時間:60分
  • 使用言語:HTML&CSS
  • 作業内容:自己紹介用のセクションを作る
サービスセクション部分のコーディング
  • 所要時間:60分
  • 使用言語:HTML&CSS
  • 作業内容:自身のサービスを説明したセクションを作る
実績セクション部分のコーディング
  • 所要時間:60分
  • 使用言語:HTML&CSS、jQuery
  • 作業内容:過去実績を紹介するセクションを作る
お問い合わせセクション部分のコーディング
  • 所要時間:60分
  • 使用言語:HTML&CSS、Google Form
  • 作業内容:お問い合わせのページを作る
フッターとヘッダーを改変する
  • 所要時間:60分
  • 使用言語:HTML&CSS、jQuery
  • 作業内容:ヘッダーフッターを完成させる
レスポンシブ対応のコーディング
  • 所要時間:60分
  • 使用言語:HTML&CSS、Google Form
  • 作業内容:お問い合わせのページを作る

大まかな流れを把握したことで、進める順番と必要時間が分かりました。

この作業は、実際にお仕事を受けた時に重要性が増します。理由は次の通り。

  • クライアントに作業予定を伝える必要がある
  • 納品時間を明確にすることができる

時間を厳守するために、必ず全体を俯瞰するようにしましょう。

実際のLPを作る時のフローを以下の記事でご紹介しています。

【初心者向け】ランディングページのコーディングの流れとコツ 【初心者向け】ランディングページのコーディングの流れとコツ

他の事例を確認したい場合は、よければご覧ください。

手順2、エディターを準備する

それでは、実際にプログライングを行うための準備をはじめましょう。

まずは、プログラミングのコードを記述するエディターをインストールしましょう。

オススメは、VScodeというエディターです。

プログラミング界隈でもっとも有名なエディタなので、間違い無いものです。

そして、VScodeには拡張機能があり、より使いやすくカスタマイズさせることができます。

  • コードを打ちやすくできる
  • コードを見やすくできる
  • エディタを日本語対応にできる

拡張機能を導入することで、効率をグッとあげられるので、導入することをオススメします。

Visual Studio Codeのロゴ Visual Studio Codeのインストールと最初にするべき4つの設定

上記を参考にしつつ、設定してみてください。

手順3、ファイルを作る

次に、ファイルを作っていきましょう。

デスクトップにファイルを作りましょう。

このフォルダの中に、以下のファイルを作ります。

  • index.html
  • style.css
  • main.js
  • imgフォルダ

作り方は、ダウンロードしたVScodeを使って使いましょう。

Vscodeを起動し、ファイル→開くを選択します。

そして、デスクトップに作ったコーディング練習というファイルを開きます。

下記画像をみてください。

  • 赤で囲った場所:新しいファイルを作成
  • 赤の右隣の場所:新しいフォルダを作成

その上で、index.htmlstyle.cssmain.jsという名前のファイルを作成します。

また、imgという名前のフォルダを制作します。

制作すると、下記のような画面になるはずです。

※拡張機能の有無で、レイアウトは若干異なります。

そして、デスクトップのコーディング練習というフォルダを確認しましょう。

VScodeで制作したフォルダやファイルができているはずです。

手順4、素材をダウンロードする

最後に、今回の練習で使う画像素材をダウンロードしましょう。

下記のボタンをクリックして、ダウンロードしてください。

zip形式でダウンロードしてから解凍して、コーディング練習のimgフォルダに移動させてください。

無事に移動させられれば終了です。

ちなみに、今回使用する人物イラストはunDrawというサイトから引用しています。

フリーで素敵なイラストを使用できるため、非常に重宝します。

見ているだけで面白いので、ぜひ見てみてください。

まとめ:準備完了チェック

今回行ったことは4つです。

  1. コーディング全体の流れを確認
  2. エディターを準備する
  3. ファイルを作る
  4. 素材をダウンロードする

完了したら次の『コーディング練習 ヘッダー編(準備中)』に移動してください。