ブログ

新米Webクリエイターが陥りやすいコーディングあるある・5選

blog_gif-01

こんにちは、かみーゆです。
昨日はカープが優勝するんじゃないかと思って仕事帰りにカープ酎ハイを購入してテレビの前にスタンバッてましたが今一歩な夜でした。 とはいえ、「マジック1」ですね!!!

実は最近、お仕事の一環で職業訓練校で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の高さがおかしいって言われることはよくあります。

div#a{
    margin-bottom: 50px;
}
div#b{
    margin-top: 30px;
}

上記のようなコードを書くとdiv#aとdiv#bの間のmarginは80pxではなく50pxになります。そうなんです。marginは相殺されるんです。
入れ子の状態でも、marginが重なれば発生します。padding(内側の余白)と上手に組み合わせましょう。

画像の下に変な隙間が空く

これも新米クリエーターあるあるです。
imgタグはもともとinlineなので普通の文字と同じ振る舞いをします。
なので、vertical-align(縦の位置)をbottom(下)にすれば解消。

まとめ

いかがでしたか?
特に新米の人絶対と言っていいほど出くわすであろう「あるある」を5つ厳選してみました。

ちなみに本日、「広島フロントエンド勉強会 vol1」開催です!!!
制作をしていると、小さなことから大きなことまで一人では解決できない様々な壁にぶち当たると思います。そんな悩みを解決すべく、弊社広島オフィススタッフでもあるゆきぱんだがこの会を地元フリーランスエンジニアと立ち上げました。
弊社オフィスでこのような勉強会を開催できることも嬉しく思ってますし、自分も含めて広島のエンジニアの知識の共有・技術の底上げにつながればと思います。
レポートは後日、ゆきぱんだが書くと思います(………とプレッシャーを与えてみる)のでお楽しみに!
以上、現場のかみーゆでした〜。

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. How-to-make-text-decoration-8 フチ付き文字8段階!チラシやLP制作に使えるイラレ文字装飾テク
  2. Tutorial-BalloonOfComic-00 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  3. blog_twitter 流行語大賞2016 in MF広島オフィス 年間大賞発表
  4. 2017-new-year-bird-8 あけましておめでとうございます。
  5. blog_image_WP 最近気になるVCCWを使ってみた
  6. perspective_tips_10 イラレの遠近グリッドで3D風のイラストを描く方法「車編」
  7. blog_twitter エム・フィールド広島オフィスのランチタイム
  8. Google-auto-mail-return-8 Googleフォームの自動返信機能を追加する(後編)

最近の記事

  1. Tutorial-BalloonOfComic-00
  2. Tutorial-BalloonOfComic-00
  3. Tutorial-BalloonOfComic-00
  4. Tutorial-BalloonOfComic-00
  5. lig_10
PAGE TOP