こんにちは。8bitの森島です。
昼間は暑かったり夜は暑かったり気温差に慣れませんが皆様いかがお過ごしでしょうか。
最近の私はミスタードーナツの焼きドにおおハマりして、ちょっとこれは…肉…つく…
さて、今日から６月ですね。
弊社にも春から新卒の子が一人いたりして、初々しいなぁといつも微笑ましく見守ってます。
そういえば、私も昔これ同じミスしたなーとか思い出すことが多々あったりして、何だか懐かしくなってしまったのでちょっとコーダー見習いさんたちに向けて発信しようと思います。
初めて知った時感動したCSSとか小技とか
学生時代私は、やはりデザインの方を重点的に勉強していたので、コーディングに関しては手が遅かったりと粗末な部分がたくさんありました。今となっては基本的なことなんですけどね。あの時しっておけばーと思ったことをメモしようと思います。
【CSSはまとめて記述できる】
例えば「margin」
margin-top:15px;
margin-right:15px;
margin-left:15px;
margin-bottom:15px;
こんな記述してませんか？margin-right:15px;
margin-left:15px;
margin-bottom:15px;
marginは、こんな風にまとめられます。
margin:10px 0 20px 0;
それぞれ、margin:上 右 下 左;の順でまとめられます。margin:0 15px;など数値が二つの場合は、margin:上下 左右;になりますその他にもbackroundやborderなど様々なCSSに使えます。
background:url(images/01.jpg) no-repeat left top;
boder:#000000 solid 1px;
いちいちbackground-positionとかbackground-colorなどたくさん行を使って記述していく必要がありません。boder:#000000 solid 1px;
=======================================
【marginの値、autoの存在】
学生時代私はサイト全体を中央ぞろえにするのに、positionをかけて、さらにleftで横幅半分の値を-○○pxと指定をかけて…とやっていました
もちろんテクとしてはアリですが、手間などを考えるとこっちをマスターしておきたい。
margin:0 auto;
この「auto」がミソ。中央ぞろえがこのひとつだけで済むんですよね。autoに設定しておくとブロック要素であれば、勝手に中央ぞろえになるように余白をとってくれる。便利ですね。※widthが指定されていないと時々上手くいかなかったりします。
=======================================
【「:hover」の存在】
aタグの、マウスオーバーの時の指定はどうしてますか？
a{ color:#000000; }
これはよく見慣れた指定だと思うのですが、これに一行プラスして、
a{ color:#000000; }
a:hover{ color:#FF0000; }
なんと「:hover」をつけるだけで、マウスが乗った時のCSSが変更出来るんですね。これを応用すれば背景を変更して画像の変更ができたり、下線の表示非表示を変えられたり、夢広がります。a:hover{ color:#FF0000; }
これの他にも「:visited」（訪問済のリンク）や「:active」（クリック中のリンク）などもあります。便利便利。
=======================================
【「max-width」「max-height」の存在
なんとこやつら、幅の最大値と最小幅を指定できる便利なヤツらなんです。これを使えば、
p{
width:80%;
max-width:500px;
}
大きさを可変にしたいけどレイアウト崩れを防止したい時なんかに使えます。便利便利。width:80%;
max-width:500px;
}
アフィリティエイトの画像を差し込む時何かに便利ですね。
=======================================
【CSSで透明度指定できる】
最近はこんなこともできちゃうんですねー。
p{
opacity: 0.9;
}
と記述しておけば、pタグが透明度90％になります。すごーいCSSすごーい。opacity: 0.9;
}
実はまだ正式実装では無かったりとちょこちょこ事情はありますが、最近のブラウザなら問題ないと思います。
=======================================
【「,」で区切れば同じプロパティを使える】
例えば、こんな書き方
div#newsArea,
div#contentsWrapper
{
border:#000000 solid 1px;
}
プロパティの記述の前がミソですね。div#newsAreaとdiv#contentsWrapperの間に、「,」があります。div#contentsWrapper
{
border:#000000 solid 1px;
}
カンマでつなぐだけ。これで両方のdivにborderを付けることができます。カンマでちゃんと区切っていれば何個でも繋げられます。
=======================================
【同じ数字の続く色指定は省略できる】
「#FFFFFF」白、「#000000」黒、これって実は３つに省略できるんですよね。便利便利。
「#FFFFFF ⇒ #FFF」「#000000 ⇒ #000」「#CCCCCC ⇒ #CCC」
=======================================
【要素にマウスが乗った時のカーソルを指定できる】
昨今のWEB業界では必須のjavascriptなんかを使うときにとっても便利です。アコーディオンにしてみたはいいけどaタグで囲まないと指カーソルにならない、そんな風に思っていた時代もありました。
p{
cursor:pointer;
}
これをつけるだけで解決。pタグの上にマウスが乗ると、指カーソルになってくれます。aタグの中に長々とjavascriptを仕込む必要なし！便利便利。cursor:pointer;
}
他にもヘルプカーソルにできたり矢印カーソルにできたりと、色々選べます。
=======================================
【id名はclass名の頭に数字を使ってはいけない】
これも大事なことですね、意外と知らない人がいたりするので書いておきます。
×「div id=”01tab”」
○「div id=”tab01″」
じつはこれ、上の方はやってはいけないｉｄ名の付け方なんです。ブラウザによってＣＳＳが反映されなかったり、バグの原因になりますので、要注意。○「div id=”tab01″」
私も一度これで痛い目みたことがあり、それ以来名前の先頭の文字は必ずアルファベットにするようにしています。
=======================================
さて、なんだか懐かしい気分になりましたが、いかがでしたでしょうか。
少しでも初心者の方の手助けになれば幸いです。
間違っている所なんかあればしてきしてくだされば助かります。
よければ皆さんも、自分はこういうの驚いたよーなんてことがあればぜひ教えてください！
