Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

CSS HTML サイト構築

コーディング時の注意点

投稿日:

                                                                                                                                 

こんにちは!
今日はより効率的にコーディングするにはどうすればいいか
ということについて書いていきたいと思います。

ちなみにまだ試してないので、
こうすればコーディングが早くなるんじゃないか
になります。

ちなみに今までの私のコーディング方法

1.ざっとデザインを確認
2.マークアップ
3.CSSでデザインを整える

まぁ、皆さんこんな流れになると思うんですけど、

最初から想定が甘いと後からめちゃくちゃ大変になります。
なんでこれとこれに同じクラス使ってるんだよとかね。

あとCSSを整えるとき今までその都度
このフォントサイズは何ピクセルで〜と調べていました。

こうやってると画面の切り替えが必要になるので
無駄に時間がかかるんですね。

で、後から見直したら
こことここおんなじ間隔だったのか!
それ用のCSS用意しておけばよかった!
となってます。
これはめちゃくちゃなります。

もう一つすごい大切だなと思うのが
時間と戦うこと

前までは全体でざっくりこれくらい時間がかかるかな
と思って作業を進めていたんです。

でもヘッダーには20分、
このセクションには30分・・・
みたいな感じで決めていったら
全体の時間の見積もりも正確に出来ますし、
その時間内に終わらせてやる!とやる気になるので
作業がはかどります。

でも、願望を書くのはNGです。
自分の実力不足でそれが叶わなかった時
集中力がなくなります(私の場合は)

なので全部をまとめると

1. デザインを確認
2. コンテンツごとにどれくらい時間がかかるかを見積もる
3. デザインの設計図を書く(ここは何ピクセルでとか!)
4. マークアップをする
5. CSSの調整

よく使う色とかはスタイルシートの一番下とか
同じ画面にある別のエディタに書いておくといいと思います!

濃い赤・・・#8e061d

みたいな感じで・・・

始めの頃はどうしても技術的な部分で
時間がかかると思うので、それ以外の部分で
短縮できるところは色々試行錯誤してみましょう

せば!

-CSS, HTML, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSの基礎 vol.1

擬似クラスとは? ある要素が特定の状態にある場合のスタイルを指定するものです。 例えば <ul> <li>この行だけ色がつきます</li> <li>色が …

no image

【Javascript】真偽値・switch構文

今日も苦手なJSについて調べたことをまとめていきます。 真偽値 if文みたいな比較演算子を使わなくても値自体で真偽値を判定ことができるようです。 データ型に応じて真になる条件と偽になる条件が違うので紹 …

no image

WordPressオリジナルテーマのstyle.cssに記述すること

WordPressでオリジナルテーマを作成する際には必要なファイルがいくつかあります。 style.cssは必要なファイルの一つで、Wordpressテーマとして認識されるために、あるデータの記述が必 …

no image

ファビコンを設定する

今日はファビコンの設定方法について書いていきます。 ファビコンとは ファビコンとはウェブサイトを開いた時のタブについているアイコンのことです。 ファビコンを設定しているとこのように表示され、いくつかタ …

no image

WordPress オリジナルテーマを作る〜記事を表示するページの作成〜

第8回目のWordPressのサイト作り 前回の記事までの記事はこちらから WordPress オリジナルテーマを作る〜ヘッダー〜 WordPress オリジナルテーマを作る〜ヘッダーその2〜 Wor …