ブログ

コーディングで大事なこと5点

news_study

こんにちは。エム・フィールド広島オフィス、フロントエンドエンジニア1年生のゆきぱんだです。
今日はホームページ制作のコーディングにおいて大事なことを備忘録として残しておきます。大事なことはたくさんあるけど、今回はその中でも基本的な5点に絞って書いていきます。

コーディングで大事なこと

  1. インデントはしっかり
  2. idやclass名は分かりやすく
  3. CSSプロパディをまとめる
  4. コメントで区切りを記述する
  5. 修正するときのことを考える

 

1.インデントはしっかり

メリハリがついて、どこからどこまでが同じ箱(箱って言って良いのかな?)なのか分かりやすくなる。

■悪い例

<div class=”contents”>
<h2>SEO対策</h2>
<p>SEO対策って何なん?</p>
<ul>
<li>リスト1<li>
<li>リスト2<li>
<li>リスト3<li>
<li>リスト4<li>
</ul>
</div>

■良い例

<div class=”contents”>
  <h2>SEO対策</h2>
  <p>SEO対策って何なん?</p>
  <ul>
     <li>リスト1</li>
     <li>リスト2</li>
     <li>リスト3</li>
     <li>リスト4</li>
  </ul>
</div><!-- /.contents -->

 

2.idやclass名は分かりやすく

どこの何なのかわかるような名前を付ける。

■悪い例
.box01 ← どこのboxかわかりづらい
.boxnews ← 可読性がちょっと・・・

■良い例
.box-news

 

3.CSSプロパディをまとめる

まとめることができるプロパティはショートハンドでまとめたほうがスッキリする。
(まとめすぎて変になることもあるから気をつける。)

■悪い例

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

 

■良い例

padding: 10px 20px 30px 40px;

 

4.コメントで区切りを記述する

誰でも分かりやすくシンプルに区切りのコメントを入れる。

HTMLは

<!-- contents -->

 

CSSは

/* 
 contents
 */

など。

5.修正するときのことを考える

修正するときのことを考えると自然と記述を分かりやすくシンプルにまとめれるようになる気がする。
同じものを何箇所も直さないといけない仕様だったり、修正したいページの設定場所が分からなかったり、時間がかかる。めんどくさい。そうならないためにどう記述したら良いかを考えながら制作する心構えが大事。

以上、コーディングで気をつけている大事なこと5点でした。

まとめ

「ただブラウザで見えればいい」という考えでコーディングしてたら可読性が悪いし、見た目も美しくないし、修正時にどこを修正したら良いか探すまでに時間がかかるという無駄な時間のロスが発生します。
きれいなコーディングは自分のためだけでなく、一緒にWeb制作する仲間、Webを公開するクライアントの企業、ソースコードを見たユーザーへの気遣いだと思います。その心がけを大事にして、日々ホームページ制作していきたいと考えています。ホームページ制作について何かありましたら弊社にお気軽にご相談ください。

 

 

■この記事を書いた人 ゆきぱんだ(フロントエンドエンジニア)

広島フロントエンド勉強会 影の主催者。 フロントエンドエンジニアっぽい人。最近はSEO対策やWeb解析なども勉強中で、なんでも挑戦したがります。ぱんだとリラックマが好き。

関連記事

  1. 20161214_4864 タコパ忘年会をやったらミンティアが殺人的だった
  2. _good WTM #96でコーチングのLTさせていただきました
  3. Hirofuro-logo-8 「広島フロントエンド勉強会Vol.6」開催レポート 〜CSS&豆…
  4. news_study 第95回「WEB TOUCH MEETING」にUstreamで…
  5. hirofuro-eyecatch-8 ヒロフロデザイン部『webデザインの情報交換会』4/1開催します…
  6. ba2d551a71d04d5d845f05aa74658fb5_m パソコンスクール HA*NA講師を終えて
  7. DSC_0704 広島フロントエンド勉強会 Vol.1 開催レポート
  8. WEBTOUCHMEETING-talk 第92回「WEB TOUCH MEETING」に行ってきました!…

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP