はじめに
今回はCSSについてです。
主にエビデンスとして
CSSの概要
CSS は、正式名称をCascading Style Sheetsと言いウェブページのスタイルを設定するコード。
文字を赤色にしたり、主にデザインよりなスタイルシート言語。
CSS ルールセットの構造
全体の構造をルールセット（ルール）と呼ぶ
ルールには各パーツに名前がある
それが下記である。
パーツ
- セレクタ (selector)
- ルールの先頭にあるHTML要素名
- 別の要素をスタイルするには、Selector を変更する
- 今回はPを設定している
- 宣言 (declaration)
- color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定する。
- プロパティ (property)
- 指定された HTML 要素のスタイルを設定する方法
- 今回は color は＜p＞要素のプロパティ
- プロパティ値 (property value)
- プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択
CSSで記述する上での注意点もあげます
注意点
- 各ルールセット (セレクタを除く) は中括弧 ({}) で囲む必要がある
- 各宣言内ではコロン (:) を使用してプロパティを値から分離する必要がある
- 各規則セット内でセミコロン (;) を使用し、各宣言を区切る必要がある。
他にもさまざまな種類のセレクタがある。詳しくはセレクタガイドを参照
セレクタガイド
CSSのコード
CSS読み込み
まずはHTMLファイルにCSSファイルを読み込んでもらうように紐付けパスを入力
ヘッダー情報に記載する！
※先にCSSファイルはstylesフォルダ「style.css」で格納している。
test.html
<link href="styles/style.css" rel="stylesheet" type="text/css">
ページの文字を全て色を変える
今回は赤色に変える
※＜p＞＜/p＞で囲んでいる文字は色が変わる
style.css
p {
color: red;
}
一度に複数のプロパティ値を変更する
style.css
p {
color: red;
width: 500px;
border: 1px solid black;
}
複数の要素を選択する
カンマで区切ることで一気にできる
style.css
p,li,h1 {
color: red;
}
お洒落なフォントを設定する
最初にGoogleフォントから洒落たフォントのURLをGETしてくる
手順参考
test.html
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
全体のフォントサイズと入手したフォントをHTMLに反映させる
style.css
html {
font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */
font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}
ページの色を変更する
今回は青色を設定している
style.css
html {
background-color: #00539F;
}
ボディを並べ替える
style.css
body {
width: 600px;/* bodyは常に600Pxの幅になる。*/
margin: 0 auto;/*最初の値が上下、最後の値が左右（今回は使えるスペースを均等に配置している）*/
background-color: #FF9500;/*背景色をオレンジにする*/
padding: 0 20px 20px 20px;/*値は上・右・下・左の順に設定される*/
border: 5px solid black;/*ボディの全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけ。*/
}
終わりに
CSSをいじれるようになるだけでWebページの幅が広がって楽しい