CSS
2021年7月5日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「CSS」の書き方についてです。
CSSとは
CSSとは、Cascading Style Sheetsの略で、HTMLのそれぞれの要素のデザインやレイアウト(=スタイル)を指示する仕様の1つです。
スタイルを適用する方法は3つあります。
・CSS
・ヘッダー内に<style>タグ
・タグに直接style属性
CSSによるスタイル適用はこの3つの中では最も優先順位が低いのですが、複数のHTMLファイルに1つのCSSで同じデザインを適用できるのがメリットです。
急な仕様変更でサイト全体の共通する一部分のデザインを変えたい!という場合に、CSSを書き換えるだけですむのでだいぶ楽になります。
CSSを作成して読み込む
① テキストドキュメントを作成し、拡張子を.cssとします。
② HTMLのヘッダー(<head>と</head>の間)に以下のように記載します。
<link rel="stylesheet" href="css/style.css">
これは「css」という名前のフォルダの中にstyle.cssというCSSを作った例です。
CSSの書き方
CSSの書き方は決まっていて、
セレクタ {
プロパティ: 値;
}
のように記載します。
なぜこのような改行をするのかはよくわかりませんが、そういうお作法になっているらしいです。見やすくするため?
セレクタにはスタイルを適用するタグ名、クラス名、ID名を記載します。
プロパティには変更する項目(色、線、配置など)を記載します。
値にはどのように変更するのか(色の種類、長さ、大きさなど)を記載します。
タグ、クラス、IDを定義する
具体的な例で見ていきましょう。
h1 {
font-size: 2.5rem;
}
これは<h1>タグの文字の大きさを「2.5rem」にするよ、というものです。
remは長さの単位です。初期値では1rem=16pxなので、2.5rem=40pxになります。
remについてはまた別記事で考察します。
.font-weight-bold {
font-weight: 700 !important;
}
クラスを定義する場合、クラス名の前にピリオドを付けます。
これはfont-weight-boldというクラスの要素の文字の太さを太くするよ、というものです。
文字の太さは100刻みで100~900まであり、400が通常の太さ、700が太字になります。
絵文字の中には、太さ900に設定しないと表示できないものもあったりします。
上記のように値の後(セミコロンの前)に!importantと記載することで、その命令が法則を無視して最優先されます。
#sidemenu {
width: 20%;
}
IDを定義する場合、ID名の前にシャープを付けます。
これはsidemenuというIDの要素の幅を画面の20%にするよ、というものです。
まとめ
うーん難しい。
どのセレクタにどのプロパティを使うか、どんな値にするか、は今後の記事で個別に書いていきたいと思います。
以前、CSSを「薬情」に例えましたが、全然そんなことはなかったです。