CSSを記述する場所(初心者必見)

投稿者: | 2020年10月14日
CSS

今回は初心者向けにCSSの記述する場所について解説していきたいと思います。

CSSの記述する場所は主に3つの書き方があります。

1、head内に記述

2、body内に記述

3、外部スタイルシートに記述

 

それでは早速、はじめていきましょう(*゚▽゚)ノ

 

head内の記述方法

h1要素のフォントサイズを変更する場合

(例)

style-head内

 

 

body内の記述方法(styleとspan)

●style属性

タグの中にstyle属性と値を記述

(例)

body内style属性

 

●spanタグ

部分的にスタイルを変更したい時

特徴としてはインライン要素(横方向)なので下記のように部分的に1行で使用したい場合に使用します。

(例)

span

 

 

外部スタイルシート

●外部スタイルシートの作成

外部シートを作成する場合は拡張子をcssに変更して保存します。

 

作成保存ができたら下記の1文を先頭に追加します。

 

これで外部スタイルシートの出来上がりです。

 

●HTMLのheadタグ内の編集

headタグ内にsample.cssを読み込めるように下記1文を追加します。

href属性の値にダブルクオーテーションで囲ってあてげからパスを記述してあげることで外部cssのsample.cssが読み込めるようになります。

 

(例)

外部CSS

 

 

まとめ

CSSの使い方を3つご紹介しましたが、最も使われてるのが外部CSSだと思います。

実際私も外部CSSを使用する機会が多いと思います。

ですのでまずは外部CSSから覚えていき、外部CSS以外の記述もサイトでよく見かけるので、この機会に3パターンの記述方法をすこしづつマスターしていきましょう(^-^)