自己紹介
はじめましての人は初めまして。お久しぶりの方はお久しぶりです。
...あれこれ昨日もやった？
タグを紹介していこう
この記事を書いてるときはあまりにも眠すぎて早く寝たい精神で書いているので、ただただタグを羅列しておきます。
「こんなタグがあるんだな～」って覚えておけば将来役に立ちます...たぶん。
タグの中にはちょっとした種類分けがあります。
今回は私の勝手な区分で「区分けをするタグ」「本文じゃないタグ」「コンテンツタグ」「インラインタグ」に分けさせて頂きます。
区分けをするタグ
<html></html>
これは、この中の内容がHTMLだよ！っていうことを示すタグです。
確かにいらないといえばいらないのですが、これは暗黙の了解としてちゃんと書いておきましょう。
<html>
ここがHTMLだよ
</html>
<head></head>
これは、この中の内容は本文というよりかはそのページの情報だったりとかが書いてあるところであると示すタグです。
「本文じゃないタグ」の多くはこのheadの中に書きます。
そして、この<head></head>は<html></html>の中に書きます。
<html>
<head>
...
</head>
</html>
<body></body>
これは、この中の内容は本文だよ！っていうことを示すタグです。
そして、この<body></body>は<html></html>の中、更に言うと<head></head>の下に書きます。
<html>
<head>
...
</head>
<body>
ここは本文だよ！
</body>
</html>
本文じゃないタグ
<!-- コメント -->
何かと便利なので先に紹介しておきます。
<!--と-->で囲まれた部分はコメントとして扱われます。
ここに書いた内容は本文に一切影響を与えないので、メモのために使ったりします。
<html>
<head>
...
</head>
<body>
<!-- これは表示されないよ... -->
これは表示されるよ！
</body>
</html>
<title></title>
この中に書いた内容は、ブラウザのタブに表示されます。
<head></head>の中に書きます。
まぁ試しにやってみましょう。
<html>
<head>
<title>タイトル</title>
</head>
<body>
こんにちは！
</body>
</html>
このように、ブラウザのタブとかで表示されるタイトルを制御できます。
<meta>
この中に書いた内容は、ブラウザに対して「こういう設定で表示してね」という指示を出すことができます。
<head></head>の中に書きます。
色々なことを書くことが出来るのですが、もしあなたがUTF-8で生きている人間なら、以下のように書いておくと良いでしょう。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
こんにちは！
</body>
</html>
このように<meta charset="UTF-8">と書いておくと、ブラウザに対して「UTF-8で表示してね」という指示を出すことができます。
本文に日本語を書いてブラウザで表示してみたらなんか文字化けしてる！？ってときは、このタグを書いておくと良いでしょう。
<link>
この中に書いた内容は、外部のファイルを読み込むことができます。
ですが外部のファイルといわれてもなんのこっちゃさっぱりですよね。
と、ここで出てくる新技術のCSSというものがあります。
CSSというのは、HTMLをより装飾したりするために使います。
例えば文字に色を付けたりサイズを調整したりもうなんでもできちゃいます。
で、このCSSを書いたファイルを読み込むときにはこの<link>を使います。
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
こんにちは！
</body>
</html>
とやると、style.cssというファイルを読み込んで、中のCSSを適用してくれます。
<style></style>
さっき言ったCSSを別のファイルではなく同じファイルに書くときはこのタグを使います。
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
こんにちは！
</body>
</html>
こんな感じに書くことで、文字の色を赤に変えることができます。
で、このCSSもまた難しい技術です。
完璧に理解できればまぁそれはそれはかっこいいホームページを作ることができます。
たーだ...これは少し難しいので、今回はあまり深くは触れません。
後で少しだけ紹介しますが、基本はググった方が早いです。
<script></script>
この中に書いた内容は、JavaScriptというものを実行することができます。
<head></head>の中に書きます。
はい、出ましたまた知らない単語。
JavaScriptというのは、ブラウザ上で動くプログラミング言語みたいな認識で大丈夫です。
画面に動きを付けたり、ボタンを押したらなんか動作をしたり、他のページに飛んだりとかができます。
で、このJavaScriptを書いたファイルを読み込むときにはこの<script>を使います。
<html>
<head>
<script src="script.js"></script>
</head>
<body>
こんにちは！
</body>
</html>
こうすると、script.jsというファイルを読み込んで、中のJavaScriptを実行してくれます。
もしくは、外部ファイルを使わずに同じファイルに書くときはsrcというものを書かずにこう書くこともできます。
<html>
<head>
<script>
console.log("こんにちは！");
</script>
</head>
<body>
こんにちは！
</body>
</html>
このconsole.log("こんにちは！");というのがJavaScriptのコードです。
で、これもちょっとHTMLからはそれてしまうので、今回はあまり深くは触れません。
そんなものがあるんだなぁということで以下省略。
コンテンツタグ
前回の記事で紹介した<p></p>のような、そのタグで囲われたところが一つの段落となるようなタグのことをここではコンテンツタグと呼びます。
<h1></h1>～<h6></h6>
これは、見出しを書くときに使います。
雑に言えば文字サイズを大きくできちゃいます。
<html>
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
</body>
</html>
でも、「大きい文字を使いたい！」って理由だけでこれを乱用するのはあんまりよくないので、ちゃんと見出しを使いたいときにだけ使いましょう～
<p></p>
これは、段落を書くときに使います。
<p></p>で囲まれた部分は一つの段落として扱われます。
一応前回の記事で紹介したので省略します。
<div></div>
これは、<p></p>と同じく、段落を書くときに使います。
私個人的には<p></p>よりこっちの方が好きで、<p></p>とは違って<div></div>は段落ごとの間隔がなくなります。
<html>
<body>
<div>div段落1</div>
<div>div段落2</div>
<div>div段落3</div>
</body>
</html>
こっちはdiv
こっちはp
なんとなーく違いがわかると思います。
インラインタグ
コンテンツの中で「この一部分に対して何かしたい！」みたいなときに使うタグです
<a></a>
これは、リンクを作るときに使います。
<a></a>で囲まれた部分はリンクとして扱われます。
<html>
<body>
<a href="https://qiita.com/">Qiita</a>
</body>
</html>
Qiitaという文字をクリックするとQiitaへ飛びます。
とっても簡単ですね～
<img>
これは、画像を表示するときに使います。
ただいい画像がないので今回は省略します。
<span></span>
これは、文字の一部分に対して何かしたいとき(属性を付けたり、色を変えたり)に使います。
と、属性について話しますね。
といってもCSSに関連するid、class、styleの3つだけです。
id
その要素にIDを付けることができます。
IDは一つの要素に対して一つしか付けることができません。
class
その要素にクラスを付けることができます。
クラスは、先にCSSで定義しておいて、そのクラスを適応させるようなイメージです。
style
その要素に直接CSSを適応させることができます。
color: red;とかって書くってことです。
<html>
<body>
<span id="id">id</span>
<span class="class">class</span>
<span style="color: red;">style</span>
<style>
#id {
color: blue;
}
.class {
color: green;
}
</style>
</body>
</html>
あとはこれをもとにフィーリングで頑張ってください。
まとめ
というわけで、今回はタグの紹介でした。
はい、基礎はこれでいけましたね。
じゃあ次回は...実際にホームページのコードを載せて解説でもしていきましょうか。