153日目　CSSファイル管理について

WEBデザイン日記153日目です！
コーディングをしていると共通しているパーツまたは1ページにしか使わないパーツに分けられます。
そんな時、コードを記載する場所を分けてコードを書いていき管理します。
ファイルを分けるときの注意点を書いていきたいと思います。
本日はチーム制作コーディングの続きを行いました。

CSSファイル

---

コーディングをしていると以下のようなファイルを作ると思います。

• index.html

• style.css

サイト構築をするためのコードをhtmlファイルに書き、装飾をするためのコードをcssに書いていくのでファイルが分かれます。

そして、cssに関しては本日のお題でもある記載場所を分ける必要が出てくる場合があります。

共通パーツを見極める

コードを書いていくと同じもしくは似たコードが度々出てくることがあります。そんな時、毎回、この場所のこの部分はこのCSSという風にかいていくとコード量の増量だけではなく、管理も難しくなります。

スクロールするだけでも一苦労なほどコード量は多くなりますので、各ページもしくは同一ページ内でも繰り返し使われるコードとその場所でしか使わないコードを分けてファイル管理することでコード量節約やコード管理が簡単になります！

例えば、クリックすると別ページに飛ぶボタンがあり、同じデザインだけどいろいろな場所に使われている場合、一つのクラスにコードを書いて、そのクラスをhtmlに記載するだけで反映されるので、クラスを一つ作ればいいということになります。

しかし、冒頭でお伝えした通り、よくわかっていないとその場所毎にコードを書く必要があるんだなと思いこんでしまい、都度コードを書いてしまうなんてことがあるかもしれません。

なので、そのパーツはたくさん使われているのか、それともその場所だけなのかという点で見極めていく必要があります。

css管理

よくやる手法として(私の中だけかもしれませんが（笑）)、cssファイルを2つ作り、共通パーツ用、その場所用で分けて管理する手法があります。

この場合、ファイルは二つになりますが、一目で共通なのか単発なのかがはっきりわかるので、後々修正依頼が来た時や、変更したいときにすぐにコードを見つけることが出来ます！

忘れてはいけないのが読み込み。

index.htmlなど、htmlファイルに共通パーツ用cssと単発用cssをそれぞれ読み込むコードを書かないと読み込まれないので、せっかくコードを書いたとしても反映されません(>_<)

私も最初のころ、共通パーツ用cssを作り、サイトを確認したのに反映されなくて、「なぜ？？？」と？が3つもつくほど悩みました(笑)

一つ一つ確認することで原因がわかりますが、はじめたてのころや、あまりなじみがないと忘れやすく、トラブルの原因となりますので注意が必要です。

コードを書く時の注意点

共通パーツ用css、単発用cssと二つ作り、それぞれにコードを書いていくとお伝えしてきました。

この時、原因がわかりませんが、書いている場所が正しいのに反映されないときがあります。そんな時は、コードを書くファイルを変えてみるとうまくいくことがあります。

例えば。
共通用cssにコードを書いているが反映されない・・・
→単発用cssにコードを書くとうまくいく。

こんな具合にコード自体に問題が無くても動作不良が起きてしまう可能性があります。私も何度か悩まされましたが、コードを書く場所を変えることでうまくいくということが分かったので、うまくいかない場合は場所を変えてみることをおすすめします！

本日の作業において気づいたこと

本日はチーム制作サイトの続きを行っていました。
作ってからいくつか修正を繰り返している中で、リンクという点で修正し忘れがありました。
この忘れについて、色々なコーディング作業の中でも忘れやすいポイントの上位に入るかと思いましたので書いていきたいと思います。

～ヘッダーに書かれていたリンクコード～
ヘッダーから下層ページに飛ぶリンクを修正しました。
しかし、同じ場所へ飛ばすリンクというのがフッターやその他の場所にも記載されてました。
修正個所を見つけた時はヘッダーについてしか触れていなかったため、その他のリンクコードの修正を忘れてしまいました。

こんな場合、ページ全体を一度確認してからどの部分で修正が必要なのかリストアップしてから手を動かした方がいいなと感じました。

一度手を動かすと、その場所にしか集中しないため、完了してそのまま終わったものと勝手に認識してしまう原因になりえます。
今回の私です(>_<)

なので、他に同じパーツが無いか確認してから手を動かしていきたいと感じました。

あとがき

---

本日も新しい気付きを得ることができ、有意義でした！
私の作業が終わったと思っていた矢先の出来事で、発表会が控える中、発表前に気づけて良かったなと感じました。

ただ、自分が作っていて、完成と一度思い込むと修正個所が見えにくくなるという部分に気づかされ、これからは制作に完成は無く、修正は必ずあるものという認識で活動に取り組んでいきたいと思いました。

まだまだ知っていくべき部分がたくさんある中で、一つ一つ焦らず進んでいこうと思いました。

こんな感じで今日はここまでです。
時間があればポートフォリオサイトデザインの続き、もしくはチーム制作の続きを行い、どちらも完成度を高めていきたいと思います！