現在、様々なプログラミングスクールやサブスクのオンライン学習サービスが出てきたお陰でWEBのhtmlやCSSなどのコーディングを最短で習得出来る時代になってきました。
誰しも独学でWEBサイトを作ってみようと決意して最初にぶつかる壁がHTMLとCSSとjquery の3つの言語です。
理解出来ない理由としては
- エディターの扱いが分からない
- 何から始めればいいか分からない
- コード難しくみえ、自分がコードを書けるか不安しかない。
でも、この3つの言語は、数あるプログラミング言語の中でも最も簡単に習得出来る言語である為、勉強の進め方をしっかり理解しておけば1〜3ヶ月でマスターできます。
目次
- まずはProgateを始める
- Progateの後にコーディング出来るようにしておく機能紹介
- 業界ごとに抑えるべきコーディング
まずはProgateを始める
先に結論から書きますが、参考書を一冊買うならProgateに登録してHTML,CSSを学習した方が良いです。その後、jquery 編を学習すれば基礎はマスターできます。
このProgateの凄い所は上で記載したプログラミングが理解出来ない理由を全てカバーしており、①ゲーム感覚でプログラミングが進められる点、②パソコンに専用ソフトウェアは不要、③サイト内はポップ風な雰囲気でとっつきやすい点がかなり初心者には取り組みやすくなっています。
Progateの後にコーディング出来るようにしておく機能紹介
ホームページやランページ(LPサイト)の制作を副業やフリーランスでやってみたい人は、「Progateが終わったらコーディング模写やポートフォリオの作成に取り掛かること」とおそらく習うと思います。私もこのやり方には賛成です。
でも闇雲にコーディング模写に没頭するのではスキル習得には繋がりにくいです。まずは、”これマスターすればとりあえず困らない”と言えるコーディングやツールを抑えることも重要です。
頻出する重要な機能を以下に紹介します。
（１）グローバルナビゲーション
ホームページの上または下にある、各コンテンツページにアクセスするためのボタン（一般的な選択ボタン）をコーディングするのは簡単です。
様々なサイトですでにグローバルナビゲーションのコード(ひな型)がでていますので簡単に探せると思います。
（２）ハンバーグメニュー
ハンバーグメニューとは、選択すると広がるスマホ用のメニューです。グローバルナビゲーションはパソコン等の画面が大きい時に有効ですが、スマホの様に小さい画面ですとそのメニューがドンッ！と画面内にあると邪魔になります。なので普段は畳んで小さく標準しておくのが一般的です。
（３）パンくずナビゲーション
パンくずナビゲーションは、アクセスしているページがサイト全体のどの場所に位置しているかを表すナビです。
よくサイトの上に
「トップ→メニュー一覧→ブログ記事→アーカイブ」の様なものをよく見ると思います。これがパンくずナビゲーションです。
このパンクズナビゲーションは必ずサイトには必要と考えてください。Googleの検索順位に影響するSEO対策として、公式に公表されています。
（４）グーグルマップ表示（店舗アクセス）
店舗型のお店のホームページでは、必須のスキルです。
ホームページに掲載する方法はhtmlをコピペして掲載する方法とGoogle Maps APIを使って掲載する方法の2通りあります。
（５）問い合わせフォーム
お問い合わせフォームは数多くのサービスが存在します。なので初めは自作のお問い合わせフォームはおススメしません。
無料又は有料のメールフォームサービスをサイトオーナーに決めてもらい、そのサービスから取得されるhtmlコードをサイトのhtmlの中にコピペするだけで完了です。
有名なサービスとして3つリンク先を表示します。初めはGoogleフォームが手っ取り早く利用出来ると思います。
（５）予約システム
この予約システムも基本的に自作はせずに多くのサービスを利用してください。
この記事ではあくまで、最短で仕事が出来る様になることを目指していますので、質の良いサービスがあれば積極的に利用する事で最短でサイト製作ができるようになります。
（6）決済システム
決済サービスは手続きが大変なので、初心者には自作をお勧めしません。
大抵のサービスは、予約システムと決済システムがセットになっているのでそれを利用する事になります。
決済サービスに登録してから取得できるhtmlコードをサイトにコピペすればOKです。
業界ごとに抑えるべきコーディング
※なるべく自身のテンプレートを持っておくことをおススメします
- エステ、介護家事、美容室などの高単価サービスのWEBサイト
- メニューリスト
- 価格表
- 連絡先
- 店舗地図
- スタッフ紹介
- 予約システム
- SNS系メンバーサイト
- 活動ブログ
- メンバー紹介
- 問い合わせフォーム
