ホームページを構成する主要なプログラミング言語を3つ紹介

プログラミング学習

公開日 : 2020年03月11日 | [更新日] 2023年05月01日

自分でホームページが作れたら…そんな風に思っている方も多いかもしれません。

少しPCに詳しい方でも「そこまでは知らない、聞いてもわからないからやりたくない」、そんな苦手意識を持っている方もいることでしょう。

IT業界が中心となりつつある現代で、システムエンジニアやプログラマーとしての知識があると仕事もしやすいですよね。

今回は、「今回こそホームページを自分で作りたい！」という方向けに、初心者でもわかりやすい作成ステップや、基本的な用語の解説をしていきます。

HTMLとは？

 

ホームページを作成しようと試みた際に、必ず説明上で目にするのがHTMLという言葉。
実はこの言葉を理解していないと、全く話は進みません。

ホームページを作成するうえで、まず最初にしっかり理解しておきたい言葉の1つ「HTML」について解説していきます。

ホームページを構成するプログラミング言語

HTMLとは、ホームページを作成するにあたり重要な言語です。

HTMLは正式にいうと、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）といいます。

簡単にいうと、ホームページを作成するうえで、機械に指示や命令を出す言語のこと。

本を読んだり、スマホなどで記事やニュースを読むことは誰にでもありますよね。

その際にタイトル・大見出し・中見出し・小見出しなどとわかれているからこそ、読み物としてわかりやすくなり面白いと感じるはずです。
全てが同じ文字体、大きさだだった場合、ただ文字が羅列しているだけの文章で読みにくくなります。

その読みにくさを感じさせないために、独自の言語でPCに指示を出すわけです。
この作業を「マークアップ」といいます。

また、スマホなどでニュースを読んでいる際に、気になる別の記事が見つかり思わずページを飛んでしまったということはありませんか？

別の記事に飛べるシステムを、良く「リンクを貼る」などという言葉で表現します。
これこそが、「ハイパーリンク」と呼ばれている技になります。

ただしもちろんそれだけではなく、画像などをデータ化したものもテキストに埋められるのもポイント。

ホームページ作成上で使われている指示のことを、ソースコードと呼びます。
実は現在見ているホームページなども、全てソースコードで作られています。

このようにして人がHTMLで指示をだし、PCでつくられたものが人の目に触れられるホームページとして成り立つのです。

HTMLはタグで構成されている

HTMLを使用する際に、必ず必要になるのが「タグ」と呼ばれるものです。
タグとは<　>で囲まれている言葉のこと。

タグがあることでホームページなどを目でみた時に、タイトルや見出しなどが綺麗に反映され見やすくなっている効果があります。

タグとは読んでいますが、<>の中に入る言葉を「要素名」といいます。
要素名とは構成を決める要素のことですが、100種類以上あるので注意しましょう。
例えば以下の通りです。

このようなタグを理解することで、ブラウザで見た時にきちんとしたビジュアルが完成されます。

HTMLの実際の書き方

タグは始まりと終わりのタイプ、<>を2つ使い間に文章などを入れることで全体を構成します。

また、始まりはそのままで終了タグには「/」を入れます。

<要素名></要素名>このように使います。

例えばタイトルを作りたい場合を考えていきましょう。

例をあげてみます。

<title>〇〇のホームページ</title>

ここで使われているのは、titleというタイトルタグです。
このタグの中に入れたいタイトルを入れると、そのホームページのタイトルになるので
す。

タグは2つ組み合わせて使うことで意味をはじめてもつため、どちらかだけでは機能しません。

ここでもう1度、先ほどのを見てみるとわかりやすいでしょう。

始まり～終わりまでのタグの間に、ページに相応しいタイトルを入れればページタイトルになるのです。

他にも始まりから終わりを意味するタグを、使わなくて良い場合もあります。

これらのタグは基本的な文章の構造を作り、見出し、段落、画像挿入、URL挿入、太文字装飾などを行えるシステムになっているのです。

.HTML拡張子での保存方法

wordなどで文章を作成してPC内に保存をすると、付けた名前の後ろに.(ドット)＋アルファベットが表示されていますよね。

wordならdoc、画像ならjpgなどがそれにあたります。

このドット以下のアルファベットを拡張子といい、保存した時のファイルの種類を見分けられるようになっています。
例えばwordで作成した文章を、HTML拡張子で保存したい場合はどうしたら良いのでしょうか。

通常wordで作成した文章は、画面左上「ファイル」の中にある「名前を付けて保存」から保存しますよね。

この時に実は「ファイルの種類」を選べるようになっています。
ただしここで何もしないと、もちろん「doc」拡張子のまま。

そこでファイルの種類から「html形式で保存」または「webページ画面で保存」を選んで保存をしましょう。

ただしこの時に、保存後にも編集を行う可能性があるのであれば、フィルタをしないで保存をします。
HTML拡張子でファイルを保存した場合、タイトルの後ろ部分が「.html」と「.htm」となるので確認をしましょう。
この状態で保存をすると、ファイル自体が実際にブラウザであげた状態で見えるようになります。

CSSとは?

 

個人でホームページを作成する際に必要なのは、文章構造であるHTMLとデザイン部門を担当しているCSSです。とはいってもCSSとは、一体どんな役割をするのかがわかりませんよね。

もしホームぺージ作成を考えている場合は、必ず理解したい知識の1つがCSSです。

ホームページを装飾するプログラミング言語

CSSとはプログラミング言語の1つで、正式には「カスケーディングスタイルシート」と呼びます。

簡単にいうとHTMLで構成した文章を、CSSが綺麗な見栄えに変身させてくれるということ。

HTMLで装飾ができるのでは？という意見もあるかもしれません。
確かにHTMLをしっかり使いこなして、見栄えを良くするということは可能な場合もあります。

しかし本来の役割ではないため構造が崩れ、検索エンジンなどでうまく機能しないリスクが高まります。

また万が一作れたとしても、ブラウザによっては見た目が美しくない場合が出てきます。
そこでCSSを使えばデザイン性やレイアウトを整えられ、見た目として美しいものを作り上げられます。

CSSはHTMLとは全く違うものであり、アニメーションデザインや文字装飾など、デザイン部門を担当するという役割分担をはっきりさせた状態で使います。

CSSの実際の書き方

CSSを使用する時には、単純に3つのことだけに集中します。

・装飾したいHTMLタグを選ぶ（セレクタ）
・デザイン性を決める（プロパティ）
・文字ピクセルなどをどうするか決める（値）

このことを念頭にいれて、HTMLを装飾していきます。
では実際に書き方をご紹介します。

CSSの基本は＝セレクタ {プロパティ：値}と決まっています。

具体的な例はこちらです。
h1{font-size: 20px, color: red;}
これだとh1タグのタイトルを、フォントサイズを20px・文字の色を赤に指定しているということになります。

ここで注意したいことは、セレクタの前には何も書き込みませんが、プロパティと値は波括弧で囲むこと。

大事なのはプロパティと値を、別々には絶対にしないことです。

いつでも2つはセットにし、：で繋ぐことが重要。もちろん複数のプロパティで、デザインをより凝ったものに変えることもできます。

その時には1回目の値の後に；（セミコロン）で新しいプロパティを繋げていきます。
プロパティには他にも色々な装飾ワードがあるので、その都度確認していきます。

CSS拡張子での保存方法

CSS拡張子での保存方法は、とてもシンプルです。
適当なメモ帳などを開き、拡張子をCSSに設定するだけ。
作成後はテキストエディタを使用して、ファイルを開けます。

Javascriptとは?

 

スマホやタブレット、PC作業が多い現代では、Javascriptはなくてなならないもの。

特に仕事などで使わないという方でも、Webページを開いているだけでJavascriptがとても役立っているのです。
それでは一体Javascriptとは、何なのでしょうか。

ホームページに動的な要素を追加するプログラミング言語

Javascriptとは,プログラミング言語です。わかりやすい具体的な要素の例としては、フォームへの入力確認などです。
これはサイトにフォームを入力する際に、文字が正確かなどの瞬時の確認に役立ちます。

一例をあげましたがもちろんそれだけではなく、Webサービスとサイトの相互関係をスムーズにする役割などもあります。

つまり日頃気が付かないところで、毎日のように現代人はJavascriptのお世話になっていることになるのです。

Javascriptの実際の書き方

Javascriptは簡単にいうと、HTMLをいろいろと好きなように動かせるというものです。
書き方には直接書く方法と、外部で書く方法とあります。

直接書く方法は「直接定義」といい、名前の通りHTMLの中にそのまま書き込むことをいいます。

タグの後ろ、またはのエンドタグの上などに書き込むのが妥当とされています。 対して外部で書く方法は「外部定義」といいます。

こちらはHTMLの中にJavascriptで作ったファイルを入れることを前提とし、外部でファイルを作ることをいいます。

つまり他で作ったJavascriptを、埋め込むスタイルですね。 という感じにしておけば、あとはファイル名を入れれば読み込むという定義です。

Javascript拡張子での保存方法

Javascriptを保存する場合ですが、HTMLにそのまま書いている場合はHTML拡張子で保存するのがベストです。

外部ファイルに記述した場合の保存方法は、「.js」です。
どちらでも保存はできますが、別で保存をしているとJavascriptだけを修正できるので便利です。

JavaScriptのフレームワークとは？

JavaScriptを語る際、必ずでてくるのがフレームワークとライブラリです。
ごっちゃになってしまう初心者の方も多いですが、根本的に違います。

JavaScriptのフレームワークとは、ソフトウェアのこと。
ゲームやWeb開発をするうえで必要になり、時間の短縮やクオリティの均一化をはかれるのがメリットです。

大量に必要になるソースコードを簡略化し、コーディングの用意が減ることで仕事を効率的に行えるようになります。

また、アプリケーションの標準構造に使われる「クラス」や、ライブラリやの集合体を含めた骨組みのことをフレームワークと呼びます。

Javascriptの代表的ライブラリの紹介「jQuery」

Javascriptの中で歴史が古いライブラリで、プラグインなどが豊富なので最初に選びたい理由でもあります。

Webサイトなどをつくる際に良く使われ、JavaScriptよりも短時間で使用できるのが魅力。

他のライブラリよりも低コストなのがポイントです。

Javascriptの代表的ライブラリの紹介「React」

2015年にFacebookが発表したライブラリで、PhoneGapやCordovaなどフレームワークに似たカテゴリーに分類され、フレームワークと呼ばれることも。

インスタグラムなど、現代人のアイテムとして人気があるアプリにも採用されているので信頼できます

特徴はAndroidとiOS両方に使用が可能なことで、他のライブラリより学習コストがかからないのが魅力。

また、仮想DOMを実装をしているので、ページの更新が効率的なのも特徴の1つです。

CSSの代表的フレームワークの紹介「Bootstrap」

Bootstrapは初心者でも使いやすいことで人気がある、Webフレームワークのこと。
ボタンやフォームが事前にテンプレートで用意されているので、作業がしやすいことが魅力です。

また、現代人のスマホ生活において、モバイル端末での効率化を重要視。
フレームワーク内にあらかじめCSSが設定されているため、デザイン性の確保はもちろん、ビギナーでも使えるのが特徴です。

1つのWebページをあらゆる端末で見た時に、それぞれの端末に合わせたデザインで対応できることをレスポンシブWEBデザインといいます。

Bootstrapは、このようにレスポンシブWEBデザインはもちろん、幅広い用途に応じた使い方ができるのです。

ホームページの作成ステップ

 

ここまで学んで来ても、実際にホームページを作る方法は難しいと思いがち。

確かに自分のホームページを作ろうと奮闘したはいいが、難しい言葉だらけで断念してしまった...そんな経験をした方もいることでしょう。

しかし実際にはステップさえ知っていれば、そこまで難しくないホームページ作成。
そこでこちらでは、実際にホームページの作成ステップをご紹介していきましょう。

ステップ1 htmlファイルを作成

ホームぺージを作成するために必要なのは、HTMLファイルとCSSファイルです。
他にも必要なファイルはありますが、この2つさえあればホームページは機能します。
初心者の方は、こちらを覚えておきましょう。
HTMLファイルの作り方は、以下の通りです。

ステップ2 CSSファイルを作成

次にすることは、デザインの調整や装飾です。
こことで使用するのがCSSファイルで、設定さえ変えれば一括で装飾をすることも可能です。

ファイルを作ったら、拡張子をcssとして保存します。

ステップ3 javascriptのファイルを作成

Javascriptファイル作成時は、HTMLにそのまま書いている場合はHTML拡張子で保存し、外部ファイルに記述した場合の保存方法は、「.js」です。

ステップ4 ドメインを取得

ホームページを作成するにあたって、必ず必要なドメインの取得。
ドメインとはネット上のアドレスで、これがないとホームページは開けません。

ドメインには住んでいる国によるドメインや、全く関係なく取得できるものなど種類があります。

会社などで取得するのは「co.jp」、個人だと「.com」など、日常的に良く見かけるこの文字がドメインになります。

ドメインを取得するには、個人でドメイン専用会社を利用するか、またはレンタルサーバーを利用するかになります。

個人の場合は価格が少し安くなりますが、手続の難易度は上がります。

ステップ5 レンタルサーバーを借りる

ホームページ作成のうえで、サーバーをレンタルすることは必須です。
サーバーとはネットのデータ保存場所であり、ホームページデータの保存庫だと思って下さい。

世界中でPC検索がされている現代で、あたり前のようにWebページを開いていますが、実はこの作業の裏には、探しているページを保存しているサーバーを探しだしてブラウザに転送し、データ変換をする、というたくさんの行為を繰り返しています。

つまりデータ保存をしていないと、ホームページ自体が存在できません。
とはいえサーバーの購入は一個人だと数百万ほどする場合もあり、適していません。
そこでレンタルサーバーを使うのが一般的なのです。

ステップ6 取得したドメインをレンタルサーバーに登録

ドメイン専門会社で取得したドメインを、レンタルサーバーに登録すればホームページのアドレスが完成します。

ステップ7 レンタルサーバーに作成したファイルをアップロード

レンタルサーバーにあらかじめ作ったhtmlファイルをアップロードすると、ホームページの作成が完成します。

HTML/CSS/Javascriptの学習方法

IT業界が広がりを見せるこの時代に、自分も今ここでホームページなどを作成するために勉強をするどうしたら良いのでしょうか。

最近はWeb学習なども人気があるので、ぜひいろいろなことにチャレンジしたいところです。

Progateで基礎を2週間で習得

 

システムエンジニアになりたい、プログラマーになりたいという方は、独学で学ぶだけでも十分効果があります。
HTMLなどの知識は必ず必要となりますし、勉強が必須。

しかし知識を羅列し専門用語ばかりの書籍を使用した、勉強はおすすめできません。
忙しい方でも学習できるWebサービスの中でも、特に学習効果が高いとされているのが「Progate」です。

全くの初心者から、少し知識のある方までしっかり知識を身に着けられます。一番の魅力はスライド形式での勉強ができることで、動画だとわからないまま進んでしまうということが良くありますが、スライドであればじっくりと確認できるのです。

またWebサービスの魅力は、実践できること。
実際にやってみることで、得た知識を確実化していきます。
HTML・CSS・JavaScript・Rubyなど、数多くの内容を学べるProgateですが、初級編までは無料、中級以上でも月額1,078円という低コストを実現。

2週間学べば基礎を習得できるのも、忙しい方には魅力的ですよね。
レベルを上げていき、自分のスキルを磨けるわかりやすさがおすすめの理由です。

既存のホームページのソースを見る

学習法を他に知りたい方は、信頼できるホームページのソースを確認してみましょう。
ホームページ画面で右クリックをすると「ソースを表示」という項目がありますので、実際に表示してみます。

少し知識を得た後などにしてみると、分析の練習にもなっていきます。
ビジュアル画面と見比べてみると良いでしょう。

既存のホームページを写経する

もっと自分の知識を確実化したいなら、既存のホームページをおもいきって写し書きしていくこともおすすめです。

人間は文字で書いて脳が理解するという説もありますので、実際に自分の手で書いてみるとしっかり知識を自分のものにできるかもしれません。

【初心者エンジニア向け】模写コーディングでスキル爆上げ！手順からおすすめの模写すべきサイトまで

まとめ

 

こちらではホームページを自分で作成したい、という方向けにHTMLやCSS、またJavascriptについての基礎知識をご紹介してきました。

ホームページを作成するのは難しいというイメージが先行し、なかなか手が付けられという方もいますよね。

しかし実際には簡単なステップを学べば、個人のホームページを作成することも夢ではありません。

しっかりと頭に知識をいれて、さらに活用していきましょう。

また勉強方法を知りたい方は、Webサービスなども含めて視野にいれると良いかもしれません。

忙しい方も独学で、プログラミングなどを勉強できるサービスがたくさんあるのでうまく活用してみてください！