１.概要
参考書のChapter４にてcssの基本的な使い方を学習。
サイトのヘッダーとフッターのレイアウトを調整した。
2.目次
- CSSを記述する場所
- CSSの基本的な書き方
- 使用したプロパティ
- ウェブフォント
- 感想
3.CSSを記述する場所
記述する場所は3つのパターンがある。
●タグのstyle属性に直接記述する
HTMLの中の要素に対して直接スタイルを指定。
<p style="color : red;">この文字の色を赤くする</p>
●style要素内に記述する
head要素内にstyle要素を作成し、その中にCSSを記述。手軽に利用できる。
ページ数の多いサイトでは管理しづらい欠点があり。
<style>
p {
color: red;
}
</style>
●外部ファイルに記述する
CSSファイルを別に用意し、link要素でHTMLファイルから参照させる。
現場ではこの方法が多い（らしい）。
・文書構造はHTML、装飾はCSSと切り分けることにより、ウェブブラウザや検索エンジンに効率よく正確な情報を伝えることができる。
・1つのCSSぶんしょを複数のHTMLファイルへリンクさせることができるため、１箇所を編集するだけで関連づけられたすべたてのHTMLファイルへ変更が反映され、ページ修正や管理が楽になる。
▼HTMLファイルの記述
<link href="./style.css" rel="stylesheet">
▼CSSファイル(style.css)の記述
p {
color: red;
}
スタイルが競合した時の優先順に注意
コードが間違っていなくて、正しく装飾されない場合は、
優先順が競合しているかもしれない
4.CSSの基本的な書き方
(1)スタイルシートの基本文法
セレクタ {プロパティ:値;}
セレクタ ： 適用する対象（どれの）
プロパティ ： スタイルの種類（何を）
値 ： 適用させたい結果（どうするか）
プロパティと値の間にコロン(:)を記述することでセットとなる。
このセットのことをスタイル宣言と言う。
セミコロン(;)は1つのセレクタに複数のスタイルを指定する際に
それぞれのスタイル宣言を区切るための記号。
今回は主に1つのセレクタに複数のスタイルを指定。
ほかに
・複数のセレクタに同じスタイルを指定
・特定の場所にあるセレクタだけに別の指定をする
ことも可能。その場合は、参考書のp.96〜97を参照。
5.CSS設計ポイント
(1).ブラウザの既定スタイルを解除
各ブラウザにはデフォルトのスタイルがそれぞれ独自に設定されている。
ブラウザによって見た目が変わったり、不要な余白ができたりと意図しない表示とならないよう、デフォルトのスタイルを最初に解除する。
■要素の幅と高さの計算方法（CSSボックスモデル）を指定
計算方法の指定はbox-sizing プロパティを使用。
初期値は「content-box」
:要素の大きさを「width＋heightの値」＋paddingの値」＋「borderの太さ」で計算
→レスポンシブデザインなどで幅や高さを「％」のような可変する単位で指定すると、計算が複雑になる。
これを解決するため、「border-box」を指定。
：要素の大きさは「width＋heightで指定した値のみ」
↓は要素の余白もなくしている
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
■他、リストの行頭アイコンを非表示、リンクの文字色と下線をなくす
ul,
ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
(2).ベースになるスタイルを指定
■ページ全体のスタイルを設定
body {
font-family: sans-serif;
font-size: 16px;
color: #000000;
line-height: 1;
background-color: #ffffff;
}
■img要素の最大幅を指定
img {
max-width: 100%;
}
(3).レイアウトの詳細を記述する
参考書のp.112〜124を参考に、レイアウトの詳細を記述。
6.ウェブフォント
Google Fontsを使用。
フォントを検索
↓
使用するスタイルを検索
↓
埋め込みコードを表示する
↓
HTMLコードをコピーして貼り付ける
↓
CSSコードをコピーして貼り付ける
7.感想
コードを書いて保存するたびに、表示が変わるのが楽しい！
今回は幅とかの値は参考書に記載の通りにしたけど、全体を見ながら今後は調整をしていくんだろうな。