新米Webクリエイターが陥りやすいコーディングあるある・5選
こんにちは、リードスペースです。
カルチャーアカデミアではhtmlとcssを教えてます。
「そういや私も昔こんなところでつまづいたなー」と初心を思い出します。
そこで新米Webクリエイターが陥りやすいコーディングあるあるをまとめてみようと思います。
全てにおいてとじ忘れる
はい。htmlが書いた通りに動かない、cssのスタイルが効かない場合はまず、自分のコードを疑いましょう。90%以上原因はこれだと思っていいと断言します。
まずテキストエディターで自分のコードをよく見てエラーをしっかり確認することが大切です。DreamweaverなどのGUIでも確認できるエディターを導入してもらえない場合でも最近は無償で使える高機能エディターもあります。積極的にSublimeTextやVisualStudio Code、Atomなどを使うことをお勧めします。
個人的にお勧めなのはプラグインなどを入れなくても最初から日本語で使えるVS Code。
Mini Mapがあれば文句無し。もしプラグインとかでも実装しされたらご一報ください。
あとはEmmetなどを使ってコーディングしてミスを減らすと良いです。
※ Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。※ Dreamweaverにも採用されてます。
Emmet
どの開始タグととじタグがセットかわからなくなる
まず、こういう人のコードは大抵インデント(字下げ)がぐちゃぐちゃです。
インデントを揃えるところからスタートしましょう。
あと、インデント(字下げ)に欠かせないのがタブ。タブにはソフトタブとハードタブというのがあります。
ハードタブ
タブ文字 \t を使ってインデントを置くこと。 メリット エディタの設定によって幅を変えられる
ソフトタブ
スペースを使ってインデントを置くこと。 メリット どの環境でも同じ幅になる デメリット スペースの数が人によってまちまちなため、見る人に違和感を与える恐れがある エディタによっては、インデント文字にどちらを使うか設定することができる。
広島オフィスではインデントする際、ソフトタブを使ってます。もしルールを破ったらオフィス内では私に怒られます。
「インデントの乱れは心の乱れ！」
あと、無駄に深い入れ子構造も自分を迷子におとしめるのでご注意ください。
どこでもかしこもクリアフィックス
クリアフィックスとは、通常float(回り込み)を解除したい場合、次の要素のcssにclear(float解除)を指定してあげないといけないのですが、まずはfloatした要素をdivなどでラップして、その要素の擬似要素(::before,::after)を利用してfloatを解除するという随分前からあるよくある手法です。
最近ではflexboxとか便利なcssがあるので、さほど頻発して使わなくても良さそうですがまだまだ便利な手法だと思います。
まずポイントになるのは、擬似要素がラップしたい要素の前後に挿入され、それぞれにclear(float解除)することがわかっていること。
これがわかってない人のコードを開発者ツールで確認すると、あっちにもこっちにも擬似要素だらけです。
使い所を理解してから使用しましょう。
要素のmarginが思うように表示されない
marginはcssの外側の余白を設定するプロパティです。
上下に置いた要素のmarginの高さがおかしいって言われることはよくあります。
[code title=”CSS”]div#a{margin-bottom: 50px;}
div#b{margin-top: 30px;}[/code]
上記のようなコードを書くとdiv#aとdiv#bの間のmarginは80pxではなく50pxになります。そうなんです。marginは相殺されるんです。
入れ子の状態でも、marginが重なれば発生します。padding（内側の余白）と上手に組み合わせましょう。
画像の下に変な隙間が空く
これも新米クリエーターあるあるです。
imgタグはもともとinlineなので普通の文字と同じ振る舞いをします。
なので、vertical-align(縦の位置)をbottom(下)にすれば解消。
まとめ
いかがでしたか？
特に新米の人絶対と言っていいほど出くわすであろう「あるある」を５つ厳選してみました。
