0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YutopianF(YUTO)

HTMLとCSSの基礎について

0
Posted at

この記事では、Webページを作成するために使われる HTMLとCSSの基礎について説明します。

HTMLはWebページの「構造」を作り、CSSはWebページの「見た目」を整えるために使われます。

目次

  1. HTMLの基礎
  2. 要素について
  3. HTMLの基本的な文章構造について
  4. head要素の中に書く要素について
  5. body要素の中に書く要素について
  6. id属性とclass属性について
  7. 目次リンクをつけてみる
  8. CSSの基礎
  9. CSSを記述する場所について
  10. セレクタについて
  11. プロパティと値について
  12. CSSフレームワークについて
  13. まとめ
  14. 参考資料

HTMLの基礎

HTML（HyperText Markup Language）とは、Webページを作成するために使われるマークアップ言語です。

ここで、HyperTextとは、複数の文章や情報を結びつける仕組みを持ったテキストのことです。

Markupとは「目印をつける」という意味で、文章構造の各部分がどのような役割を持つのかを示します。

例えば、

  • 見出し
  • 段落
  • 表
  • リスト
  • リンク
  • 画像

など、文書内の各部分がどのような役割を持っているのかをHTMLで表現します。

こうした文書構造を構成する一つひとつのまとまりを、**要素（element）**と呼びます。

HTMLでは、このような要素を組み合わせることでWebページを作成します。

要素について

HTMLの要素は、基本的に以下のような書式で記述します。

<開始タグ>文章</終了タグ>

ここで、タグとは、文書の中でその部分がどのような役割を持つのかを指定するものです。

また、開始タグには**属性（attribute）**を書くことがあります。

属性とは、その要素に追加の情報や設定を与えるためのものです。

属性は、

<要素名 属性名="属性値">

という形で記述します。

例えば、

<a href="https://note.com/">note</a>

では、href が属性名で、https://note.com/ が属性値です。

HTMLの基本的な文章構造について

HTML文書は、一般的に以下のような構造になっています。

<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
  </head>

  <body>
    <h1>タイトル1</h1>
    <p>本文1</p>
  </body>
</html>

それぞれの部分について説明します。

DOCTYPE宣言

HTML文書の先頭には、

<!DOCTYPE html>

と記述します。

これは、この文書をHTMLとして扱うことをブラウザに伝えるための宣言です。

html要素

HTML文書全体を囲む要素です。

<html>
  文章
</html>

例えば、

<html lang="ja">

とすることで、このHTML文書の主な言語が日本語であることを示せます。

head要素

<head>
  文章
</head>

head 要素には、Webページの本文そのものではなく、ページに関する設定やメタデータなどを記述します。

例えば、

  • 文字コード
  • ページタイトル
  • CSSの読み込み
  • その他のメタ情報

などを記述します。

なお、Webサービスによっては、ユーザーが自由に head 要素を編集できない場合があります。

例えば、NEMLOGで記事を書く場合は、基本的に本文部分を記述することになります。

body要素

<body>
  文章
</body>

body 要素には、Webページとして表示したい内容を記述します。

例えば、

  • 見出し
  • 文章
  • 画像
  • リンク
  • リスト

などを記述します。

head要素の中に書く要素について

ここでは、head 要素の中でよく使われる要素を紹介します。

title要素

ブラウザのタブなどに表示されるページタイトルを指定する要素です。

<title>サンプルページ</title>

meta要素

ページに関するメタデータを記述する要素です。

基本的に終了タグはありません。

例えば、

<meta charset="UTF-8">

と記述すると、文字コードとしてUTF-8を使用することを指定できます。

script要素

JavaScriptのコードをHTMLに埋め込んだり、外部のJavaScriptファイルを読み込んだりするための要素です。

例えば、

<script src="sample.js"></script>

と記述すると、sample.js というJavaScriptファイルを読み込みます。

script 要素は head 要素内にも body 要素内にも記述できます。

例えば、JavaScriptでSymbol関連のライブラリを読み込む場合も、このような仕組みを利用します。

ただし、WebサービスによってはJavaScriptの読み込みや実行が制限されている場合があります。

