PM初心者の研修記録#9【HTMLの勉強】HTMLにCSSを適応させたい

contents
  1. CSSってなに?
  2. HTMLシートにそのまま記入する方法
  3. HTMLシートとCSSシートを分ける方法

1.CSSってなに?

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページの文字の色や大きさ、背景、配置といったスタイル(見た目)を設定する言語のことです。

今までHTMLだけでサイトを作ってきましたが、CSSも使うことでスタイルをより良く見せることができます!

CSSの書き方はHTMLとは全く異なるので注意が必要です、、、。

h1{            /*どこの要素に適応させたいかを指定*/
color:red; /*コロンの前に「なにを」コロンの後に「どうしたいか」を記入する*/
}

これで、HTML内のh1の文字が赤色になるように指定されました。

CSSについて軽く説明ができたので、次はHTMLとCSSをどう適応させていくかを紹介します!

2.HTMLシートにそのまま記入する方法

HTMLにCSSを適応させる一番簡単な方法は、HTMLシートにそのままCSSを記入していく方法です!

そのやり方は、headタグ内にstyleタグを使って記述していきます!

HTML内にCSSを書く方法

このやり方はとても簡単で見やすいですが、CSSの記述がどんどん長くなっていくと見づらくなってしまうので、

CSSに記述する内容が多い場合は、HTMLとCSSのシートを分ける方法をオススメします!

3.HTMLシートとCSSシートを分ける方法

CSSに記述する内容が多い場合の書き方は、

  1. HTMLとは別のファイルでCSSコードを記入する。
  2. 記入したファイルの語尾に「.css」を付け加えて保存する。
  3. HTMLのheadタグ内に< link rel = “stylesheet” href = “CSSファイル名” >と記入し、適応させる。

このやり方で記述していくと、CSSとHTMLが分かれているのでとても見やすくなりました!

また、別のページにも同じデザインを適応させたい時にとても役立ちます。

使う場面によって自分が使いやすい方法を見つけられたらいいですね!

次回は

ボタンを押す機能の付け方の説明をしていきます!
今回CSSをリンクさせることができたので、CSSも利用してボタンの色や形のデザイン変更も行なっていきます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です