著作者: JeffHallPhotos (改変 gatag.net)
ご指摘のコメントをしていただいた方にこの場でお礼をさせていただきます。
誠にありがとうございます。
私自身が初心者の為このような間違いをしてしまいました。
修正致しました。
やっはろー！ぬぉーまんだよ٩(๑`^´๑)۶(@Nuohman)
ここ5日間で新規にブログを2つ開設しました！ 新規のブログは今のブログデザイン(このブログのこと)とは違うデザインにしたく、1からCSSを勉強する日々…まじ疲れた…
さて、新規ブログのデザインを作成していた時にとある問題が出てきました。
それは「CSSの整理が出来ていない」事です。
このブログで使用しているデザインから使いたいのもあったのでCSSを見直したのですが、適当+乱雑に置かれたCSSから正しいものを探すのは一苦労しました。 また同じCSSが2～3個置かれていたりと、意味の無い箇所を作っていました。
そこで今回は、CSSの整理の仕方を淡々と書いていきます。 初心者の方はぜひ参考にしてみてください。
こんな方はCSSがぐちゃぐちゃかも知れない
僕がブログを始めた時、HTML・CSS・JavaScriptなんて全く知りませんでした。
※HTML・CSS・JavaScriptはブログを作成するのに必要な言語
その為ブログ開設初期は【コピペ一発OK】と書かれた幾つものサイトから求めているデザイン検索。コードをコピーして適当にペーストするのを繰り返してました。
結果、適当にコードは設置され、重複したコードが何個も存在し、何のコードか不明のものもある始末でした。
僕と同じようにCSSを理解してないままブログを始めてしまい、上記の状態の方も居るのではないでしょうか？
こんな方はもしかするとぐちゃぐちゃかも知れないので、これを機会に見直してほしい。
Before・After
Beforeでは背景カラーを変更するコードがあれば、フォントに関連するコードもある。 記事作成時に使うコードもあったりと配置の仕方は乱雑と言ってよいだろう。 コメント(意味は後述)の仕方も大雑把で何を言ってるのかよく分からないのが問題点である。
そこでAfterではコードを種類別に分類、階層構造にし更に分類、コメントは分かり易い言葉を最小限に設置しチョイし、作り替えた。
ではAfterの内容について、以下で更に詳しく書いていく。
CSSの整理方法
前置き
「CSSの整理方法」を知る前に、理解していて欲しいことが3点あるので話します。
まず、CSSをいじる前は必ずバックアップをしてください！ これは常識です。いじって失敗した時に元に戻せるようにしておきましょう。
バックアップ方法はいじりたいコード箇所全てを、メモ帳やワードにでも貼り付けておけば大丈夫です。
次にCSSの仕組みについて軽く説明します。
コードは上から順に読み込まれます。
そのため重複しているコードがあると、先に読まれたコードは後に読まれたコードに上書きされてしまいます。
①はタイトルを「#ffffff＝白色」にするコード。
②はタイトルを「#ffff00＝黄色」にるるコード。
後に記載されている②が①を上書きし、タイトルは黄色になっている。
最後に、コードは場合によっては適切な順番・箇所に貼らないと上手く作動しない場合があります。
こまめに保存を繰り返し、適切に動作するか確認をしてください。
もし失敗したらバックアップからコードを呼び戻せば大丈夫。
前置きが長くなりましたが、さっそくプログラムの整理方法について以下の3つのテーマに分け書いていきます。
- コメントを利用する
- コードを大・中・小に分類する
- 大中小と、コメントを組み合わせる
コメントを利用する
コメントとは、コードをコメントで囲む事でその部分が読み込まれなる。
例えばこんな感じです。
先ほどでは②が①を上書きするので、タイトルが黄色になると説明した。 しかし②の部分をコメントで囲む事でコードが読み込まれず、タイトルは白色になります。
コメントの主な使い方は「何の働きをするコードなのか」を後で見直す際に分かりやすくするため使います。 先ほどの写真で言えば「タイトルカラー変更箇所」と「各種色」についてコメントで囲み設置しておくと良いでしょう。
さてコメントですが、言語によって囲み方が違うので記しておきます
コメントのやり方を理解したところで次にいきます。
コードを大・中・小に分類する
各コードが何の働きをしているかで大・中・小の項目に分けていきます。 では大中小の分け方について書いていきます。
大
当ブログのCSSを使って詳しく説明します。 当ブログではCSS(ブログデザインを司る言語)を下記の6項目に分けました。
- 全体的デザイン
- サイドバー
- 記事内デザイン
- ボタンデザイン
- エフェクト
- その他
各項目にあたるコードをそれぞれ分類し当てはめていきます。
例えば「記事内デザイン項目」ですが、記事を作成する際に使用するCSSという内容で割り振ってます。 以下の3個のボックスをご覧ください。
この三つはそれぞれデザインが違うので当然コードも違いますが、記事作成時に使われるCSSなので「記事内デザイン項目」に割り振りました。
他の項目も同じように分けていきます。
- どのページを開いても関係するコードは全体的デザイン項目に。
- サイドバーで使うデザインはサイドバー項目に。
- 記事作成に使うデザインは記事内項目に。
- 当ブログで使用する各ボタンのデザインはボタン項目に。
- エフェクト効果のあるデザインはエフェクト項目に。
- 分類が分からないものはその他項目に。
中
大で分けた中身を、更に似た項目で分類します。
例えば、上記の3個のボックスデザインは「Box Design」で一括りにしました。
小
中で一括りした各デザインに名前を付けていきます。
上記のボックスで言えば、上から「Gray・Orange・Red」といった感じです。
大中小と、コメントを組み合わせる
先ほど分類した大中小にコメントを付与し、階層構造にして並べます。
また、大中小のコメントの書き方は以下のようにしました。
あとは階層構造順に番号を割り振ってあげます。こうすると後で見直すとき楽だと思い入れました。
まとめ
以上が「CSSの整理の仕方」になります。
- コメントを利用する
- コードを大・中・小に分類する
- 大中小と、コメントを組み合わせる
この3つを取り入れるだけで、後から見直す際だいぶ分かり易くなりますのでぜひ取り入れてみてください！
CSSを理解すると自分の望むブログデザインにすることができます！
今回CSSを勉強するにあたってこちらの参考書がとても分かり易かったので紹介させていただきます。
簡単なブログデザインを行う為の基本的知識が分かり易く詳しく記載されています。
内容は、カラー・図入り・用途別分類・コードが記載されており、僕みたいなCSS初心者が一から学ぶのに大変役に立ちます！ 新規に開設した2つのブログもこの本のおかげで望み通り作ることが出来ました！
少し古い本なのでAmazonでは127円という値段で販売されているので、ブログデザインに挑戦したい方はぜひ参考にしてみてください！
以上、グッバイヾ(☆´3｀)ﾉｼ
