今回はdisplayプロパティだよ！初心者がつまずくことの多いこのプロパティは最初の難関かもしれない、少しややこしいものなんだけど・・・
ややこしいんだ。。。だいじょうぶかなぁ。。
やる前から落ち込まないの！！大丈夫！わかりやすいサイトを紹介していくから一つ一つしっかりと確認しながら行っていくんだよ！！
わかったよ！！頑張って勉強して理解してやるーーーー
display:none
パソコンとスマホで要素を非表示にする時に使用するなど、使用頻度は高いので、しっかりと覚えておこう！
display:noneと似たもので、visibility:hiddenというものがありますので、その違いを理解使用しよう！
blockとinline、inline-blockの違いを理解しよう
基本的なことだけど、インライン要素はdisplay:inlineがブロック要素はdisplay:blockがデフォルトで設定されていることをまずは理解しておこう！
displayプロパティのblockやinline、inline-blockの特徴や考え方が図解でとてもわかりやすく説明されています！
flexboxの使用方法をマスターしよう
2021年5月現在、最新のブラウザにも対応しておりますます使用頻度は高くなってきているよ！やや複雑な仕様だけど、使いこなせればとても便利なのでしっかりとマスターしていこう！！
flexboxはそれに付随するプロパティがたくさんあり、はじめは戸惑うかも知れませんが、しっかりと身に付ければ、とても大きな武器になります！！
grid layoutの使用方法と注意点
gridも比較的新しく、まだまだ使用されているWebサイトは少ないけど、これから間違いなく使用する頻度は高くなるので、しっかりと覚えておこう！
gridは最新ブラウザには対応しているものの、IEやEdgeブラウザでは崩れてしまう、その対応方法が分かりやすく説明されています！
gridの具体的な使用方法はコチラの記事を読めば完璧！！
こちらのページで、flexやgridのチートソートを紹介しているよ！チートシートで確認しながら勉強して、理解度をUPさせよう！！
まとめ
- noneでレスポンシブに対応させよう
- block、inline、inline-blockの特徴を知り、使い分けよう
- flexboxをマスターしよう
- grid layoutをマスターしよう
コメント