【コーディングとは？】HTMLやCSSの基礎を初心者向けに解説します
mikakoosawa
Webサイト制作について調べ始めると、「HTML・CSSって何？」と思う方も多いのではないでしょうか。
本記事では、HTML・CSSの基礎を解説していきます。
目次
HTMLとは？
HTML（エイチティーエムエル）は「HyperText Markup Language」の略称で、ウェブページを作成するための基本的な言語です。簡単に言うと、HTMLはウェブページの「骨組み」を作るものです。例えば、見出し、段落、画像、リンクなどをウェブページに配置するために使います。
- 見出し：サイトのタイトルやセクションを目立たせる。
- 段落：テキストを整理して読みやすくする。
- 画像やリンク：コンテンツを視覚的に豊かにしたり、他のページへアクセスできるようにする。
上の画像のように、HTMLはウェブページの「骨組み」を作るための言語ですが、「見た目」を整えることは得意ではありません。
例えば、HTMLだけで作ると、文字の色やフォント、配置がシンプルすぎて少し味気ないページになります。
HTMLを始めるには？
HTMLを始める手順
- 必要なものを準備しよう
◼︎パソコン（Windows、MacどちらでもOK）
◼︎テキストエディタ
HTMLを書くには「テキストエディタ」と呼ばれるソフトが必要です。例えば、以下のようなものがおすすめです
・Visual Studio Code（VSCode）：初心者からプロまで広く使われており、無料でダウンロードができます
・メモ帳（Windows）、テキストエディット（Mac）：最初はこれでも問題ありません
Visual Studio Code (VSCode) のダウンロードはこちら
2. HTMLファイルを作ってみよう
・テキストエディタを開いて、以下のコードを書いてみましょう
・ファイル名を「index.html」にして保存しましょう。拡張子が「.html」であることがポイントです
3. ブラウザで表示してみよう
・保存したファイルをブラウザ（Chrome、Edge、Safariなど）で開いてみましょう
・作成したページが正しく表示されれば成功です！
HTMLの基本的なタグを学ぶ
1. 見出しを作るタグ：<h1> ～ <h6>
ウェブページの見出しは、<h1>から<h6>までのタグで作成します。数字が小さいほど、見出しの重要度が高くなります。
HTML記述例：
表示結果：
見出しタグを使うと、ページの内容が整理されて、見やすくなります。
2. 段落を作るタグ：<p>
文章やテキストを表示するときには<p>タグを使います。段落ごとに分けて書くことで、きれいに整列されます。
HTML記述例：
表示結果：
3. リンクを作るタグ：<a>
ウェブページから別のページへ移動するリンクを作るには<a>タグを使います。リンク先のURLをhref属性に指定します。
HTML記述例：
表示結果：
リンクを設定することで、他のページや外部サイトへ移動できるようになります。
4. 画像を表示するタグ：<img>
ウェブページに画像を表示するには<img>タグを使います。画像のパスやURLをsrc属性に指定します。
HTML記述例：
- src：画像の場所（パスやURL）を指定します。
- alt：画像が表示されないときに代わりに表示する説明文です。
5. リストを作るタグ：<ul> と <ol>
項目をリスト化したいときは、2種類のリストが使えます：
<ul>：順序なしリスト（箇条書き）<ol>：順序ありリスト（数字つき）
HTML記述例：
表示結果：
6. まとめ
今回はHTMLの基本的なタグを紹介しました。これらのタグを使うだけで、シンプルなウェブページはすぐに作れます！
まずは以下のタグを使って、簡単なページを作ってみましょう。
- 見出し：
<h1>〜<h6> - 段落：
<p> - リンク：
<a> - 画像：
<img> - リスト：
<ul>と<ol>
少しずつ慣れていくと、ウェブページ作りが楽しくなってきますよ！HTMLを学ぶ第一歩として、実際に手を動かしてみてくださいね。
CSSとは？
CSS（シーエスエス）は「Cascading Style Sheets」の略で、ウェブページの見た目やデザインを整えるための言語です。
HTMLがウェブページの「骨組み」や「構造」を作るのに対して、CSSはその骨組みに色を塗ったり、装飾を加えたりすることで、美しいデザインを作り上げます。
例えば上の画像は、
先ほどの画像にCSSを加えることで、文字の色や大きさ、背景の色などが変えることができ、余白を入れデザイン性の高くなっています。
・文字のスタイル変更：タイトル「HTMLとは？」の文字色が青くなり、大きなフォントサイズで目立つようになりました。
・背景色の追加：ページ全体に淡いベージュの背景色が設定され、画面が柔らかく落ち着いた印象になりました。
・リンクのデザイン変更：「株式会社Shinker」のリンクの下線がなくなり、デザイン性が高くなりました。
・全体的な余白：両サイドに余白を設け、画面全体が整った印象になり、テキストや画像が見やすくなりました。
CSSの役割
デザインを追加する
CSSを使うことで、文字の色やフォント、背景の色などを設定でき、HTMLのシンプルな骨組みに視覚的な魅力を加えられます。
例えば、タイトルの色を変更し、本文を読みやすく調整するなど、見た目の細かい部分をデザインできます。
ウェブページを整理する
CSSを使えば、文字の位置を中央に揃えたり、背景色で重要な部分を強調したりすることが可能です。
これにより、訪問者がページの内容を直感的に理解しやすくなります。
柔軟なカスタマイズができる
ページ全体のスタイルを統一したり、部分ごとに個別のデザインを設定したりと、柔軟に見た目を調整できます。
HTMLだけではできないレベルでデザインの自由度が広がります。
CSSの書き方：基本
CSSには大きく分けて3つの書き方があります
HTMLタグに直接書く（インラインCSS）
要素の中に直接スタイルを書き込む方法です。
例：
表示結果：
<style>タグを使う（内部CSS）
HTMLファイル内にスタイルをまとめて書く方法です。
例：
表示結果：
CSSファイルを使う（外部CSS）
最もよく使われる方法で、CSS専用のファイルを作成してHTMLから読み込みます。
手順
- CSSファイル（例：
style.css）を作成する
2. HTMLの<head>内でCSSを読み込む
HTML本文：
表示結果：
外部CSSは、複数のページで同じデザインを使いたい場合に便利です。
CSSでできる基本的なデザイン
文字のスタイルを変える
CSSを使うと文字の色や大きさ、フォントを簡単に変更できます。
背景色をつける
要素に背景色を追加することができます。
要素を中央に配置する
テキストやボックスを画面の中央に配置するには、以下のように書きます。
まとめ：CSSでデザインを楽しもう！
CSSはウェブデザインの「魔法のツール」です！少しずつ基本を覚えながら、文字の色を変えたり、背景を付けたりして、デザインを楽しく学んでいきましょう。
最初はうまくいかなくても、試行錯誤しながら作ることで理解が深まります。
実際にコードを書いてブラウザで確認すると、成果が目に見えるので楽しいですよ！
チームでサイト制作をするということ
サイト制作の学習を始めたばかりの頃は、一人でHTMLやCSSを書いて、デザイン通りに仕上げることが多いかもしれません。しかし、仕事としてサイト制作をする場合、複数人のチームで作業することが一般的です。
例えば、次のような役割分担が行われることがあります。
- デザイナー：サイトのデザインや色合いを決める
- フロントエンドエンジニア：HTML・CSS・JavaScriptを使って画面を作る
- バックエンドエンジニア：データの処理やシステムの仕組みを作る
このように役割が分かれると、一人で書いていた時のコードとは違い、他の人もコードを見て理解し、編集する必要が出てきます。
コーディング規約とは
コーディング規約とは、プログラムを書く際のルールやガイドラインのことです。ウェブ開発においては、HTMLやCSSをきれいに整理し、誰が見ても理解しやすいコードを書くために定められたものです。
複数の人が同じプロジェクトで作業する場合、コーディング規約がないとコードがバラバラになってしまい、後から修正や追加が難しくなります。コーディング規約を守れば、コードの品質が向上し、チーム全体の作業効率もアップします。
初心者の方にとっても、「書き方のルール」があることで混乱せずにスムーズに学習できるのが大きなメリットです。
優れたHTML・CSSのコーディング規約の共通点
- 読みやすさを重視している
- インデント（字下げ）を統一し、コードの階層構造が明確。
- 改行や空白の使い方を整え、見た目がスッキリしている。
2. 命名規則が一貫している
- クラス名やID名に意味のある英単語を使用し、役割が一目でわかる。
- 命名規則（例：ハイフンで単語をつなぐなど）をチームで統一している。
3. コメントを適切に活用している
- 特殊なコードや重要な部分にはコメントが追加されており、意図が伝わりやすい。
- コメントは簡潔でわかりやすい内容に留めている。
4. 再利用性を意識している
- CSSでは同じスタイルを複数回書くのを避け、クラスや共通ルールで再利用可能にしている。
- HTMLの構造はシンプルかつ汎用的に設計されている。
5. 無駄を排除している
- 使用されていないコードや不要なスタイルは削除し、読みやすさと保守性を確保している。
- 重複するスタイルや非効率的なセレクタは避けている。
6. ウェブ標準に準拠している
- HTMLは適切なタグや属性を使い、SEOやアクセシビリティを意識している。
- CSSは最新の仕様に基づいて書かれ、ベンダープレフィックスや古い書き方を必要最低限にしている。
7. 保守性を考慮している
- チーム全体が規約を守ることで、誰が書いたコードでも簡単に修正や拡張ができるようになっている。
- スタイルの指定範囲を明確にし、影響が予測しやすい構造を心がけている。
優れたコーディング規約は、「わかりやすく」「管理しやすい」コードを目指し、チーム全体での生産性と品質の向上を実現します。
最後に：HTMLとCSSでウェブページ作成の第一歩を踏み出そう！
この記事では、HTMLとCSSの基本について解説しました。
- HTMLはウェブページの「骨組み」を作るための言語です。見出しや段落、画像、リンクなど、ページに必要な要素を配置します。
- CSSはその骨組みに「デザイン」を加える言語です。色、フォント、背景、レイアウトなどを整え、見た目を美しく仕上げます。
この2つを組み合わせれば、シンプルなページからデザイン性の高いウェブサイトまで自由に作成できるようになります。
学び始めたばかりの方は、少しずつコードを書きながら理解を深めていきましょう！
「作りたいページ」を思い浮かべながら手を動かすことが、上達の一番の近道です。ぜひ、HTMLとCSSを使って自分だけのウェブページを作ってみてください！
参考ページ：https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web
