今回は、普段コーディングしていて、覚えておきたいスキルを紹介させて頂きます！私はコーディングを始めてから6年が経ちましたが、今でもお客様のサイトをCMSを使わずに作成する機会が多くあり、その中でも初歩的なミスで手こずってしまったりすることがたまにあります。
そんなこんなでここでは初心者は覚えておいた方が良いと思われるコーディングスキルを紹介させて頂きます。
覚えておきたいコーディングスキル
・clearfixで回り込み解除
・transitionでシンプルアニメーション
コンテンツを上下中央揃えしたい
画像などのコンテンツを上下中央揃えするには様々な方法があります。
余白サイズを指定する
これについてはここで紹介する必要もありませんが、上下中央に配置したいコンテンツがテキストではなく、サイズ固定の画像の場合、上下余白サイズを固定サイズにすることで、上下中央に配置することが可能です。
positionを使って、親要素の上下中央に配置
親要素に「position:relative;」上下中央に配置したい要素に「position:absolute;」をしてすることで、コンテンツを親要素の上下中央に配置することができます。ブラウザの画面幅が変更されても常に上下中央に配置することができます。
See the Pen
gOYVXOe by matsushima (@matsushin)
on CodePen.
clearfixの指定
メニューやリストコンテンツを「float」を使って横並びにした際に、clearfixや親要素に高さが指定されていない場合、親要素の高さが0になってしまい、画面上では表示に問題が無くても、親要素の下部に余白を指定しても、うまく付かないことがあります。
このような時に「float」の解除をしてあげることで、子要素の高さが認識され、親要素の高さが0になってしまうことを回避できます。floatの解除をするには…
②clearfixを親要素のafterに指定する
特にスマホサイトなどでは、①の方法では通用しないことも多いので、clearfixの指定を身に着けることをおすすめします。clearfixは…
content:””;
display:block;
clear:both;
}
この記述を追加し、親要素のクラスに「clearfix」を追加することで、回り込みを解除することができます。なぜかというと、親要素の最後:after（子要素の下）にブロック要素のコンテンツを追加しているので、親要素の高さが認識されるということになります。（clearfix自体は、contentに空白を指定しているので、透明のコンテンツになります）
transitionでシンプルアニメーション
サイトを作っているとお客様からリンクやボタンにシンプルなアニメーションをつけて欲しいんだよね〜と言われることがるので、そんな時におすすめのアニメーションが…
実際にボタンにホバーすると分かるのですが、ゆっくり色が反転しているのが分かると思います。「transition」を使ってアニメーションをつけたのですが、パッと色が変化するよりも、少しこだわりがあった方が面白いですよね笑（色味が汚くてすみません）
まとめ
以上が、初心者におすすめのコーディングスキルに紹介でした。この他にもまだまだ覚えておいた方がいいスキルはたくさんありますが、まずは上記3つを覚えておくことをおすすめします。
