【基礎】HTML/CSS

公開日: 2025/1/22

HTML は、コンテンツの構造を定義するマークアップ言語です。

HTML は一連の 要素 で構成されており、これらの要素がコンテンツのさまざまな部分を囲み、一定の表示や動作をさせることができます。

タグで囲むと、単語や画像をどこかにハイパーリンクさせたり、単語を斜体にしたり、フォントを大きくしたり小さくしたりすることができます。

1. HTML要素の中身


1.開始タグ (opening tag)
これは、要素の名前(この場合は p)を山括弧で囲んだものです。どこから要素が始まっているのか、どこから効果が始まるのかを表します。 — 今回の場合どこから段落が始まるかを表しています。

2.終了タグ (closing tag)
これは、要素名の前にスラッシュが入っていることを除いて開始タグと同じです。どこで要素が終わるのかを表しています。 — この場合は、段落が終わる場所を表します。終了タグの書き忘れは、初心者のよくある間違いで、おかしな結果になることがあります。

3.コンテンツ (content)
要素の内容です。今回の場合はただのテキストです。

4.要素 (element)
開始タグ、終了タグ、コンテンツで要素を構成します。

<!-- <h1>要素で囲んでください -->
<h1>プログラミングの世界へようこそ</h1>

<!-- <h2>要素で囲んでください -->
<h2>Progateとは</h2>

<!-- <p>要素で囲んでください -->
<p>オンラインのプログラミング学習サービスです</p>

1-1. リンクの作成

1.リンクを作成するためには<a>要素を使います。
テキストを<a>タグで囲むことで、簡単にリンクを作ることが出来ます。

2.<a>要素にリンクの飛び先を指定するには、href属性を追加する必要があります。
<a href=”url”>というように書き、url部分にリンク先のURLを指定することで、そのページへのリンクを作ることが出来ます。

・属性の書き方

HTMLでは、hrefの様な属性が数多くあります。

これらは、開始タグの中に記述します。

値を指定する際は、ダブルクォーテーションを忘れないように注意してください。

<!-- https://prog-8.comへのリンクを作成してください -->
<a href="https://prog-8.com">Progateへ</a>

<!-- https://google.comへのリンクを作成してください -->
<a href="https://google.com">Googleへ</a>

・画像を表示する

画像の表示には<img>要素を用います。

<img src=”url”>のように、src属性のurlの部分に画像のリンクを指定することで、画像が表示されます。

<img>要素はテキストを囲むことがないため、終了タグが要りません。

<!-- リンク先の画像を表示してください -->
<img src="https://prog-8.com/images/html/beginner/school.jpg">

1-2. リストを作成する

リストを作るには、<li>要素を用います。

箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで、リストを作成することが出来ます。

・要素

<li>要素は、囲む要素によって種類が変わるという特徴を持っています。

<ul>要素で囲むと、黒点が先頭に付きます。

<ol>要素で囲むと、数字が連番で付きます。

このように要素を要素で囲むことを入れ子と言います。

囲み方の要素を親要素、囲まれる要素を子要素と呼びます。

・インデント

入れ子構造の要素がある場合は、インデント(字下げ)をします。

インデントをすることで入れ子構造が複雑になっても親子関係が分かりやすくなります。

行の先端で「tab」キーを押すことで簡単にインデントをすることが出来ます。

<ul>
  <li>HTML</li>
  <li>PHP</li>
  <li>Ruby</li>
</ul>

2. CSSとは


CSSとは、HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語です。

HTMLだけでは文字と画像を羅列させるだけですが、CSSを用いることで、レイアウトを整えることができます。


CSSは、HTMLとは別のファイルに記述します。

HTMLで用意した要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定することができます。

h1 {
  /* 文字の色を#ff0000にしてください */
  color :#ff0000;
 
}

p {
  /* 文字の色を#0000ffにしてください */
  color :#0000ff;
 
}

CSSを書くときも、インデントをします。

また、CSSのプロパティの末尾にはコロン(:)、行末にはセミコロン(;)を使用します。

・文字の大きさを変える

文字の大きさを指定するにはfont-sizeプロパティを用います。

font-sizeは、pxという単位を用いて指定します。

・文字の種類を変える

font-familyプロパティを用いると、フォントの種類を指定することが出来ます。

「font-family:フォント名;」とすることで、要素にそのフォントを適用できます。

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

h1 {
  color: #ff0000;
  /* 文字の大きさを40pxにしてください */
  font-size :40px;
 
  /* 文字の種類をserifにしてください */
  font-family :serif;
 
}

p {
  color: #0000ff;
  /* 文字の大きさを20pxにしてください */
  font-size :20px;
 
  /* 文字の種類を"Lucida Grande"にしてください */
  font-family :"Lucida Grande";
 
}

・背景の色を変える

背景色を変えるにはbackground-colorプロパティを用います。色の指定方法はcolorプロパティと同様です。

「#dddddd」の様に同じ値が続く場合は、「#ddd」と省略できます。

・横幅、高さを変える

要素の横幅、高さを変更したいときには、それぞれwidthプロパティ、heightプロパティを用います。

width、height共にpxで指定します。

h1 {
  color: #e6855e;
  font-size: 30px;
  /* 背景の色を#f3f372にしてください */
  background-color :#f3f372;
 
  /* 高さを80pxにしてください */
  height:80px;
 
  /* 幅を200pxにしてください */
  width:200px;
 
}

img {
  /* 高さを50pxにしてください */
  height:50px;
 
  /* 幅を70pxにしてください */
  width:70px;
 
}

・タグに名前をつける

要素にはclassを使って名前を付けることが出来ます。

3. HTMLの全体構造


実際のHTMLファイルには、決められた型を書いていく必要があります。

<html>要素の中に<head>要素と<body>要素が必要です。

<head>要素にはページに関する情報、<body>要素には実際に表示したい内容を書きます。

・HTMLバージョンを指定する

<!DOCTYPE html>の部分はDOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するためのものです。

・<head>要素

<head>要素にはWebページの設定に関する情報を書いていきます。

<head>要素内に記述した内容はWebページには表示されません。

<!-- DOCTYPE宣言を追加してください -->
<!DOCTYPE html>

<!-- <html>要素を追加してください -->
<html>
  <head>
 </head>
 <body>
    ・さしすせそ
    ・たちつてと
    </body>
</html>

stylesheet.css
/* body要素のfont-familyを"Avenir Next"にしてください */
body{
  font-family:"Avenir Next";

}

・<head>要素の中身

<head>要素の中では、文字コードの指定、ページのタイトル設定、CSSの読み込みなどを行っていきます。

・文字コードを指定する

文字コードを指定することで、ページの文字化けを防ぐことができます。

<meta charset=”utf-8”>とすることで、そのページの文字コードをUTF-8に指定することができます。

UTF-8は、HTMLで推奨されている文字コードです。

・タイトルを付ける

<title>要素は、ページのタイトルを指定します。

<title>要素で指定されたタイトルは、ブラウザのタブ上に現れます。

・CSSの読み込み

これまでProgate上では「stylesheet.css」で記述したCSSが結果に反映されていましたが、本来はHTMLの方で読み込む必要があります。

HTMLからCSSを読み込むためには、<link rel="stylesheet">を用います。

<link rel="stylesheet" href="stylesheet.css">のように、href属性で読み込むCSSファイルを指定します。

・stylesheet.css

<!DOCTYPE html>
<html>
  <head>
    <!-- 雛形をコピーして、3つの要素を追加してください -->
    <!-- 文字コードを「utf-8」にしてください -->
    <meta charset="utf-8">
    
    <!-- タイトルを「Progate」にしてください -->
    <title>Progate</title>
    
    <!-- 「stylesheet.css」を読み込んでください -->
    <

4. 要素


レイアウトは<div>要素によって構成していきます。

<div>要素の「div」は「division」の略で、要素をグループ化するために使用されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <!-- <div>要素を追加し、「header」というclassをつけてください -->
    <div class="header">
      
    </div>
 
    
    <!-- <div>要素を追加し、「main」というclassをつけてください -->
    <div class="main">
      
    </div>
    
    <!-- <div>要素を追加し、「footer」というclassをつけてください -->
    <div class="footer">
      
    </div>
 
      
    
  </body>
</html>

・stylesheet.css

.body {
  font-family: "Avenir Next";
}

/* headerの背景色を#f7f2b4、高さを90pxにしてください */
.header {
  background-color:#f7f2b4;
  height:90px;
}

/* mainの背景色を#bdf7f1、高さを600pxにしてください */
.main{
  background-color:#bdf7f1;
  height:600px;
}

/* footerの背景色を#ceccf3、高さを270pxにしてください */
.footer{
  background-color:#ceccf3;
  height:270px;
}

・ヘッダー作成

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
 &nb