CSSの書き方色々②

スポンサーリンク

はじめに

先日の「CSSの書き方色々①」に続いて今回もいくつか基本的なCSSの書き方を紹介したいと思います。

元となる文章

今回も前回と同様、下記の文章を元にCSSを付けていきます。

<p>こんにちは</p>
<p>今日はいい天気ですね。</p>

この文章になにもCSSを加えない場合は下記のように表示されます。

こんにちは

今日はいい天気ですね。

文字を変化させるCSS一覧

※「class」の使い方やCSSの基本的な書き方は下記の前回の記事を参考にしてください。

文字を太字にする

htmlの書き方

<p class="futoji">こんにちは</p>
<p>今日はいい天気ですね。</p>

CSSの書き方

p.futoji{font-weight:bold;}

「font-weight」は文字の太さなどを変えることができます。「bold」を使うと文字が太字になります。

CSSを反映させると下記のようになります。

こんにちは

今日はいい天気ですね。

文字のサイズを変更する

htmlの書き方

<p class="size">こんにちは</p>
<p>今日はいい天気ですね。</p>

CSSの書き方

p.size{font-size:24px;}

「font-size」は文字の大きさを指定することができます。「px」や「em」「%」といった単位を使うことができますが、よく分からないうちは「px」を使うと無難です。今回は大きくするために「24px」にしましたが、小さくする時は「24」という数字を小さくしていけばOKです。

CSSを反映させると下記のようになります。

こんにちは

今日はいい天気ですね。

文字を中央揃えにする

htmlの書き方

<p class="tyuou">こんにちは</p>
<p>今日はいい天気ですね。</p>

CSSの書き方

p.tyuou{text-align:center;}

「text-align」を使うと文字の位置を指定することができます。「center」で中央揃え、「left」で左揃え、「right」で右揃えになります。

CSSを反映させると下記のようになります。

こんにちは

今日はいい天気ですね。

複数のCSSを反映させる

今度は上記で紹介した「太字にする」「文字サイズを変更する」「文字を中央揃えにする」を全て一つの文章に反映させたいと思います。先程は1つのclassに1つのCSSのみを書いていましたが、今回は1つのclassに複数のCSSを書いていきます。

「今日はいい天気ですね。」にclassをつけて実施してみましょう。

htmlの書き方

<p>こんにちは</p>
<p class="all-1">今日はいい天気ですね。</p>

CSSの書き方

p.all-1{font-weight:bold;font-size:24px;text-align:center;}

1つのclassに複数のCSSを書く時は{}の中にどんどん書き入れていくだけでOKです。これまでやった内容なので特に問題はないかと思います。

CSSを反映させると下記のようになります。

こんにちは

今日はいい天気ですね。

過去に作ったclassは何度でも使える

過去に作ったclassは何度でも使うことができます。既にCSSにはそのclassに反映される内容を登録済みなので、新たにCSSを書く必要はありません。例えば下記のようなhtmlを書いてみると…

<p class="futoji">こんにちは</p>
<p class="all-1">今日はいい天気ですね。</p>

<p class="futoji">この文章は太字です。</p>
<p class="size">この文章は24pxです。</p>
<p class="tyuou">この文章は中央揃えです。</p>

<p class="futoji">これも太字です。</p>
<p class="size">これも24pxです。</p>
<p class="tyuou">これも中央揃えです。</p>

<p class="all-1">この文章は太字・24px・中央揃えです。</p>

下記のように表示されます。

こんにちは

今日はいい天気ですね。

この文章は太字です。

この文章は24pxです。

この文章は中央揃えです。

これも太字です。

これも24pxです。

これも中央揃えです。

この文章は太字・24px・中央揃えです。

では次回

いかがでしょうか。これはまだまだ基本中の基本となるCSSですが、この書き方さえ理解しておけば後は応用していくだけなのでそれほど難しくはありません。ではまた次回の記事でお会いしましょう。

CSS

Posted by koyasu