この記事には、サイトの開発プロセスを高速化し、レイアウトを最適化するのに役立つ、有用で「正しい」スタイルとスニペットが含まれています。
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> </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%; } 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 { float: left; } .float-right { 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; } .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; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
preタグでテキストを折り返す：
pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
11.印刷用のページの準備
コンテンツを白黒で翻訳し、下線リンクを表示し、その横に括弧でURLを表示します：
@media print { * { background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: Gray(); filter: url('desaturate.svg#grayscale'); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } a { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href="#"], a[href="javascript:"] { content: ""; } }
<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>
使用した材料：