HTML/CSSの基本

普段見ているWebページってどうやって作るのか気になったことはないですか？
私が以前働いていたカフェで、お店のホームページを月額いくらかで作ってもらうって
ことがありました。数万円してたような…

あのとき、HTML/CSSの知識が少しでもあればな…と思います。

そんな過去の自分にむけて、現在学んだHTML/CSSの基礎をまとめてみました。

HTMLを学ぼう

Webページを構成しているプログラミング言語がHTML/CSSです。
正確にはマークアップ言語と呼ばれます。
HTMLで文字情報を書いて、CSSによってHTMLを装飾していきます。

どうやって書くのかというと、テキストエディタを使います。
色々あるようですが、私はVSCodeを使用しています。

実際に書いたのがこちらです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML/CSSの練習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>
      これは<span class="blue">見出し</span>です
    </h1>
    <p>
      1つ目の段落です
    </p>
    <p class="second-message">
      2つ目の段落です
    </p>
    <p>
      3つ目の段落です。<b>この部分は太字になります。</b>
    </p>
    <a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
  </body>
</html>

これは基本の構成です。

<!DOCTYPE HTML> →　HTMLですよという宣言

<html> →　HTML文章の始まり

<head> →　基本情報などを書くところ

<meta> →　文字コードの指定（charset←属性 ＝ ”UTF-8”←属性値）

<title> →　ブラウザのタブに表示するタイトル

</head>→　<head>の終わり

<body> →　ブラウザ上に表示させる情報

</body>→　<body>の終わり

</html> →HTML文章の終わり

となります。

これをWebサイトで表示させると

HTMLをWebで表示

まだHTMLだけなので、このように文字だけが表示されます。

基本構成であった、<html>や<body>、<h1>がタグと呼ばれるもので開始タグと終了タグ
の間に文字情報などを書いていきます。
<meta>や<link>のタグのように終了タグが無いものもあります。
そのタグに囲まれている文字などを要素といいます。

基本的なタグ種類

改行＜ｂｒ＞
段落＜ｐ＞・・・＜／ｐ＞
見出し＜ｈ１＞・・・＜／ｈ１＞　１〜６まである
太字＜ｂ＞・・・＜／ｂ＞
画像＜ｉｍｇ　ｓｒｃ＝"画像ファイル名"＞
リンク＜ａ　ｈｒｅｆ＝"ファイル名"＞・・・＜／ａ＞
箇条書き＜ｕｌ＞
　＜ｌｉ＞１番目〇〇
　＜ｌｉ＞２番目〇〇
＜／ｕｌ

ほんの一部です。
プログラミングは調べればすぐわかるので、暗記する必要はないです。
なんかあったな〜くらいでおｋなんです。

便利な機能として、コメントアウトというものがあります。
＜！ーーとーー＞で囲めば使えます。
メモや、他人が見たときに何を意図しているのかわかりやすくしたり、
一時的に消したい場合なんかに使えます

CSSを学ぼう

次はCSSです。
HTMLとは別にファイルを用意します。
ちなみに、HTMLの拡張子は「.html」でCSSは「.css」です。
書いたのがこれです。

p {
  color: red;
  font-size: 24px;
}

.second-message {
  color: green;
  font-size: 50px;
}

h1 {
  background-color:blue;
  color: white;
}

pとかh1の部分をセレクタといって、CSSの装飾をどの部分のHTMLに適用するのか
を選択するものになります。

HTMLで

<p class="second-message">
 ２つ目の段落です
</p>

class="クラス名"をつけることで、個別に選択できるようになります。

colorやfont-sizeなどをプロパティといって、セレクタで指定したHTMLの何を変えるのか
を選択します。
colorなら文字の色、font-sizeなら文字の大きさです。

プロパティの内容を決めるのが値で、コロン（：）で区切り、コロンとセミコロン（；）の
間に値を決めます。

CSSのファイルをHTMLに読み込ませるために、HTMLファイルのhead要素に
<link rel="stylesheet" href="CSSのファイル名">
を記述することでCSSのファイルが読み込まれます。

では、実際にCSSファイルを読み込ませると

web表示例

このようになります。
文字の色、大きさ、背景色などを変えることができます。
classで指定した、P要素のみ文字が大きく、緑色にすることができます。

まとめ

HTMLとCSSファイルを使って、Web上に文字を表示させたり、画像をつけたりできます。
やればやるほど、奥が深く、新しいことも増えていきます。
でも、基本をわかっていればあとは実際に書いてみて、使い慣れるだけです。

今回は、HTML/CSSの基礎の基礎の部分をまとめました。

興味があれば、Progateなんかで体験してみてください。