Edited at

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


  • 今となっては、当然のごとく使用していることを、ただ手紙としてしたためるだけの記事の第九弾。

  • 久々の時間跳躍ごっこということもあり、「とうとう現実との乖離に成功したのかな」という激怒即答確実の自分への問いかけに、期待以上の速度で対応する、なんとも自己満足なたしなみ。

  • やはり執拗な性格があだとなり、これからも幻想遊びは果てしなく継続することが決まり、似合わない「上流階級得意の舞い踊り」をしてみる。

  • よし。今回は入社後、知っておけばよかったことを書こう。


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;
}

image.png

image.png


規約

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


ツール・サービス

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



  • cssreference.io

    →CSSのまとめがわかりやすく載っている。


  • CSS Ruler

    →CSSの長さ等にまつわるチートシートが載っている。


  • extractCSS

    →CSSひながた作成ツール。HTMLのコードを貼りつけるだけ。


  • CSS Shrink

    →CSS圧縮ツール。CSSのコードを貼りつけるだけ。


  • px-em

    →pxとemの変換ツール。サイズ調整に便利。


  • CSSスニペット

    →便利なCSSコードがスニペットとしてまとめられている。


<過去の私へ送る言葉>


  • flexboxやCSS Grid等、複雑なことは、初心者のうちは覚えなくてよいから、基礎からしっかり学んでいこう。

  • 基礎からの積み重ねはきっと力になるから、焦らず取り組もう。


まとめ


  • 今回は、CSSで伝えたいことということで、「レイアウトデザインと絵心は確実に比例している。」と根っから思い込んでいたころを思い出しながら、記事を書く。

  • フロントは本当に苦手で、必死に距離をとっての生活を試みたが、天才的執着性により、だましだまし取り組むことにする。

  • 「こういう記事を書けば、この執着から逃れられる」という、粉砕確実の安易発想をこしらえて、今日も逃避生活を続けよう。


参考