はじめに

HTMLを触ったことない、CSSを触ったことない初心者の方へ、実際にHTMLとCSSを書いて表示されるところまでを紹介したいと思います。

HTMLとは

HTML（Hyper Text Markup Language）
ハイパーテキストを記述すためのマークアップ言語の1つ
webページを表示する為の言語
コンピュータに文書の意味（文書構造）を理解してもらうために、タグ付け（Markup：マークアップ）と言われる、<>（大なり小なり）の記号で、文書をその意味ごとに囲んで作成していきます。

CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語
CSSは、HTMLと組み合わせて使⽤
HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定する

実践

サンプルコードを書いてみよう

デスクトップにhtml-trainingというディレクトリを作成
テキストエディターを開く
下記のサンプルコードを記載しsample.htmlでhtml-trainingの中に保存

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <meta http-equiv="content-type" charset="utf-8" />
  </head>
  <body>
    <h1>タイトル</h1>
    <p>本文</p>
  </body>
</html>

サンプルコードをブラウザで表示しよう

ブラウザを開く（Chrome,Firefox,Edge等）
sample.htmlをブラウザにドラッグアンドドロップ
ブラウザで表示されていることを確認

コードを少し変えてみよう

HTMLを修正、保存
ブラウザでページを再読み込み(F5)

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <meta http-equiv="content-type" charset="utf-8" />
  </head>
  <body>
-    <h1>タイトル</h1>
+    <h1>好きな文字に変えてみよう</h1>
    <p>本文</p>
  </body>
</html>

HTMLの書き方の基本

タグではさむ

<タグ名>タグの中身</タグ名>

sample.htmlに書いたように <ほげ>や</ほげ>がたくさん使われていました。
このほげをタグと呼びます。
タグの始まりから終わりまでのカタマリを要素と呼びます。
タグの中身は、はさんでいるタグの種類によって役割が変わります。

段落・見出し

<p>段落内の文章</p>

段落で表示したい場合、pタグではさむ

<h1>見出し文</h1>

見出しで表示したい場合、h1タグではさむ
見出しタグはh1 ~ h6の6種類あり、見出しの大きさが異なる。
h1が一番大きい見出しでh6が一番小さい見出し

タグの中にタグを書く

タグの中にタグを入れる入れ子構造で書く

<html>
  <body>
    <h1>...</h1>
    <p>...</p>
  </body>
</html>

開始タグに属性を書く

<タグ名〇〇="△△">~</タグ名>

開始タグの中に情報を入れることが出来る。

<a href="リンク先のURL">~</a>

aタグはリンクを表します。
開始タグの中にリンク先のURL情報を入れている。

リンクを書いてみよう

<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <meta http-equiv="content-type" charset="utf-8" />
  </head>
  <body>
    <h1>タイトル</h1>
    <p>本文</p>
    <a href="https://www.google.com/">URL先のページへジャンプ！</a>
  </body>
</html>

URL、リンク名は何でも構いません。
URL先のページへジャンプ！というリンクが表示され、押すとhrefに書いたURLのページへ遷移します。

classとidを理解しよう

idやclassを書く = タグに管理名をつける

<タグ名 class="class名">~</タグ名>
<タグ名 id="id名">~</タグ名>

idはHTML文書内でユニークな名前を付けるようにします。

cssを読み込んでデザインを変えてみよう

構成

Desktop/HTML_sample/
├── css
│   └── sample.css
└── css_sample.html

cssを読み込んでデザインを変えてみよう

HTMLの準備

Desktop/HTML_sample/css_sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>初級CSS</title>
    <meta http-equiv="content-type" charset="utf-8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="C:\xxx\Desktop\HTML_sample\css\sample.css"
    />
  </head>
  <body>
    <div class="sample1"></div>
  </body>
</html>

cssファイルの参照パスはルートディレクトリの出発点から記述しています。（絶対パス）
xxxの部分は各自のPCで確認して、適宜修正してください。

cssを読み込んでデザインを変えてみよう

CSSの準備

下記のcssファイル作成後、css_sample.htmlをブラウザで表示し、確認してください。
赤塗りの正方形が表示されることが確認できます。

Desktop/HTML_sample/css/sample.css

.sample1 {
  background-color: red;
  width: 100px;
  height: 100px;
}

classに書いた名前は頭に.を付けます。
idに書いた名前は頭に#を付けます。

画像を貼ってみよう

構成

Desktop/HTML_sample/
├── img            ← 追加
│   └── sample.png ← 追加
├── css
│   └── sample.css
└── css_sample.html

sample.pngは何でも構いませんが、サンプルを置いておきます。

画像を貼ってみよう

imgタグを追加

Desktop/HTML_sample/css_sample.html

 <body>
   <div class="sample1"></div>
+  <img src="./img/sample.png">
 </body>

imgファイルの参照パスはカレントディレクトリを起点として記述しています。（相対パス）

おまけ(jQuery)

jQueryとは

JavaScriptをシンプルに記述できるようにするためのライブラリです。

複雑なJavaScriptを簡潔に、短く表現できるようになります。

おまけ(jQuery)

jQueryを使えるようにしてみよう

Desktop/HTML_sample/css_sample.html

 <head>
     <title>初級CSS</title>
     <meta http-equiv="content-type" charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="./css/sample.css" />
+    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 </head>

jQueryの読み込み方法には、WEB上から読み込む、ダウンロードして読み込むの2種類があり、今回はWEB上から読み込みます。

おまけ(jQuery)

jQueryの使い方の簡単な説明

jQueryの基本構文は以下です。

$(“セレクタ”).メソッド(“パラメータ”);

おまけ(jQuery)

jQueryを使ってみよう

構成

Desktop/HTML_sample/
├── js            ← 追加
│   └── sample.js ← 追加
├── img
│   └── sample.png
├── css
│   └── sample.css
└── css_sample.html

Desktop/HTML_sample/css_sample.html

 <head>
     <title>初級CSS</title>
     <meta http-equiv="content-type" charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="./css/sample.css" />
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script src="./js/sample.js"></script>
 </head>

Desktop/HTML_sample/js/sample.js

$(function () {
  $("div").text("箱の中の文字");
});

おまけ(jQuery)

jQueryは他にも

文字色を変えたり

$("div").css("color", "white");

クリックした時の処理を設定できたり

$("div").click(function () {
  alert("クリックした！");
});

色々できます。
※JavaScriptでできることを簡潔に書けます。

最後に

社内でHTML、CSSの研修を行うときの題材にも出来るかと思います。
誰でも簡単に試すことが出来るので、これを期に興味を持って頂ける方がいれば幸いです。
この記事を書きながら簡単にHTMLとCSSを書いてみたので是非見てください。
- カラオケランキングページ - GitHub Pages
- ソース - Github