【初心者向け】Web制作で使うプログラミング言語って何?

スポンサーリンク
この記事は約6分で読めます。

【初心者向け】Web制作で使うプログラミング言語って何?

スポンサーリンク

結論:Web制作で使うプログラミング言語

結論から言うと、Web制作で使うプログラミング言語は次の通りです。

  • HTML(Webページの構造を作る)
  • CSS(Webページをデザインする)
  • JavaScript(Webページに動きをつける)
  • PHP(フォーム、検索機能、ログイン、ブログ、予約、Web決済など)
  • JavaScript(Vue.js、Reactなど)・Ruby・Java・Python(Webアプリ、WebサービスなどのWeb開発)
  • ※厳密にはHTMLとCSSはプログラミング言語ではない

Web制作で使う言語はHTML、CSS、Javascriptの3つが基本セットになります。

ブログ、お問い合わせフォーム、サイト内検索機能などを構築するには主にPHPを使います。
WordPressもPHPでできているのでカスタマイズやテンプレート構築にはPHPの知識が必要です。

WebアプリケーションやWebサービスなどのWeb開発ではJavaScriptフレームワーク「Vue.js」や「React」、Ruby、Java、Pythonなどを使います。

今回はWeb制作に注目して紹介していきます。

スポンサーリンク

HTML(Webページの構造を作る)

HTMLはWebページの構造を作るマークアップ言語です。

タイトル、見出し、段落、リスト、表、強調、アンカーリンクなどWebページに役割や意味を持たせる言語です。

役割付けしたい部分を開始タグ<>と終了タグ</>で囲うことでソースコードを書きます。

  • h1:タイトル
  • h2:見出し
  • h3:小見出し
  • p:段落
  • strong:強調
  • a:アンカーリンク など

※プログラムを書いて動かす言語ではないです(プログラミング言語ではない)。

スポンサーリンク

CSS(Webページをデザインする)

CSSはWebページをデザインする言語です。

具体的にはレイアウトや色・フォント・余白などを指定します。

デザインをつけたい箇所にclassやidといった記号を付けて、付けた記号に対してデザイン方法(プロパティ)と値(プロパティ値)を指定することでソースコードを書きます。

1つのHTMLソースでブラウザの横幅に併せてデザインを切り替えるレスポンシブルデザインが現在の主流。

ブレークポイントの設定値(どこで切り替えるか)、どのような切り替えデザインにするのかが腕の見せ所。

Bootstrap

BootstrapはTwitter社開発の最も有名なCSSフレームワークです。

デザインパーツがあらかじめ用意されており、使い方も簡単。
レスポンシブル対応。

使いたいデザインパーツのテンプレートとclassを指定するだけ。

HTMLとCSSが分かれば、スライダー・タブ切り替え・アコーディオンなどのJavaScriptで作るパーツも実装できてしまう手軽さが良い。
(HTMLと用意されているclassの中から選ぶだけで実装できる!)

画面幅を全12列に分割してレイアウトを考えるグリッドシステム、ブレークポイントを理解すればすぐ使えます。

一度覚えてしまえばそこまで難しくないです。

現場でもよく使うので覚えておいて損なし。

スポンサーリンク

JavaScript(Webページに動きをつける)

JavaScriptはブラウザ上で動くプログラミング言語。

Webページに動きをつけるために使います。

スライダー、アコーディオンパネル、タブ切り替え、ポップアップ、フェードインなどのWebパーツを実装するために使用。

※サーバーサイドで動くNode.jsも登場し、活躍の場が広がっています

jQuery

jQueryは最も有名なJavaScriptライブラリの一つ。

簡単に言うとWebパーツ集。

スライダー、アコーディオンパネル、タブ切り替え、ページトップボタンなどの動きのあるWebパーツを簡単に実装できます。

また、URLやパラメータの取得ができるので、デザインや表示の切り替えができます。

jQuery特有の記述方法でソースコードを書きます。

※jQueryはバージョンアップによるセキュリティ対応や使わないプログラムによるサイトパフォーマンスの低下などの理由から、最近はシンプルなJavaScriptで実装する脱jQueryの流れがあります

また、WebアプリやWebサービスなどのWeb開発ではJavaScriptフレームワーク「Vue.js」「React」などが使われます。

スポンサーリンク

PHP(サーバーで動く。データベースを処理する)

PHPはサーバーサイドのプログラミング言語です。

HTMLに埋め込んで使えたり、データ処理、リアルタイムの情報反映などを実現できます。

問合せフォーム、検索機能、ログイン機能、予約システム、SNS、ブログ、Web決済などのシステムが作れます。

WordPress、EC-CUBEなどのCMSのカスタマイズ・構築にもPHPが使われています。

本格的なWeb開発ではフレームワーク「Laravel」などを使って効率的に開発します。

※WebアプリケーションやWebサービスなどのWeb開発ではRuby(Ruby on Rails)、Java、Pythonなどが使われます。

スポンサーリンク

Web制作とWeb開発の違い

Web制作とWeb開発の違いは作るものの違いになります。

  • Web制作:ホームページやLPなどのWebサイトを作る
  • Web開発:WebシステムやWebアプリなどのWebサービスを作る

詳しくはこちらの記事にまとめています。

Web制作とWeb開発の違い【どっちがオススメ?】

スポンサーリンク

Webサイト/ホームページの作り方

Webサイト/ホームページの作り方はいくつかあります。

  • 1、HTMLやCSSなどのコードを書いて作る
  • 2、ホームページビルダーなどのホームページ作成ソフトで作る
  • 3、WixやJimdoなどのホームページ作成サービスで作る
  • 4、WordPressなどのCMSで作る

詳しくはこちらの記事をどうぞ。

ホームページの作り方【結局どの作り方がベストなのか?】

スポンサーリンク

Web制作で必要なプログラミング言語を勉強する方法

Web制作を独学で身につけるまでのロードマップは次の通りです。

  • ①Webサイトの仕組みを理解する【HTML・CSS】
  • ②Webデザインスキル【Photoshop・Illustrator】
  • ③Webサイト制作の主流の方法を学ぶ【WordPress】
  • ④Webサイトに動きをつける【jQuery】
  • ⑤Webサイトの集客方法を学ぶ【SEO】
  • ⑥アクセス解析してサイト改善する【Googleアナリティクス・サーチコンソール】

詳しく知りたい方はこちらの記事をご覧ください。

【初心者向け】独学でWeb制作を習得する勉強方法

スポンサーリンク

まとめ

あらためてこの記事のまとめです。

Web制作に必要なプログラミング言語

  • HTML(Webページの構造を作る)
  • CSS(Webページをデザインする)
  • JavaScript(Webページに動きをつける)
  • PHP(フォーム、検索機能、ログイン、ブログ、予約、Web決済など)
  • JavaScript(Vue.js、Reactなど)・Ruby・Java・Python(Webアプリ、WebサービスなどのWeb開発)
  • ※厳密にはHTMLとCSSはプログラミング言語ではない

Web制作で使う言語はHTML、CSS、Javascriptの3つが基本セットになります。

ブログ、お問い合わせフォーム、サイト内検索機能などを構築するには主にPHPを使います。
WordPressのカスタマイズやテンプレート構築にはPHPの知識が必要です。

WebアプリケーションやWebサービスなどのWeb開発ではJavaScriptフレームワーク「Vue.js」や「React」、Ruby、Java、Pythonなどを使います。

HTML、CSS、JavaScriptを使った基本的なWeb制作を覚えたい人はこちらの記事を参考に実践してみてください。

【初心者向け】独学でWeb制作を習得する勉強方法