デザイナーさんとお仕事をしてCSS
、html
の書き方で勉強になったことや、ちょっとですが自分でウェブサイト作ったりした経験からこんな感じで書いていくとよさそうという備忘録+最初に意識しておくとよいかな
って思ったこと書きます。
(当たり前だろってこともあると思いますが、勘弁してください(><))
まだまだ未熟者なので、良い方法などあればお気軽にコメントお願いします!
(そのデザイナーさんにもまた機会があったら、何を意識してコーディングしてますか?って聞いてみよう。)
【目次】
参考にした本
デザイナーさんから学んだこと、自分の経験から
IDセレクタ
は使用していない
(だいたいはクラスセレクタ
要素セレクタ
疑似セレクタ
を使用している)
- HTMLのツリー構造を意識してCSSを書く
(でもDOMに依存するようなコーディングするのはダメ)
- Bootstrapなど使用時は、極力自分でスタイルを書かない
書く場合は変更したいスタイルを上書きする
IDセレクタ
は使用していない
これは、再利用しやすいとか、保守しやすいなどの観点でしょうか。
例えば 文字の色を赤色にしたい!
<div class="contents_wrap">
<div class="section contents1">
<ul>
<li id="contens1_num1">111</li>
<li id="contens1_num2">222</li>
</ul>
</div>
<div class="section contents2">
<ul >
<li class="warning">aaa</li>
<li class="warning">bbb</li>
</ul>
<ul>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
・・・
#contens1_num1, #contens1_num2 {
color: #FF0000;
}
.warning {
color: #FF0000;
}
- ①IDセレクタ
- htmlのタグごとにIDをつけないといけない
- 親要素のulタグにIDをつけてもよいですが、IDがかわるとCSSの修正も必要
- htmlだけでは、赤字になっていることがわからない。。。
- ②クラスセレクタ
- htmlのタグにclassを追加すればよい
- 一度、CSSに追加すれば後は修正が必要ない
- htmlをみただけで、赤字ということが推測できる
クラスセレクタは名前のごとく、pythonとかJavaでclass warning
を宣言したイメージなのかな
その他
等間隔で表示したい
- CSSに
.section
を宣言(スタイルはmargin-bottom: 50px;
)
- htmlでは幅をあけたい要素ごとに
div
タグで囲い、class=section
をつける
⇒そうすると以下の矢印部分のように等間隔で配置できる
<div class="section contents1">
<ul>
<li id="contens1_num1">111</li>
<li id="contens1_num2">222</li>
</ul>
</div>
<div class="section contents2">
<ul >
<li class="warning">aaa</li>
<li class="warning">bbb</li>
</ul>
<ul>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
<div class="section contents3">
<ul>
<li>AAA</li>
<li>BBB</li>
</ul>
・・・
.section {
margin-bottom: 50px;
}
セクションのスタイルが変更になるときは
もし、2番目のセクション(class=section contents2
)のスタイルだけ変更したければ、以下のようなCSSにかけばよい
.section.contents2 {
}
HTMLのツリー構造を意識してCSSを書く
私は最初、IDセレクタ
を多用していた経緯もあり、このあたり全然意識していなかったです・・・
例として以下のような赤枠内の箇条書き部分を青字にしたい
class=section contents3
配下のみ対象
ul
li
タグ以外に、p
タグがあります
(li
タグにclassを追加せずにやります)
・html
<div class="section contents2">
<ul >
<li class="warning">aaa</li>
<li class="warning">bbb</li>
</ul>
<ul>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
<div class="section contents3">
<ul>
<li>AAA</li>
<li>BBB</li>
</ul>
<ul>
<li>CCC</li>
<li>DDD</li>
</ul>
<ul>
<li>EEE</li>
<li>FFF</li>
</ul>
<p>コンテンツ3(pタグ)</p>
</div>
・CSS
.section.contents3 ul li {
color: #0000FF;
}
ちなみに
.section.contents3
⇒.section
に変更
⇒他のclass=section ・・・
配下も青字になります。
こちらも当たり前ですが、
.section.contents3 ul li
⇒.section.contents3 p
⇒にすれば、p
タグの文言が青字にできます。
このように、ひとつひとつのタグにclass
をつけていかなくても、スタイルを適用できる!
これをうまく使用すれば、他に同じ意味のhtmlタグを追加した時に、意識せずにスタイルが適用されるなどメリットあり。
その他
例えばあるクラス(例:.section
)のタグ配下のテキストのフォントサイズを統一したい場合は、以下をCSSに書けばよい
.section input[type='text'] {
font-size: 6px;
}
Bootstrapなど使用時は、極力自分でスタイルを書かない
せっかくフレームワーク使っているのに、使わない手はないですよね!
以下のBootstrapのサイトや、ググるとたくさんの情報がでてきますので、Bootstrapのクラスをぜひ、使いましょう
http://getbootstrap.com/css/getbootstrap.com
(ちなみに、私はBootstrapにお世話になりっぱなしで、思考停止状態になってしまっているので、また時間ができたら新しいものに挑戦したいです。)
上書きについて
私がよく上書きするのは、以下col-xx
関連です。
paddingが広すぎるので狭くしています
[class^="col-xs-"], [class*=" col-xs-"],
[class^="col-sm-"], [class*=" col-sm-"],
[class^="col-md-"], [class*=" col-md-"],
[class^="col-lg-"], [class*=" col-lg-"] {
padding-left: 5px;
padding-right: 5px;
}
ちゃんと上書きされてますね。
github.com