CSS

はじめてのCSS

CSSのスタイルを適用するさまざまな方法について学んでいきます。

  • styleタグ
  • linkタグ
  • cssファイルの作成
  • style属性

styleタグ

・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;>というように書いてあげることによって文書が青色になります。

・こちらの指定はゆくゆく学んでいきますのでこんなやり方もあるんだという程度で知っておきましょう。

 

-広告-

 

 






-CSS