この記事には、サイトの開発プロセスを高速化し、レイアウトを最適化するのに役立つ、有用で「正しい」スタイルとスニペットが含まれています。
1.基本的なHTML5デザイン
多くの開発者が十分な注意を払っていないページのメインコード。 JQuery 1.8.2とHTML5shivは 、古いブラウザで正しく表示するために接続されています。
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Default Page Title</title> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
2.デフォルトのブラウザスタイルをリセットする
異なるブラウザで同じコードを別々に表示できます。 スタイルをリセットすると、このような問題を回避できます。
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: baseline; outline: none; } html { height: 101%; } /* always display scrollbars */ body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, 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; } input { outline: none; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } a { text-decoration: none; } a:hover { text-decoration: underline; }
3. CSS3グラデーション
以下のコードは、CSSグラデーションのクロスレンダリングに役立ちます。 目的のセレクタに追加されます。透過性のためにrgba（）を使用できます。
background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000);
4. CSS3変換
古いブラウザの問題のため、あまり人気のないプロパティ。 しかし、非常に有望です。 ツールチップまたはシェイプを作成できます 。
-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg);
5. @フォントフェイス
ページに独自のフォントを追加できます。 さまざまな形式に変換するには、 Font2Webサービスを使用すると便利です。
@font-face{ font-family: 'MyFont'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg#webfont') format('svg'); } h1 { font-family: 'MyFont', sans-serif; }
6.メタタグアダプティブレイアウト
レスポンシブレイアウトが正しく機能するための重要なメタタグ
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
7. HTML5メディア
メディアコンテンツのユニバーサル操作のために複数のビデオおよびオーディオ形式を読み込む設計（「s ource」のスペースを削除）
<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> <s ource src="media/video.mp4" type="video/mp4"></s ource> <s ource src="media/video.webm" type="video/webm"></so urce> <s ource src="media/video.ogg" type="video/ogg"></s ource> </video> <audio controls="controls" preload="none"> <s ource src="music.ogg" type="audio/ogg"> <s ource src="music.mp3" type="audio/mpeg"> </audio>
8.レイアウトを簡素化するクラス
次のスニペットは、レイアウト構文を短縮するのに役立ちます。 この手法は、さまざまなCSSフレームワークで広く使用されています。 たとえば、floatプロパティの管理：
.float-left /* Or whatever name you like */ { float: left; } .float-right /* Or whatever name you like */ { float: right; }
または、要素を表示することにより：
.hide { display: none; } .show { display: block; }
9.デザインスニペット
コンテンツを簡単に表示できます。 簡単な例：コンテンツが配置されているサイトの場所に応じて、CSSファイルでフォントスタイルを宣言します。 この一見単純なテクニックは、開発者によってしばしば無視されます。
.content { font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .title { font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif; } .code { font: 0.8em/1.6 Monaco, Mono-Space, monospace; }
10.開発スニペット
サイトのレイアウトをより正確に整理するのに役立つスニペット。 ブロックの幅を正しく計算できる非常に簡単な例を次に示します。
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
別の便利なツールはclearfixです。これは、異なるブラウザーでレイアウト要素を表示する際の不整合を取り除くのに役立ちます。
.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* IE6/7 support */ .clearfix { *zoom: 1; }
長すぎるURLはページレイアウトを壊す可能性があります。 これを回避するには、次のスニペット（ css-tricks.comを参照 ）を使用できます。これは、OperaおよびIEで8番目のバージョン以下では機能しません。
.break { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .ellipsis { width: 250px; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; /* Required for IE8 */ -o-text-overflow: ellipsis; /* Required for Opera */ text-overflow: ellipsis; }
preタグでテキストを折り返す：
pre { white-space: pre-wrap; /* Chrome & Safari */ white-space: -moz-pre-wrap; /* Mozilla since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
11.印刷用のページの準備
コンテンツを白黒で翻訳し、下線リンクを表示し、その横に括弧でURLを表示します：
@media print { * { background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ } a { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href="#"], a[href="javascript:"] { content: ""; } }
<!-- SVG version of grayscale filter: desaturate.svg --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>
使用した材料：