こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
今回の執筆者は、WEBデザイナーの山口美登利さんです。
前回はCSSを使った小技を３つ紹介してくれました。
今回は「効率よくCSSレイアウトを進めるためのヒント」についてです。
では、今週もお楽しみください。
効率よくCSSレイアウトを進めるためのヒント
こんにちは山口です。
平成最後のお正月、いかがお過ごしでしたか。
新たな元号の発表は4月1日ということですが、もっと早く知りたい！と、待ち遠しい気持ちの方も多いのではないでしょうか。
まだ先だと思っていたオリンピックの年もどんどんと近づき、今よりもっと景気やトレンドの変化が見えてくると思います…！
ショップ経営する私たちも、さまざまなアイデアや構想で試行錯誤していきたいですよね。
そしてそんな場合に、WEBサイトのデザイン更新などは効率よく進めて、できるだけコンテンツ作成に集中したい。
ということで、今回は「効率よくCSSレイアウトを進めるためのヒント」をいくつかご紹介いたします。
ヒント（１） クラス名を複数設定して効率UP
CSSレイアウトをする場合、必要な要素にIDやクラス名を設定していくのが一般的です。
例えばクラス名が.Sample-Aは、文字が赤色で、枠線を付けて…という具合ですね。
.Sample-A{
color: #FF0000;
border:1px solid #FF0000;
}
でも、.Sample-Aの設定の要素に、特定のページのみに背景色を設定したい。と思う時もありませんか？
で、そんなとき新たにクラス名を設定しますか？それはそれでアリなのですが…
.Sample-b{
color: #FF0000;
border:1px solid #FF0000;
background: #00CC00;
}
この方法でも良いのですが、同じ記述が多く、非効率な感じがします。
そこでひと工夫。背景色の設定だけをするスタイルを作成し、クラス名を複数設定する方法があります。
○例えばこんな風に部品単位でスタイルを作成↓
.Back-A{
background: #00CC00;/* 背景色が赤色 */
}
.Back-B{
background: #999999;/* 背景色がグレー */
}
複数のクラス名まとめて設定するのは、半角スペースを使って入力するだけです。
○複数のクラス名まとめて設定↓
<div class=”Sample-A”>このボックスはSample-Aの設定</div>
<div class=”Sample-A Back-B”>このボックスは複数（Sample-A+Back-B）の設定</div>
<div class=”Sample-A Back-A”>このボックスは複数（Sample-A+Back-A）の設定</div>
このやり方なら、すべての設定を一つのクラス名に対して設定する必要がなく、自由度が高くなります。
同じページの中でも、場所によってスタイルを変更することも可能ですね！
ヒント（２） クラス名に手を加えず、ページIDでスタイルを変更する
先に紹介した方法は、スタイルを分けたクラス名を複数設定することで、自由度を高める方法でした。
クラス名を変更することなくスタイルを変更する方法の例をご紹介します。
使いやすい方法は、body要素にIDを設定する方法。
○例えばこんな風に↓
<body id=”Sample-A”>
<p>ここに<span>文字</span>が入ります。</p>
<div class=”Style-A”>コンテンツコンテンツ</div>
</body>
この方法を取れば、同じクラス名でありながら、bodyにIDを振ったページ単位でスタイルを設定することが出来ます。
<body id=”Sample-A”>の中のspanは太文字にするけど、他のページには別のIDをbodyに設定し、spanの背景色は黄色にする…といったことも出来ます。
divで囲んだコンテンツをページごとに横並び、縦並びと変更することも出来るでしょう。
○CSSの設定はこのように↓
#Sample-A span{
/*bodyのIDがSample-Aのspanの設定*/
}
#Sample-A .Style-A{
/*bodyのIDがSample-Aの.Style-Aの設定*/
}
クラス名が全く同じでありながら、ページIDでまったく別の設定をすることができてしまいます。
頭を柔軟にする必要があるのですが、使い方によってはとても便利で効率よく作業出来ると思います。
現在WordPressを使っている方であれば、システムが自動で付与するクラス名やIDを組み合わせて、カスタマイズした設定も出来ると思います。
まとめ
今回は「効率よくCSSレイアウトを進めるためのヒント」をご紹介しました。
少しでもお役にたてましたら幸いです！
———————————————————–
【今週の執筆者】山口美登利
（プロフィール）
2002年に広告代理店に勤めDTPデザインやWEB制作業界に入る。
起業、廃業、派遣など良くも悪くも様々な経験を経てフリーランスになる。
出来ることはWEBデザインほかDTPデータ制作など。
2018年からはもしもドロップシッピングのショップ運営や、創作活動をメインに活動、研究中。
□ WEB：DTPデザイン・WEBサイト制作｜ミドリデザインワークス
□ Twitter
□ FaceBook
———————————————————–
それでは、次号もお楽しみに。
※この記事は2019年1月3日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』の一部を修正、改訂して掲載しています。メルマガのご登録はこちら
