ブログ

コーディングで大事なこと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. news_study 第93回「WEB TOUCH MEETING」に行ってきました。…
  2. Hirofuro-logo-8 ヒロフロステッカーができるまで。
  3. news_study 第95回「WEB TOUCH MEETING」にUstreamで…
  4. Hirofuro-logo-8 WordBench倉敷に参加してきました! & 広島フロントエン…
  5. 2027thum オープンセミナー2017@広島に参加してきました
  6. tsubomi 4月7日 お花見の参加者を公募します
  7. Hirofuro-logo-8 「広島フロントエンド勉強会 Vol. 5」開催レポート
  8. Hirofuro-logo-8 「広島フロントエンド勉強会Vol.6」開催レポート 〜CSS&豆…

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP