どうも、チャーさんです。
あなたはwebページのコーディングを、
効率的にしたいと思っていませんか？
1ページ作るのに１０時間とかかかって、
困ってる、という状態ではありませんか。
この記事では、webページのコーディングを、
効率化する方法を書いています。
僕自身この記事で紹介する方法を使い、
コーディングにかかる時間が３分の１まで減り、
随分効率化されました。
なのでこの記事を読めば、
あなたもwebページのコーディングが、
効率化されるでしょう。
ということで、あなたが、
webページのコーディングの効率化に、
興味があればこのまま下にスクロールし読んでみてください。
スポンサードサーチ
目次
webページのコーディングを効率化する２つの方法
webページのコーディングを効率にする方法は、
- htmlを先に全部書き出す。（CSSは後から)
- cssの限定的一括指定を活用する。
になります。
これらをやるとwebページのコーディングが、
劇的に効率化されます。
ということで、順に説明いたします。
htmlを先に全部書き出す。（CSSは後から)
まず、あなたが
webページのコーディングを効率化したいなら、
絶対にhtmlを先に全部書くというのをやりましょう。
僕の経験なのですが、上記をしたことで、
１ページ作るのに９時間かかっていたのが、
１ページ作るのに３時間まで短縮されました。
ではなぜ、そんなにwebページのコーディングが、
htmlを先に全部書くことで、効率化されたのか、
その理由を解説します。
で、理由として１番言えるのが、
先にhtmlを全部書き出すことで、
無駄なクラスやcssを省くことができるからです。
というのも、コーディングをすると、
共通で使えるクラスや共通で使えるパーツが、
多々出てきます。
で、最初にhtmlを全部書き出しておくと、
書き出した時点で、ここは同じクラス振っとけばいいな。
というのが可視化されわかりやすくなります。
すると、無駄なクラスを作ったりすることがなくなり、
制作時間が短縮されるのです。
ここで少し考えてみてください。
１クラスあたり平均してcss考えて書くのに、
５分ほどかかったとします。
で１部分ずつhtmlとcssを交互に書いていき、
とりあえず作ったクラスが全部で１００個ほどになってしまった場合、
この計算でいくと５００分かかります。
ですがhtmlを全部書き出して、
全体を見渡した結果、無駄なクラスを作らず、
クラスが全部で２０個ほどで済んだとしましょう。
すると、１００分しかかかりません。
なので４００分もの短縮になります。
とはいえ、上記のような想定は、
数値など割と場合によることも多い、極端じゃないか？と、
反論があるとも思います。
ですが、自分の実際の経験上、先にhtmlを全部書き出さないで、
コーディングすると、クラスが無駄に増える傾向があります。
クラスが無駄に増えると、
それだけcssで余計に時間使うので、
コーディング時間は伸びるわけです。
逆に、クラスが減れば減るほど、
cssで使う時間も減りますし、
保守もしやすいです。
という訳で、htmlを先に全部書いておけば、
共通クラスが見分けやすくなり、
最低限のクラス数でコーディングできるようになります。
そしてcssに費やす時間がへり、
圧倒的にあなたのwebページのコーディングが、
効率化されるわけです。
なので、あなたが、
webページのコーディングを効率化したいなら、
まずはhtmlを全部書き出すようにしましょう。
そしてhtmlを先に全部書いたあとで、
cssなどに取り掛かるようにしましょう。
cssの限定的一括指定を活用する。
またwebページのコーディングの効率化のためには
cssでの限定的一括指定の仕方も覚えるようにしましょう。
まずそもそも一括指定とは、
僕が勝手にそう呼んでるのですが、
例えば、
p {
css
}
などをさします。
こうすればpタグ全てにcssがかかって、
１個１個クラスを振らないで済むので、
効率的ですよね。
ですが、これには欠点がありまして、
ページ間でデザインが違う場合、それは使えません。
なぜならpタグ一括指定をすると、
他のページのpタグまで同じcssがかかるからです。
例：フォントサイズがページ間で違うときに困る
で先ほどお話しした限定的一括指定ですが、
例えば、
.クラス名 > タグ名 {
css記述
}
みたいな書き方があります。
このように書けば、タグ全体に、
cssを適用できるのは一括指定と同じなのですが、
上記のセレクタの指定の仕方なら、
指定した親要素内にあるタグ全てに、
といった指定ができます。
例えば、
<style>
.oya > img {
css記述
}
</style>
<html>
<div class=”oya”>
<img src=…>
<img src=…>
<img src=…>
<img src=…>
<img src=…>
…………
</div>
</html>
のようなものがあった場合、
“oya”というクラスがついてる親要素内にある、
imgタグだけにcssを適用とできるわけです。
なので、１個１個にクラスつけるよりも
早くcssを適用できます。
また違うクラスの親要素内にあるimgタグには、
cssがかからないので、ページ間でのデザインを邪魔しません。
なのでこれも効率化に繋がるわけです。
このように大部分に一括でcssを適用する方法を、
知っていればコーディングが効率的に進むので、
ぜひ使うといいでしょう。
スポンサードサーチ
webページのコーディングを効率化する具体的な手順
ではここからは、webページのコーディングの、
効率化をする具体的な手順をお話ししてきます。
ここを読めば、
よりあなたのコーディング効率化のための、
手順のイメージが深まると思います。
htmlを全て先に書く
まずは、なんどもお伝えしてる通り、
先にhtmlを全部書き出しましょう。
具体的には、
文章内容や、imgタグ、それから、divタグや、
見出しタグも含め、構成などその辺りは
全部できるだけ書いときましょう。
共通するデザインを探しましょう
で次にhtmlを全部書き終わったら、
次は全体をバーっとみて、
デザインが共通する部分を探しましょう。
具体的には、
フォントサイズや、配置の仕方、
imgの表示の仕方など、色々似通った部分が、
だいたいのケースであると思います。
なので、そういった場所には、
あらかじめ全部共通クラスを振っていって、
一回css書いたら全部に反映されるようにしましょう。
そうすると、コーディングが効率的になります。
レスポンシブも効率化しよう
であとは、レスポンシブも共通クラスを使い、
効率化しましょう。
具体的には、共通クラスを、
ブレイクポイントごとにcss書いておけば、
それだけで一括でレスポンシブ効かすことができます。
すると時間取りがちな、
レスポンシブのデザインも効率化されるでしょう。
スポンサードサーチ
まとめ
という訳で、
webページのコーディングを効率化する方法ですが、
htmlを先に全部書き出す。
そして共通クラスをふり、できるだけ無駄なクラスを
作らないようにしましょう。
またcssでの限定的一括指定をうまく使いましょう。
一括指定はcssの記述が減り効率的になります。
ですがページ間のデザインに影響して困ることがあるので、
限定したタグに一括でcss指定して効率化して行きましょう。
終わりになりますが、この記事であなたの、
webページのコーディングが少しでも、
効率化されると幸いです。
それでは、読んでもらってありがとうございました。
チャーさん
