スキル

【初心者の方必見】HTMLとCSSの基礎を学んでホームページの作り方を覚えよう!

現在は、ホームページを作成できるサービスがあるので、専門的な知識がなくても比較的容易にホームページを開設できます。

しかし、HTMLCSSなどのコーディング技術を習得することは、ホームページ作成だけでなく、将来的な運営にも役に立ちます。

そこで今回は、HTMLとCSSの基礎知識から、ホームページの作り方までくわしくご紹介します。この機会に、ぜひHTMLとCSSに関する知識を身につけておきましょう。

HTMLの基礎知識

HTMLは、ブラウザに文書を表示させるためのコンピュータ言語です。そのため、ホームページを作成するためには、このHTMLの学習が欠かせません。

まずはHTMLの基礎知識についてくわしく解説します。

HTMLとは?

HTMLは、「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略称であり、直訳すると「高度なテキストに印をつける言語」という意味になります。

どうしてテキストに印をつけるのでしょうか?

それは、「コンピュータに文書の内容を正しく理解させるため」です。

コンピュータは私たち人間が話す言語を理解できません。そのため、コンピュータが内容を適切に理解できるように印(マークアップ)をつけて、「ここは文書」「ここは画像」のように説明してあげるのです。

その他にも印をつけることで、「文字の色・フォントの操作」や「リンクの設定」、「画像・動画の設置」などを行うことができます。

HTMLは「タグ」で構成される

HTMLは「タグ」というマークで構成される言語です。

「開始タグ:」と「終了タグ:」と呼ばれる2つのタグで印をつけたい文書をはさみ、その部分に対する指定を行います。

たとえば、「〇〇〇〇」という文書の字体を太くする場合は、太字を表すタグ<b></b>の間にその部分をはさみます。

例) <b>〇〇〇〇</b>

これで「〇〇〇〇部分は太字」という情報がコンピュータに伝わり、ブラウザ上で正しく表示されるのです。

HTMLファイルの拡張子は「.html」

拡張子とは、ファイル名の最後に「.(ドット)」と一緒に記載される「ファイルの種類を表す目印」のことです。

たとえば、テキストファイルのファイル名は「○○○.txt」ですが、このときの「.txt」が拡張子にあたります。

HTMLの拡張子は「.html」であり、この「.htmlファイル」に文書を保存します。

もし、拡張子がパソコンに表示されない場合は、拡張子を表示する設定を行いましょう。

CSSの基礎知識

それでは、次にCSSの基礎知識について解説しましょう。

CSSとは?

CSSとは、「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略称であり、ホームページのスタイルやデザインを指定する言語です。 基本的にHTMLと組み合わせて使用します。

HTMLがホームページの「文書」を定義するのに対して、CSSは、その文書の「装飾」を指定し、読む人にとってより見やすく、わかりやすいページにする働きがあります。

具体的には、

・表示スタイル…文字の色やサイズ、レイアウト
・出力スタイル…印刷、出力されたときのスタイル
・再生スタイル…音声で読み上げられたときのスタイル

など、ホームページの全般的なスタイルについて指定します。

HTMLとCSSを分離する理由

HTMLの種類の中には、装飾やレイアウトの指定ができるものが存在します。そのため、CSSを使用せず、HTMLだけでホームページのスタイルを制御することも可能です。

しかし、HTMLは本来、「文書」を定義するためのコンピュータ言語です。スタイル制御など本来の役割と異なる方法で使用すると、 文書の構造がでたらめになり、 コンピュータに適切に理解されない可能性が出てきます。

また、HTMLタグだけで見栄え良くレイアウトしても、ブラウザによっては全く違ったレイアウトで表示される可能性もあります。

そのため、文書指定はHTMLスタイル指定はCSSというように分離することが推奨されているのです。

ホームページ公開に必要な環境とは?

ホームページを公開するには、パソコンだけあれば良いというわけではなく、その他にもさまざまなツールが必要です。

