カテゴリー:CSS

記事本文

この記事をお勧めしたい方

今日初めてCSSを勉強する方!




今日もお疲れです!
ビギナー中里です!

本日はCSS基礎編から、CSSの書き方について記述していきます。



本記事で得られるスキル
  • CSSの基本的な書き方
  • インラインスタイルについて
  • 埋め込みスタイルについて
  • セレクタの指定方法



前準備
実際にCSSでスタイルが変わることを確認しながら進めたいですね。
簡単なhtmlファイルを用意してありますので、こちらをダウンロードして進めましょう。

CSSの書き方用サンプルhtmlファイルをダウンロード

ファイルをテキストエディタとブラウザで開いておきましょう。

CSS基礎編勉強用



それではいきます!










文字色を変えてみる
文字の色を変えてみたり、
の部分を赤色にしてみます。
以下のようにhtmlを書き換えてみましょう。


<span style="color: red;">文字の色を変えてみたり、</span>


ブラウザを更新してみてください。
文字の色を変えてみたり、
の部分が赤色に変化しています。

cssで文字色変更










文字を太くする
続いて、
文字を太くしてみます。
の部分を太字にしてみます。
以下のようにhtmlを書き換えてみましょう。


<span style="font-weight: bold;">文字を太くしてみます。</span>


ブラウザを更新すると太字に変化しています。

CSSで太字指定










中央寄せにする
さらにテキスト全体を中央寄せにしてみます。
以下のようにhtmlを書き換えてみましょう。


<p style="text-align: center;">
<span style="red">文字の色を変えてみたり、</span>



ブラウザを更新するとテキストが中央寄せになります。

CSSでセンタリング










インラインスタイル
ここまでの方法では、htmlタグに
style
という属性を付けました。
このように、htmlタグに直接書くスタイルを

インラインスタイル

と呼びます。










埋め込みスタイル
インラインスタイル以外にもスタイルを当てる方法があります。
一度、書き換えたhtmlを元に戻しましょう。


<p>
<span>文字の色を変えてみたり、</span>
<span>文字を太くしてみます。</span><br>
さらに、中央寄せにしてみます。
</p>


そして、
head
内を以下のように書き換えてみましょう。


<head>
<meta charset="UTF-8">
<title>CSSの勉強始めます</title>
<!-- ここから追加(この行は不要です) -->
<style>
p {
text-align: center;
}
span {
color: red;
font-weight: bold;
}
</style>
</head>


ブラウザを更新すると、テキストが中央揃え、1行目が全て赤色、太字になっています。

埋め込みスタイル

分解して見ていきましょう。





styleタグ
<style></style>
と書いてコードを囲みました。
これは、中に書かれたコードの通りにスタイルを当てるよ!という宣言になります。
style
タグはなるべく
head
内に書くようにしましょう。





セレクタ指定
p { style }
span { style }
というように、htmlタグ名が書かれて、波括弧の中にまたコードが書かれていますね。
これは、p(セレクタ)に対して style(スタイル)を当てるよ!という意味になります。

この通りに、
p
タグの中は中央寄せになり、
span
タグの中は赤色、太字になりました。




しかし、これでは最初に作っていたものと少し違いますね。

文字の色を変えてみたり、
の部分を赤色に、
文字を太くしてみます。
の部分を太字にしたいです。

埋め込みスタイルでももちろんこれは可能です!










セレクタの指定方法
上の方法では、
p
span
などのタグ名をセレクタとして指定していました。
htmlでは、セレクタとして指定するための属性が用意されています。

まず、html側を以下のように書き換えてみましょう。


<span class="fontred">文字の色を変えてみたり、</span>
<span class="fontbold">文字を太くしてみます。</span>


続いて
style
タグの中身を書き換えます。


span {
color: red;
font-weight: bold;
}


この記述を消して


.fontred {
color: red;
}
.fontbold {
font-weight: bold;
}


とします。
これでブラウザで確認すると期待通りにスタイルが反映されています。

セレクタでスタイル指定


このように、htmlタグに
class="val"
の形で属性を付け、スタイル側で
.val { style }
の形でスタイルを指定するのが一般的です。
スタイル側のドット(
.
)は
class
属性を指定するためのものです。



実は他の属性を付けてスタイルを指定することも出来るのですが、ほとんどは
class
属性です。
ひとまずスタイルを当てる時は
class
属性を使う!と覚えておいて良いです。

タグ名でスタイルを当てるのもなるべく避けたほうが良いです。
理由はコード上に現れる全てのタグにスタイルが当たってしまうためです。
なので、
p
タグにも
class
属性と任意の値を付けてスタイルを
書き換えておきましょう。





セレクタ指定の注意点

  • ドット(
    .
    )に続く文字が数字の場合はスタイルが当たりません。
  • class
    の値はなんでも良いのですが、一般的には半角英語の小文字が使われます。











今回はここまでとなります。
お疲れ様でした!


今回の内容だけでも、あとはスタイルで何が出来るのかを調べていくだけで
かなり豊かな表現が出来るようになります。

ただ、記述量が増えてくるとhead内のstyleとhtmlを行き来するだけでも大変ですよね。
インラインスタイルで1つ1つ書いていくのも効率的ではありません。
そこで、CSSを外部化することになります。


ということで、次回はCSSを外部化です!
ではまた!