ホームページ作成に必要なプログラミング言語「初心者向け」

ホームページ作成プログラミング言語

投稿日 更新日

by Chiharu Morita

ホームページを自分で作りたい方にのために、この記事を書いています。ホームページを自分で作るのはそれほど難しいことではなく、誰でもある程度の時間勉強すれば、作れるようになります。

この記事を読めば大まかな制作の概略を理解することができるようになります。そして、どんなプログラミング言語が必要なのかがわかります。

では、初心者の方でもわかるように説明していきます。

  • ホームページを構成する言語：HTML
  • ホームページのデザインを作る言語：CSS
  • ホームページに動作をつけるための言語：JavaScript
  • サーバーサイド言語

ホームページを構成する言語：HTML

ホームページを作る言語のうち最も基本的なものがHTMLという言語です。HTMLはプログラミング言語ではなく、マークアップ言語と呼ばれるもので、単なるテキストファイルになります。

HTMLを記述し、ファイルの拡張子を.htmlとすればHTMLファイルになります。このファイルをダブルクリックすると既設のブラウザが起動し、HTMLファイルの中身が表示されます。

このように、文章が表示されます。
HTMLをブラウザで表示

ではどのように、HTMLを書くかを見ていきましょう。




サイトや各ページのタイトル・ブラウザや検索エンジンに表示される



初めてのホームページ作成。h1タグはページ内の見出し


初めてホームページを作るにはまず、HTMLを理解することから始めましょう。pタグは段落。

< >というカッコで囲った書き方で書きます。カッコ内の文字には意味があり、それらを組み合わせてホームページを作っていきます。カッコで囲ったものを別名タグと呼ばれます。

例えば、<body></body>はbodyタグを呼びます。カッコのと閉じカッコで一つの意味を表します。bodyタグの中に文章を書いたり、画像を貼り付けていきます。

いかがでしたか。ホームページを作る言語はとても簡単です。当サイト内にも解説ページを用意してありますが、一冊書籍を用意して読んでみるとよくわかるともいます。

HTMLのカンタンな説明ページ。
HTMLリファレンス

では、次にHTMLで作ったホームページにデザインをつける方法を説明します。

ホームページのデザインを作る言語：CSS

ここからが少し難しくなってきます。上述のパラグラフでHTMLの基本を開設しましたが、そのHTMLにデザインをつける言語のことをCSS（スタイルシート）といいます。

HTMLは単純でしたが、CSSは覚えることが多くなりますし、多少の試行錯誤が必要になります。しかし、それほど難しいわけではなく、書き方さえわかればなんとかなります。

HTMLからCSSを読み込むには

.cssという拡張子のファイルを作成します。そして、HTML内に下記の記述をします。CSSファイルを読み込む設定です。

