スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > 重要なCSSスニペット

重要なCSSスニペット

投稿日:2014年6月5日

このチュートリアルではCSSスニペットについて紹介します。


Step1:はじめに

コードスニペットは美しいです。
コードスニペットとは、とてもシンプルで再利用可能な一連のコードのことです。
これをいつでも自分のコードの好きなところで使えます。
これらのコードの断片は、プログラマーやウェブデザイナーの間で共有され、誰もが抱える問題を素早く解決してくれます。



Step2:HTML5やCSSの本をアマゾンで買う

HTML and CSS: Visual QuickStart Guide
Programming in HTML5 with JavaScript and CSS3
CSS Cookbook
CSS in Easy Step

例えば、角丸にしたければ、「角丸 CSS スニペット」と検索すればたくさんの結果が得られます。
誰かが問題点を指摘していないか、コメントを確認して好きなものを選びましょう。
気にいったものが見つかったら、コピーして自分のスタイルシートに貼り付けましょう。
色や角丸の半径などは簡単に修正できるので、ゼロから作る必要はありません。特にいい点は、そのコードは様々な観点からテストされているので、問題が起きにくいという点です。

CSSスニペット

しかし、サイトの見た目をかっこよくするコードスニペットばかりではありません。
コードスニペットの中には、機能性を向上させたり、発揮しやすくさせるものもあります。
下に挙げたコードスニペットは、そういった機能性を提供するものです。
これらの重要なスニペットは、あなたのサイトで起こるかもしれない問題を解決したり回避してくれることでしょう。






Step3:クリアフィックス

モウェブページ上で要素をfloatすると、それを囲っている要素は期待通りの動きになりません。
floatした要素は親の要素をはみ出し、その後に続く要素はその下に配置したいのに強制的に上にあがってしまいます。
結果的に、ページが壊れてしまったように見えます。
clearfixはこれを修正します。
floatした要素を「クリア」することで、要素を強制的に押し下げます。

CSSスニペット

下のスニペットをスタイルシートに追加すれば、問題が解決します。

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


Step4:メディアクエリ

ウェブサイトの作成では、SEOの観点でも、サイトへの訪問者の使いやすさの観点でも、モバイルを無視することはできません。
多くのデザイナーは、サイトの携帯版を作るのではなく、レスポンシブデザインを選択します。
これにより、デスクトップからも携帯からもタブレットからでも、同じサイトであることがわかるようになります。

メディアクエリを使えば、ウェブページの内容を画面サイズに適応させることができます。
これがウェブサイトの重要な土台となります。

/* スマートフォン (縦向き・横向き) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* スマートフォン (横向き) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* スマートフォン (縦向き) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* タブレット (縦向き・横向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* タブレット (横向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* タブレット (縦向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* デスクトップ・ノート----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* 大きいサイズ ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}


Step5:CSSリセット

何度もウェブサイトを作ったことがある人なら、マルチブラウザでデザインを確認するという悪夢のことはよく理解できると思います。
CSSを適用しても、ブラウザが異なると見え方が異なったり、そもそも反映されないということもあります。

CSSスニペット

CSSリセットを使うと、どのブラウザでも使える土台が完成します。
これを使えば、デザイナーはサイトへ特殊な要素を追加するときに、スタイルを再定義すればいいだけなので安心です。
もしcssを追加してブラウザに問題が発生すれば、下に書いたリセット状態に戻ることができます。
サイトの表示を調整するには、追加したコードを修正すればよく、もとのコードを修正する必要はありません。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baselinebaseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p { font-size: 1.2em; line-height: 1.0em; color: #333; }


Step6:最後に

これらのスニペットにより、サイトの作成時間を短くすることができるようになり、頭痛のタネも減ります。
CSSスニペットについて解説したこの記事の第2段を見逃さないようにしましょう。
次の記事を読めば、サイトが少しポップに生まれ変わります。

関連記事

Code Snippet: Keep Sidebar Elements in View When Scrolling
Using CSS to Fix Anything: 20+ Common Bugs and Fixes
Useful jQuery Snippets and Plugins for Your iPad
Useful CSS Snippets for Your Coding Arsenal



引用:Web Design Library   著者:JeffOrloff  翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング