🤹

CSS -スタイリング,style属性,セレクタ-

2022/04/28に公開

CSSとは

CSSとはWebページのデザイン面を担当する言語。
HTMLで記述されたWebページの要素の大きさや色、配置などをスタイリングすることができる。

HTMLだけでもWebページは作成できますが、CSSを施すだけで段違いに見やすいWebページになるので、ぜひ習得していきたいですね。

スタイルは、CSSプロパティと値によって決まります。
CSSプロパティと値はコロンで区切り、スタイル宣言（簡単に言うと一つのまとまり）はセミコロンによって区切られます。

これらはHTMLと組み合わせて真価を発揮するので、理解を深めていきたいですね！

HTML要素にスタイリングしていく方法は、style属性を追加する方法と、セレクタを使って適用する方法があります。

HTML要素に直接style属性を追加していきます。実際に書いてみます。

<h1 style="color:red; font-size:12px;">タイトル</h1>

このようにタグに直接スタイルを適用する方法を、インラインと呼びます。
インラインは他の方法よりも直感的でわかりやすいという特徴があります。

タグに直接スタイルを記述するのではなく、HTML文章内から特定の要素を選択し、スタイルを適用させる方法です。
HTML要素と別の記述になります。実際に書いてみます。

 <style>
       h2{
       color:red;
       font-size:12px;
       }
 </style>

セレクタを使用したスタイルの適用はstyle属性とは違い、複数の要素を一括してスタイリングできるのが特徴です。

セレクタを使用したスタイリングは、HTMLのheadタグ内に記述するエンベッドと外部のファイルに記述するリンクがあります。
リンクもheadタグ内に、作ります。

実際に、style.cssというファイルに記述するリンクを書いてみます。

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

このコードは、外部ファイルに記述する場合テンプレのようなものです。
(./css/style.cssとはcssフォルダの中のstyle.cssファイルという意味です。
名前は自分が今VSCodeで使っている名前です。)

ぜひ覚えておきましょう！個人的にかなり便利だと思っています。

例えば、
「h3タグの子要素にclass属性、salesを付け、文字サイズを25pxに変更する」
という処理がしたい場合。

まず、HTML内でプログラムを書きます。

<h3 class="sales">売上表</h3>

次に、CSSファイル内で文字の大きさを変更します。

.sales{
    font-size:25px;
}

この時、salesの前のドットは忘れないように注意です！

また、同時に処理を行うこともできます。

.sales,.buy{
    color:#008000
}

このように、コンマで区切ってsalesとbuyの両方に処理を命令することができます。

また、おまけですが、アンダーラインを引きたい場合は

.sales{
    text-decoration:underline;
    }

となります。