はじめに
こんにちは、あずごんです。
先日からTypeScript+React+Viteの勉強をかねて、ポートフォリオ作成しています。
ところが、HTMLやCSSの知識に道を阻まれました。（なんてこったい）
せっかくなので、まとめた内容を雑にでも記録しようと思い、本ブログを作成しました。
おそらく後5回は似たブログを作ると思いますので、よければお付き合いください。
ポートフォリオの構成
- ナビゲーションバー（今回はここだけ）
- ヒーローセクション
- スキルセクション
- 制作物セクション
- ブログ・本セクション
- フッター
2/23日現在のキャプチャ
さて、ここからどのくらい成長できるかな...
Tags
- navタグ：ナビゲーションのまとまりを示す
- ulタグ：リストの親要素
- liタグ：リストの各項目
- a herf：リンク
CSS
/* 構成 */
p {
color:#fff
}
- p:
セレクタ
divやnavなどのJSX要素を指す - color:
プロパティ - "#fff：
値
まとめ：「どの要素の(Where)何を(What)どんな風に(how)」を示している
CSSのプロパティ
| プロパティ名 | 対象 | 値 |
|---|---|---|
| margin | 外側の余白 | 数値 |
| padding | 内側の余白 | 数値 |
| box-sizing | 要素の幅と高さに何を含めるかを決める | center-box(default), border-box(定番) |
| font-family | フォントの種類 | a, b, c(優先順位); |
| backgrand-color | 背景色 | 色 |
| color | テキスト色 | 色 |
| box-shadow | 影 | 水平, 垂直, ぼかし, 色; |
| position | 配置方法の指定 | 下にまとめる |
| top | position指定時の上端からの距離を指定 | 数値 |
| list-style-type | リストマーカーの種類を指定 | disc：⚫︎(default) circle：○ square：◼︎ decimal：1. 2. 3. none：なし |
| list-style-position | リストマーカーの位置を指定 | outside： テキストの外側(default) inside：テキストの内側 |
| list-style-image | リストマーカーを画像に指定 | url('path')：画像をマーカーに none：なし |
| display | 要素のレイアウト方法を指定 | 下にまとめる |
| gap | flexやgrid内の要素間の隙間を指定 | 下にまとめる |
| text-decoration | テキストの下線・上線などの 装飾を指定 |
線の種類, 色, 線のスタイル; |
| font-weight | テキストの太さを指定 | キーワードor数値（下にまとめる） |
| font-size | テキストのサイズを指定 | キーワードor単位（下にまとめる） |
| transition | プロパティの変化をアニメーションさせる時間と対象を指定 | 対象, 時間, 速度, 遅延; (下にまとめる) |
| positionの値 | 基準 | スペースが残るか |
|---|---|---|
| static | 通常の流れ | 残る |
| relative | 元の位置 | 残る |
| absolute | 親要素 | 残らない |
| fixed | 画面 | 残らない |
| sticky | 通常の流れ | 残る |
| displayの値 | 並び方 | 幅・高さ指定 | 主な用途 |
|---|---|---|---|
| block | 縦に積む | できる | 見出し・段落 |
| inline | 横に並ぶ | できない | テキスト内の装飾 |
| inline-block | 横に並ぶ | できる | ボタンなど |
| flex | 横・縦に並ぶ | できる | ナビバー・カード |
| grid | 格子状 | できる | 複雑なレイアウト |
| none | 非表示 | - | 要素を隠す |
| gapの値 | 効果 |
|---|---|
| px | ピクセル（固定サイズ） |
| rem |
<html> のフォントサイズ基準 |
| em | 親要素のフォントサイズ基準 |
| % | 親要素のフォントサイズに対する割合 |
| text-decorationの値 | 効果 |
|---|---|
| none | なし |
| underline | 下線 |
| overline | 上線 |
| line-through | 打ち消し線 |
| solid | 実線(default) |
| dotted | 点線 |
| dashed | 破線 |
| wavy | 波線 |
| font-weightの値 | 効果 |
|---|---|
| normal | 通常の太さ(default) |
| bold | 太字 |
| lighter | 親要素より細く |
| bolder | 親要素より太く |
| 100 | Thin |
| 200 | ExtraLight |
| 300 | Light |
| 400 | normalと同じ |
| 500 | Medium |
| 600 | SemiBold |
| 700 | boldと同じ |
| 800 | ExtraBold |
| 900 | Black |
| font-sizeの値 | 効果 |
|---|---|
| small | 小さい |
| medium | 標準(default) |
| large | 大きい |
| x-large | さらに大きい |
| xx-large | さらに大きい |
| smaller | 親要素より小さく |
| larger | 親要素より大きく |
| px | ピクセル（固定サイズ） |
| rem |
<html> のフォントサイズ基準 |
| em | 親要素のフォントサイズ基準 |
| % | 親要素のフォントサイズに対する割合 |
| vw | 画面幅に対する割合(1vw = 画面幅の1%) |
| transitionの値の構成 | 名前 | 意味 |
|---|---|---|
| 対象プロパティ | transition-property | アニメーションさせるプロパティ |
| 時間 | transition-duration | 変化にかける時間 |
| 速度曲線 | transition-timing-function | 変化の速さのパターン |
| 遅延 | transition-delay | 変化が始めるまでの待ち時間 |
- transitionの記入例
transition: color 0.2s; → colorだけ
transition: all 0.2s; →全プロパティ
transition: color 0.2s, background-color 0.3s; →複数指定
| transitionの速度曲線の種類 | 意味 |
|---|---|
| ease | ゆっくり始まり、速くなり、ゆっくりおわる(default) |
| linear | 一定速度 |
| ease-in | ゆっくり始まり、速く終わる |
| ease-out | 速く始まり、ゆっくり終わる |
| ease-in-out | ゆっくり始まり、ゆっくり終わる |
-
:hover
擬似クラスの一種
「マウスを要素の上に乗せている状態」のスタイルを指定 - 他の擬似クラス
-
:focus
入力欄がフォーカスされている時 -
:active
クリックしている瞬間 -
:visited
リンクをすでに訪問済みの場合
-
Tech Note
- herfによりリンクを添付できるが、「#〇〇」のようにするとページ内リンクとしても活用できる
- ブラウザにバックグラウンドの透過は適応されない
感想
- remやpxなどの使い分け基準がわからない
- 覚えることが多い！！！
- 次は「ヒーローセクション」の作成を目指します