【技術書まとめ】ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座

CSSをさらに自分の中で整理するために本書籍を手を取った。


# CHAPTER 1 Webサイト基本

前書籍のおさらい的な内容


# CHPTER 2 レスポンシブWebデザインとフォント

- 背景画像
    - 1200〜3000pxくらいのもの

```css: 画面いっぱいの背景にする
section {
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;  /* 画像の中央部分を基準に伸縮させる */
}
```

```css: 複数の背景画像を使って左右に広がったデザインにする
.container {
  background-image: url(../images/bg1.png) url(../images/bg2.png);
  background-position: left top, right top;
  background-repeat: no-repeat;
}
```

- viewport
    - デバイスの表示領域
        - 指定がないとスマホでもデスクトップ表示してしまう
        - `<meta name="viewport" content="width=device-width, initial-scale=1">`
            - `width=device-width`は「デバイスの横幅に合わせて表示してください」という意味
            - `initial-scale`はページ読み込み時の拡大倍率

```css: スクロールスナップ
.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
section {
  height: 100vh;
  scroll-snap-align: start;
 }
```


# CHAPTER 03: 装飾とカラムレイアウト

```css: 2カラムレイアウト
.container {
        display: flex;
        justify-content: space-between;
}

/* メインを68%にサイドを26%にして、space-betweenにすると、6%の余白になる */
main {
    width: 68%; 
    margin-bottom: 0;
}

/* Aside */
aside {
    width: 26%;
}

```

```css: 楕円の画像
.post-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 40% 70% 50% 30%/50%;
}
```

```css: 画像に回り込むテキスト
.post-thumb {
    shape-outside: circle();
    float: left;
}
```

- 擬似要素とは
    - HTMLに記述のない要素をCSSによって作り出す
        - 選択やコピペができない
    - 現行CSS3は`::`でコロン2つ

```css: 箇条書きの丸の色変更
/* ::beforeで空要素のbackgroundをかぶせる */
ul li::before {
    content: ''; /* 空要素 */
    width: 8px;
    height: 8px;
    border-radius: 50%; /* 丸に整形する */
    background: #93d8d0; /* カラー指定 */
    display: inline-block;
    margin: 0 8px 2px 0;
}
```

```css: 丸番号付きリストの装飾
ol li {
    counter-increment: list;
    margin-bottom: 0.25rem;
    line-height: 1.25;
}
ol li::before {
    content: counter(list);
    color: #fff;
    background: #0bd;
    border-radius: 50%;
    font-size: .75rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.75;
    text-align: center;
    display: inline-block;
    margin-right: 0.25rem;
    vertical-align: top;
}

```

```css: 引用符をつける
blockquote {
    position: relative;
    padding: 1rem 3rem 1rem 3rem;-bottom: 1rem; /* 引用符分のpaddingをつける */
}
blockquote::before,
blockquote::after {
    font-size: 6rem;
    font-family: georgia, serif;
    color: #ccc;
    position: absolute; /* absoluteで場所を指定する */
    line-height: 0;
}
blockquote::before {
    content: '\201C'; /* 引用符 */
    top: 2.5rem;
    left: 0;
}
blockquote::after {
    content: '\201D';
    bottom: .5rem;
    right: 0;
}
```

```css: コンテンツが少ない場合にフッターを下に詰める方法
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
article {
    flex: 1; /* flex-grow: 1 でarticleを伸ばしてフッターを押し下げる */
}
```

```css: サイドメニューを固定する
.popular-posts {
    position: sticky;
    top: 1rem; /* top, left, right, bottom のどれか1つを指定する */
}
```


# CHAPTER 4: 表組み、フォーム、JavaScript

```css: デスクトップサイズの場合に、左右に違いちがいに並べる
.flex-reverse {
    flex-direction: row-reverse;
}
.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
```

```css: 偶数行のみ表示を変える
li:nth-chile(even) {
    background: #cleff7;
}
```

```css: モバイルサイズではテーブルを縦並びにする
/* モバイル */
th,
td {
    display: block;
}

/* デスクトップ */
@media (min-width: 600px) {
    th,
    td {
        padding: 1.25rem;
        display: table-cell;
    }
}
```

```css: 横並びにして縦ラインを描画する
.timeline-item {
    display: flex;
    margin-bottom: 0;
}
.timeline-title {
    width: 24%; /* 左右で100%となる */
    padding: 2rem 2.5rem 2rem 0;
    text-align: right;
}
.timeline-content {
    border-left: 5px solid #f8f6f2; /* 縦ライン */
    width: 76%; /* 左右で100%となる */
    padding: 1.5rem 0 1.5rem 2.5rem;
}
```

