Webエンジニア学習日記 CSS編 #01 「CSSの書き方の基本」

2023年4月25日

CSS プログラミング 学習

eyecatch HTMLが理解できたら、次はCSSを学習しましょう。 この2つはセットで使うため、HTML+CSSでホームページの構成を作り込んでいくため、必ず必要な学習です。

簡単な理解

HTMLは、DOM構造を構築する役割で、CSSは、デザインや動きのアニメーション、HTMLタグの属性などをセットします。 HTMLのタグの装飾を行うCSSは、ホームページ作りには必須の技術でもあります。
CSS ・Cascading Style Sheetsの略。 ・インターネットブラウザで表示されるHTMLタグのスタイルを設定することができる。 ・設定方法は、LINKタグと、STYLEタグと、HTMLタグに直接style属性で記述する、3パターンある。

基本CSS設定

1. 文字の色を赤色にする

文章の中の文字の色を赤色に変更します。 文章の中の文字の色を<span style='color:red;'>赤色に変更</span>します。

2. 文字を太字にする

文章内の特定の単語を強調したい場合は、太字にするといいです。 文章内の特定の単語を強調したい場合は、<span style='font-weight:bold;'>太字</span>にするといいです。

3. 文字を斜体にする

人名や品物などで、外国語のモノは、少し斜めに表示される、"斜体表示"にすると、カッコよく見えます。 人名や品物などで、外国語のモノは、少し斜めに表示される、<span style='font-style:italic;'>"斜体表示"</span>にすると、カッコよく見えます。

4. HTMLタグに枠線をつける

DIVタグに黒い1px(ピクセル)の枠線を書きます。
<div style='border:1px solid black;'>DIVタグに黒い1px(ピクセル)の枠線を書きます。</div>

5. HTMLタグの背景色をつける

DIVタグに青色の背景色を書きます。(文字色を白にする)
<div style='background-color:blue;color:white'>DIVタグに青色の背景色を書きます。</div>

6. 文字のサイズを大きくする

特定の文字サイズを、30px(ピクセル)に変更します。 特定の文字サイズを、<span style='font-size:30px;'>30px(ピクセル)</span>に変更します。

3パターンの記述方法

上記のサンプル文章を、書いたHTMLは、3つの方法でスタイルシートを設定することができるので、そのやり方をパターン別に解説します。 ※3つは、それぞれ設定方法は違いますが、設定後は同じ表示になります。 <p class='text-1'>文章の中の文字の色を<span>赤色に変更</span>します。</p> <p class='text-2'>文章内の特定の単語を強調したい場合は、<span>太字</span>にするといいです。</p> <p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span>"斜体表示"</span>にすると、カッコよく見えます。</p> <p class='text-4'>DIVタグに黒い1px(ピクセル)の枠線を書きます。</p> <p class='text-5'>DIVタグに青色の背景色を書きます。(文字色を白にする)</p> <p class='text-6'>特定の文字サイズを、<span>30px(ピクセル)</span>に変更します。</p>

1. LINKタグで設置

style.cssファイルを作り、次のコードを記述します。 .text-1 span{ color:red; } .text-2 span{ font-weight:bold; } .text-3 span{ font-style:iralic; } .text-4{ border:1px solid black; } .text-5{ background-color:blue; color:white; } .text-6 span{ font-size:30px; } 次に、HTMLにLINKタグを設置します。 <link rel='stylesheet' href='style.css'/> <p class='text-1'>文章の中の文字の色を<span>赤色に変更</span>します。</p> <p class='text-2'>文章内の特定の単語を強調したい場合は、<span>太字</span>にするといいです。</p> <p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span>"斜体表示"</span>にすると、カッコよく見えます。</p> <p class='text-4'>DIVタグに黒い1px(ピクセル)の枠線を書きます。</p> <p class='text-5'>DIVタグに青色の背景色を書きます。(文字色を白にする)</p> <p class='text-6'>特定の文字サイズを、<span>30px(ピクセル)</span>に変更します。</p>

2. STYLEタグで設置

<style> .text-1 span{ color:red; } .text-2 span{ font-weight:bold; } .text-3 span{ font-style:iralic; } .text-4{ border:1px solid black; } .text-5{ background-color:blue; color:white; } .text-6 span{ font-size:30px; } </style> <p class='text-1'>文章の中の文字の色を<span>赤色に変更</span>します。</p> <p class='text-2'>文章内の特定の単語を強調したい場合は、<span>太字</span>にするといいです。</p> <p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span>"斜体表示"</span>にすると、カッコよく見えます。</p> <p class='text-4'>DIVタグに黒い1px(ピクセル)の枠線を書きます。</p> <p class='text-5'>DIVタグに青色の背景色を書きます。(文字色を白にする)</p> <p class='text-6'>特定の文字サイズを、<span>30px(ピクセル)</span>に変更します。</p>

3. HTMLタグに直接設置

<p class='text-1'>文章の中の文字の色を<span style='color:red;'>赤色に変更</span>します。</p> <p class='text-2'>文章内の特定の単語を強調したい場合は、<span style='font-weight:bold;'>太字</span>にするといいです。</p> <p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span style='font-style:italic;'>"斜体表示"</span>にすると、カッコよく見えます。</p> <p class='text-4' style='border:1px solid black;'>DIVタグに黒い1px(ピクセル)の枠線を書きます。</p> <p class='text-5' style='background-color:blue;color:white;'>DIVタグに青色の背景色を書きます。(文字色を白にする)</p> <p class='text-6'>特定の文字サイズを、<span style='font-size:30px;'>30px(ピクセル)</span>に変更します。</p>

ポイント

ポイント1. HTMLとCSSの関係性

サンプルHTMLを見てもらうと分かると思いますが、書かれた文章のスタイルシートを設置したい部分は、タグで囲って置かなければいけません。 こうしたDOM構造を構築するためには、CSSを理解しておかなければ、HTMLタグを設置することができません。 慣れてくると、完成後をイメージしながら、どういうDOM構造にすればいいかが分かってくるようになります。

ポイント2. CSSはどのパターンで書けば良いのか?

3パターンの書き方は、それぞれどのパターンで書くのが正解というわけではなく、HTMLの作り方で、ケースバイケースで使い分けます。 ですが、できるだけ1番のように、CSSを別ファイルにしたほうが管理しやすいと言われています。

ポイント3. CSSの命令について

今回のンプルでは、文章の文字色や、スタイル、サイズ、HTMLタグに線を引く、背景色をつける方法などを紹介しましたが、CSSの命令は本当にたくさん存在します。 リファレンスサイトなどで、順番に覚えていくのも悪くないですが、 いろいろな他のホームページを見た時に、そのページで表示されている見た目を、自分でCSSでコーディングできるようにしてみる「模写」というやり方が、非常にいい訓練になります。

ポイント4. どのタグにもスタイルは適用できる

サンプルコードを見てみると、PタグやSPANタグやDIVタグなどに、スタイルを適用させていますが、実はCSSでタグの種類を変更することも可能です。 HTMLタグは、重要な意味を持っている場合もありますが、装飾のみで考えると、CSSでいかようにでも変更できてしまいます。 どういう書き方がより効率的かということは、今後たくさんCSSをコーディングしていくことで分かってくると思いますよ。

これからスタイルシート(CSS)を学習していく人への一言

スタイルシート(CSS)は、ホームページのデザインを司る非常に重要な要素です。 簡単な色やサイズなどに設定はできても、アニメーションなどの設定はよくわからないというコーダーさんもたくさんいます。 通常ではやらないような設定を使って裏技のようにホームページデザインを構築して、見る人を圧倒するようなクリエーターもいるので、非常に奥が深い言語でもあると思います。 難しいと感じるか、楽しいと感じるかは、ひとそれぞれですが、きっと楽しんだ人が学習の進み方も大きく飛躍できる事でしょう。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。