プログラミング

フロントエンド開発に興味があるけどCSSに自信が無い人、まずこの5つをマスターしてみてはどうでしょうか

Flexboxのプロパティ表

前回の記事にて以下のコメントを頂きました。

高橋さんはフロントエンドのディベロッパーということですが、(中略)React以外のcssなども書いたりしますか?
Flex box やcss grid などなど、、どこまでフロントエンドエンジニアになるためにカバーすれば良いのか分からず、、、お仕事で使われる技術について教えていただけると嬉しいです。

というわけで、今日の話では

  1. 今の職場で頻繁に使っていて
  2. 『これを知らないで(あるいは、あやふやなままで)今の職場に来てたらやばかったかも』と感じる技術(あるいはCSSに関する知識)

を、独断と偏見で5つ挙げることにしました。

CSSの世界ってめちゃめちゃ奥が深いですよね。これを勉強し始めた人なら誰でも一度は『これどこまで覚えればいいの?』と悩んだことがあるのではないのでしょうか。

正直な話、『フロントエンドエンジニアになるためにはどこまでをカバーすれば良いのか』という問いに対し、『これとこれとこれとこれとこれとこれと…これをカバーすればいいですよ』と、具体的に回答するのは私にも難しいです。

そこで、『とりあえず、これだけは何も見なくても思い出せるくらい完璧に覚えておいた方がいいんとちゃう』と感じるものを、個人的な経験を元に選んでみた次第です。

(ちなみに今日の話はCSSのチュートリアルではありません。何を覚えるべきか+その概略について話をしてるだけです。実際にこれらを使えるようになりたかったら…実際にコードを書いてアウトプットしましょう)

 

以下、本題。

要素の位置決め(position, float)

要素の位置決めはpositionおよびfloatプロパティを使って設定できます。位置決めは主に以下の3種類に分けて考えるとわかりやすいでしょう。

通常 (例:position: relative):

  • 要素が固定されていない
  • 要素は通常のHTMLの順に従って配置される

固定(例:position: absolute, fixed):

  • 要素が固定される
  • 周囲のテキストとinline要素には影響を及ぼさない
  • top, right, bottom, left を使ってポジションを決める
  • 親の要素を基準に固定するならabsolute(注:親がposition: relativeの場合です)、ブラウザを基準に固定するならfixed

浮動 (例:float: left, right):

  • 要素が通常の流れから離れている(=浮動している)
  • 周囲のテキストとinline要素は浮動している要素の周囲を囲むようになる

レイアウト (Float、Flexbox、CSS Grid)

レイアウトを決める際、主にFloat、Flexbox(display:flex)、CSS Grid(display:grid)の3つのどれかが使われます。

さて、CSSの世界に入ったばかりで『どれを覚えればいいの』とお悩みの方は、まずFloatの動きに慣れ、それからFlexboxを使う練習をするといいのではないかと思います。CSS Gridはその後で大丈夫です。理由は単純で、私はこれまでFloatとFlexboxを使う機会の方がずっと多かったからです(正直言うと、CSS Gridはもうほとんど覚えていません…が、仕事には何の支障もありません)。

Flexboxはプロパティが少し多いので慣れるのに時間がかかるかもしれません。そこで個人的におすすめしたいのが、ネット上でFlexboxのプロパティ一覧を見つけてそれをプリントアウトして机の近くに貼っておく(それかデスクトップの壁紙にする)ことです。私はこうして毎日Flexboxのプロパティ一覧を目に入れることで、頻繁に使う奴は割とすぐに覚えられました。

Flexboxのプロパティ表

(↑私のPCの壁紙)

CSSにおける単位(px, %, em, rem, vh, vw)

pxと%の2つだけでも要素やフォントの大きさを設定できますが、その二つに加えてem, rem, vh, vwを覚えておくと、後で大きさを変えたくなった時や画面の大きさと相対的に値を決めたいときに便利ですので、これらも覚えておくことを勧めます。

emとremについて

  • emは『親要素のfont-size』
  • remは『ルート要素(大抵は html)のfont-size』

vhとvwについて

  • vhはview height, vwはview widthのこと。つまり、vhとvwは画面の大きさと相対的な高さと幅のこと。(例:100vhは画面の100%の高さ)

pxを使っちゃダメなの?

『pxと%があれば、フォントや要素の大きさを変えられるじゃん。なんで今更そんなの覚えるの?』emとremの存在について知った時、私の頭に真っ先に浮かんだのがそれでした。emとremを覚えるべき理由は、ユーザーがフォントのデフォルトサイズをブラウザに設定している場合、pxだとユーザーの設定通りの大きさが表示されないからです(その為、フロントエンド開発者の中にはremを好んで使う人もいます)。

(注:remは便利ですが、pxは絶対に使ってはいけないというわけではありません。場合によってはpxを使わざるを得ないこともあります)

display

displayはCSSのプロパティの中でおそらく一番基本的なものだと思います…が、もし『displayの種類多すぎ』『どれがどんな働きをするのかいちいち覚えられない』と感じてるようでしたら、以下の4つに分けて考えると覚えやすいのではないかと。

block (例:display: block, display: flex):

  • 要素はブロックのように表示される(次の要素は隣ではなく下に置かれる)
  • 幅と高さを決められる
  • box-sizing: border-box;を使える

Inline (display: inline):

  • 要素は親要素の中でライン上に置かれる
  • 幅と高さを決められない
  • box-sizing: border-box;を使えない

Inline-block (display: inline-block)

  • 要素は親要素の中でライン上に置かれる
  • 幅と高さを決められる
  • box-sizing: border-box;を使える

None (display: none)

  • 要素を表示しない

 

(注:box-sizing: border-box;は、paddingとborderを幅と高さの中に含めたい時に使われます。marginは対象となっていない点に注意)

Media queries

Media queriesは画面の大きさに応じてプロパティを設定するのに使われます。

以下、media queriesとremの使用例を挙げてみます。

html { 
  font-size: 62.5%; -- 1rem = 10px

  @media (min-width: 20rem) {
    font-size: 150%;
  }

  @media (min-width: 30rem) {
    font-size: 200%;
  }
}

このような形でfont-sizeをルート要素で設定すると、全ての要素のフォントサイズをいちいち書く手間が省けます

font-size:を62.5%にする理由は、こうするとremをpxに換算したい時に楽だからです。詳しく説明すると…

  1. ブラウザのフォントサイズは一般的に16pxとなっており、62.5%という値を使うことで1rem = 10pxとなる(10 / 16 = 0.625)
  2. なので、remに10を掛けるだけでpxの値がわかる(=pxを10で割ればremがわかる)

(もしデフォルトのサイズが16pxでないことが予想されるなら、『予想されるpx数 / 16』の値を代わりに使うことになります)

 

以上、『フロントエンド開発に興味あるならちゃんと覚えておいた方がいいのでは』と個人的に感じる技術・知識でした。『なんで○○が入ってねーんだ』とか『○○よりも△△の方が大事だろ』といった意見がありましたら、是非お知らせください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください