お勉強

【読了】1冊ですべて身につくHTML&CSSとWebデザイン入門講座

デイトラと並行して読み始めたこちらの本。
HTMLとCSSの基礎を学びながらWebサイトを一つ作成することができてとても達成感がありました!
こんな感じのWebサイトができます!もちろんまだまだ手直しするところはたくさんありますが。。。こうして形になるとやっぱり嬉しいですね♪

また、デイトラと並行しながら取り組んでいたのですが、内容が重複しているところが多くてより理解が深まりすっと頭に入りやすかったです。

こんな方におすすめ

  • HTMLとCSSを基礎から学びたい人
  • まずは簡単なWebサイトを作ってみたい人
  • デイトラでWeb制作・Webデザインの勉強をしている人

学んだこと

CSSでの文字サイズの指定に種類があること

デイトラをやっているとpxや%の指定が主だったのですが、こちらの本で勉強していると「rem」でサイズを指定することが多かったです。
他にもemというもので指定することもあるようでそれぞれどう違うのか、どう使い分けるのかを調べてみました。
今まではとりあえずpxで指定すればいいや、と思っていたのですがそういうわけではないんですね(反省)

簡単にまとめると↓こう↓

文字サイズ指定方法の使い分け

  • 「px」指定は絶対値。他の要素に影響されない
  • 「%」・「em」・「rem」指定は相対値。「%」と「em」は親要素を基準にするが、「rem」はルート要素を基準にする。

本で頻繁に出てきた「rem」ですが、一体どういう基準でサイズが決まるの?と思っていたのですがhtmlセレクタ内で指定した文字サイズが基準になるようです。
例えば以下のように指定した場合、


html{
 font-size: 20px
}

文字サイズを『font-size: 1rem;』と指定すると20pxの1倍、『font-size: 2rem;』だと2倍の40pxとして表示されます。
remを使うことでレスポンシブが楽になったりメリットもあるようですが、ブラウザの設定でフォントサイズを変えられた場合rem指定したフォントサイズも変わってしまうのでフォントが崩れてしまう場合があるみたいです。
なので万が一そうなってもいいようにサイズが変わってほしくないところではpxを使う、といった使い分けをする必要があります。
このあたりの理解は手を動かしながら身につけていくしかないですね。

高さを指定する単位に種類があること

文字サイズと同じように高さの指定もずっと「px」か「%」指定が主だと思っていたのですが、「vh」という単位での指定があることを知りました。他にも「vw」・「vmin」・「vmax」はビューポート(ブラウザウィンドウのサイズ)を基準とした単位になり、相対値となります。

高さ・幅のサイズ指定の使い分け

  • 「vh」はブラウザウィンドウの高さの割合
  • 「vw」はブラウザウィンドウの横幅の割合
  • 「vmin」はブラウザウィンドウの横幅と高さのサイズのうち、小さい方を基準とする
  • 「vmax」はブラウザウィンドウの横幅と高さのサイズのうち、大きい方を基準とする

例えば横幅が600pxである要素を幅を50vwと指定した場合、半分の300pxとしてその要素は表示されます。
同じくvhも同じような考え方です。
vminとvmaxがまだあまりピンときていないのですが、高さと幅どちらを基準にするかを値の大きさで決める、ということ。
ただこれらの指定もデメリットがないわけではなく、ウィンドウ領域はアドレスバーを含めた領域らしいので、このアドレスバーを考慮しないとその分ずれてしまいます。
これも手を動かしながら...ですね。

Manaさんの新しいWebデザイン本が出るみたいです!早速予約しちゃいました!

-お勉強,
-, ,

© 2021 文系女子とプログラミング