body要素の中に書く要素について

ここでは、body 要素内でよく使われるHTML要素を紹介します。

p要素

p 要素は、一つの段落を表します。

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

<p>Symbol</p>

文章を書く場合によく使用します。

h1～h6要素

h1 ～ h6 は、見出しを表す要素です。

h は heading（見出し） の略です。

<h1>大見出し</h1>
<p>本文</p>

<h2>見出し2</h2>
<p>本文</p>

<h3>見出し3</h3>
<p>本文</p>

<h4>見出し4</h4>
<p>本文</p>

<h5>見出し5</h5>
<p>本文</p>

<h6>見出し6</h6>
<p>本文</p>

h1 が最も大きなレベルの見出しで、h6 が最も小さなレベルの見出しです。

h7 以降の見出し要素はありません。

見出しを適切に使うことで、文書の構造を分かりやすくできます。

br要素

br 要素は、文章中で改行するために使用します。

<p>
  Catapultは<br>
  テックビューロの技術です
</p>

br は内容を持たない要素なので、終了タグはありません。

HTML5では、

<br>

と記述するのが一般的です。

div要素

div 要素は、複数の要素をグループ化するために使用します。

<div>
  <p>Symbolとmijinは</p>
  <p>Catapultエンジンを使った</p>
  <p>ブロックチェーンです。</p>
</div>

<div>
  <p>Symbolは</p>
  <p>エンタープライズ分野で活躍する可能性があります。</p>
</div>

div は、それ自体では特別な意味を持たない汎用的なコンテナです。

CSSを適用したり、JavaScriptで操作したりする際に、複数の要素をまとめる目的などで利用します。

a要素

a 要素は、リンクを作成するために使用します。

<a href="https://note.com/">note</a>

a は anchor（アンカー） の略です。

href 属性にリンク先を指定します。

例えば、

<a href="https://example.com/">Webサイトを見る</a>

とすると、「Webサイトを見る」という文字をクリックして、指定したページへ移動できるようになります。

img要素

img 要素は、画像を表示するために使用します。

<img src="image.jpg" alt="サンプル画像">

img 要素には終了タグがありません。

主な属性には以下のようなものがあります。

属性 内容
src 画像ファイルの場所
width 画像の横幅
height 画像の高さ
alt 画像の代替テキスト

例えば、

<img
  src="image.jpg"
  alt="サンプル画像"
  width="544"
  height="726"
>

のように記述できます。

特に alt 属性は、画像が表示できない場合や、スクリーンリーダーを利用する場合などに重要です。

ul・ol・li要素

これらの要素は、リストを作成するときに使用します。

  • ul：unordered list（順序なしリスト）
  • ol：ordered list（順序付きリスト）
  • li：list item（リスト項目）

ul要素

ul を使うと、順序を持たない箇条書きを作成できます。

<ul>
  <li>Bitcoin</li>
  <li>Ethereum</li>
  <li>Symbol</li>
</ul>

表示イメージ：

  • Bitcoin
  • Ethereum
  • Symbol

ol要素

ol を使うと、番号付きのリストを作成できます。

<ol>
  <li>alpaca</li>
  <li>bison</li>
  <li>cow</li>
</ol>

表示イメージ：

  1. alpaca
  2. bison
  3. cow

その他のHTML要素

HTMLには、このほかにも多くの要素があります。

例えば、

  • span
  • table
  • form
  • input
  • select
  • textarea
  • button

などがあります。

HTMLには非常に多くの要素があるため、必要になったときに、それぞれの使い方を調べていくとよいでしょう。

id属性とclass属性について

HTMLでは、要素に名前を付けて、CSSやJavaScriptから特定の要素を指定することができます。

そのときによく使われるのが、id 属性と class 属性です。

例えば、

<p id="data1">NEM</p>
<p class="tag">Symbol</p>

と記述します。

id 属性の値を ID、class 属性の値を クラス名 と呼びます。

CSSでは、

#data1 {
  color: red;
}

.tag {
  color: blue;
}

のように指定できます。

id は、原則として同じHTML文書内で同じ値を複数の要素に付けないようにします。

一方、class は複数の要素に同じクラス名を付けることができます。

