よく使う便利なCSSの紹介

2015年2月28日 | Web

CSS3の登場により装飾や文字色の変化がjQueryを使わなくても可能になりました。サイトをオシャレに魅せる為に役に立ってますね。多くのサイトで使われ、気になる度にググって学んでいます。そんな中でも、これは知っておくと良いな思う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;
}

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

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

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

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

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

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

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

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

.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;  
}