記事内にプロモーションリンクが含まれる場合があります。
プログラミングの案件で、特に初心者にオススメの「Web制作」。
- 習得するべき言語（HTML・CSS)の難易度が低いこと
- 案件が多いので、初心者でも仕事を獲得しやすいこと
が主な理由です。
しかし、いざ仕事を始めてみたら、思うように稼ぐことができない･･･と悩む人が多いのも事実です。
これまで、プログラミングをしているだけでは稼ぐことが難しいこと、
稼ぐためには･･･
- HTML・CSSを学ぶときに、「Webマーケティング」もセットで学ぶこと
- 自分の商品やサービス、技術を売るため「ランディングページ」を活用すること
の重要性を話してきました。
今回は、Webサイトやランディングページを作成するのに欠かせない
- HTML・CSS
- Webサイトを簡単に構築できる 「Bootstrap4」
- 最速コーディングのためのポイント
について詳しく解説していきます。
目次
サイト制作に欠かせない言語「HTML」「CSS」
- 「HTML」
- 「CSS」
はWebサイトを制作する時に欠かせない言語。
現在、インターネット上で公開されてるWebページのほとんどは「HTML」と「CSS」によって作成されているんですよ。
一見暗号のようで難しそうに感じますが、プログラミング言語の中では、比較的取り組みやすく、初心者にはオススメ。
簡単なWebページなら、 タグさえ覚えてしまえば作成できますよ。
HTMLとは？
HTML（エイチティーエムエル）とは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略。
- 見出し
- 文字
- 画像
- リンク
など、文書構造を表示させるための言語です。
CSSとは？
CSS（シーエスエス）とは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、基本 HTMLとセットで使われます。
HTMLでかかれた文字だけのページを
- 配置を変える
- 色を付ける
- 装飾する
などして見映えを良くする（デザインを施す）ための言語です。
サイトを簡単に作成できる「Bootstrap4」
Bootstrap4とは、Twitter社が開発した、Webサイトを簡単に構築できるCSSフレームワーク（枠組み）で、初心者でも見映えの良いランディングページを作成することができます。
Bootstrap4を使うメリット
- 無料で利用できる
- フレームワークによる高速化
- 初心者でも見映えの良いランディングページを作成できる
- レスポンシブWebデザインに対応している
無料で利用できる
公式サイトから、Bootstrapファイル一式をダウンロードすることで誰でも無料で使うことができます。
フレームワークによる高速化
普通、Web制作では、CSSは自分で入力・設定する必要がありますが、Bootstrap4では、 レイアウトのためのスタイルやパーツ、オプションがあらかじめ用意されています。
似たようなコードを何度も書かなくてもすむので、
- 手間や時間を大幅に短縮
できます。
見映えのよいランディングページを簡単に早く作成できるのが最大のメリットでしょう。
初心者でも見映えの良いランディングページを作成できる
Bootstrap4では、商品・サービスや目的に応じたテンプレートも豊富に用意されています。
テンプレートと、既にデザイン済みのパーツを組み合わせることで、
- デザインに自信がない人
- 初心者
- 見映えのよいランディングページ
ができますよ。
レスポンシブWebデザインに対応している
レスポンシブWebデザインとは、1つのHTMLで、
- パソコン
- スマートフォン
- タブレット
に対応できることをいいます。
ブラウザごとに個別にページを作る必要がないので、手間がかかりません。
HTMLが1つなので、ユーザー同士、シェアされやすくなるのもポイントです。
Bootstrap4を使うデメリット
Bootstrap4を使うデメリットは･･･
- 似たようなデザインになってしまうこと
- 個性出しづらいこと
同じテンプレート、同じパーツを使っているWebページとの差別化が難しく、似たようなデザインなってしまうのが、デメリットです。
Bootstrap4で最速コーディングのポイント
コーディングとは、Web制作には欠かせない工程のひとつ。
制作したサイトデザインを、HTMLとCSSを使用して、Web上で表示させる作業のことをいいます。
エディターを用意
エディターとは、パソコンで、文章やコードなどを書くときに使う編集用ソフトのこと。
例えば、Windowsの「メモ帳」も、テキストエディターのひとつです。
メモ帳でもコーディングはできますが、 効率良く作業するために、プログラミングに適したエディターを使うのがオススメです。
- Bootstrap4
- TeraPad
- サクラエディタ
- Atom
- Notepad++
- 秀丸エディタ など
最速コーディングのためのポイント
初心者だと特に、「まずは、コードを全部しっかり覚えて･･･」と知識ばかりを詰め込みがちですが、これではなかなかサイトを作れるようにはならないでしょう。
では、どうしたらよいのかというと、便利なツールを使って手を動かす。
これがポイントです。
便利なチートシートを使う
チートシートとは、直訳すると「カンニングペーパー」という意味で、よく使うコードなどをまとめた「早見表」みたいなもの 。
カンニングというと、なんか悪いことをしているような罪悪感に苛まれますが、コーディングはテストではありませんし、使ったからと言って怒る人もいません。
効率よく作業するために、とても便利なものなので、ぜひ活用しましょう。
Bootstrap 4 のチートシート
- Bootstrap 4 Cheat Sheet
- Bootstrap4 CheatSheet for Beginners
- hackerthemes
HTMLのチートシート
- HTMLクィックリファレンス
- HTML5 タグ★チートシート
CSSのチートシート
- スタイルシートリファレンス
- CSS Flexboxチートシート
実際にとにかくやってみる
最初から細かいところまで手を出すのではなく、好きなサイトを真似して大まかに全体を作るところから始めてみましょう。
実際に手を動かして作っていくことで、自然と使いこなせるようになっていくはずです。
学ぶならプログラミングスクールがオススメ
- 「HTML」
- 「CSS」
- 「コーディング」
これから勉強予定だという人もいるかもしれませんね。
学ぶ主な方法は、独学、もしくは、プログラミングスクールです。
独学なら･･･
- チューター
- ドットインストール
プログラミングスクールなら･･･
が人気。
プログラミングの勉強は、とにかく「継続すること」が大切なので、自分のライフスタイルに合った勉強方法がいいのですが、 独学は挫折しやすいので注意！
独学は挫折しやすい
独学が「挫折しやすい」といわれる理由
- 何をどこまで、どのように勉強すればいいかわからない
- ついついサボってしまい続かない
- 行き詰まってしまった時に、一人で解決することが難しい
- 仕事で使えるレベルまで習得するのに時間がかかる
プログラミングに触れてみたいなとか、趣味でやりたいなとか、 もともと基本的な知識はある人や、身近にエンジニアがいて相談ができる環境であれば、独学でもいいでしょう。
目的が「稼ぐこと」ならプログラミングスクール
プログラミングスクールは、それなりにお金がかかるのがデメリットですが、お金をかけた分、しっかり学ぼうという意識が高まるとともに、挫折しにくいのがポイント。
しっかり稼ぎたい場合は、プログラミングスクールで学ぶのが確実ですよ。
プログラミングスクールのメリット
- わからないことはすぐに解決できるので挫折しにくい
- 効率的に学べる
- 実践向きのスキルを習得できる
- プログラミングのスキル以外のこと（講師の体験談やエンジニアとしての心構えなど）も学べる
特に「Webマーケティングコース」があるスクールであれば、一石二鳥！
Webサイトへの集客など、実践的向きのスキルを習得できます。
プログラミングで稼ぐ！HTML＋Bootstrap4で最速コーディングまとめ
プログラミングは「稼げる」と、よく聞きますが、実際は簡単なことではありません。
稼げているのは、マーケティングスキルを持つ実務経験豊富なエンジニアだけです。
そのため、プログラミングで、しっかり稼ぎたい場合は･･･
- Web制作の仕事をするための「HTML」「CSS」
- 自分の技術を売るための「Webマーケティングの知識」と「ランディングページ」
- コーディング技術
が必須。
そして、Webサイトやランディングページを作るために必要なのは･･･
- 「HTML」「CSS」
- Bootstrap4
- エディター
Webページと、ランディングページが作成できるようになると、副業やクラウドソーシングでも仕事に困らないと思います。
なぜなら、今は企業だけでなく、個人店でも、宣伝はWebが主軸となりつつあるからです。
ネットでWebページを作る「コーディング案件」や「ランディングページ制作案件」は、今でも多いのですが、今後もさらに増加していくと考えられます。
初心者であればなおさら、中途半端になりがちな独学ではなく、プログラミングスクールで、実践向きのしっかりしたスキルを身につけるのがオススメですよ。
