わずかなコードで実装する、CSSスタイリングの小技テクニック28個まとめ

海外デザインブログDesign Your Wayで公開された「39 CSS Code Snippets To Make You A Better Coder」より許可をもらい、日本語抄訳しています。

ほんの少しのコードのみで実装できる、かゆい所に手の届くCSSスタイリングの小技テクニックを、サンプルデモと一緒にご紹介します。

「これってどうやってスタイリングするの？」そんな頭を抱えそうな問題点を中心に集めています。今後のデザイン制作に活用してみてはいかがでしょう。

詳細は以下から。

わずかなコードで実装できる、CSSスタイリングの小技テクニック

ソースコードはHTML/CSSより確認することができます。

01. グラデーションをホバーアニメーションする

See the Pen Animated Gradient Background by PhotoshopVIP (@vipcrew) on CodePen.

マウスホバーすることで、グラデーション背景をアニメーションさせることができます。

02. 縦方向に中央揃え

See the Pen Vertical Align Anything by PhotoshopVIP (@vipcrew) on CodePen.

CSS3 Transformを利用することで、これまで問題だった点もクリアできます。

03. ボックスシャドウを1、2辺にのみ適用

See the Pen Box Shadow Only on One or Two Sides by PhotoshopVIP (@vipcrew) on CodePen.

04. 文字テキストをカラムに分ける

See the Pen Split the text into columns by PhotoshopVIP (@vipcrew) on CodePen.

05. テーブルの幅を自動調整する

See the Pen Table auto-width by PhotoshopVIP (@vipcrew) on CodePen.

長くなってしまった見出しタイトルも、重ならないようにスタイリング。文字テキスト量の多いコンテンツを、テーブル表示するときに役立つテクニック。

06. はじめの文字のみ大きくする

See the Pen First article larger, like in print publications by PhotoshopVIP (@vipcrew) on CodePen.

小説などで見かける、一文字目だけ大きくし、書体も設定することもできます。

Internet Explorerでうまくスタイリングを設定できないときに確認したいテクニック。

13. 固定フッター

See the Pen CSS Fixed Footer by PhotoshopVIP (@vipcrew) on CodePen.

14. ClearfixのCSSハック

基本的なClearfixハックに、すこしだけカスタマイズを加えるスタイリング方法。

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

15. クリックできる要素にポインターカーソルを表示する

クリックできるのにブラウザ上ではポインターカーソルが表示されないときの対処法。クラス名「.pointer」を作成しておき、適用したい要素に追加してもよいでしょう。

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

16. iPadの縦横向きごとにスタイリング

See the Pen CSS Fixed Footer by PhotoshopVIP (@vipcrew) on CodePen.

17. 各種デバイス対応のメディアクエリのスタートキット

/* スマートフォン (縦と横向き) ----------- */
@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 */
}
 
/* iPads （縦と横向き ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (横向き) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (縦向き) ----------- */
@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 */
}

18. Eric Meyerのリセット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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

19. マルチボーダーの設定

See the Pen Multiple borders by PhotoshopVIP (@vipcrew) on CodePen.

20. IEでTexareaのスクロールバーを削除する

See the Pen Multiple borders by PhotoshopVIP (@vipcrew) on CodePen.

21. シンプルで素敵な引用文スタイリング

See the Pen Simple and Nice Blockquote Styling by PhotoshopVIP (@vipcrew) on CodePen.

22. Webフォントの読み込み方法

@font-face {
font-family: GraublauWeb;
src: url("ファイルへのパス/GraublauWeb.otf") format("opentype");
}
 
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("ファイルへのパス/GraublauWebBold.otf") format("opentype");
}


h1 {
font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}

23. テキストを回転させる

See the Pen Text Rotation with CSS by PhotoshopVIP (@vipcrew) on CodePen.

24. 背景のみを透明にする

See the Pen Text Rotation with CSS by PhotoshopVIP (@vipcrew) on CodePen.

表示している文字テキストに影響がないように、背景の不透明度のみを調整します。

25. 幅サイズ不明のdiv要素を中央揃え

See the Pen Centering a DIV of Unknown Width by PhotoshopVIP (@vipcrew) on CodePen.

widthサイズ不明のdiv要素の中身を、中央揃えするテクニック。margin: 0 auto;と一緒に覚えておきたい小技。

26. ファイルの種類に応じてリンクをスタイリング

通常リンクと、メールアドレス、PDFファイル毎に異なるアイコンをスタイリングしています。

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}
 
/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}