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

0 0 0

CSS スタイリング テクニック 技術

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

webdesign 2015.12.02

39css-snippet-top

スポンサーリンク

 

 

海外デザインブログ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.

 

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

 

07. 文字テキストをぼかす

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

 

 

08. イメージ画像を天地中央揃え

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

 

 

09. チェックしたinputをハイライトする

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

 

 

10. クロスブラウザ対応の透明度の設定

See the Pen Cross-Browser Transparency via CSS by PhotoshopVIP (@vipcrew) on CodePen.

 

 

11. ボックス要素の周りにドロップシャドウを加える

See the Pen Cross-Browser Transparency via CSS by PhotoshopVIP (@vipcrew) on CodePen.

 

 

12. クロスブラウザ対応のMin-Height

See the Pen Cross-Browser Min Height by PhotoshopVIP (@vipcrew) on CodePen.

 

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

 

13. 固定フッター

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

 

 

14. ClearfixのCSSハック

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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」を作成しておき、適用したい要素に追加してもよいでしょう。

1
2
3
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. 各種デバイス対応のメディアクエリのスタートキット

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* スマートフォン (縦と横向き) ----------- */
@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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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フォントの読み込み方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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ファイル毎に異なるアイコンをスタイリングしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 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;
}

 

27. 文字選択範囲のスタイリング変更

See the Pen Change Text Selection Style by PhotoshopVIP (@vipcrew) on CodePen.

 

 

28. ドロップキャップを設定

See the Pen Change text selection style by PhotoshopVIP (@vipcrew) on CodePen.

 

 

参照元リンク : 39 CSS Code Snippets to Make You A Better Coder – Design Your Way

0 シェア
. . .
Keywords /キーワード
CSS スタイリング テクニック 技術
Related /関連エントリー
Category /カテゴリ一覧
デザイン素材
チュートリアル
Web制作
インスピレーション
Previous/ 前の記事へ
プロデザイナーの仕事から学ぶ、フォントを極める10個の基本テクニック
ホーム
人気順
新着順