ホームページの基礎知識2020.09.26[土]

HTMLとCSSの基本を理解して、ホームページ更新の幅を広げよう！

さまざまなホームページ作成サービスがある現在、専門的な知識がなくてもホームページを開設することが容易になりました。しかし、ホームページの基本的な知識を覚えておくことで、ホームページを運営していくなかで役に立つ場面は当然ながら多いのです。

今回は、ホームページの更新に焦点を当てて、HTMLとCSSの基本知識をご紹介します。

1 ホームページ運用費用を節約するには自分で更新
2 ホームページの更新に知識は必要？
3 HTMLの基本知識
4 CSSの基本知識
5 HTMLとCSSの基本を理解して、ホームページを自分で更新しよう

ホームページ運用費用を節約するには自分で更新

ホームページを開設したまま放置していては、情報はどんどん古くなり集客力も下がっていってしまいます。そのため、ホームページは最新の情報に保ち、定期的にコンテンツを更新していくことが重要です。

とはいえ、ホームページの更新をすべて代行業者に任せてしまうのは得策とは言えません。なぜなら更新のたびに代行業者に依頼するとなると、その分コストが膨らんでしまうためです。コストをできるだけ抑えるためにも、できる範囲は自分で更新するべきだと言えるでしょう。

以下の記事ではホームページを自分で更新することの重要性について開設しています。あわせてご確認ください。
参照：ホームページは自分で更新できるかも重要！費用を上手に抑えよう

ホームページの更新に知識は必要？

ホームページ運用のコストを抑えるためにも自分で更新することが大切だとお伝えしましたが、「そもそも専門的な知識がなければ自分で更新できないのでは？」と思った方もいらっしゃるのではないでしょうか。ここでは、ホームページを更新する上で知識は必要かどうかをご説明します。

CMSがあれば知識がなくても更新可能

結論から言えば、ホームページは知識がなくても自分である程度は更新することが可能です。ただしそのためには、「CMS（コンテンツ・マネジメント・システム）」が必要になります。CMSは専門的な知識がなくても簡単にウェブサイトを管理・更新できるシステムで、ホームページ開設時にあらかじめCMSを用意してくれる制作会社もあります。代表的なCMSとしては「WordPress」などがあります。

HTMLとCSSの知識があれば更新の幅が広がる

手軽にホームページの更新が行えるCMSですが、専門的な知識が全く必要ないというわけでもありません。ウェブサイトを構成する基本的な知識を覚えておくことで、更新をよりスムーズに、そしてより魅力的なページを更新することも可能になるのです。そして、ウェブサイトを構成する基本的な知識として覚えておきたいのが、「HTML」と「CSS」です。

HTMLの基本知識

まずは、HTMLとはどういったものなのかを確認してみましょう。HTMLとはマークアップ言語と呼ばれるもので、私達が普段見ているウェブページのほとんどがHTMLを用いて作られています。表示させたい内容をHTMLで記述することによってブラウザが内容を認識し、ウェブページに表示します。以下が、HTMLの基本的な構造です。

（例）
<!DOCTYPE html>
<html>
<head>
<title>タイトル名</title>
</head>
<body>
<h1>記事タイトル</h1>
<p>文章</p>
</body>
</html>

<○>のように「山カッコ」で囲われているのは「タグ」と呼ばれるものです。タグにはさまざまな種類があり、タグを使うことで表示させたい内容をブラウザに認識してもらうことができます。まずは基本的なタグとその意味について、ひとつずつ確認してみましょう。

<!DOCTYPE html>

これはHTMLでウェブページを作る際の決まり文句のようなもので、ブラウザに「HTMLで書かれているウェブページ」であることを認識してもらうためのものです。

<html>

htmlタグは<!DOCTYPE html>の下に記述するタグで、「HTMLコードの始点と終点」をブラウザに認識してもらうためのものです。つまり、基本的には<!DOCTYPE html>の直後に<html>があり、最後に</html>がくることになります。

<head>

headタグは、そのページの情報や設定をブラウザや検索エンジンに伝えるためのもので、基本的にはユーザーがページを見ている画面には表示されません。たとえば、実際に表示する際のフォントの読み込み設定や、サイト名などの情報、後ほど説明するCSSファイルの読み込み設定などがheadタグの内部に記述されます。

