HTML？CSS？ホームページ制作にはどんな言語が必要？【2024年最新版】
ホームページを制作するときには言語の知識が欠かせません。「HTML」「CSS」という言葉を耳にしたことがある方は多いと思いますが、これらはホームページ作成の鍵となる重要な言語です。
今回は、ホームページ作成に必要な言語を4つピックアップ。それぞれの内容、役割、また言語の知識がなくてもホームページを簡単に作る方法も紹介します！
最低限知っておきたい、ホームページを構成する４つの言語
ホームページを制作するにあたり、
・HTML
・CSS
・JavaScript
・PHP
の4つの言語については最低限知っておきたいところです。
それぞれの言語にはどのような特徴があるのか、一緒にチェックしていきましょう。
HTMLは骨組み（テキストの指定をする）
HTMLは（HyperText Markup Language）の略語で、ホームページを制作するために開発された言語です。タグを使って文章に意味づけ（=Markup）を行うため、「マークアップ言語」に分類されており、テキストの指定をすることによってwebページの骨組みをつくることがでます。
また、文章の構造や、リンクづけ、画像の表示も可能で、私たちが日ごろ目にしているwebページの殆どにHTMLが使用されているのです。
さらに、CSS、JavaScriptと併用することによって、無料のテンプレートをカスタマイズしたり、自社のHP・ブログをより洗練されたものにすることもできます。
CSSは装飾（デザインの指定をする）
CSSは（Cascading Style Sheets）の略語で、ホームページのスタイルやデザインの指定をする言語です。
基本的にCSSはHTMLと組み合わせて使用する言語で、HTMLがホームページの要素や情報構造を構成するのに対し、CSSはそれらの装飾を行います。色、サイズ、レイアウト、印刷のスタイルなど、ホームページのデザインはCSSの構成にかかっているのです。
HTMLでも装飾は可能ですが、CSSに比べて効率が良いとは言えず、何より本来あるべき情報構造が崩れてしまうため適切ではありません。コンピューターに理解させ、なおかつデザイン性にも優れたものをリリースするには、HTMLとCSSを併用するのがベストです。
JavaScriptは動作（ブラウザで動きをつける）
JavaScriptは広く使われているプログラミング言語で、ブラウザの動作で使用します。実は私たちの生活に深く関わっており、PC、スマホ、携帯などあらゆるデバイスで使われているのがこの言語です。ブラウザの中で体験していることはほぼJavaScriptによるものと言っても過言ではありません。
例えば、Webサイトの画面がスライドショーの様に変わったり、背景の色が変化したりするのはJavaScriptによるものです。また、パスワードを誤って入力した際に、警告メッセージが出されたりする動作を司るのもJavaScriptです。JavaScriptはこうした処理をラウザ上で即時に行えます。世界中の開発者に好まれており、テクノロジーとして将来的にも不可欠の言語です。
PHPも動作（サーバーで動きをつける）
PHPは「PHP: Hypertext Preprocessor」の略語で、Webサイトやアプリを作る上では欠かせないプログラミング言語です。JavaScriptがブラウザ上で動作にするのに対し、PHPはWebサーバー上で動きます。
比較的初心者でもマスターしやすいといわれており、HTML、CSSと組み合わせることによって様々なことができます。SNSやブログの作成ができるほか、Web決済、予約システム・お問合せフォーム作成、検索・ログイン機能作成ができるなど、自由度が高く、ECサイトの構築などにもおすすめです。
世界的に利用されている「WordPress」、国内大手ECサイトの「EC-CUBE」、飲食サイト「ぐるなび」の検索機能などではPHPが使われており、こうした大規模サイトを作ることも可能です。
その他
その他、ホームページ作成では次のような言語も使われています。
・Java
JavaはJavaScriptとは全く別物のプログラミング言語です。Javaはwebサービスや家電製品、スマホアプリ開発などに好まれ、動作環境を選ばないため、エンジニアの間では最も人気のある言語です。
・Ruby
Rubyは国産の言語で原典が日本語のため、学習しやすくJavaに匹敵するほどの人気です。Rubyではブログサイト、ECサイト、ポータルサイト、SNSなど様々なタイプのサイト作成、スマホアプリの開発などを行うことができます。
・Perl
Perlはテキスト処理を得意としているプログラミング言語です。現在ではあまり使用されなくなりましたが、かつてはCGI用の言語ではメジャーな存在でした。現在でも「はてなブログ」「はてなブックマーク」「mixi」ではPerlが使わています。
HTMLとCSSでテキストを作成し、表示させてみよう！
プログラミング言語には様々な種類がありますが、簡単なWebページならHTMLとCSSの知識さえあれば自力で作ることが可能です。その手順を一緒に確認していきましょう！
≪手順1≫ 表示に必要な２つのツールを用意する
ホームページ制作には最低限、「テキストエディタ」と「ブラウザ」の2つのツールが必要です。
テキストエディタはテキストファイルの作成、編集をするためのソフトウェアで、Windowsでは「メモ帳」、Macでは「テキストエディット」などがデフォルトでインストールされています。ホームページの骨格を作るプログラミング言語を記すのに必要となるため、自分にとって使い勝手が良く見やすいテキストエディタを選びましょう。フリーで利用できるものも多数あります。
ブラウザは作成したWebサイトを確認するために必要です。HTMLやCSSの内容をチェックできる機能を搭載したものもあるので、こうしたツールを使いこなせば効率よく制作を進めることができます。
≪手順2≫ HTMLファイルを作成する
テキストエディタとブラウザの準備ができたら、早速HTMLファイルを作成してみましょう。
HTMLは見出し、段落、テキスト、画像などをコンピューターが分かるよう、タグ付けによって意味づけをしたものです。いわばWbeサイトの骨格を作るものなので、HTMLファイルが崩れると構造が滅茶苦茶になってしまいます。
HTMLファイルのタグは＜開始タグ＞テキスト＜/終了タグ＞というスタイルで記され、見出し、段落、改行などそれぞれのタグ付けは次の通りです。
<!DOCTYPE html>……HTMLのバージョンを宣言するタグ（必須）
<head>……ファイルのヘッダ情報
<meta charset=“UTF-8”>……メタ情報（ここでは文字コード＝UTF-8）
<title>……ブラウザではタブに表示される部分
<body>……ブラウザで見える部分
＜h1＞……大見出し
＜h2＞……中見出し
＜h3＞……小見出し
＜p＞……段落
＜br＞……改行
例えば「HTMLとCSSでテキストを作成し、表示させてみよう！」を大見出しにする場合は
＜h1＞HTML？CSS？ホームページ制作にはどんな言語が必要？＜/h1＞
とテキストエディタに記します。そうすることでブラウザ上に大見出しとして適切に表示されます。タグに不備があるときには見出しとして表示はされないため、HTMLファイルを作成するときにはミスがないよう慎重に行う必要があります。
以下のテキストをコピーして、テキストエディタに貼り付けてみましょう。練習をしたい方は手打ち入力でも大丈夫です。
↓ここからコピー----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML？CSS？ホームページ制作にはどんな言語が必要？</title>
</head>
<body>
<h1>HTMLとCSSでテキストを作成し、表示させてみよう！</h1>
<p>プログラミング言語には様々な種類があります。</p>
</body>
</html>
↑ここまでコピー----------------------------------------------------------------------------------
ファイルの拡張子を「.html」で保存し、ブラウザで表示をすると以下のようになります。（当記事ではgoogle Chromeを使用）
≪手順3≫ CSSでスタイルを指定する
HTMLでテキストを作成したら、ファイルの情報に基づいてCSSでホームページのデザインを作っていきます。CSSではHTMLのどのタグに、どのようなデザインを、どれ位施すのかを指定することが可能です。
また、CSSの記述には主に以下の3種類の方法があります。
- CSSの3つの書き方
-
- HTMLのタグにstyle属性で直接CSSを書く
- styleタグの中にCSSを書く
- CSSファイルをリンクタグで読み込む
今回は、Web業界で実際に多く使われている3の「CSSファイルをリンクタグで読み込む」方法をベースに説明いたします。
文字色は「color」、フォントの種類は「font-family」、背景は「background」を用いて指定します。同時に複数の内容を指定することも可能です。例えばフォントサイズ「18px」、色「ブルー」、フォント「serif」で指定したい場合は
h1{
font-size:18px,
color:""blue"",
font-family:""serif"";
}
と記します。なお複数のプロパティを用いるときは、 必ずプロパティ間にカンマを入れるようにして下さい。
今回は見出しの文字を青色にしたいと思いますので、先ほどのファイルとは別のファイルを作成し、以下のように入力し、ファイル名を「style.css」で保存します。
≪手順4≫ 関連付けたファイルをブラウザに表示する
CSSでスタイルの指定が終わったら、HTMLにリンクづけをします。
リンクタグは以下のように内に記入してください。
HTMLとCSSファイルの作成が終わりましたら、新規フォルダを作成し、二つのファイルを同じフォルダに入れておきます。ブラウザでHTMLファイルを開き、以下のように表示されれば成功です。
HTMLとCSSはあくまでも骨組み！効率化を図るならCMSもあり
HTMLとCSSの知識があれば、基本的なHPを作ることはできますが、一から自力で作るのは難しいという方、もっと凝ったものを作りたいという方は「CMS」を利用しましょう！
CMSとはコンテンツ管理システムのことで、これを使えばHTMLやCSSの知識がなくてもHPが作れるのです！今回紹介するCMSは「WordPress」「Wix」「Jimdo」の3つ。それぞれどのような特徴を持つのか、一緒にチェックしていきましょう。
WordPress
WordPressは現在最も多く使われているオープンソースCMSの1つです。無料で利用することができ、今や世界のWebサイトの1/3はWordPressで作られていると言われています。
開発言語はPHP。拡張性が高く、デフォルトでテンプレート、ブログ機能、更新機能を搭載。様々な機能をプラグインで追加することができるため、カスタマイズ性が高いです。
初心者にとっては少々敷居の高いCMSですが、HTMLやCSSで一から構築するのと比べれば効率的で難易度も低いといえるでしょう。オープンソースなので、自由に改良が認められており、今後一層の進化と利用者の増加が予想されています。
Wix
Wixはイスラエル発のクラウド型CMSサービス。2006年にリリースされて以来、専門知識がなくても簡単にホームページが作れるとのことで人気を集め、これまでの利用者は全世界で1億人を突破。2012年には日本語版もリリースされ、国内での利用者も増えています。
テンプレートは、500種類ものデザインから選ぶことが可能。HTMLやCSSの知識がなくても、パーツをドラッグ＆ドロップしていくだけで作成でき、パズル感覚で素晴らしいHPを作ることが可能です。無料プランはHPに広告が表示され、ドメインにwixの文字が入ります。有料プランの場合は独自ドメイン、広告非表示などを選択することができるため、本格的にHPを運用する場合は有料にアップグレードするのもおすすめです。
Jimdo
Jimdoはドイツ発のクラウド型CMSサービスで、日本版のリリースは2009年。国内での利用は100万サイトを突破しています。プログラミングやデザインをAIビルダーが自動生成することによって、たったの3分でHPを作れることが特徴です。必要な情報をアップロードするだけで、立派なWebページができ上がります。どんな業界にも合うよう豊富なデザインが用意されているため、デザイン性重視の方にも好評です。
Wix同様に無料版と有料版に別れており、有料版では常時SSL、 優先サポート、広告非表示、レスポンシブデザイン、SEO対策、 独自ドメインなどの特典が段階的に加わります。上位版になるほど機能が増えるため、会社のHP作成に利用する場合は最上位のビジネス版がおすすめです。
ホームページ制作の費用相場
ホームページ制作の費用相場をご紹介します
| ホームページの種類 | 作成費用の相場 | 備考 |
| ランディングページ | 10万円～35万円 | |
| コーポレートサイト （テンプレート） |
20万円～50万円 | |
| コーポレートサイト （オリジナルデザイン） |
50万円～100万円 | |
| 採用サイト | 60万円～200万円 | |
| ECサイト | 60万円～200万円 | 別途月額費用が必要なケースあり |
| ポータルサイト | 150万円～500万円 |
ホームページ制作を依頼した場合の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターのご利用をおすすめします。
【まとめ】HTMLとCSSだけで魅力的なホームページは作れない
本格的なホームページ作成にはHTML、CSS、JavaScript、PHPなどの言語が複数組み合わせられています。これまでに述べてきたように、HTMLとCSSの2つだけでも基本的なwebページを作ることはできますが、それだけで魅力的なホームページを作るのは困難です。
そこで、プログラミング言語で一からHPを作成するのが難しい方には、記事内でご紹介したようなCMSをおすすめします。ただし、プログラミングに関する専門知識は必要としませんが、それなりに操作方法を身に着けることが必要です。
また、よくよく考えてみたら、そうした作業に充てる時間がない、本業にエネルギーを費やしたいという方もいることでしょう。そういった方には、ホームページ制作の外注がおすすめです。
「アイミツ」では、ホームページ制作に関して、専門のコンシェルジュが完全無料でお客様に最適の業者をご紹介しております。制作についてお困りのことがあれば、なんでもお気軽にご相談ください。
ホームページ制作外注の具体的な記事は以下をご参照ください。
ホームページ作成の費用と相場
ホームページ作成の期間とスケジュール
ホームページ作成のおすすめ会社
ホームページ制作会社探しで、こんなお悩みありませんか？
-
一括見積もりサイトだと
多数の会社から電話が･･･ -
相場がわからないから
見積もりを取っても不安･･･ -
どの企業が優れているのか
判断できない･･･
PRONIアイミツなら
発注先決定まで
最短翌日
- 専門コンシェルジュが
あなたの要件をヒアリング！ - 10万件の利用実績から
業界・相場情報をご提供！ - あなたの要件にマッチした
優良企業のみご紹介！
診断とヒアリングから
お探しします