前回も紹介した通り、CSSの書き方には。「インラインCSS」「内部CSS」「外部CSS」の3つの方法があります。
前回の記事【 インラインCSS 】の書き方はこちらから→超初心者み向け！CSSはどこに書くの⁈
今回は<head>内に書く【 内部CSS 】に注目し、書き方を紹介します！
内部CSSとは？
内部CSSとは、<head>内に <style>タグを作って書きます。
実践！文字の色を変える
前回の記事、HTMLで作った、「絶品カレーレシピ」を使って、文字の色を変えてみましょう！
・前回の記事「絶品カレーレシピ」HTML文書の作り方はこちら→実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！
<head>内に<style>タグを書きます
<title>タグの下に style と書くと
これですか？メニューが表示されるので、style を選択します
<style> 開始タグと、</style> 閉じタグが作成されました！このタグの間にCSSを記述します。
<style> 開始タグと、</style> 閉じタグの間にカーソルがあることを確認し、リタンキーまたは確定キーで改行すると、1行空くので、ココにCSSを書きます。
色を変えたいタグを書きます。見出しの「絶品カレーの作り方」の黒文字を青色に変えたいので、タグは <h1> タグになります。
h1 スペース { } を書きます（スペースは必ず半角）
{ }の中にカーソルがあることを確認して改行すると、一行空きます。空いた行に適用したいCSSコードを書きます
color と入力すると、どれですか？メニューが表示されるので、
color を選択します
color：；が表示されると同時に、色はどれにしますか？メニューが表示されます
blueを選びます。（お好きな色でも良いです）
内部CSSの書き方はこのようになります。
Webで確認してみると、「絶品カレーレシピ」の文字色が黒色から青色に変わりました！
複数のCSSを入れるには
次は「材料」の文字の色と文字の大きさを変えてみましょう！ひとつのタグに複数のCSSを入れるにはどのように書くのか、一緒に書いてみましょう！
材料は<p> タグになります
<style> タグの中に追加して書いていきます（ h1）に適用したCSSの下に書きます
分かりやすくするため、改行して間を空けます
p と入力すると、どれですか？メニューが表示されます
p を選択します
p の後にスペース（空間）を入れます。（半角でスペースを入れる）その後に { を入れると、 { I } のようにカーソルがカッコの間に入ります。
そのままリタンキーで改行すると1行空きます
文字の色を変えるCSSコードを書きます。色を変えるのは color なので h1 の時と同じ作業で色を変えます。
色はブラウンに変えました。次はこの <p> タグに、文字サイズを変更するためのCSSを追加する複数のCSSの書き方を紹介します。
Webで確認すると色がブラウンに変更されています。
改行して、color のすぐ下に 文字の大きさを変えるための CSSコード を追加します
f と入力すると、どれですか？メニューが表示されるので
font-size を選択します
コロンとセミコロンが表示されます
コロンとセミコロンの間に 20px と入力します
更新してWeb表示させると、「材料」の文字が茶色になり文字の大きさも少し大きくなりました！
まとめ
1 内部 CSS は <head> 内に <style> タグを作って記述します。
<タグ>と { が離れていて書き方が特殊に見えますが、こうする事で CSS が、縦にきれいに並び見やすくなっています。
次回は これで完璧！外部 CSS の作り方完全ガイド を紹介します
コメント