[CSS]ウェブデザインの可能性を広げる10のスタイルシート
Post on:2012年7月26日
sponsors
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。
すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。
10 CSS Rules Every Web Designer Should Know
下記は各ポイントを意訳したものです。
- @media
- background-size
- @font-face
- margin: 0 auto;
- overflow: hidden;
- .clearfix
- color: rgba();
- input[type="text"]
- transform: rotate(30deg);
- a {outline: none;}
@media
CSS
@media screen and (max-width: 960px) {
}
「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。
「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため、METAタグを使用して等倍で表示するようにします。
background-size
CSS
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}
今最も熱いCSS3のプロパティの一つが「background-size」です。「background-size」を使用すると、たった一行で親のサイズに背景画像をフィットすることができます。これは最近人気が高い背景画像をフルスクリーンで表示するエフェクトに利用できます。
@font-face
CSS
@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}
ここ数年でウェブが大きく変わった一つが「@font-face」を使ったウェブフォントです。最初はフォントの数も少なく限界がありましたが、現在では数多くのフォントが利用できサービスも充実してきました。
margin: 0 auto;
CSS
#container {
margin: 0 auto;
}
「margin: 0 auto;」はCSSで初めて身につけるスニペットの一つではないでしょうか。これはブロックエレメントを真ん中に配置するもので、CSSの仕様にないことが不思議です。親要素の中にブロックエレメントを配置する時は「margin: 0 auto;」を加えてください。
overflow: hidden;
CSS
.container {
overflow: hidden;
}
floatを使ったエレメントの困ったに役立つ「overflow: hidden;」。このシンプルな一行で、多くの問題を解決してくれることでしょう。
.clearfix
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
floatを使ったエレメントをクリアするのに「overflow: hidden;」が機能しない時、一番良い方法はこの「.clearfix」です。これはclassとして使用しても構いませんが、使用ページで特定できるのであればHTMLエレメントをターゲットにしても構いません。
color: rgba();
CSS
.btn {
color: rgba(0,0,0,0.5);
}
最近のウェブデザインでよく見かける半透明のエフェクトは、今まではPNG画像が必ず必要でした。しかし、このCSSの「RGBa」の「a」で不透明度が設定できるようになりました。「#ff0000」のような16進法の指定ではなく、「RGBa」を使うことで半透明も簡単に利用できるようになります。
input[type="text"]
CSS
input[type="text"] {
width: 200px;
}
「input[type="text"]」のような属性セレクタは、HTMLにclassを追加しないでエレメントのスタイルを定義するのに役立ちます。input要素のtextのみにスタイルを与えたり、a要素で外部リンクのみアイコンを加えたりできます。
CSS
a[href ^= 'http']:not([href *= 'yourdomain.']) {
background: transparent url(画像のURL) no-repeat center right;
padding-right: 16px;
}
transform: rotate(30deg);
CSS
.title {
transform: rotate(30deg);
}
CSS transformの変形のプロパティはJavaScript無しで、エレメントを操作することができます。CSSアニメーションと組み合わせることで、更に面白いエフェクトになるでしょう。
a {outline: none;}
CSS
a {outline: none;}
リンクをクリックする際に表示される点線の輪郭は、ウェブページのデザインを損ねるかもしれません。これは「outline: none;」を使用することで、取り除くことができます。しかし「:focus」時に表示されなくなってしまい、アクセシビリティのために利用することも大切です。
この点線がウインドウに広がるのを避けたい場合は、「overflow:auto;」を加えてください。
CSS
a {overflow: auto;}
sponsors