そこで、ホームページを公開するために必要な環境を解説しましょう。

サーバ

サーバとは、さまざまなデータを保管しながら、サービスや機能を提供するコンピュータのことです。

作成したホームページの情報をサーバに預けることで、その内容がインターネット上で閲覧できるようになります。

サーバの種類には、「自社サーバ」「レンタルサーバ」の2種類があります。

自社サーバは、サーバを自社で管理するスタイルです。自由にカスタマイズできるので、柔軟なサーバ構築が可能になります。しかし、すべての管理を自社で行う必要があるので、機械の購入やその後の保守・運用など、手間やコストがかかるというデメリットがあります。

一方、レンタルサーバは、月々のレンタル費用はかかりますが、導入や運用のコストが自社サーバに比べて安く、専門知識も不要なので、個人でホームページを作成する方の多くが利用しています。

代表的なレンタルサーバとしては、「XSERVER(エックスサーバー)」と「LOLIPOP!(ロリポップ!)」を挙げることができます。

ドメイン

ドメインとは、「インターネット上の住所」のことであり、末尾が「.jp」「.com」 「.net」などで表現されるURLの一部です。このドメインがなければ、ホームページを公開できません。

ドメインはサーバからも取得できますが、この場合、自分の選んだ文字列(例:○○○)にサーバ名(例:▲▲▲▲)も含まれるので、

http://○○○▲▲▲▲.com

のように、どうしても長く複雑なものになりがちです。

しかし、自分の好きな文字列だけを配列できる「独自ドメイン」を取得すれば、

http://○○○.com

のように、自分だけのオリジナルドメインが取得できます。

独自ドメインは、「お名前.com」や「ムームードメイン」などのドメインサービス会社から比較的安価で購入できます。

テキストエディタ

テキストエディタとは、HTMLやCSSなどのテキストファイルの作成・編集を行うツールです。Windowsの「メモ帳」など、元々パソコンに標準装備されています。

通常のテキストエディタでも十分機能的ですが、HTML専用のテキストエディタを使用すれば、よりスムーズかつ簡単に作業できます。

HTML専用テキストエディタの中には、Atom(アトム)Visual Studio Code(ビジュアルスタジオコード)など、無料でダウンロードできるものもありますので、ぜひ活用してください。

FTPクライアントソフト

FTPクライアントソフトとは、「File Transfer Protocol(ファイル トランスファー プロトコル)クライアントソフト」の略称です。

「FTP」とは、ファイル転送に使われる接続方法です。接続先のサーバ名やユーザー名、パスワードなどを入力することで簡単にログインできます。そして「FTPクライアント」とは、ホームページ作成の場合、一般的に「パソコン」のことを指します。

このFTPを使用して、パソコンからサーバへファイルの送受信を簡単に行うことができるソフトウェアが「FTPクライアントソフト」なのです。

FTPクライアントソフトには、「FileZilla(ファイルジーラ)」や「CrossFTP(クロスFTP)」など無料ダウンロードできるものもあります。興味のある方はぜひお試しください。

ホームページ作成の手順とは?

では、実際にホームページを作成するための手順を紹介します。ぜひ参考にしてくださいね。

フォルダとファイルの準備

最初に、ホームページ作成に必要な「フォルダ」と「ファイル」を準備します。

フォルダとは、ファイルを格納・分類する保管場所のことです。ホームページ作成にあたり、まずは、「コーディング用(coding)」「画像用(images)」の2種類のフォルダを用意しましょう。

「コーディング用フォルダ(coding)」には、以下の3つのファイルを格納します。

・HTMLデータ用ファイル…「index.html」
・CSSデータ用ファイル…「style.css」
・JavaScriptデータ(動画)用ファイル…「script.js」

一方、「画像用フォルダ(images)」には、画像ファイルのみを格納します。

それぞれのデータをファイルに書き込んだら、各フォルダに保管していきましょう。

