よく使う便利なCSSの紹介

2015年2月28日 | Web

CSS3の登場により装飾や文字色の変化がjQueryを使わなくても可能になりました。サイトをオシャレに魅せる為に役に立ってますね。多くのサイトで使われ、気になる度にググって学んでいます。そんな中でも、これは知っておくと良いな思うCSS少し紹介させて頂きます。もはや多くのサイトで紹介されていますが、使えそうなコードはコピペして使ってくださいね。

文字色をやんわり変える

これメッチャ好きで多用しています!!このページの右サイドのリンクに使ってます。

[css]
a{
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
color: #222;
}

a:hover{

color: #888;
}
[/css]

メニューを簡単に横並びにする

メニューを横並びにする事って多いですよね!?前まで、[flort:left;]を使っていたのですが[display: inline-block;]の方がお勧めって教えて貰ったので使ってみると「お～なるほど!次回からこっちやな!!」って感じで使い始めました。

下のCSSはメニューを5項目作った感じで記載しています。[display: inline-block;]で横並びにすると項目の間に隙間ができるので、ulに[font-size: 0;]を入れて隙間を無くしています。私が参考にしたサイトはdelaymaniaさんのサイトです。丁寧に説明されていらっしゃるので是非参考にしてみてください。

[css]
ul {
font-size: 0;
}
li {
background-color: #222222;
display: inline-block;
font-size: 12px;
width: 20%;
}
[/css]

ボタンなどの角丸を簡単に作る

以前は、画像で作っいた角丸ボタンがCSSで作れるようになりました。フラッとデザインには欠かせないテクニックですね!!下記の様に書くだけで簡単ですね!!

[css]
.button {
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
[/css]

ちなみに、全ての角を個別に指定したい場合もありますよね!?上と下の角丸を変えたいって時、そんな時はこうしましょう!

[css]
.button {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
}
[/css]