HTML & CSS Basics

HTMLとCSSとは？
ホームページができる仕組みを初心者向けに解説

「HTML＋CSSで制作します」と言われても、初めての方には分かりにくい言葉です。何をする技術なのか、ホームページができる仕組みからやさしく説明します。

公開日：2026年9月4日執筆：MACHIKA WEB

まず結論：HTMLは中身、CSSは見た目

ホームページをとても簡単に分けると、HTMLは文章・見出し・画像・リンクなど「ページの中身や構造」を作るもの、CSSは色・文字の大きさ・余白・配置など「見た目」を整えるものです。

技術	主な役割	たとえるなら
HTML	文章、見出し、画像、リンクなどを配置する	建物の骨組み・部屋の構成
CSS	色、文字、余白、並び方などを整える	内装・外観・装飾

どちらも、現在のホームページを作るうえで基本となる技術です。

HTMLは「HyperText Markup Language」の略で、ブラウザに「ここは見出し」「ここは文章」「ここに画像」「この文字は別ページへのリンク」といったページの意味や構造を伝えるための言語です。

たとえば、お店のホームページなら、店名、サービス説明、料金表、店舗情報、お問い合わせボタンなどをHTMLで組み立てます。

難しいコードを覚えなくても大丈夫です。
ホームページ制作を依頼する場合、依頼者がHTMLを書く必要はありません。「店名」「料金」「営業時間」「載せたい写真」など、掲載したい内容を準備できれば十分です。

CSSは「Cascading Style Sheets」の略で、HTMLで作った内容を見やすくデザインするための仕組みです。

たとえば、文字を大きくする、背景色を変える、ボタンを目立たせる、写真を横に並べる、スマートフォンでは1列にする、といった表示をCSSで調整します。

HTMLだけでも文章や画像は表示できますが、情報が並んでいるだけでは読みづらいページになりやすくなります。そこでCSSを使って、重要な見出しを目立たせたり、情報をカードに分けたり、余白を取ったりして読みやすくします。

HTMLで内容を整理し、CSSで見やすく伝える。この2つを組み合わせることで、ホームページとして使いやすい形になります。

制作したHTMLやCSS、画像などのファイルをサーバーに置くと、ChromeやEdge、Safariなどのブラウザがそれらを読み取り、画面上にホームページとして表示します。

サーバーやドメインについて知りたい方は、「ホームページのドメインとサーバーとは？」もあわせてご覧ください。

ホームページではHTML・CSSと一緒に「JavaScript」という言葉もよく出てきます。JavaScriptは、メニューを開閉する、画像を切り替える、入力内容に応じて表示を変えるなど、ページに動きや処理を加えるときに使われます。

簡単な覚え方：
HTML＝中身・構造
CSS＝見た目
JavaScript＝動き・操作

ホームページ制作を依頼するために、HTMLやCSSを勉強する必要はありません。むしろ「専門用語が分からないので、何を準備すればよいか教えてほしい」と伝えていただければ大丈夫です。

また、自分で頻繁に内容を更新したい場合は、HTMLを直接編集するのではなく、管理画面から更新できるCMSを使う方法もあります。詳しくは「CMSとは？HTMLで作るホームページとの違い」で解説しています。

MACHIKA WEBではHTMLとCSSを中心に、必要に応じてJavaScriptやCGIなどを組み合わせて制作します。

「HTML＋CSS」という表記は、お客様にコードを書いていただくという意味ではありません。制作側がホームページを構築するために使う基本技術を示しています。掲載内容や写真などをご用意いただければ、専門的な制作作業はこちらで行います。

「HTMLなのかCMSなのか」「自分で更新できるようにしたい」といったご希望も、分からない状態からご相談いただけます。

「HTMLとCSSの違いもよく分からない」という段階でも問題ありません。ホームページで何を伝えたいかを伺い、必要な構成や機能を分かりやすくご案内します。