BLOG

HTMLとCSSについて

「HTML」と「CSS」は、主にホームページを制作する際に使用される言語になります。
ホームページの制作に携わっていない方も「HTMLメール」として言葉を聞いたことがあるかもしれません。
「HTML」や「CSS」のデータ自体は、テキストエディターと呼ばれる、Windowsの「メモ帳」や、Macの「テキストエディット」などのアプリで作成することができます。
制作の技術なので、ホームページを公開する企業側には直接関係のないようにも思えますが、「HTML」と「CSS」は、SEO対策されたコンテンツの作成に活用できるため、集客用ブログを運営する際は基礎知識だけでも身につけておくことをオススメします。
今回は「HTML」と「CSS」について紹介したいと思います。

HTML(Hypertext Markup Language)とは

HTMLの基礎として覚えておきたい言葉は「拡張子/.html」と「HTMLタグ」になります。

「拡張子/.html」とは、テキストエディターで作成したファイルの名前の最後に付ける「.html(例:web.html)」のことです。
拡張子「.html」が付いていることで、コンピューターはファイルが「HTML」だと識別し、パソコンによっては「HTMLファイル」をクリックで開くと自動的にWEBブラウザが起動する仕様になっています。

次に「HTMLタグ」は、HTMLファイルの作成時に使用する技術です。
ホームページには、文章やリンク、写真など様々な要素がありますが、只のテキストだけでは、リンクや写真を表示することはできません。
そこで、「HTMLタグ」を使用します。
「HTMLタグ」には様々な種類があり、要素をリンクにするタグや、画像を読み込むためのタグがあります。
「HTML」の「HT=Hypertext」とは、この用途や機能を持ったテキストのことを指しています。

html 書き方

ブログ作成で覚えておきたいHTMLのタグ

100種類以上ある「HTMLタグ」ですが、ブログ作成などでは全てを使用する必要はありません。
下記は「WordPress」など、HTMLを使用してブログの作成をする際に覚えておきたい「HTMLタグ」をピックアップしました。
また、SEO対策がされたコンテンツの作成には「HTML属性」の使用も欠かせませんが、今回のブログでは割愛させていただきます。

見出しh1〜h6
段落p
リンクa
画像img
table
リストul/ol

CSS(Cascading Style Sheets)とは

テキストが「見出し」か「段落」かなど、HTMLで付与した役割は、コンピューターには判別できても、人の目では判別が難しいため、サイズや色などで、見出しらしく、段落らしくデザインする必要があります。
そのように人の目でも判別できるように作成されたWEBデザインを、WEBブラウザで表示するために使用される言語が「CSS」になります。
また、CSSは設計された「UI/UX」を実現するための技術でもあります。
CSSの拡張子は「.css」となり、ファイルとしてHTMLに読む込むこともできますが、HTMLファイルの中に記述することも可能です。

css 書き方

「HTML」と「CSS」のバージョン

1990年にコード化された「HTML」、1996年に勧告された「CSS」は、定期的に機能の追加や仕様の見直しが行われ、大幅な更新に対しては「HTML3」や「CSS2」など、言語名の後ろの数字を増やした名称になっていましたが、2021年時点での最新バージョンは「HTML Living Standard」と「CSS4」となっており、今後の方針は未定ですが「HTML」からは数字が外れています。(HTML5は2021年1月に廃止)

多くのWEBブラウザでは、過去のバージョンの「HTML」と「CSS」にも対応しているため、ホームページが見れなくなることはありませんが、ある程度の期間が経つと対応しないWEBブラウザが増え、エラーやデザイン崩れの原因となります。
逆に新しすぎる機能や仕様も、WEBブラウザの対応が間に合わず、エラーやデザイン崩れの原因となります。
パソコンやスマートフォンで行われているWEBブラウザのアップデートは、「HTML」と「CSS」の新しいバージョンに対応する効果もあります。
数年前までは見かけることの少なかった、ホームページのアニメーション表現が一般的になった背景には、「HTML」と「CSS」のアップデートと対応WEBブラウザの普及があります。