例えば、

<p class="tag">NEM</p>
<p class="tag">Symbol</p>
<p class="tag">Bitcoin</p>

のように記述できます。

目次リンクをつけてみる

HTMLでは、ページ内の特定の場所へ移動するリンクを作ることもできます。

例えば、記事の目次から特定の見出しへ移動する、といった使い方ができます。

id属性を利用する方法

まず、リンク先となる要素に id を指定します。

<h3 id="a">タイトル1</h3>

そして、リンク元では、

<a href="#a">タイトル1</a>

とします。

href の先頭に # を付けることで、指定した id の場所へ移動できます。

例えば、以下のように書けます。

<h3>目次</h3>

<ul>
  <li><a href="#a">タイトル1</a></li>
  <li><a href="#b">タイトル2</a></li>
  <li><a href="#c">タイトル3</a></li>
  <li><a href="#d">タイトル4</a></li>
</ul>

<h3 id="a">タイトル1</h3>
<p>タイトル1の内容</p>

<h3 id="b">タイトル2</h3>
<p>タイトル2の内容</p>

<h3 id="c">タイトル3</h3>
<p>タイトル3の内容</p>

<h3 id="d">タイトル4</h3>
<p>タイトル4の内容</p>

このようにすると、目次をクリックしたときに、それぞれの見出しへ移動できます。

CSSの基礎

HTMLでWebページの構造を作ったら、次にWebページの見た目を整えます。

そこで使用するのが CSS（Cascading Style Sheets） です。

CSSを使うことで、

  • 文字の色
  • 文字の大きさ
  • 背景色
  • 枠線
  • 要素の幅や高さ
  • レイアウト

などを指定できます。

CSSの基本的な書き方は以下の通りです。

セレクタ {
  プロパティ: 値;
}

例えば、

p {
  font-size: 18px;
}

と記述します。

ここでは、

  • p → セレクタ
  • font-size → プロパティ
  • 18px → 値

です。

つまり、「すべての p 要素の文字サイズを18pxにする」という意味になります。

CSSを記述する場所について

CSSを記述する方法には、主に3つあります。

1. 外部CSSファイルに記述する

style.css のようなCSSファイルを作成し、そこにCSSを記述する方法です。

HTMLの head 要素内で link 要素を使って読み込みます。

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

rel="stylesheet" は、指定したファイルがスタイルシートであることを示します。

href にはCSSファイルの場所を指定します。

外部CSSファイルを利用すると、複数のHTMLページで同じCSSを共有できるため、大規模なWebサイトでも管理しやすくなります。

2. style要素の中に記述する

style 要素の中に直接CSSを記述する方法です。

<style>
  p {
    font-size: 18px;
    font-weight: bold;
  }
</style>

ページ単位でCSSを記述したい場合などに利用できます。

3. style属性として記述する

HTML要素の style 属性に直接CSSを記述する方法です。

<p style="font-size: 12px; background-color: red;">
  Symbol
</p>

この方法は、特定の要素だけにスタイルを適用したい場合などに利用できます。

ただし、多くの要素に同じスタイルを適用する場合は、外部CSSなどを利用したほうが管理しやすくなります。

セレクタについて

セレクタとは、どのHTML要素にCSSを適用するのかを指定するものです。

ここでは代表的な3種類を紹介します。

1. タイプセレクタ

HTMLの要素名を指定する方法です。

p {
  color: #ff0000;
}

div {
  font-size: 12pt;
}

h2 {
  background-color: red;
}

例えば、

p {
  color: #ff0000;
}

とすると、すべての p 要素に適用されます。

2. IDセレクタ

# を先頭につけてIDを指定します。

HTML：

<p id="xyz">Symbol</p>

CSS：

#xyz {
  color: #ff0000;
}

この場合、id="xyz" が付いている要素にスタイルが適用されます。

3. classセレクタ

.（ピリオド）を先頭につけてクラス名を指定します。

HTML：

<p class="xyz">Symbol</p>

CSS：

.xyz {
  color: #ff0000;
}

この場合、class="xyz" が付いている要素にスタイルが適用されます。

プロパティと値について

