【初心者向け】HTMLとCSSの基本をわかりやすくまとめてみた

本記事は、初学者である私が学習内容を整理・アウトプットする目的で執筆していま

す。

同じように学び始めた方にも理解しやすいよう、できるだけ噛み砕いて解説していま

す。

最後まで記事を読んで、一緒に基礎を固めていきましょう！

HTMLとCSSとは？

ウェブデザインの世界において、HTMLとCSSは必須の技術です。

この2つを組み合わせることで、Webページは作られています。

HTMLの基本

HTMLとは？

HTMLは、Webページの構造を作るマークアップ言語です。

文章の見出しや段落、リンク、画像など、ページ内の要素を構造化してブラウザに指示

します。HTMLはページの「骨組み」を定義するだけで、動作はしません。

HTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きを加えることで、機能

的なウェブページが完成します。

この記事では、JavaScriptの解説はしないので、また別の記事で紹介します。

次からは、コードを書きながら進めていくとより理解が進むので、先に「エディタ」を用意しましょう。

「Atom」「Sublime」というようにエディタにも種類がありますが、おすすめはVisual Studio Code（VS Code）です。

特にこだわりがなければ、使用している人も多い「VS Code」をお勧めします。

VS Codeの使い方-HTML編-

ここからは、座学＋実践で学習していきましょう。

実際に手を動かして理解度を高めよう！！

１、新規フォルダを作成しよう

まずは、勉強に使用するフォルダを新規で作成しましょう。

方法はいろいろありますが、今回はデスクトップにフォルダを作成する方法で紹介します。

1. デスクトップで右クリックします。
2. そうすると「新規フォルダ」と出てくるのでそこをクリックします。
3. 完成です！！

簡単ですよね！

名称は管理しやすいように変えておきましょう。

２、テキストを表示させてみよう

次は、web上にテキストを表示させてみましょう。

これでweb上にテキストを表示させる事ができました。

簡単ですよね！

ですが、現状は「なんか出せた」というような感じですよね。私も同じです。

これから一緒にwebの学習を進めて仕組みも理解していきましょう！

タグの基本ルール

HTMLでは、テキストに「タグ」をつけることで、

といったことが可能になります。

HTMLでは、基本的に

<タグ名>テキスト</タグ名>

のように、開始タグと終了タグでテキストを挟みます。

テキストの前側にあるのが開始タグになります。終了タグは、後ろ側にある方です。

終了タグには、必ず</タグ名>というように/を入れないといけません。

分かりやすくテキストと書いていますが、テキストの事を要素やコンテンツと言います。

ここから先ほどしたように実践しながらすると、より理解が深まると思うので、読むだ

けでなく実際に表示させて勉強していきましょう。

見出しタグ

<h1>見出し</h1>

コンテンツを<h1>タグで挟む事で、挟んだコンテンツを見出しにすることができます。

ブログの記事などの重要なコンテンツに見出しタグを使います。h1はその記事の一番重

要なコンテンツに使います。（記事のタイトル）

見出しには <h1> 〜 <h6> まであります。h1が一番重要で数字が下がるほど重要度が下

がります。

基本的には、h1~h4辺りまでしか使用しないと思います。

• <h1> が一番大きい
• <h6> が一番小さい

段落タグ

<p>文章</p>

pはparagraph（段落）の略です。

htmlでテキストを表示させたい時は、pタグを使います。

コメント

<!-- コメント -->

ブラウザには表示されません。メモとして使えます。

コメントはいろんな使い方ができて便利なので覚えておきましょう。

「ここはこういう意図で書いた」、「あとでここを修正予定」などのちょっとしたメモと

しても使えますし、「エラーが出ていてここが怪しいけど、消すと戻すの面倒くさい」と

いった時にも使えます。

コメントは、消さなくても消した時と同じような挙動にすぐにできます。

こういった使い方をコメントアウトと言います。

リンクの作り方

<a href="URL">表示テキスト</a>

テキストにリンクをつけたい時はaタグを使います。

下記のルールに従ってリンク付きのテキストを作成しましょう。

• a タグを使う
• href 属性で飛び先を指定する
• URLはダブルクォーテーションで囲む

画像の表示

<img src="URL">

次は、画像の表示ですね。ここまでくるとコードを書いている感じがしてくるのではな

いでしょうか。

画像の表示には、imgタグを使います。注意点としては、終了タグを書かなくていい

事です。

• src に画像のURLを書く
• 終了タグは不要

リストの作り方

次は、箇条書きのリストを作ってみましょう。

ulタグを使用すると黒点のリストを作る事ができます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
　<li>項目3</li>
</ul>

olタグを使用すると番号のリストを作れます。

<ol>
  <li>項目1</li>
  <li>項目2</li>
　<li>項目3</li>
</ol>

どんな感じで表示されるかVS codeでコードを書いてブラウザで確認してみましょう。

• <li> → リスト項目
• <ul> → 黒点リスト
• <ol> → 番号リスト

入れ子構造とは？

要素の中に要素を入れることを「入れ子」と言います。

• 囲む側 → 親要素
• 囲まれる側 → 子要素

インデント（字下げ）をすると、構造がわかりやすくなります。

グループにして整理する

htmlは、1ページで数百行と普通に書きます。

なので、何も気にせずタグを書いていくとどこに何を書いたのかわからなくなります。

それを防ぐために、htmlではグループ化をして整理しながら書きます。

代表的なタグが<div>タグです。

<div>
  <ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>いちご</li>
  </ul>
</div>

こんな感じでグループ化します。

メリットは、ブロックに分けて整理ができることやデザインをまとめて設定できること

です。

タグに属性をつける

先ほど少し触れた属性についてです。

属性とは、追加的な情報のことでタグに名前を付けたりタグ内の要素の言語を指定した

りと、種類が多くあります。

・属性の書き方

<タグ名 属性="属性値">

この記事でも属性を二つ紹介してます。

1. <a href=”リンク先のURL”>表示テキスト</a>
2. <img src=”URL”>

①のhref属性の意味は、リンク先のURLを指定する属性です。
②のsrc属性は、ドキュメントに埋め込む要素のURLを指定する属性という意味です。

上記の二つは、ほぼセットで使うと覚えておくので大丈夫だと思います。

よく使う属性の一覧です。

• id属性：要素に好きな「固有名」を付ける
• class属性：要素に好きな「分類名」を付ける
• src属性：画像ファイルの置き場所を示す
• href属性：リンク先を示す

VS Codeの使い方-CSS編-

ここからはCSSです。

HTMLと同じようにファイルを作成して実際に書いていきましょう。

早速CSSを書いていきたいのですが、その前に事前準備が必要です。

一緒に準備していきましょう。

まずは、HTML編でも使用したstudyフォルダをVS codeで開きましょう。わからな

い人は、「VS Codeの使い方-HTML編-」を見直してみてください。

1. 新しいフォルダを作成で「CSS」と入力
2. 次に「CSS」フォルダの中に「style.css」ファイルを作成

CSSファイルを読み込む

ファイルの準備ができたら、HTMLからCSSファイルを読み込む設定をしていきます。

1. index.htmlの中で!を入力してタブキーを入力します。
2. すると、テンプレートのようなコードが表示されます。
3. titleの下に「<link rel=”stylesheet” href=”./css/style.css”>」をコピペ
4. 私のようにh1タグ等何か記入していればbodyの中に移しましょう。
5. titleの変更は任意です。

テンプレートの説明は後々しますので、今回はこんな感じで書くんだと思ってもらえた

らと思います。

linkタグは、HTMLファイルと他の文書ファイル（CSSファイルなど）を結びつけるタ

グです。

link rel="stylesheet" href="./css/style.css"

