CSS学び直しメモ

やってること

Udemyのコース。最近、自動翻訳で日本語がつき始めてるので講義の選択肢が増えて嬉しい。

発音聞き取りやすいし、面白い。おすすめ。

以下メモ。

アスタリスク

全体のmarginとpaddingを潰す
border-boxでpaddingとborderの幅を要素の幅と高さに含める。（※デフォルトはcontent-boxとなる）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body

主にフォントの指定を行う。

font-family
- sans-serif(サンセリフ)は英字の端々に飾り（うろこ）がない指定。可読性が高い。ゴシック体。
- Noto SansとかLatoとか有名らしい。
font-weight(太さ)
- 100,200,....,900まで。標準が400。bold等キーワード指定も可。
line-height
- 行の高さ。1.7は170%, 1.7emと同等。
padding
- コンテンツとの境界線の領域。箱の内側。

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    padding: 30px;
}

参考:google

font-family:Roboto,Arial,sans-serif;

参考:facebook

font-family:Helvetica, Arial, \"hiragino kaku gothic pro\",meiryo,\"ms pgothic\",sans-serif;

header

トップ要素。

viewport パーセンテージ指定
- vw / vh / vmin / vmax など。
- viewport自体は<meta name="viewport" content="width=device-width, initial-scale=1.0">のような指定。
- 幅をdevice-width。高さを95vh(95%)と指定。
linear-gradient
- ２つ以上の色の間でグラデーションを作る。（複数可）
- toでどの向きに、というのを指定。
background-size
- 要素の背景画像の寸法。
- contain: 画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小。
- cover: 画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
- auto: 縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
clip-path
- 画像を自由に切り抜きできる。○／△／□いろいろ。
- x軸 / y軸の組み合わせで指定していく。

MDN:background-size

.header {
    height: 95vh;
    background-image: 
        linear-gradient(
            to right bottom,
            rgba(126, 213, 111, 0.8),
            rgba(40, 180, 133, 0.8)
        ) ,
        url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;

    clip-path: polygon(0 0, 100% 0, 100% 75%,0 100%);
}

logo-box

ロゴ要素。

position
- absolute指定は基準が画面か親要素。親要素にrelativeを指定すると、親要素を基準に指定できる。（指定しないと意図しない動きになる）
- ここではheaderにrelativeをつけて、そこからの相対位置指定とする。

.logo-box {
    position: absolute;
    top: 40px;
    left: 40px;
}

テキスト関連

headerに配置するテキストボックスを用意して、各テキストそれぞれにcssを当てていく。

top + left + transformで真ん中に表示させる
- top 50% / left 50%だけだと「50％の位置から始まる」の指定で、意図したものとならない。
- transformで指定位置からズラすことで、真ん中に配置できる。
- 相対位置とすることでレスポンシブに。

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

display
- block指定することで改行できる。
letter-spacing
- 文字の間隔。
小さい文字のfont-weightを大きくすることで、全体のバランスを整えられる。

.heading-primary {
    color: #fff;
    text-transform: uppercase;
}
.heading-primary-main {
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}
.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;
}

アニメーション①　animationと@keyframes

animation
- animation-name: @keyframesで指定したアニメーションを起こす。
- animation-duration: アニメーション時間。
- animation-timing-function: ease-out → 徐々に遅く。ease-in → 徐々に早くなどいろいろ
- 上要素３つ合わせてanimation: moveInRight 1s ease-out;のような指定も可能。
- animation4つめの要素にdelayを指定可。
- animation-fill-mode
  - backwards指定により、@keyframesの0%時点から描画を開始できる。
- 最初は表示せず、あとから遅れて表示させたい要素に用いる。
opacity
- 透過度。
transformの謎のチラツキ
- なぜ起こるのかは謎らしい？親要素でbackface-visibility: hidden;とすることで防止できる。
- animation-iteration-count／animation-delayなどその他いろいろ
@keyframes
- アニメーションに名前をつける
- 0% / 50% / 100%などで開始〜終了までのアニメーションを指定できる。

.heading-primary {
    backface-visibility: hidden;
}

.heading-primary-main {
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.heading-primary-sub {
    animation: moveInRight 1s ease-out;
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translate(-100px);
    }
    80% {
        transform: translate(10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

アニメーション②　aタグボタン

疑似クラス（要素:hoge）
- link/visited両方の疑似クラスを指定することで訪問済かどうか関係なく表示
- hoverはマウスオーバー／activeはクリック状態
text-decoration
- aタグデフォルトの下線を消すために用意。
border-radius
- 角丸。100px以上は大差なし？
box-shadow
- X軸／Y軸／ぼやけ部分／色で指定する。
transition
- all→ 全ての要素に同じアニメーション設定を適用する。
inline-block
- 要素自体はinline制御なので、親要素でのtext-alignで中央寄せなどが可能。

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display:inline-block;
    border-radius: 100px;
    transition: all .2s;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.btn-white {
    background-color: #fff;
    color: #777;
}

アニメーション③　疑似要素(Pseudo-elements)

わかりにくかったのでMDN参照。

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。

擬似クラスはコロン:、疑似要素はコロンコロン::。
- 疑似クラスは昔から使えた。疑似要素はCSS3から登場。
- after疑似要素は擬似クラスでも代用可。
- 擬似クラスに対して疑似要素をつける場合はCSS3構文じゃないとNGか？
- btnクラスを持つ要素に対し、装飾用の項目を用意。
- 装飾するときは親要素と同じサイズにしたりするとわかりが良い
- position:absolute + top 0 left 0 + z-index -1で裏側に隠す

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
    transition: all .4s;
}
.btn:hover::after {
    transform: scalex(1.4) scaleY(1.6);
    opacity: 0;
}

その他基礎

imgタグのalt属性はSEO対策にも必要。
h1要素はSEO的に重要。

TANSAN

取り留めないメモ

CSS学び直し①

CSS学び直しメモ

やってること

アスタリスク

body

header

logo-box

テキスト関連

アニメーション①　animationと@keyframes

アニメーション②　aタグボタン

アニメーション③　疑似要素(Pseudo-elements)

その他基礎

CSS学び直しメモ

やってること

アスタリスク

body

header

logo-box

テキスト関連

アニメーション① animationと@keyframes

アニメーション② aタグボタン

アニメーション③ 疑似要素(Pseudo-elements)

その他基礎

アニメーション①　animationと@keyframes

アニメーション②　aタグボタン

アニメーション③　疑似要素(Pseudo-elements)