CSSを勉強していた時に、positionプロパティでつまずきました。。。
最初は、全くわからなくて、、、
relative?
absolute?
fixed?
「なんだこれ。。。。。？」
「それぞれにどんな意味、特徴があるんだよ。。。。」
といった感じでした。
たぶん、僕と同じようにつまづいた方もいると思います。
なので今回は、自分がCSSのpositionプロパティがわからなかった時に参考になったものを紹介したいと思います。
現在、
・CSSを勉強している
・positionプロパティにつまずいた
・CSSの勉強では動画の方が理解しやすい
このような人に参考になると思います。
ではいってみましょう。
CSSのpositionがわからなかった時に参考にした動画とサイト
まず、1番最初に紹介したいのが、YouTubeの動画です。
たにぐちまことさんという方が、解説してくれているYouTubeの動画が、もの凄くわかりやすかったので紹介します。
↓動画はこちら
HTMLやCSSの勉強をしていて、「本よりも動画の方がいい」といった方は、特にこの動画がおすすめ。
イラストを使用し、それぞれのpositionがどんな意味や動きをするのかということを丁寧に解説してくれています。
僕は、全くわからなかった時に、この動画を見て理解することができました。
動画を作られた、たにぐちまことさんは、プログラミングの本なども出版なされている方です。
YouTubeでもいろんなチュートリアル動画を作られています。
動画での解説の口調も優しいし、解説が本当に丁寧なので、まずこの動画をみるのが個人的におすすめです。
サルワカのサイト
次にオススメなのは、「サルワカ」のサイトです。
「サルワカ 」のサイトは、WEBデザインのことを解説してくれている本当にわかりやすいサイト。
CSSのpositionプロパティの解説もわかりやすいので紹介しますね。
↓記事はこちら
CSSのpositionを総まとめ！absoluteやfixedの使い方は？
理解しやすいイラストに加え、実際のコードで解説してくれているので、とてもわかりやすいです。
left、top、right、bottomを使った、動かし方もこの記事で学びました。
個人的には、たにぐちまことさんのYouTubeを見てから、「サルワカ」の記事を読むのがいいと思います。
ツイッター
最後は、ツイッターのツイート。
ちづみさんという方のツイートもわかりやすかったので貼っておきます。
✅なくそう！positionわけわからん！の壁！
— ちづみ (@098ra0209) January 22, 2019
html,css初心者泣かせ（自分も泣いた）のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N
こちらもわかりやすいので参考にしてみてください。
ちづみさんのツイッターのツイートでは、position以外のCSSの解説もあったので、それらもオススメです。
どれもイラストが本当に上手いし、わかりやすい。
最後に
以上、今回は、CSSのpositionプロパティがわからなかった時に参考にしたものを紹介しました。
自分もこのpositionプロパティを覚えてから、自分のブログのカードの見た目などを変えることができました。
現在、CSSのpositionでつまずいている方の参考になれば幸いです。
ではでは。
コメント