CSSを編集することで、HTMLにデザインを反映させることができます。
例えば背景色を変えたい場合を例にやって見ます。
body {background: #f0e5e3;} このように書くことで、背景色が変わりました。
CSSで背景色を変えたバージョン

backgroundというの背景に何かを指定するものです。#f0e5e3というのRGBカラーのことです。#f0e5e3がどんな色なのか覚えておける人は少ないものです。プロでも入力補助機能のあるエディターを使います。

初心者の方は、

Adobeの「Brakets」がおすすめです。無料なのでダウンロードしてやって見ましょう。

backgroundというものをプロパティと呼びます。様々なプロパティを使いデザインを作ります。

CSSの書き方。HTMLに対してフォントサイズや下のスペース、文字カラーなど色々と指定することができます。


body {
    background: #f0e5e3;
}
p {
    font-size: 1em;
    color: #666666;
    margin-bottom:1.8em;
}

ここまでが、初心者の方がまず初めにマスターすべきものです。HTMLとCSSができれば大抵のホームページを作ることはできます。商売にするには少し足りませんが、趣味であれば十分だと思います。

ホームページ制作の仕事がしたいなら、最低限マスターしていないといけないので、色々なホームページを自分で作ってみるといいでしょう。就職の時にもこれくらいできますと伝えることができます。

また、ホームページが作れると自分でカスタマイズしたブログなどの媒体を持つことができるため、そこからなんらかのビジネスになったりします。広告収入やアフィリエイトなども手軽に取り組めるようになります。

CSSの簡単な説明ページ。
CSSリファレンス

ホームページに動作をつけるための言語：JavaScript

ここからは特に難しいところになります。これからホームページを作りたい方はHTMLとCSSをマスターしてから取り組むといいでしょう。

JavaScriptは、ホームページに表示されているパーツを動かすためのプログラミング言語です。背景色を時間で切り替える、スクロール、スライドショー、タイマー、モーダルウィンドウ、オープンパネル、メニューの開閉、CSSの操作、サーバとの通信などかなり重要な機能を担っています。

この言語は本格的なプログラミング言語であるため、HTMLやCSSのようにカンタンに習得するのは難しいのですが、奥が深くある程度マスターすると重宝される人材になれます。また、趣味でも自分のホームページを作るときに楽しめると思います。

JavaScriptはWebで唯一のスタンダードなプログラミング言語です。ブラウザで動作する唯一のプログラミング言語であるためです。

JavaScriptの様々なライブラリ

代表的なものに絞って紹介します。

jQuery

jQueryは現在でも広く使われているクロスブラウザ対策のためのライブラリです。JavaScriptはほとんどのブラウザで標準化されてきていますが、ほんの数年前まではブラウザによって対応状況が異なり、JavaScriptの挙動が統一されていませんでした。

そのような問題解決のために生まれたのがjQueryで、どのブラウザでも一つの書き方で同じような動作できたため、広く使われるようになりました。

現在はブラウザ間の差も少なくなり、jQueryを使う意義が薄れつつあるのですが、直接JavaScriptを利用するより、簡単で理解しやすい文法に馴染んでいる開発者が多いことと、便利なプラグインがたくさん開発されており無料で利用できるのですぐになくなるようなものではないでしょう。

簡単なホームページであれば必要十分なため、これからも使われ続けるライブラリだと思います。初心者の方はHTML/CSS/jQueryでいいと思います。

ダウンロード先：jQuery

Webデザイナーとは

Webデザイナーとは、HTML/CSS/jQueryができて、PhotoShop/Illustratorの基本操作ができる人です。さらにWordPressなどのCMSのカスタマイズができるような職種です。

HTML/CSS/jQueryができる人をコーダーと呼び、PhotoShop/Illustratorができる人をデザイナーと呼んだりします。分業している企業も多いと思います。この辺りの境界は曖昧です。

フロントエンドエンジニアとは

Webアプリのダッシュボードや、Gmail、Analytics、Googleスプレッドシート、ECサイトのような複雑なサイトの見た目の動作、スマホアプリとしてのWebアプリの開発ができる人です。

AngularJS、ReactJS、Vue.js、Cycle.js（全てJavaScriptです。）などのライブラリの仕組みを理解して使える職種です。完全にプログラマーの世界です。

今の所、JavaScriptを自在に使える職種をフロントエンドエンジニアといっても過言ではありません。

サーバーサイド言語

サーバーサイドで利用する言語は様々です。マイナーな言語を含めると数百種類は存在します。基本的に自分の好きな言語を使うことができます。ただし、就職する場合は会社が求める言語を使う必要があります。

ホームページで使うケースは、フォーム（問い合わせ・コメント・レビュー・アンケートなど）などが一般的です。データを収集し、データベースに整形して保存し、必要な形にして呼び出すなどの機能を作ります。

PHP・Python・Ruby・JavaScript（Node.js）・JAVA・C・C++・Lisp・Scala・Haskell・Scheme・cobolなど様々な言語があり好きなものを使って開発ができます。

プログラミング言語には様々な特徴があり、インタープリター型・コンパイル型・静的型付言語・命令型言語・関数型言語・ハイブリッド型言語など言語により性能が異なります。トレードオフがあります。ここでは詳しい説明は控えさせていただきます。

こちらの記事も参考にしてください。
ホームページ作成に必要なスキル

カテゴリー ホームページ作成技術