CSSでは、プロパティによって変更したいスタイルの種類を指定し、値によって具体的な設定を指定します。

例えば、

p {
  color: red;
}

では、

  • color → プロパティ
  • red → 値

となります。

ここでは、代表的なプロパティを紹介します。

1. colorプロパティ

文字の色を指定します。

p {
  color: red;
}

色は、キーワードだけでなく、16進数や rgb()、rgba() などでも指定できます。

p {
  color: #ff0000;
}

p {
  color: rgb(255, 0, 0);
}

p {
  color: rgba(255, 0, 0, 1);
}

rgba() の最後の値はアルファ値（透明度）です。

  • 0 → 完全に透明
  • 1 → 完全に不透明

となります。

2. background-colorプロパティ

要素の背景色を指定します。

p {
  background-color: red;
}

16進数や rgb()、rgba() などを使うこともできます。

p {
  background-color: #ff0000;
}

p {
  background-color: rgb(255, 0, 0);
}

p {
  background-color: rgba(255, 0, 0, 0.5);
}

3. font-sizeプロパティ

文字の大きさを指定します。

div {
  font-size: 20px;
}

代表的な単位には、

  • px
  • em
  • rem
  • %
  • pt

などがあります。

例えば、

p {
  font-size: 20px;
}

とすると、文字サイズを20pxにします。

em は親要素などの文字サイズを基準にした相対的な単位です。

一方、rem はルート要素（通常は html 要素）の文字サイズを基準とします。

4. font-weightプロパティ

文字の太さを指定します。

p {
  font-weight: 500;
}

一般的には、

100 ～ 900

の範囲で指定します。

値が大きいほど、一般的に太い文字になります。

また、

p {
  font-weight: bold;
}

のようにキーワードで指定することもできます。

5. widthプロパティ

要素の幅を指定します。

p {
  width: 200px;
}

6. heightプロパティ

要素の高さを指定します。

p {
  height: 100px;
}

7. borderプロパティ

要素の枠線を指定します。

基本的には、

border: 線の種類 幅 色;

という形で記述します。

例えば、

p {
  border: solid 1px #ff0000;
}

とすると、赤色の実線による枠線を指定できます。

代表的な線の種類には、

  • solid：実線
  • double：二重線
  • dashed：破線
  • dotted：点線

などがあります。

CSSには、このほかにも非常に多くのプロパティがあります。

必要になったときに、それぞれのプロパティの使い方を調べてみるとよいでしょう。

CSSフレームワークについて

CSSフレームワークとは、Webページを作成するときに利用できるCSSやUIコンポーネントなどをまとめたものです。

例えば、

  • ボタン
  • フォーム
  • レイアウト
  • ナビゲーション
  • カード

などのデザインを効率よく実装できます。

Webページを一から作る場合、すべてのデザインを自分でCSSとして記述する必要があります。

しかし、CSSフレームワークを利用すると、あらかじめ用意されたスタイルやコンポーネントを利用できるため、開発の手間を減らせる場合があります。

また、自分で作成したCSSと組み合わせて使用できる場合もあります。

CSSフレームワークにはさまざまな種類があるため、Webサイトの目的や開発環境に合ったものを選ぶことが重要です。

CSSフレームワークの一例として UIkit などがあります。

興味があれば、実際にどのようなコンポーネントが用意されているのか調べてみるとよいでしょう。

まとめ

今回は、HTMLとCSSの基礎について説明しました。

HTMLでは、Webページの構造を作ります。

<h1>タイトル</h1>
<p>本文</p>

一方、CSSでは、そのHTMLに対して見た目を指定します。

h1 {
  color: red;
  font-size: 30px;
}

つまり、

HTML = Webページの構造

CSS = Webページの見た目

と考えると分かりやすいでしょう。

HTMLとCSSはWeb開発の基本となる技術なので、まずは簡単なWebページを実際に作りながら覚えていくのがおすすめです。

参考資料

  • 『ノンプログラマのためのJavaScriptはじめの一歩』外村和仁（技術評論社）
  • ホームページの基本、HTMLとは何か？やさしく学ぶ基礎知識
  • CSSとは？
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?