レイアウトをメモに書き出す

ホームページの表示内容は、基本的に「header(ヘッダー)」「main(メイン)」「side(サイド)」「footer(フッター)」というパーツで構成されています。

HTMLのコーディングの前に、これらのパーツのレイアウトを行いましょう。レイアウトは、「箱の詰合せ」と同じです。まずは箱の枠組みを線で囲み、どのパーツをどの場所に詰め合わせていくのか、あらかじめメモ用紙などに簡単に書いておきましょう。こうすると全体像が把握しやすくなるので、HTML・CSSコーディングが効率的に行えます。

また、HTMLタグのクラスIDをふっておくと、CSSで装飾する際に便利です。

HTMLコーディング【headの書き込み】

それでは、いよいよHTMLを書き込んでいきます。

まず、ホームページの情報を記述する「head(ヘッド)」と呼ばれる内容をコーディングしていきます。ただし、この内容はブラウザ上に表示されません。

「head」の主な内容は以下の通りです。

・meta charset … 文字エンコーディング。「UTF-8」が一般的。
・title … ホームページのタイトル。
・meta name=description … ホームページの紹介文。
・meta name=viewport … スマホやタブレットなど、レスポンシブ表示対応機能。
・reset.css …ブラウザ独自のCSS打ち消し機能。

HTMLコーディング【bodyの書き込み】

続いて、ホームページのメイン部分であり、実際にブラウザ表示される「body(ボディ)」を書き込んでいきます。

レイアウトの章でも述べましたが、ホームページの表示内容にあたるbody部分は、「header(ヘッダー)」「main(メイン)」「side(サイド)」「footer(フッター)」で構成されています。それぞれのパートに、以下の内容を記述していきます。

【header】
ホームページのタイトルや目次、文書の導入部分など

【main】
ホームページのメインコンテンツ

【side】
広告やサイトの関連記事など

【footer】
著作権に関する情報など

CSSでスタイリング

次に、HTMLをCSSで装飾することにより、よりわかりやすいホームページに仕上げていきます。

CSSを使えば、文字の色や太さ、フォントなどの変更や、行間や字間の指定、下線や取り消し線の引用など、さまざまな装飾が可能です。

たとえば、文字のフォントを変更する場合であれば、

{ font-size: 15px }…フォントサイズを15px(ピクセル)に変更
{ font-size: 2.0em }…フォントサイズを1.5em(倍率)に変更

のように、ピクセル、または倍率を書き込みます。

さらに、文字の色を赤に変更する場合は、

{ color: red }
{ color: #ff0000 }

のように、英語のスペル、またはそれぞれのカラーコードを記入します。

レイアウト部分のレスポンシブ対応

スマホやタブレットなど、モバイルサイズでも閲覧できるように「レスポンシブル対応」を行いましょう。

レスポンシブ対応にするには、 以下のように「@media screen and」の後に、表示領域を指定します。

@media screen and (min-width:600px){/*600px以上の内容*/}

以上でレイアウト部分の完成です。

ブラウザで表示を確認

全体のHTML/CSSコーディングが終了したら、複数のブラウザで表示および動作の確認をしましょう。

特に問題なく表示されていれば、ホームページの完成です。

ホームページの作成・運用にはHTML/CSSの基礎知識が役立つ!

今回は、HTMLとCSSの基礎知識をベースにホームページの作り方を紹介しましたが、いかがでしたか?

HTMLやCSSなど、ホームページ作成の基礎知識を習得すれば、自分好みのホームページを制作できるだけでなく、将来的な運用にも役立ちます。

最初は難しいと感じることもあるでしょう。しかし、何度もコーディングを続けていくうちにだんだんとコツがつかめてきます。そうすれば、徐々にレベルの高いホームページ作りもできるようになるはずですよ。

ぜひ、HTMLとCSSの基礎知識を学んで、素敵なホームページの作成に挑戦してみてくださいね。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。