自分のWebサイトを立ち上げたい学生へ。今すぐ始めるプログラミング入門

2d0232e2ed9dbfbbc3eb129d2f921281_s

未知の世界に飛び込むには誰にだって勇気がいります。
特にプログラミング言語となると、専門用語ばかりで、
理解に苦しみ、中々自分一人で勉強を始める事は難しいかもしれません。
しかし、プログラミングも体系的に順序立てて勉強すれば、
スキル習得は1ヶ月ほどで、誰でも簡単にできます。

最初から全部勉強しようとせず、まずは全体の概要を把握し、
そこから一つ一つ丁寧にスキルの習得をしていきましょう。

勉強するべきプログラミング言語を知ろう!

プログラミング言語と一重にいっても、その用途と特徴は様々です。
今回は良く耳にする事が多い、プログラミング言語の活用について紹介します。

■ HTML:Webサイトのフレームを作る
■ CSS:Webサイトのデザインを行う
■ JavaScript:Webサイトに動きを持たせる
■ PHP:動的なWebサイトの制作に使用
■ C言語:アプリ、ウェブサービスの制作に利用
■ Java:Webアプリなど幅広く利用

今回はWebサイト制作に関わる言語を幅広く紹介していますが、
基本的には、HTML/CSSのスキルを習得すれば簡単なWebサイトを作る事はできます。
それ以外の言語はWebサイトに様々な機能をつけるための言語になります。
HTMLとCSSは他のプログラミング言語に比べても、文法と意味を簡単に理解できます。

Webサイト制作のスキルを上げるのであれば、まずはHTML/CSSから勉強を始めましょう。
(HTMLは厳格にはマークアップ言語と呼ばれ、プログラミング言語からは外れます。)

HTML/CSSの勉強を始めよう!

プログラミング言語の習得方法は人によって様々です。
書籍やネットから、独学で勉強をする人もいれば、
学校の授業、会社の講習でスキル習得をする人もいます。

最近ではネットで無料のセミナー動画を見ることもできるなど、
ネット上で勉強ができる環境が整ってきました。
これらのWebサイトでは、ゲーム感覚でHTML/CSSの勉強をできますので、
ぜひスキル習得に活用してみて下さい!

世界中で有名なプログラミング入門サイト『Codecacademy』
穴埋め形式で学べる『CODEPREP』
3分動画でマスターする『ドットインストール』

また以下のサイトの記事も、Webサイト制作の流れが非常に良くまとまっています。

■ Webクリエイターボックス
■ Arch
■ Web Design RECIPES

これらの記事はプログラミングの勉強を始める前に一読しておくと、
『Webサイト制作の一連の流れ』がつかめるので、勉強もはかどると思います。
分からない専門用語は読み飛ばしてもいいので、まずは全体の概要から理解するようにしましょう。

専門用語とタグの意味を覚えよう!

全体概要が理解できたら、いよいよプログラミング言語の勉強です。
専門用語については、順序よく学べば理解できるとは思いますが、
ここでは勉強を始める前に、覚えておきたい専門用語を紹介します。

【マークアップ】
HTMLで文章を書くこと。Webサイトの文字や構造を作る作業のこと

【コーディング】
CSSで文章を書くこと。HTMLで作ったWebサイトをデザインしていく作業のこと

【タグ】
HTML/CSSの単語のこと(例:h1、a、head、navなど)

【テキストエディタ】
プログラミング言語を書くのに使うソフト(例:メモ帳、TeraPad、さくらエディタなど)
※officeのWordソフトを使ってプログラミングをすることはできない

【ドメイン】
Webサイトの住所のこと(例:http://www.xxxx.comなど)

【サーバー】
制作したWebサイトのデータを保存して、インターネット上にアップロードするためのもの
企業からお金を払って借りることが一般的(例:ロリポップXserverなど)

(Web Design RECIPESより)

これらの専門用語はWebサイト制作を行う上で最低限覚えておきましょう。
また、HTML/CSSのタグの意味を理解することも大切です。
以下で代表的なHTML/CSSのタグを紹介します。

【html、head、body】
Webサイト全体を構成するために、一番大きな枠組みで使うタグ
htmlの中に全ての言語が書かれる。headにはサイトのタイトルや設定など、
bodyにはWebサイトのコンテンツ部分が記述される。

【header、nav、aside、secton、footer】
Webサイトの基本構造を作るために使うタグ。

【h1〜h6】
見出しタグ。各コンテンツのタイトルや、強調したい文字を入れる。

【a】
文字にリンクを設定するタグ。文字が青色下線の設定になる。

【strong、em】
文字を強調するタグ。文字が太字になる。

ここでは全体の一部しか紹介をしていませんが、
Web制作において、実際に使われるタグは多くありません。
タグ自体はかなりの種類がありますが、全部覚えなくても十分にWebサイトの制作は行えます。

Webサイト制作で重要なのは、ゼロからコードを書くことよりも、
コードを読んで、意味を理解できているかどうかの方が重要です。

まずはHTML/CSSの文字列を見て、それぞれのタグにどのような意味があるのかを理解しましょう。

Webサイトを実際に作ってみよう

プログラミング言語は実際に自分で記述をしなければ、
中々スキルとして身に付くことはありません。

できれば最初は自分でコードを打ち込んでいくようにしましょう。

Webサイト制作を行うにも、様々なソフトがあります。
テキストエディタで制作することも可能ですが、
Webサイトの状態を確認するのに手間がかかりますので、Webサイト制作ソフトを使うことをおすすめします。

無料ソフト:AptanaBlueGriffonStyleNote
有料ソフト:BiNDDreamwever

これらのソフトにはコードを打ち込む際に様々な補助機能もついています。
最初は先ほど紹介した記事や、書籍を見ながらでいいので、
まずはWebサイトの形をしっかりと作るところまでやってみましょう。

最初からオリジナルのWebサイトを作るよりも、
チュートリアルでテンプレートサイトを作ってみる方がスキルとしては早く身に付きます。

できる限り早くオリジナルのWebサイトを作りたい気持ちも分かりますが、
まずはWebサイト制作の基礎を理解し、スキルを身につけることを優先しましょう。

Webサイト制作を一緒に勉強してみませんか?

ここまでWebサイト制作について独学で学びたいと言う人向けに、
記事を書いてきましたが、一人で全部勉強するとなるとかなりの手間と時間がかかると思います。

学生団体へのススメでは、Webサイト制作に取り組みたい学生に向けて、
プログラミングとWebサイト制作のスキルアップセミナーを行っています。

プログラミングセミナー案1

セミナーは各回3時間で、ワークショップを交えながら実践的にWebサイト制作のスキルアップを行います。

参加者にはセミナー後のフォローも行っていますので、
ぜひWebサイト制作の勉強に活用してみて下さい!

第1回:Webサイトを作るにあたって必要な4つの知識 概要

日時:1月12日(日)13時〜16時
会場:Garage Akihabara
参加費:1000円
得られるスキル:ITリテラシー、html/css基礎、Webサイトのフレーム作り
詳細は以下のURLから確認をお願いします。
>>http://gakusei-susume.com/programming-susume-1st/