Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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はまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

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

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

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

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

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

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

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

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

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

最新記事

チャーさん

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

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

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