物販

コーディング作業って何?初心者でもわかる基礎知識まとめ

コーディングとはWEBサイトを作成する際のデザインをもとに、HTMLやCSSといったマークアップ言語を設定することをいいます。要するにリンク設定や文字を太くするなどの動作を、コーディング作業で設定してWEBサイトの基礎を作っていくのです。

そもそも「コーディング作業って何?」という初心者でも分かりやすく解説していきます。ある程度把握している人でも、再確認にご活用ください。

独学でも学べるの?事前に理解したい注意点とは

 

プログラミング学習を始める際には、多くの人は書籍や学習サイトなどを用いて独学で始めます。しかし、独学で学習するとほとんどの人が挫折してしまいます。

学習の挫折率調査の結果(侍エンジニア塾調べ:株式会社侍)では、87.5%の人が挫折やつまずきを経験していることが分かっています。しかも、ほとんどがエラーの解決ができずにモチベーションが下がったことが挫折の原因です。

なぜ独学のプログラミング学習が難しいのでしょうか。それは3つの理由が挙げられます。

・独学では学びにくい
・情報の見極めが必要
・検索力がついていない

この3つです。1つずつ詳しくみていきましょう。

独学では学びにくい

プログラミングを習う専門学校では、講師が学ぶ順番や内容・期限を考えて教えてくれます。そのため学生は講師の教えるままに基礎から順に学べて非常に効率的です。

しかし独学の場合は、自分の知りたい情報を自分のタイミングで調べる必要が出てきます。すると知識が断片的でムラになり、全てを学びにくいのです。

このように、プログラミング学習で知っておきたい情報を独学でムラなく学ぶには、ある程度の知識をつけておく必要があるのです。さらに、学校の講師のように学ぶ順番や内容を把握することができないので、効率良く学ぶことが難しくなります。

情報の見極めが必要

「ネットリテラシー」という言葉をご存じでしょうか。ネットリテラシーとは、ネット上の情報の正確性を自分で読み取って、不要な情報の断捨離と適切な情報の取得ができることをいいます。

他にも多くの意味がありますが、今回重要なのは上記の部分です。ネット検索はとても手軽ですが、さまざまな情報が溢れかえっています。その情報の正確性・必要性を見極めなければ独学での学習は難しいといえるでしょう。万が一誤った情報が発信されていた場合に、情報の見極めができていないと、誤った情報を得てしまうこともじゅうぶん考えられるのです。

ネット上の情報の正確性を読み取ることができなければ、いくら勉強しても意味がなくなってしまいます。1から学ぶ場合はとくに気をつけなければなりません。

検索力がついていない

独学で学習するには、「検索力」も大切です。検索力とは自分に必要な情報をネット上から見つけることができることをいいます。まずは検索力を身に着けて、自分が欲しい情報を膨大な情報の中から見つけなければなりません。

検索力がないと情報を得ることすらできないのです。どのようなワードで調べればいいのか、どのようなことを調べたいのかを明確にして調べていきましょう。

これだけは押さえておきたい!コーディングスキルとツール

ここからはコーディング作業に関わるスキルやツールをご紹介していきます。実際のコーディング作業にも役立つ内容なので、覚えておきましょう。

今回ご紹介するのは以下の3つです。

・Adobe Dreamweaver(アドビドリームウィーバー)
・WordPress(ワードプレス)
・テキストエディタ

この3つを押さえておけば、WEBサイト制作は非常にしやすくなります。初心者はまずこの3つから始めましょう。

Adobe Dreamweaver(アドビドリームウィーバー)

WEBサイトを作るために、コーディング作業を1からしなくても本格的なホームページが作れるソフトです。編集・ファイル管理・レイアウト表示など、ホームページ制作や更新に必要な機能がそろっています。

さらにHTMLやCSSコードを実際に書き込むことなく、「デザインビュー」という画面上でそのまま記述できるようになっています。CSSのデザイン部分も文字装飾フォーマットが入っているため、かんたんに作成可能です。

直感的に作業できるので効率が良く、分かりやすいのが特徴となっています。しかし、自由度が高いため、使いこなすためにはHTML・CSSの知識は必須です。使用前にある程度の勉強をしておきましょう。

WordPress(ワードプレス)

個人ブログや企業のホームページまで制作できるブログソフトウェアです。世界中のサイトの3分の1はWordPressで作られていると言われているほど浸透しています。

自由に改良できるうえに機能が充実、セキュリティ面も安心です。サイトデザインは無料のテンプレートを使用すれば、ホームページを作ることができます。テンプレートのHTML・CSSのカスタマイズが可能で、より柔軟に作れるようになっています。

無料ソフトなので維持費用がかかりませんが、サーバーやドメイン購入が必須です。それでも多くの人が利用しているWordPressは、初心者やWEBサイト作成に興味がある人は覚えておきましょう。

テキストエディタ

テキストエディタは、文章を編集するソフトウェアです。多くはプログラミング言語・HTML・CSSといったコーディングに特化しています。テキストエディタがなくてもプログラムは可能ですが、テキストエディタならより多くの編集ができるでしょう。

文字の置換と検索などの機能も付いているので、一度入力すれば再度入力したときには自動的に入力されるしくみです。さらに、プラグインで機能の追加をすることで、さまざまな機能も使用可能になります。

エディタ機能を追加でき、IDE(総合開発環境)を使用すれば、プログラムを書く・実行する・アプリリリースまでを一連の流れで出来るようになります。テキストエディタは週類豊富なので、ソフトや機能を比べて自分に合ったものを見つけましょう。

WEBサイト作成までの流れ

ここからは、上の画像のような構成のWEBサイトを作る手順をみていきましょう。コツとしては一度に作ってしまうのではなく、パーツごとに作っていくのがポイントです。部分ごとに分けることで、作業効率もアップするので、ぜひ参考にしてみてください。

