こんにちは。ドルフィンです
この記事では、HTMLのidとclassについて
そしてCSSの書き方について紹介していきたいと思います。
ただ書くだけでなく、より実践的な内容となっておりますので、ぜひ最後まで読んで頂ければと思います。
HTML入門講座 CSSの入り口 divタグの仕組みと開発者ツールの使い方
HTMLの中でdivタグというものが存在します。
divタグとは【枠組み】という意味として使われます
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
</head>
<body>
<div class=”test”>
<h1>あいさつ</h1>
<p>こんにちは！</p>
<p>こんばんは！</p>
</div>
</body>
</html>
こちらを入力して、HTMLとして保存し、ブラウザ上で開いてみてください。
結果は、このようになると思います。
特に何の変哲もないh1タグとpタグがあるだけに思えますが
ここで【開発者ツール】を使ってみます
これはブラウザによって若干異なるのですが、HTMLとCSSの確認の仕方は同じです。その違いについても後程の記事で解説させていただきます。
今回はGoogleChromeを例として使います
F12キーを押してください
このような画面が現れたかと思います。
これはHTMLやCSSのレイアウトを確認するのに、すごく便利なツールです。
各ブラウザには、この機能がデフォルトで搭載されています。
まずは簡単に設定をします。
右上にある紫色で囲んだ〇が縦に3つ並んだマークを押して頂くと、下側にメニューが現れます
このメニューの中からオレンジ色で囲んだ、テレビのようなマークを押してみてください。
開発者ツールがページ下部に固定されて表示されるようになれば、設定完了です。
Elementsという左上のタブを選んでください。（デフォルトで選択されています）
開発者ツールの中に、今まで書いてきたタグが表示されます。タグごとに選択できるので、こんにちは！と書いたpタグを選択してみましょう
pタグで囲まれた部分のデザインはこうなっている、というのが視覚的によく分かると思います。
次にdivタグを選択してみましょう。
写真のように「あいさつ、こんにちは、こんばんは」の３つが全てdivの中に入っていることが目で確認できるかと思います。
divタグは、文字や画像などを入れるためのボックスという認識をもって頂ければと思います。
HTML入門講座 CSSの入り口 idとclassの使い方
いよいよここからはCSSを書いていくことになります。
まず先ほど書いたタグに、もう1つ枠を追加してみましょう。
そして、CSSをHTML上に追加します。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>タイトル</title><style>
div{
color:#00008b;
}.test{
background:#c0c0c0;
}</style>
</head>
<body>
<div class="test">
<h1>あいさつ</h1>
<p>こんにちは！</p>
<p>こんばんは！</p>
</div><div class="test_001">
<h1>あいさつ</h1>
<p>いよいよCSSの学習がはじまりますね！</p>
</div></body>
</html>
headタグの中に書いたstyleタグがあると思います。
この中に追加されたのがCSSです。
一旦ブラウザ上で確認してみましょう。
あいさつのボックスが追加され、背景色が灰色になりました。また全体の文字が青色に変更されましたね。
CSSではこのように、色の変更をおこなったりレイアウトを変更したりすることが出来ます。
styleタグの中に追加された内容を確認してみましょう。こちらはCSSの書き方で、HTMLとはまた違った書き方がされていますね。
<style>
div{
color:#00008b;
}.test{
background:#c0c0c0;
}
</style>
divという括弧の中には、colorというCSSが追加されています。
この波括弧で囲んだ内容が、実際にデザインとして追加されることになります。
今回で言うとcolorというCSSが追加されており、colorは文字の色を変更するといった内容です。
#00008b というのはカラーコードと呼ばれるもので、このカラーコードを使って色を指定しています。今回は深い青色ですが他にも様々な色が指定できるので、詳細は別途記事でお伝えします。
この文字色の指定が、すべてのdivタグに設定されたという認識をもってもらえればと思います。
今度は.testの括弧を見てみましょう。
よく見ると分かるのですが、testの前にピリオド『.』が入っています
CSSでタグを指定するときは何もいらないんですが、クラスを指定するときは先頭に『.』を追加します。
.testにはbackgroundというCSSが追加されています
これは背景の追加という意味で、ここでは灰色のカラーコードを適用しています
背景のCSSは色だけでなく、画像の設定も可能です。ここでは、classがどういう役割をしているかをご理解頂ければと思います
CSSを追加してみよう
いまのデザインをもう一度確認してみましょう
testのクラスには背景色が設定されていますが、test_001には何も追加がされていません。
test_001にも、同様にCSSを追加してみましょう！
コメント