```css: チェックボックス用の四角形を作る
/* デフォルトのチェックボックスを非表示にする */
input[type='checkbox'] {
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}

/* 「+」を使ってチェックボックスのすぐ隣にある<span>タグの擬似要素を装飾する */
input[type='checkbox'] + span::before { 
    display: inline-block;
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #bbb;
    background: #fff;
    margin: -.125rem .5rem 0 0;
    vertical-align: middle;

    /* チェックマークを表示させる */
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    padding: 0 2px;
    line-height: 1.5;
}

/* チェックが入るとチェックアイコンを表示 */
input[type='checkbox']:checked + span::before {
    content: '\f00c';
}
```

```css: 属性値から要素を特定する
/* 属性値が複数あるときは「~」が必要 */
li[class~="pink"] {
    background: pink;
}

/* ハイフンで区切った前の属性値で特定する("list-a"など） */
li[class|="list"] {
    background: pink;
}

/* 指定の属性値から始まる要素を特定する(値が"http"から始まるhref */
a[href^="http"] {
    background: pink;
}

/* 指定の属性値で終わる始まる要素を特定する(.pdfなど)　*/
a[href$="pdf"] {
    background: pink;
}

/* 指定の属性値を1つ以上含む要素を特定する */
a[href*="twitter"] {
    background: pink;
}
```


# Chapter 5: 特定ページの作り方とアニメーション

```css: ヘッダーを上部に固定表示する
header {
    position: fixed;
    width: 100%;
    z-index: 1;
}
```

```css: clip-pathで整形する
/* 要素の下部を斜めに切り抜く */
#hero {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* 見出しを矢印風に切り抜く */
h2 {
    -webkit-clip-path: polygon(0 0, 470px 0, 100% 50%, 470px 100%, 0 100%);
    clip-path: polygon(0 0, 470px 0, 100% 50%, 470px 100%, 0 100%);
}

/* 要素の下部を円形に切り抜く */
div {
    -webkit-clip-path: ellipse(80% 100% at 50% 0);
    clip-path: ellipse(80% 100% at 50% 0);
}

/* ページの隅に正円の一部を表示させる */
div {
    -webkit-clip-path: circle(50% at 0 0);
    clip-path: circle(50% at 0 0);
}
```

```css: メニューをアニメーションで表示する
.main-nav {
    width: 0; /* 幅を0にして非表示にする */
    position: absolute;
    z-index: 2;
    overflow: hidden;
    transition: .5s;
}

/* ボタンクリック後 */
.main-nav.open-menu {
    width: 100%
}
```


# CHPTER 6: 動画と画像の使い方

```css: 動画を設置する

/* HTML
<video src="images/photo-movie.mp4" poster="images/hero.jpg" autoplay loop muted>
*/

header video {
    object-fit: cover;
    object-position: center top;
    opacity: var(--video-opacity);
    width: 100vw;
    height: 90vh;
}
```

```css: タイル型に並べる（メディアクエリで決まった数をレスポンシブ表示する）
.grid {
    display: grid;
    width: 94vw;
    margin: 0 auto 3vw;
    gap: 2vw;
    grid-template-columns: repeat(2, 46vw); /* 親要素(94vw)から余白(2vw)を引いた数字を2で割ったもの */
    grid-template-rows: repeat(8, 46vw); /* 縦8列とする */
}
/* 画像を正方形に切り抜く */
.grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
}

/*
DESKTOP SIZE
*/
@media (min-width: 600px) {
    .grid {
        width: 80vw;
        gap: 1vw;
        grid-template-columns: repeat(3, 26vw); /* (80 - 2) /3 */
        grid-template-rows: repeat(5, 26vw);
    }
}
```

```css: タイル型に並べる（メディアクエリなし）
.grid {
    display: grid;
    gap: 1rem;
    /* 1つ最小240px(minmax(240px, 1fr))、画面幅に合わせて要素を折り返す(auto-fit) */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}
```

```css: タイル型の一部を大きく表示する
.grid-big-top {
    grid-column: 1/3; /* グリッドラインの1〜3番目まで */
    grid-row: 2/3; /* 2〜3番目まで */
}
.grid-big-bottom {
    grid-column: 1/3;
    grid-row: 6/7;
}

/*
DESKTOP SIZE
*/
@media (min-width: 600px) {
    .grid-big-bottom {
        grid-column: 2/4;
        grid-row: 4/5;
    }
}
```

```css: フィルターで画像の色を変える・hoverで色をつける
.grid-item {
    filter: grayscale(100%);
    transition: .3s;
}
.grid-item:hover {
    filter: grayscale(0);
}
```

```css: ホバー時に拡大する
.grid-item {
    transition: .3s;
}
.grid-item:hover {
    transform: scale(1.1);
    /* 重なりの調整 */
    z-index: 3;
    position: relative;
}
```


# CHAPTER 7: HTMLやCSSを管理する

- Emmet
    - `ul.menu>li*3>a`など