ファイル・フォルダー作成

始めは、必要なフォルダーとファイルを用意しましょう。WEBサイトによって必要なフォルダーとファイルは異なりますが、基本的にはプロジェクトフォルダーに index.html・CSSを入れるフォルダー「CSS」を作成します。さらにその中にstyle.cssを作成し、画像を入れるためのimagesフォルダーを作っておきます。

index.htmlにHTMLを書き込みましょう。続いてstyle.cssにCSSを書き込みます。必要となる画像はimagesフォルダーに入れていきましょう。

レイアウト作成

ページのレイアウトを作成しましょう。マークアップを始める前にページ内の文章の構造を確認します。基本的には同じことの積み重ねなので、まずは大まかな骨組みのレイアウトを考えていきましょう。

上の図のように、ヘッダー・フッター・メイン・サイドの部分を囲んでおき、クラスやIDを振っておくと後で楽です。レイアウトは紙に書いても、ワイヤーフレームに書いてもいいでしょう。あらかじめ書き込んでおくことで全体像が把握しやすくなるのでオススメの方法といえます。ソースコード内で迷わないように、レイアウトを作成することは毎回先におこなうようにしましょう。

基本HTML・head内の作成

レイアウトを作成したらHTMLの作成に入ります。最初はWEBページの情報部分・head内を作成しましょう。

同時にhead内の各項目再確認しましょう。

・meta charset 文字のエンコーディング(UTF-8で構いません)
・titl WEBページのタイトル部分
・meta name=description WEBページの紹介文にあたる部分(検索結果に表示)
・meta name=viewport  レスポンシブに対応させる
・reset.css ブラウザのデフォルトCSSを打ち消す

レイアウト部分をHTMLでマークアップ

レイアウト部分(ヘッダー・フッター・メイン・サイド)をマークアップしていきましょう。上のレイアウトを作成時に書いたように、タグやクラスを整理しながら記述するのがポイントです。

中身は大体記述できればOKです。レイアウトが出来上がったら、テキストや画像を入れていきましょう。

レイアウトをCSSでスタイリング

HTMLを装飾していきます。背景色をつけておくと分かりやすいです。横並びになる要素やプロパティを確認しながら進めていきましょう。

するとこのようになります。色を指定する場合はカラーコードを使用しますが、決められた色の名称を使うことも可能です。テストの段階では分かりやすいため、短めの色名称(gold・pink・tanなど)を覚えておきましょう。

レイアウトのレスポンシブ対応

まずはデスクトップサイズで確認をして問題なければ、モバイルサイズにも対応させます。レスポンシブには@mediaの後に表示領域を指定して、装飾したい要素を書いてください。

ここでは、600pxを下回ったときに.main・.sideを縦にするように指示を出しています。

これでレイアウトの完成です。

パーツごとのHTMLマークアップ・CSSスタイリング

最後はパーツごとに必要なIDやクラスを書き出して、HTMLの記述とCSSの装飾を繰り返していきます。細部を作り込むのは大変ですが、パーツごとに分けていくと作業がしやすくなります。コーディングが全て終わったら、各ブラウザで表示を確認してみましょう。

無料でできるコーディング学習サービス

ここからは、無料でできるコーディング学習サービスをご紹介します。オススメは以下の4つです。

・Progate(プロゲート)
・ドットインストール
・CODEPREP(コードプレップ)
・Schoo(スクー)

ご紹介するのは、HTMLコードを記述したり、動画やゲーム感覚で学べたりとムラなく楽しく学べるサービスです。今後のコーディング学習にぜひ役立ててください。

Progate(プロゲート)

ゲームをする感覚でコードを無料で学べます。HTMLコードを実際に記述したり、ヒントが設定されていたりと勉強できる工夫がされています。進歩状況も確認できるので、すき間時間に利用してみてはいかがでしょうか。

参考:Progate

ドットインストール

WEB制作に関わったことのある人達には、有名なサービスです。プログラミング学習の定番ともいえ、プログラム言語やWordPressの構築までを学ぶことができます。

動画コンテンツは3分程度なので自分のペースで進められるところも人気の理由となっています。さらに、カテゴリが細かく分かれているため、復習したい箇所が見つけやすいのも特徴です。スクリーンリーダーのサポートも有効となっています。

参考:ドットインストール

CODEPREP(コードプレップ)

プログラムコードを記述して学べるサービスです。学習範囲はHTML・CSSからアプリの開発まで幅広く充実しています。WEBサイト作成の初心者でも学びやすく設定されているため、コーディングの知識があまりない人でもスタートできる環境が整っています。

参考:CODEPREP

Schoo(スクー)

無料でオンラインの動画学習ができます。大人はもちろん中学生・高校生向けに授業の一環として導入されるなど、たいへん勢いのあるサービスです。

Schooではすべての授業を生配信しており、各分野で活躍する著名人を講師として迎えているのが強みです。質問はその場でできるので、初心者でも安心して授業を受けられます。

コーディングやプログラミングはもちろん、WEBデザインやマーケティングなどの項目も学習できるため、自分でWEBサイトを作って開業したい人にもオススメです。Schoo内では数多くのジャンルの学習ができめるため、今後開業やネットショップ運営を考えている人はより長く活用できるでしょう。

参考:Schoo

まとめ

プログラミングは、プログラムの作成から完成までのことをいいます。一方でコーディングはコードを記述する作業のことです。

プログラミングとコーディングをそれぞれ理解し、独学で学ぶときは情報の断捨離と正確性を見極めてください。まずはオススメの学習サービスである程度の知識をつけておくと、学習もより効率が良くなります。この記事でコーディングをより理解して、今後にいかして頂けると幸いです。