非エンジニアも知っておきたい！HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。

エンジニアでなけれWebサイトの制作や運営はCMS（コンテンツ管理システム）に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。

今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。

非エンジニアがHTMLとCSSを覚えるメリット

HTMLとCSSはWebサイトを構成している大事な要素。そのため、どのコードでどの部分が表示されているのか、その仕組みがわかるようになります。

この仕組みがわかることで、まったく知らない状態よりもWebサイトについての理解が深まるでしょう。

まずは非エンジニアでもHTMLとCSSを覚えることでどんなメリットがあり、どんなことができるのかをご紹介します。

タグやコードで編集できる

CMSを使ってWebサイトを編集すると、実際に表示画面と同じような感覚で操作できるのでとても便利です。

しかしHTMLとCSSの基礎だけでも覚えておけば、タグやコードを見てどれが「見出し」でどれが「リスト」なのか、さらにどの部分までを装飾しているのかなど理解できるようになります。

タグやコードで編集できるようになるため、自然とHTMLとCSSの知識も増えていくでしょう。

どこに問題があるのかがわかる

Webサイトを見たとき、表示がおかしくなっている部分が見つかることがあります。しかしCMSを使っての編集では特に問題はなく、どこを直せば良いのか迷うことも。

そこで、HTMLとCSSを知っておくことでどこに問題があるのか、どうやって修正すれば良いのかがわかるようになります。Webサイトの表示上のトラブルにすぐ対処できるでしょう。

Webサイトのアレンジができる

「この画像をスライドするように表示したい」「この部分に色以外の装飾をしたい」。そんな編集をしたいとき、CMSだけだと限界もあります。

HTMLとCSSを覚えることで、自分の好きなようにWebサイトをアレンジすることも可能です。つまり、思い描いた通りのWebサイトに仕上げることもできるようになります。
さらに知識を深めていけば、自分で新しいデザインを生み出すのも難しくありません。

HTMLの基礎

HTML（Hyper Text Markup Language）とは、ブラウザにWebサイトを表示させるためのコンピューター言語のこと。HTMLタグを使って入力された文字が画面上に表示される仕組みになっています。

画像：ferretのソースコード

ここで、画面上で右クリックをして「ページのソースを表示」を選択してみましょう。
「>」と「HTMLタグ。そしてHTMLタグを含めた全体の文字列がソースコードです。

実はソースコードはWebサイトの設計図だとも言われており、単に文字を表示するだけでなく、「これは見出し」「画像を動かす」などの指示が含まれています。

文字に意味を持たせる役目

単純に文字を並べただけでは、ブラウザに表示されても、何の意味もありません。そこで、文字に「見出し」「リスト」といった意味を持たせることがHTMLの役目です。

ここで、よく使うHTMLのタグをご紹介します。

・見出し／hタグ
<h1>見出し、またはタイトル</h1>
・画像／imgタグ
<img src="画像のパス" alt="画像の説明" />
・リンク／aタグ
<a href="リンク先のURL">ここをクリックするとリンク先に飛びます</a>
・文字のグループ分け／divタグ
<div>グループ分けしたい文字<div/>
・リスト作り／ul、ol + liタグ
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

文字に意味を持たせることで、Webシステムにその文章の内容を理解させることができます。実はHTMLタグを使わず意味を持たない文字列は、検索してもヒットしないのです。

参考：HTMLとは？−HTMLの基本｜HTMLクイックリファレンス

HTMLタグとSEOの関係

HTMLとSEOは切っても切り離せない関係です。
Webサイト内の文章すべてを検索エンジンに読み取らせるのは非効率。そこで、HTMLタグを使って優先的に読み取らせる部分や強調する部分を分けるような仕組みになっています。

例えばHTMLタグの＜h1＞は見出し1、つまりタイトルを意味しますが、検索エンジンは＜h1＞を読み込んで、SEOの順位付けを行うのです。

HTMLタグを使って文章を入力することで、検索エンジンは「この記事はこんなタイトルで、タイトルの中にこのキーワードが含まれているんだな」と理解します。

SEO対策を行うにはHTMLタグも重要な知識となるので、ぜひ覚えておきたいですね。

CSSの基礎

一方でCSS（Cascading Style Sheets）とは、ブラウザ上でその文字や画像をどのようなデザインで表示させるかを決めるコンピューター言語です。スタイルシートとも呼ばれるので覚えておきましょう。

HTMLは文字に意味合いを持たせることができますが、色を変えるなどの装飾には向いていません。そこでより見やすく、読みやすくするための装飾にはCSSが使われます。

例えばHTMLでグループ分けされた文字列を赤で表示させたり、背景色を変えたり、文字を太くしたりなど。こうした装飾があるかないかで、ユーザビリティにも影響を与える可能性があります。

HTMLと一緒に使われるCSSプロパティ

CSSはHTMLがあってこそのもので、2つで1つだと言っても過言ではありません。
そこで、よく使われるCSSプロパティも覚えておきましょう。

フォントの種類／font-family
文字色／color
文字の大きさ／font-size
背景の指定／background
背景の色／background-color
行の高さ／line-height
幅／width

これでh1の文字の色、大きさを変えたいときは次のようになります。

h1{font-size: 20px, color: blue;}

20pxが文字の大きさ、blueが文字の色です。
自分が扱うWebサイトのスタイルシートをぜひ眺めてみてください。きっとどんな仕組みになっているのか、わかるようになってくるでしょう。

参考：CSSとは？−CSSの基本｜HTMLクイックリファレンス

初心者でもHTMLとCSSをWebサイトに活用！

CMSを使うことで誰でも簡単にWebサイトを更新できますが、CMSにはどうしても制限があり、自分が思ったように編集できないなんてことも。

HTMLとCSSの基礎知識だけでも持っておくことで、細かい編集をしようと思ったときに有利になります。
また、問題があればすぐに発見でき、効率的に作業ができるようになるので、時間短縮にも役立ちます。

ぜひHTMLとCSSを覚えて、Webサイト運用に活用しましょう！

HTMLとCSSについて学ぶ

SEO対策ですぐ使える6つのHTMLタグを解説！記述法や特徴、最適化の方法を紹介

この記事では、SEOの基本となるHTMLの「タグ」について解説していきます。タグを利用する目的や効果的な使い方を理解しましょう。

CSSで知っておきたい、フォントサイズ指定の単位のすべて

今回は、CSSで知っておきたいフォントサイズ指定の単位について、「px」を使うことで生じる問題についても触れながら解説します。 20年前のWebスタンダードを脱し、今日のWebの基準に合わせていくために、正しい知識を確認していきましょう。