はじめに
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を書いてみたので是非見てください。