CSS - MDN - Mozillaで学んだことをまとめます。
目次
- CSSとは
- CSSのコードの書き方
今回の学習のゴール
- CSSとは何か、何ができるかを知る
- 実際の使い方について知る
1. CSSとは
- Cascading Style Sheetsの略
- HTMLなどで記述された文書の体裁や見栄えを表現するために使用する
- 要素がどのように表現されるのかを定義するもの
- 「セレクタ」「プロパティ」「値」の3つで構成される
- どの要素（セレクタ）の、何を（プロパティ）、どのように（値）するか宣言する
2. CSSのコードの書き方
CSSをHTMLにリンクさせる
- HTMLファイルの
<head>タグの中に以下を記載- rel属性は現在の文書からみたリンク先となるファイルとの関係性を指定
- href属性にはスタイルシートのある場所を指定
html
<link rel="stylesheet" href="styles.css">
要素を指定しCSSを適用させる
css
li {
list-style-type: none; /* リストの先頭に表示するマーカー文字の種類を指定 */
}
/* 複数指定 */
p, li {
color: green;
}
クラスを指定しCSSを適用させる
css
.special {
color: red;
font-weight: bold;
}
/* ある要素の特定のクラスにCSSを適用させる */
li.special {
color: red;
font-weight: bold;
}
ある要素の中にある特定の要素にCSSを適用させる
- ２つの異なるセレクタのあいだにスペースを設けて設置
css
li em {
color: red;
}
状態に基づいてCSSを適用させる（擬似クラス）
css
a:hover { /* `<a>`タグの要素のホバーしたとき */
text-decoration: none;
}
a:link { /* まだ訪問されていない要素 */
color: red;
}
a:visited { /* ユーザーがすでに訪問したリンク */
color: blue;
}
主要なプロパティ
| プロパティ | 説明 |
|---|---|
| font-family | フォントファミリ名や総称ファミリ名の優先順位リストを指定 |
| font-style | フォントが通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定 |
| font-weight | フォントの太さを指定 |
| border | 要素の境界を設定 境界線の幅、種類、色を指定できる |
| font-size | フォントサイズを定義 |
| text-decoration | 下線、上線、取り消し線、点滅などのテキストの装飾を指定 |
| text-transform | テキストにおける英数字の大文字、小文字の表示を指定 |
値について
- サイズを絶対値で指定する
| 単位 | 説明 |
|---|---|
| in | Inches / 1in = 2.54cm = 96px |
| px | Inches / 1px = 96の1in |
- サイズを相対値で指定する
| 単位 | 説明 |
|---|---|
| % | 親要素基準で親要素サイズの~~%と指定できる |
| em | 親要素基準で%と同じ考え方 50%は0.5em, 100%は1emとなる |
| rem | ルート(html)要素に対する割合のサイズ |
ボックスモデル
- すべての要素はボックスと呼ばれる四角形の領域を生成
- content area : テキストや画像などが表示される領域
- padding : 内容領域とborderの間にある余白
- border : paddingの外側にある領域
- margin : boxの最も外側にある余白
.content {
margin: 10px 30px;
padding: 15px;
border: 5px solid red;
}
レイアウト
- displayプロパティ
- ブロック要素をインライン要素に、インライン要素をブロック要素にするなど、要素の状態を変更できる
- ブロック要素
- 見出しや段落、表など、文書を構成する基本となる要素で、一つのブロック（塊）として認識される
- 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
- 横幅や高さ、余白を指定できる
- インライン要素
- 主にブロック要素の内容として用いられる要素で、文章の一部として扱われる
- 要素の前後に改行が入らず、インライン要素同士横に並ぶ
- 横幅や高さ、上下の余白を指定できない
- インラインブロック要素
- インライン要素のように改行がつかず横並びになる
- ブロックレベル要素のように幅や高さ、余白を指定できる
.display_example1{
display: block; /* ブロック要素として表示される */
}
.display_example2{
display: inline; /* インライン要素として表示される */
}
.display_example3{
display: inline-block; /* インラインブロック要素として表示される */
}
- floatプロパティ
- 指定した要素に他の要素を回り込ませる位置を指定する
.float_example1{ {
float: left; /* 指定した要素を左寄せにし、その後に続く要素は右側に回り込む */
}
.float_example2{ {
float: right; /* 指定した要素を右寄せにし、その後に続く要素は左側に回り込む */
}
.float_example3{ {
float: none; /* 回り込みを指定しない */
}
レスポンシブデザイン
- 画面サイズに応じて最適なデザインを表示すること
- cssでメディアクエリを設定する
- ブレイクポイントと呼ばれる分岐点（ex. max-width, min-width）を指定することで、その条件ごとにファイルが読み込まれる
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む スマートフォンサイズ(480px)程度の画面の大きさ */
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む タブレット縦置きサイズ(768px)程度の画面の大きさ */
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む タブレット横置き(1024px)程度の大きさ */
}