<title>

titleタグは、<head></head>の内側で使用されるタグのひとつで、ウェブページのタイトルを検索エンジンやブラウザに伝えるものです。この記事であれば、タブに表示されている「HTMLとCSSの基本を理解して、ホームページ更新の幅を広げよう！｜オリジナルホームページシード」がtitleタグの内側に書かれています。

<body>

bodyタグは、実際にブラウザ上で表示される部分を示すタグです。基本的にひとつのウェブページに一回しか使われることはなく、bodyタグに囲まれた部分に表示させたい内容を記述していきます。

<h1>

hタグはbodyタグの内側に記述するもので、ウェブページ内の「見出し」の役割を果たすタグです。<h1>から<h6>まであり、数字が小さいほど重要度の高い見出しとして検索エンジンに認識されます。

<p>

pタグもbodyタグの内側に記述されるタグで、「Paragraph（パラグラフ）」つまり「段落」の役割を果たします。この文章もpタグに囲まれており、以下のように記述されています。

(例)
<p> pタグも〜（省略）〜記述されています。</p>

CSSの基本知識

次にCSSとはどういったものなのかを確認してみましょう。CSSはHTMLなどで記述した内容を装飾するためのマークアップ言語で、色やレイアウトといったデザインを変更することができます。CSSの記述方法はいくつかありますが、今回は最もシンプルな「HTMLファイルにCSSを記述する方法」でご紹介します。

CSSはどこに書く？

まずは、CSSの基本的な記述方法からご紹介します。CSSを記述する場所はHTMLのheadタグの内側で、以下の赤字の部分になります。

（例）
<head>
<style>
セレクタ {プロパティ：値}
</style>
</head>

CSSの書き方は？

次は、CSSの基本的な記述方法についてご説明します。HTMLファイル内にCSSを記述する際には、styleタグの内側に、セレクタ {プロパティ：値}のように記述します。

「セレクタ」というのはどの部分のデザインを変更するのかを示す部分です。たとえば、pタグで囲まれた文章のデザインを変更したいのであれば、p{プロパティ：値}と記述します。

「プロパティ」というのはデザインをどう変更するのかを指定する部分です。たとえば、色を変えたい場合には、セレクタ{color：値}と記述します。

そして「値」は、どのように変更するのかを指定する部分です。色を赤に変更したいのであれば、セレクタ {color：red}と記述します。

次は、CSSではどういったことができるのかを確認してみましょう

フォントサイズの変更

フォントサイズ（文字の大きさ）を変更する際には、セレクタ {font-size: 値}と記述します。値はピクセル（px）か倍率(em)で指定するでき、フォントサイズを12ピクセルに変更したい場合にはセレクタ {font-size: 12px}のように記述します。

文字の色を変更

文字の色を変更したい場合には、セレクタ {color: 値}と記述し、値は変更したい色名を指定します。色名の指定には「red」のように英語で記述するほか、「#FF0000」のようにカラーコードで指定することも可能です。カラーコードで指定する場合には、カラーコード表を参考にするとよいでしょう。

背景色の変更

背景色を変更したい場合には、セレクタ {background: 値}と記述します。文字の色と同じように、英語で色名を指定するかカラーコードで指定することができます。

文字の配置を変更する

文字の配置を変更したい場合には、セレクタ {text-align: 値}と記述します。文字は左寄せがデフォルトなので中央寄せか右寄せかを指定します。中央に寄せたい場合にはセレクタ {text-align: center}、右に寄せたい場合はセレクタ {text-align: right}と記載します。

HTMLとCSSの基本を理解して、ホームページを自分で更新しよう

いかがでしたか？今回は、ホームページの更新時に役立つHTMLとCSSの基本的な知識をご紹介しました。今回ご紹介したHTMLタグやCSSのプロパティは、まだまだ基本的な部分です。ホームページをより魅力的に、そしてスムーズに更新するためにも、HTMLやCSSの知識習得に取り組んでみてはいかがでしょうか。