ブログ

コーディングで大事なこと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を公開するクライアントの企業、ソースコードを見たユーザーへの気遣いだと思います。その心がけを大事にして、日々ホームページ制作していきたいと考えています。ホームページ制作について何かありましたら弊社にお気軽にご相談ください。

 

 

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

広島フロントエンド勉強会 影の主催者。 フロントエンドエンジニアや事務、ディレクターにも挑戦中。アウトドアからインドアまで多趣味で何でも挑戦したがります。ぱんだとリラックマが好き。

関連記事

  1. img_0350 噂のカスタマージャーニーマップの研修を社内でしたのでまとめてみた…
  2. hirofro20161007 広島フロントエンド勉強会 Vol.2 開催レポート
  3. 2027thum オープンセミナー2017@広島に参加してきました
  4. thumbnail 広島初!子供プログラミング教室にお邪魔してきました
  5. magazine2-50 PHP Business 「THE21」3月号に掲載されました!…
  6. Hirofuro-logo-8 WordBench倉敷に参加してきました! & 広島フロントエン…
  7. lig_10 「いいオフィス 広島」のオープニングパーティーに参加してきました…
  8. seisaku エム・フィールド 広島オフィスで「広島フロントエンド勉強会 Vo…

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP