【もりけん塾59日目】写経のときに調べたCSS

フロントエンドエンジニアを目指している、ねこらのん（@nekoranon256）です。

cssで調べたことをまとめていきます。

何度も調べたことがあるものもありますが、理解できていないもの、経験不足なのでまた記述していきます。

CSS①letter-spacingはpxよりemの方がおすすめ

理由は相対的な比率で指定した方が文字サイズに応じて字間を変更してくれるからだそうです。

サルワカさんのおすすめの値は0.05~0.1emのようです。

理由はこの値以外の場合スカスカになるだからだそうです。

サルワカさんの記事へ

CSS②@keyframes＋animation

アニメーション機能で使う@keyframes＋animation。

@keyframes 任意の名前 {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}

引用：【CSS3】@keyframes と animation 関連のまとめ

それぞれQiitaの内容ですが自分なりにまとめていきます。

@をつける意味

@は規則でつける必要があるもの。

animationの種類

sizeScale（横幅が拡大するアニメーション ）やfadeIn（フェードインするアニメーション）などがあるようです。

アニメーション

0%はアニメーション開始、100%はアニメーション終了を示す。

animationのプロパティ

プロパティは以下のとおりです。

01 animation-name アニメーション・ネーム アニメーションの名前
02 animation-duration アニメーション・デュレーション アニメーションが始まって終わるまでの時間を指定します。
03 animation-timing-function アニメーション・タイミング・ファンクション アニメーションの進行の度合いを指定します。
04 animation-delay アニメーション・ディレイ アニメーションが始まる時間を指定します。
05 animation-iteration-count アニメーション・イテレーション・カウント アニメーションの繰り返し回数を指定します。
06 animation-direction アニメーション・ディレクション アニメーションの再生方向を指定します。
07 animation-fill-mode アニメーション・フィル・モード アニメーションの開始前、終了後のスタイルを指定します。
08 animation-play-state アニメーション・プレイ・ステート アニメーションの再生・停止を指定します。
09 animation アニメーション 上記、8つのプロパティを一括で指定できる、ショートハンドプロパティです。

引用：【CSS3】@keyframes と animation 関連のまとめ

略できる方法が最後のanimationですが、まだ理解できていない段階では難しいので一旦ここまで。

CSS③background-imageで画像が表示されない理由

background-imageが表示されなかったので理由を探しました。

この指定をしていないか、もしくは指定ミスが多いのでこれを頭に置いてコードを書く必要があると思いました！

他にもいろいろ理由はあるようですが、自分のミスが多いものだけ記載しています。

他にも知りたい方はＴｅｃｈＡｃａｄｅｍｙさんがわかりやすい記事を書いてくれているので、よかったらそちらへどうぞ！

ＴｅｃｈＡｃａｄｅｍｙへ

CSS④font-sizeの関係性

font-sizeは100% = 1em = 1rem = 16px = 12ptのようです。

といってもよくわかりません…

絶対値と相対値がありますが、使い分けがまだわかっていませんでした。

パソコン工房さんの画像が非常にわかりやすかったのでお借りしました！

パソコン工房さんからの画像をお借りしています。画像をクリックするとパソコン工房さんのサイトへ飛びます。

remだけhtmlという親要素基準で決めている事がわかりました。

%とemは親要素から子要素、そのまた子要素へ順々に影響するようです！

この画像ありがたいー！

おわりに

やって時間がたつと忘れていたりするのでコード打って打って打ちまくれって忘れず体に叩き込めってことなのかな？と思った1日でした！

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