CSSのスタイルを適用するさまざまな方法について学んでいきます。
styleタグ
前回まででCSSを書く前のHTMLについてみてきました。
詳しくは『CSSを書く前のHTMLの書き方について【CSSを書いていこう】』を御覧ください。
今回は実際にCSSを書いていきましょう。
CSSの書き方には大きく分けて3つあります。
headにstyleタグで書く方法とlinkタグで別のファイルを開いてそこに書いていく方法と各タグに直接スタイルを書いていく方法です。
どれも書き方は違いますが書く内容は一緒なので一つづつ見ていきます。
まずheadに書いていくやり方ですが、CSSを書いてもそこまで長くならない場合に使うことがあります。
どうするかというとheadタグの中にstyleタグを付けてそこにCSSを書いていきます。styleタグは開始タグと終了タグが必要になります。
linkタグ
次にファイルを作ってそこにCSSを書いていく方法について見ていきましょう。
一番よく使われるCSSの書き方がこれで特段理由がなければこの方法を選んでおけば間違えないでしょう。
CSSのファイルを読み込むにはlinkタグを使ってあげます。
rel属性をstylesheetにしてhref属性でファイルの場所を指定してあげます。基本的には<link rel=”stylesheet” href=”css/styles.css”>と書いてあげればおkです。
cssファイルの作成
ここまで書いたらVS Codeの場合ファイルの場所を指定したURLをホバーするとFollow linkと出てくるのでcommand + cliickでファイルを開きます。
その時ファイルがない場合はCreate Fileをクリックすると新しいファイルを作ってくれます。
ファイル構成はindex.htmlと同じ階層にCSSというファイルがあり、その中にstyles.cssというファイルができていればおkです。
style属性
3つ目は直接要素にスタイルを書いていく方法です。
こちらも特殊な条件下でしか使わず、例えばどうしてもそのスタイルを優先したい場合などで出てきます。
どうするかというとHTMLで書いたタグにstyle属性を付けてあげるというものです。
例えばpタグにstyle属性を付けたい場合は、<p style=color:blue;>というように書いてあげることによって文書が青色になります。
こちらの指定はゆくゆく学んでいきますのでこんなやり方もあるんだという程度で知っておきましょう。
以上