このファイルはスタイルシートでファイルの場所はここですと宣言しています！

これでHTMLファイルからCSSファイルを読み込むことができました。

絶対パスと相対パスとは

CSSファイルの指定で使ったhref=”./css/style.css”は、ファイルパスを指定してい

ます。パスとはファイルのおいてある場所のことです。

パスの指定方法は、絶対パスと相対パスの二つあります。

• 絶対パス…ファイルのある場所を完全に指定する
• 相対パス…編集しているファイルから見たファイルの場所を指定する

./css/style.cssは相対パスの書き方になります。

./は、「このファイルが置いてあるのと同じ階層」という意味です。

このように、編集中のファイルがある場所によって変わるのが相対パスです。

ちなみに、「一つ上の階層の～」と指定するときは../という書き方になります。

先ほどのファイルを絶対パスで指定すると、以下のようになります。

WindowsとMacでは書き方が違います。

• Windows…C:\Users\Desktop\study\css\style.css
• Mac…/usr/Desktop/study/css/style.css

絶対パスと相対パスのどちらでもファイルを指定できますが、CSSファイルは相対パス

で指定するのが一般的です。

絶対パスだと作業しているフォルダを動かしたときなどにパスがズレてリンクが切れて

しまいます。なので相対パスを使うようにしましょう。

CSSの基本

CSSとは？

CSSは、HTMLで作った要素に

• 色
• 大きさ
• 配置

などを指定する言語です。

HTMLだけでは文字と画像が並ぶだけですが、CSSを使うとデザインが整います。

CSSの書き方

h1 {
  color: red;
}

この意味は、「h1要素の色を赤にする」ということです。

• 対象 → セレクタ
• 変更項目 → プロパティ
• 変更内容→ バリュー

colorプロパティ

color: #ff0000;

16進数カラーコードで指定します。

color: red;

のように色名でもOKです。

font-size（文字サイズ）

font-size: 20px;

単位の px を忘れないこと。

font-family（フォント）

font-family: "Arial";

スペースがある場合はダブルクォーテーションで囲みます。

背景色

background-color: #ddd;

#dddddd は #ddd と省略できます。

width / height

width: 300px;
height: 200px;

横幅と高さを指定できます。

コメント（CSS）

/* コメント */

cssでは、上記の書き方でコメントをかけます。

使い方は、htmlと同じで色々と使い道があって便利なので覚えておきましょう。

classの使い方（超重要）

複数の <li> があるとき、

li {
  color: red;
}

と書くと、全部赤になります。

1つだけ変えたいときは class を使います。

HTML側：

<li class="red-text">項目</li>

CSS側：

.red-text {
  color: red;
}

こうする事で、特定箇所にだけスタイルを適用できます。デザインを分けたい時は、

classを活用しましょう。

まとめ

今回は、Web制作の基礎となる HTMLとCSSの基本 について解説しました。

この記事のポイントを振り返ると、次の通りです。

最初はタグやコードを見ると難しく感じるかもしれませんが、実際に 手を動かしてコー

ドを書いていくことで理解が深まっていきます。

今回紹介した内容は、Web制作の 本当に基本となる部分 です。

この基礎が理解できると、次のようなこともできるようになります。

これからWeb制作を学んでいく上で、まずは HTMLとCSSの基礎をしっかり身につけ

ること がとても重要です。

私自身もまだ学習中ですが、この記事が これからHTMLやCSSを学び始める方の理解

の助けになれば嬉しいです。

ぜひ今回の内容を参考にしながら、実際にコードを書いて 自分のページを作ってみてく

ださい！

管理人（サンプル）

駆け出しブロガー

XInstagramYouTube

〇〇生まれ〇〇出身。〇〇〇〇の最新情報を皆様にお届けすべく、日々奮闘中です。
趣味は〇〇〇〇。〇〇〇〇も得意です。 〇〇について発信中です！