9

More than 5 years have passed since last update.

【一年生の頃の私へつづる言葉⑨】CSS初心者である私に最低限覚えて欲しいこと。

Last updated at 2019-02-05Posted at 2019-02-05

今となっては、当然のごとく使用していることを、ただ手紙としてしたためるだけの記事の第九弾。
久々の時間跳躍ごっこということもあり、「とうとう現実との乖離に成功したのかな」という激怒即答確実の自分への問いかけに、期待以上の速度で対応する、なんとも自己満足なたしなみ。
やはり執拗な性格があだとなり、これからも幻想遊びは果てしなく継続することが決まり、似合わない「上流階級得意の舞い踊り」をしてみる。
よし。今回は入社後、知っておけばよかったことを書こう。

CSSについて

＜当時＞

「単位」・・・「px」「%」ぐらいしか知らないことに加えて、その意味もあまり理解することもなく、ただ使っていた。
「規約」・・・idやclass名の命名やインデント等、きちんとした記法を統一せずにただ書いていた。
「ツール・サービス」・・・自動補完や整形等のツールから、記述参考にしてほしい各種サービスまで、あまり知らなかった。

※レイアウトのズレや、コードの可読性の低さ等が起き、効率的な質の良い学習ではなかった。

＜現在＞

各要素や単位の基礎的な意味や規約をきちんと学びなおす。
→意図せぬ配置表示のズレ回避、可読性・効率性向上につながる。

単位

下記、最低限知っていてほしい種類。

「px」・・・・相対値。画面サイズが変わっても、指定したサイズは変わらない。
※「絶対値」として使用されるケースが多いが、きちんとした仕組みとして、「相対値」に分類される。
※下記の例では、bodyタグのフォントサイズは、40pxとみなす。

body {
  font-size: 40px;
}

「%」・・・・相対値。親要素によって変わる。親要素を100%とみなす。
※下記の例では、pタグのフォントサイズは、20pxとみなす。

body {
  font-size: 40px;
}

p {
  font-size: 50%;
}

「em」・・・・相対値。親要素によって変わる。親要素を1em(100%)とみなす。
※下記の例では、pタグのフォントサイズは、30pxとみなす。

body{
  font-size: 60px;
}

p{
  font-size: 0.5em;
}

「rem」・・・・相対値。ルート要素(html要素)によって変わる。ルート要素を1rem(100%)とみなす。レスポンシブ対応に便利。
※下記の例では、pタグのフォントサイズは、60pxとみなす。

html{
  font-size: 40px;
}
 
p{
  font-size: 1.5rem;
}

「vw」・・・・相対値。利用画面幅によって変わる。画面幅を100vwとみなす。
「vh」・・・・相対値。利用画面の高さによって変わる。親要素を100vhとみなす。
※下記の例では、「項目1」の画面幅は50%、画面高さは100%。「項目2」の画面幅は20%、画面高さは100%。

<body>
  <div class='item1'>項目1</div>
  <div class='item2'>項目2</div>
</body>

body {  
  margin: 0px;
}

.item1 {
  background-color: rgb(223, 168, 168);
  width: 50vw;
  height: 100vh;
}

.item2 {
  background-color: rgb(151, 226, 220);
  width: 20vw;
  height: 100vh;
}

規約

下記のガイドや記事に従って、書いてみる。

ツール・サービス

下記のツールやサービスを使用して、快適かつ効率的なコーディングをする。

cssreference.io
→CSSのまとめがわかりやすく載っている。
CSS Ruler
→CSSの長さ等にまつわるチートシートが載っている。
extractCSS
→CSSひながた作成ツール。HTMLのコードを貼りつけるだけ。
CSS Shrink
→CSS圧縮ツール。CSSのコードを貼りつけるだけ。
px-em
→pxとemの変換ツール。サイズ調整に便利。
CSSスニペット
→便利なCSSコードがスニペットとしてまとめられている。

＜過去の私へ送る言葉＞

flexboxやCSS Grid等、複雑なことは、初心者のうちは覚えなくてよいから、基礎からしっかり学んでいこう。
基礎からの積み重ねはきっと力になるから、焦らず取り組もう。

まとめ

今回は、CSSで伝えたいことということで、「レイアウトデザインと絵心は確実に比例している。」と根っから思い込んでいたころを思い出しながら、記事を書く。
フロントは本当に苦手で、必死に距離をとっての生活を試みたが、天才的執着性により、だましだまし取り組むことにする。
「こういう記事を書けば、この執着から逃れられる」という、粉砕確実の安易発想をこしらえて、今日も逃避生活を続けよう。

参考

https://www.webprofessional.jp/a-walkthrough-of-css-length-units-you-can-use-for-font-size/
→単位はこちらの記事を参考にしました。
http://photoshopvip.net/109622
→ツールはこちらの記事を参考にしました。

9

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

9