WEBページの作り方－CSSとは・導入準備－
皆さん、こんにちは🥵
暑い日が続き、食欲がわかない日も
あるかもしれませんが、食事と水分補給を
しっかりして、体調を整えていきましょう！
前回は、<nav>・<a>タグ、相対パスなど
今までのタグを復習しながらフッターを
完成させました。
フッターの作り方を復習をしたい方は下記より
前回の記事をぜひ見てみて下さいね！
今回は、CSSを使って前回までで作った
各ページ共通部分の『common.html』を
スタイリングする準備をしていきましょう(^^♪
この記事で学べること！
それでは、始めていきましょう(^^)/
目次
- 1.CSSとは
- 2.ドキュメントファイルに『CSS』フォルダ－を作る
- 3.『common.css』を作成する
- 4.CSSを使う宣言をする
- 5.全称セクレタ(*)でデフォルトのスタイルを解除する
- 6.本日の文法まとめ
1.CSSとは
CSSとは、Cascading Style Sheetの略で
HTMLデータのスタイルを調整する役割が
あります。
下記でHTMLだけのものとHTMLにCSSを
適用させたものを比較してみましょう！
『HTMLのみ適用』
HTMLのみでは、要素を上から下に
並べただけの構造になります。
『HTMLにCSSを適用』
HTMLにCSSを適用することで
背景を黒くしたり、文字を横に並べたりと
見栄えを整える役割があります。
2.ドキュメントファイルに『CSS』フォルダ－を作る
HTMLファイルはドキュメントファイル内に
そのまま格納しましたが、CSSファイルは
『CSS』フォルダを作成し、その中に
格納しましょう！
①『CSS』フォルダーを作成する
『common.html』のあるドキュメントフォルダー内で
右クリック→『新規作成』→『フォルダー』
→『CSS』の順で新しいフォルダーを作って
みましょう。
作ったCSSフォルダーの中に
CSSファイルを入れていく(格納)形に
なります。
3.『common.css』を作成する
画面左上の『ファイル』→『新規ファイル』
→『ファイル』→『名前をつけて保存する』
→『CSS』フォルダをクリック
→ファイル名を『common.css』→『保存』
の順でCSSファイルを作成する。
※拡張子が『.css』となることが
ポイントです！
4.CSSを使う宣言をする
HTMLを記述する際は、<!DOCTYPE html>と
DOCTYPE宣言しましたが、CSSを書く際は
下記のようにCSSを使う宣言をしましょう！
①@charsetでCSSを使う宣言をする
HTMLではDOCTYPE宣言をしてコードを書き始め
ました。
CSSでは下記のように『@charset "utf-8";』と
宣言をして、CSSを書いて行きます。
『；』の書き忘れに注意してくださいね( ﾟДﾟ)
5.全称セクレタ(*)でデフォルトのスタイルを解除する
さっそくCSSを書き始めていきたいところですが、
パソコンには予め設定されているデフォルト値
というものがあります。
デフォルト値だけの画面表示は、下記のように
なります。
デフォルト値がある状態でCSSで
スタイリングすると余白がずれたり等
スタイル調整がうまくできません。
よって、CSSでスタイリングする際は
最初にデフォルト値を解除する必要が
あります。
下記のようにして、デフォルト値を
解除しましょう。
全称セクレタ(*)以外にもデフォルト値の
解除方法はいろいろありますが、ここでは
全称セクレタ(*)でデフォルト値を解除します。
この部分は構文として覚えてしまいましょう！
｛｝内のpadding、marginなどはボックスモデル
という考え方を使って要素の位置を調節する為の
ものですが、詳細は次回以降の記事で解説して
いきます(*'ω'*)
キリがいいので、今回はこれで終わりに
しましょう(^^)/
6.本日の文法まとめ
次回はcssを使って画像サイズの調整や
背景色の指定などを行っていきましょう(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
