css HTML コーダー

webページのコーディングを効率化し3分の1の時間で制作する方法

投稿日:

Pocket

うも、チャーさんです。

 

あなたはwebページのコーディングを、

効率的にしたいと思っていませんか?

 

1ページ作るのに10時間とかかかって、

困ってる、という状態ではありませんか。

 

 

この記事では、webページのコーディングを、

効率化する方法を書いています。

 

僕自身この記事で紹介する方法を使い、

コーディングにかかる時間が3分の1まで減り、

随分効率化されました。

 

なのでこの記事を読めば、

あなたもwebページのコーディングが、

効率化されるでしょう。

 

 

ということで、あなたが、

webページのコーディングの効率化に、

興味があればこのまま下にスクロールし読んでみてください。

 

 

スポンサードサーチ

webページのコーディングを効率化する2つの方法

 

 

webページのコーディングを効率にする方法は、

 

  1. htmlを先に全部書き出す。(CSSは後から)
  2. cssの限定的一括指定を活用する。

になります。

 

これらをやるとwebページのコーディングが、

劇的に効率化されます。

 

 

ということで、順に説明いたします。

 

htmlを先に全部書き出す。(CSSは後から)

 

まず、あなたが

webページのコーディングを効率化したいなら、

絶対にhtmlを先に全部書くというのをやりましょう。

 

僕の経験なのですが、上記をしたことで、

1ページ作るのに9時間かかっていたのが、

1ページ作るのに3時間まで短縮されました。

 

 

ではなぜ、そんなにwebページのコーディングが、

htmlを先に全部書くことで、効率化されたのか、

その理由を解説します。

 

で、理由として1番言えるのが、

先にhtmlを全部書き出すことで、

無駄なクラスやcssを省くことができるからです。

 

 

というのも、コーディングをすると、

共通で使えるクラスや共通で使えるパーツが、

多々出てきます。

 

で、最初にhtmlを全部書き出しておくと、

書き出した時点で、ここは同じクラス振っとけばいいな。

というのが可視化されわかりやすくなります。

 

 

すると、無駄なクラスを作ったりすることがなくなり、

制作時間が短縮されるのです。

 

ここで少し考えてみてください。

 

1クラスあたり平均してcss考えて書くのに、

5分ほどかかったとします。

 

 

で1部分ずつhtmlとcssを交互に書いていき、

とりあえず作ったクラスが全部で100個ほどになってしまった場合、

この計算でいくと500分かかります。

 

ですがhtmlを全部書き出して、

全体を見渡した結果、無駄なクラスを作らず、

クラスが全部で20個ほどで済んだとしましょう。

 

 

すると、100分しかかかりません。

なので400分もの短縮になります。

 

とはいえ、上記のような想定は、

数値など割と場合によることも多い、極端じゃないか?と、

反論があるとも思います。

 

 

ですが、自分の実際の経験上、先にhtmlを全部書き出さないで、

コーディングすると、クラスが無駄に増える傾向があります。

 

クラスが無駄に増えると、

それだけcssで余計に時間使うので、

コーディング時間は伸びるわけです。

 

 

逆に、クラスが減れば減るほど、

cssで使う時間も減りますし、

保守もしやすいです。

 

という訳で、htmlを先に全部書いておけば、

共通クラスが見分けやすくなり、

最低限のクラス数でコーディングできるようになります。

 

 

そしてcssに費やす時間がへり、

圧倒的にあなたのwebページのコーディングが、

効率化されるわけです。

 

なので、あなたが、

webページのコーディングを効率化したいなら、

まずはhtmlを全部書き出すようにしましょう。

 

そしてhtmlを先に全部書いたあとで、

cssなどに取り掛かるようにしましょう。

 

 

cssの限定的一括指定を活用する。

 

またwebページのコーディングの効率化のためには

cssでの限定的一括指定の仕方も覚えるようにしましょう。

 

まずそもそも一括指定とは、

僕が勝手にそう呼んでるのですが、

 

例えば、

p {

css

}

 

などをさします。

 

 

こうすればpタグ全てにcssがかかって、

1個1個クラスを振らないで済むので、

効率的ですよね。

 

 

ですが、これには欠点がありまして、

ページ間でデザインが違う場合、それは使えません。

 

なぜなら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を適用とできるわけです。

 

 

なので、1個1個にクラスつけるよりも

早くcssを適用できます。

 

また違うクラスの親要素内にあるimgタグには、

cssがかからないので、ページ間でのデザインを邪魔しません。

 

なのでこれも効率化に繋がるわけです。

 

 

このように大部分に一括でcssを適用する方法を、

知っていればコーディングが効率的に進むので、

ぜひ使うといいでしょう。

 

 

スポンサードサーチ

webページのコーディングを効率化する具体的な手順

 

ではここからは、webページのコーディングの、

効率化をする具体的な手順をお話ししてきます。

 

ここを読めば、

よりあなたのコーディング効率化のための、

手順のイメージが深まると思います。

 

 

htmlを全て先に書く

 

まずは、なんどもお伝えしてる通り、

先にhtmlを全部書き出しましょう。

 

具体的には、

 

文章内容や、imgタグ、それから、divタグや、

見出しタグも含め、構成などその辺りは

全部できるだけ書いときましょう。

 

 

共通するデザインを探しましょう

 

で次にhtmlを全部書き終わったら、

次は全体をバーっとみて、

デザインが共通する部分を探しましょう。

 

具体的には、

 

フォントサイズや、配置の仕方、

imgの表示の仕方など、色々似通った部分が、

だいたいのケースであると思います。

 

 

なので、そういった場所には、

あらかじめ全部共通クラスを振っていって、

一回css書いたら全部に反映されるようにしましょう。

 

そうすると、コーディングが効率的になります。

 

 

レスポンシブも効率化しよう

 

であとは、レスポンシブも共通クラスを使い、

効率化しましょう。

 

具体的には、共通クラスを、

ブレイクポイントごとにcss書いておけば、

それだけで一括でレスポンシブ効かすことができます。

 

すると時間取りがちな、

レスポンシブのデザインも効率化されるでしょう。

 

 

スポンサードサーチ

まとめ

 

という訳で、

webページのコーディングを効率化する方法ですが、

 

htmlを先に全部書き出す。

そして共通クラスをふり、できるだけ無駄なクラスを

作らないようにしましょう。

 

またcssでの限定的一括指定をうまく使いましょう。

 

 

一括指定はcssの記述が減り効率的になります。

 

ですがページ間のデザインに影響して困ることがあるので、

限定したタグに一括でcss指定して効率化して行きましょう。

 

終わりになりますが、この記事であなたの、

webページのコーディングが少しでも、

効率化されると幸いです。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-css, HTML, コーダー


スポンサードサーチ

関連記事

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

photoshopのスライスで不要な部分が保存されるのを防ぐ方法

どうも、チャーさんです。   あなたはphotoshopでスライスをした際に、 範囲選択した部分以外の不要なスライスが、 保存されてしまって困っていませんか?   この記事では、不 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。