s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

CSSの適応方法と書き方など初歩的なこと

HTMLへCSSを適応するには

CSSを適応する方法は複数あります。はてなブログをカスタマイズすることに絞れば最終的にCSSファイルに記述していくことになります。学ぶ段階でCSSファイルを作成して用意する必要はありません。HTMLタグと同じ様にブログの編集画面からでも基本的なことは学べます。一部制限はありますが、HTMLタグに記述して実践する方が得られるものは多いのです。

CSSの適応方法は三つ

  1. CSSファイルを別途作成して指定する。
  2. HTMLファイルの<head></head>内に<style>タグでCSSを記述する。
  3. HTMLタグに属性を指定して属性値を記述する。

<head></head>内に<link>タグを記述して指定

<link rel="stylesheet" type="text/css" href="style.css" />

1つ目の別途作成したCSSファイルを指定する方法です。「style」という名前の「.css」ファイルを読み込む設定を与えます。指定するファイルは「.index」ファイルと同じフォルダ(階層)に置く必要があります。

CSSファイルを別のフォルダに入れる場合はスラッシュで階層を表す

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/sub.css" />

複数のCSSファイルを指定して別けることが可能です。はてなブログではそのような方法は出来ませんが、作成段階でカスタマイズする時にとても便利な方法です。複数あるとごちゃごちゃになってしまうので別フォルダの「css」フォルダにまとめてしまうのです。その場合は「スラッシュ(/)」で区切ることで「階層」を表すことが可能です。

<head>タグ内に<style>タグを記述して書き込む

<style>
    body{
      color:black
    }
</style>

<style>タグ内にCSSを記述していく方法です。昔はCSSコードを<head>内に記述した方が表示速度も上がるというメリットがあったはずですが、現在はどのサーバーも高速化されていますのでその差がどれほどあるのかは疑問です。現在では主に別途ファイルにまとめるほどでもないようなCSSコードや<script>タグで生成された短いHTMLタグの個別設定などを記述したりします。

CSSをHTMLタグに直接記述する

<p style="color:red">あか</p>

前回出てきましたね。しばらくはこの方法でCSSを学ぼうと考えておりますので書き方を確実に覚えてください。

適応する方法はどれが一番いい?

どの方法も状況により一長一短です。CSSファイルを指定してからカスタマイズを始めるとHTMLファイルとCSSファイルを行ったり来たりすることになります。ブラウザで確認する場合は両ファイルとも保存しなければならないので煩わしいですね。<head>タグ内に書き込めばHTMLソースが無駄に長くなります。タグに直接指定する方法だとブログ編集画面からでは<body>タグにCSSを適応することは出来ませんね。どれも適切に使い分けていく必要があります。

CSSの書き方(基本文法)

<開始タグ style="プロパティ:値"></終了タグ>

プロパティと値は「コロン」で区切りましょう。このプロパティと値は常にセットで書きます。

CSSファイルや<head>タグ内に書く

セレクタ{
       プロパティ:値
}

「セレクタ」とは「どのHTMLタグに適応するか」を指定できます。「プロパティ」は指定された部分の「変更点」を指定します。変更点の「変化」は「値」で決めます。プロパティと値は「波括弧({})」で囲みましょう。

コードの整形

セレクタ{プロパティ:値}

このような書き方でも良いですが見辛くなります。そのため「改行」や「半角スペース」もしくは「Tab」で整形をするのが一般的です。その際は「全角スペース」を使用してしまわないよう気をつけてください。

セレクタに「属性値」を指定する

#id{
       プロパティ:値
}

.class{
       プロパティ:値
}

タグだけではなく「管理名」もセレクタに指定することができます。

複数のプロパティを割り当てる

<p style="color:red;font-size:20px">文字の色を赤にして大きさを20pxにする</p>
p{
     color:red;
     font-size:20px
}

「セミコロン」で区切ることで複数のプロパティと値を指定できます。いくつでも指定することが可能で、順番も関係ありません。ただ自分の中で「色が先で文字の大きさはその後」といったようなルールを設けなければどんどん見辛いコードになっていきますので注意が必要です。

セレクタを複数指定する

html,body{
           color:red
}

「カンマ」でセレクタを区切ることで適応先を複数指定することができます。プロパティや値と同様に並べる順番や数は関係ありません。

適応先を絞り込み指定する「子孫セレクタ」
.text p span{
           color:red
}

「半角スペース」で区切ることでセレクタを絞り込むことができます。

<div class="text">
<p>
<span>ここだけを赤色に変更</span>
</p>
</div>

まとめ

CSSを身に着けるにはまず書き方をしっかり覚えて、プロパティと値を実際に使ってみないと覚えられません。最初から全て覚える必要はありません。まずはHTMLタグにCSSを適応する方法だけでも確実に身に付けてください。