初心者がコーディングにおいて気を付けるべきこと

初めまして！フロントエンドエンジニアを目指し日々勉強しているエンジニア1年生です。

今回はコーディングして、先輩エンジニアから指摘を受けた気を付けるべきポイントについて３点まとめましたのでご紹介していきます！

 

1、無駄なブロックは極力なくそう

サイトをコーディングしていく上で、そのサイトの特性を十分に考慮し、適切かつ必要最小限の記述でコーディングを行うことが重要になります。
例えば下記の例を見てみると、

・HTML

・CSS

 

↑を見てみると、HTMLのfooter-containerクラスにはなにもスタイルが当たっていないことがわかります。
このようにスタイルの当たっていないクラスは記述せず、最小限のコーディングを心がけていきましょう！

 

２、CSSは外側から装飾していこう

CSSは外側にあるクラスから装飾していくのが基本となります。
例えば下記のようなHTMLがあったとします。

この時、CSSの装飾としてダメな例を下記にまとめてみます。

この場合、mainにmargin-topを置きたい場合、mainの要素で一番外側にあるのは、メインIDのため

こちらにmargin-topを指定してあげます。この場合正しいCSS装飾は下記の通りになります。

上記の例のようにして、一番外側にあるものから装飾していくように心がけていきましょう。

 

3、コーディングで使用するphotoshopの基本的な使い方

■背景色や文字色を確認したい→カラーピッカーを使用する

画像のようにスポイトのマークを選択して、スポイトツールを選択します。

↓

確認したい箇所について、カーソルをあてる

画像のように指定色が配置されるため、こちらをクリックします

↓

カーソルをあてた箇所の色が表示されました！

 

 

■photoshop上の画像書き出しを行いたい→スライスツールを使用

画像のようにスライスツールを選択します

↓

切り抜きたい箇所について、スライスツールを使用して指定します

↓

control+shift+alt+sを選択して、切り出した画像を保存できます！

 

■文字の大きさ、種類を知りたい→横書き文字ツールを使用

画像のようにTマークの横書き文字ツールを選択します

↓

文字の大きさ、種類を知りたい箇所をカーソルをあてながら選択します。

その後右側に表示されたfontの種類を使用します。

今回の場合、下記のように設定致します。

font-weightでmiddleはないため、normalで設定します。

 

■レイヤーの選択

レイヤーの選択は右下にあるレイヤーパネルで行います。

編集したい箇所などあった場合は、選択してアクティブ状態にすることで行うことができます。

また左メニューにある移動ツールを選択して、調べたいレイヤーを右クリックすると、

下の画像のようにどのレイヤーが構成されているかがわかります

 

 

以上HTML構造、CSSの装飾、photoshopの基本的な使い方を説明致しました。

CSSはプロパティの書く順番の統一も他のコーダーが見る際に重要になります！