2017.01.22

【CSS】共通パーツを作る

見出しやボタン、テーブルなどのデザインは、ある程度はサイト全体で同じものが使いまわされていると思います。
それらを各ページ用に作るのではなく、全ページで使えるクラスで構築すれば、コーディングの手間を減らすことができます。

例えば、共通パーツは「.c-xxx1」という名前で作成し、パターンを数字で増やしていきます。

/* 赤背景 中央 文字大 */
.c-tit1 {...}

/* 赤文字 下ボーダー 左 */
.c-tit2 {...}


/* 赤背景 右矢印 */
.c-btn1 {...}

/* 赤枠 赤文字 右矢印 */
.c-btn2 {...}

パーツだけでなく、余白（margin・padding）、文字構え（left・center・right）、文字色なども共通としておけば便利です。
管理しきれなくなるので、増やしすぎには注意です。
（CSSファイルにコメントアウトで、形の特徴を記述しておくといいかも。）