コンテンツ
- レイアウト
- Clearfix
- ボックスサイジング
- 複数列
- 計算
- スタイル
- 透明性
- フィルタ
- 画像置換
- レスポンシブビデオ
- 機能性
- 簡単に要素を選択
- 新しいアレイの作成
- ドキュメントとウィンドウオブジェクトをクリーンアップする
- これが好きですか？これらを読んでください！
この記事は、ウェブデザイナーと開発者向けの世界で最も売れている雑誌である.netマガジンの234号に最初に掲載されました。
テクニックは、基本的にタスクを実行する方法であり、フロントエンドの開発者および設計者であるため、多くのタスクがあります。とはいえ、この風景がどれだけ変わったかを忘れることがよくあります。 2002年から2010年にかけて、私たちのコミュニティはコードとリソースの肥大化で腐敗し、パフォーマンスと保守性を妨げていました。これを克服するために、私たちは「テクニック」と呼んだたくさんのヒント、トリック、ハックを作成しました。最も効率的な方法ではなく、まだタスクを実行していました。
360を実行することで、過去数年間でより優れた標準と標準の実装が実現し、コミュニティとしてより新しく、より高度な「技術」を開発できるようになりました。この新しい風景は、「現代のウェブ」と見なされているものです。
「Web2.0」が停滞して混乱するようになると、「最新のWeb」も停滞して混乱します。時間をかけてください。とは言うものの、今のところ、それが何を表しているのかについて共通の理解がある限り、この用語を使用して乱用することができます。
2010年にHTML5仕様が発表され、まったく新しい、半標準化されたWeb環境が提供されました。 Opera、Firefox、Chrome、Safariなどのブラウザはこの新しい波を受け入れ、開発チームを標準実装とAPI探索の新しい限界に押し上げました。これらのブラウザがどのように「オンボード」であるかを理解するには、HTML5サポートの変更に関するwww.html5readiness.comの視覚化を確認してください。
InternetExplorerでのサポートの欠如について心配する必要はありません。 GoogleChromeフレームのおかげでこれと戦うことができます。グーグルが2010年にそれを導入して以来、それはInternetExplorerの頼りになるサポートメカニズムになりました。 IEのすべてのバージョンをChromeフレームでターゲットにできます。これにより、新しいユーザーは、IE内で軽量バージョンのChromeを使用してオプトインされたウェブサイトをレンダリングするプラグインをダウンロードするように求められます。 Chromeフレームを実装するには、サイトのhead>タグ内に次のmeta>タグを追加します。
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
ここから、JavaScriptを使用して、プラグインをダウンロードするようIEユーザーに求めることができます（まだインストールされていない場合）。
スクリプトtype = "text / javascript" src = "http：// ajax。
googleapis.com/ajax/libs/chrome-frame/1/CFInstall。
min.js "> / script>
スクリプト>
window.onload = function（）{
CFInstall.check（{
モード：「オーバーレイ」、
宛先：「http://www.yourdomain.com」
});
};
/ script>
プラグインのインストール後にユーザーを特定のリンクに送信するように宛先を設定できます。注意点：Chrome Frameは、真に最新のブラウザ向けに厳密に開発する方法を提供しますが、ユーザーが望まない場合はプラグインをダウンロードしないオプションがあることを忘れてはなりません。そうでない場合で、IEの1つまたは他の異なるバージョンのサポートを提供する必要がある場合は、クロスブラウザーで提供できるものとできないものを見つけるためにもう少し時間を費やす必要があります。.
このコードは、最新のWebスタックで開発するためのかなりレベルの高い競技場を提供するため、安心して前に進むことができます。サイトを正しくクロスブラウザに構造化するためにブラウザ固有のハックをいくつか作成したり、スライスした画像で使用する空の要素を無数に作成したり、過度に冗長または冗長なJavaScriptコードを記述して取得したりする必要があることを覚えているかもしれません。動作する最も単純な機能。これらすべての痛みは、ある意味で、今日私たちが心配しているのと同じ問題です。私たちは、レイアウト、スタイル、機能性と戦うためのより多くの制御とより良いツールを求めてまだ戦っていますが、成熟したレベルにあります。
レイアウト
Clearfix
フローティング要素はCSS2.1で導入されましたが、私たちが望んでいた完全なソリューションであるとは決して言えませんでした。最大の問題の1つは、子要素がフロートされたときに親要素の寸法を維持することでした。これに対処するために、clearfixテクニックが作成されました。
次のHTMLを使用します。
div>
div> ... / div>
div> ... / div>
/ div>
このテクニックはNicolasGallagherによって書かれました。
.clearfix：before、
.clearfix：after {
コンテンツ： "";
表示：テーブル;
}
.clearfix：after {
明確：両方;
}
.clearfix {
*ズーム：1;
}
HTML5Boilerplateを使用してプロジェクトを開始する場合は、このバージョンのclearfixテクニックがすでに組み込まれています。
ボックスサイジング
何年もの間、開発者はどのボックスモデルの実装がより理にかなっているのかを議論していました。 Quirks vs Standardsモードは、実際には、「設定後、境界線とパディングが適用されたときに要素の寸法が変更されるべきかどうか」を意味していました。
境界線とパディングが要素内の使用可能なスペースから離れ、要素の幅や高さを増やさない方が理にかなっていることが今では広く合意されています。ボックスサイジングの広範な実装とは無関係に議論が行われています。ブラウザは、その逆ではなく、あなたからキューを受け取ります。
ChrisCoyierとPaulIrishによって普及した、包括的な手法は、次の方法で実装できます。
* {
-webkit-box-sizing：border-box;
-moz-box-sizing：border-box;
ボックスサイズ：border-box;
}
CSSで *セレクターを使用することは、パフォーマンスに影響を与える可能性があるため、議論されてきました。ウェブサイト/アプリの他のすべての側面を過度に最適化していない場合、これらの種類の主張は取るに足らないものです。 border-boxを使用すると、ブラウザは使用可能なスペースセット内にパディングと境界線を追加します。 「標準モード」は、ボックスサイズをコンテンツボックスに設定することで使用できます。
複数列
ウェブは、書かれたフォームとタイプに大きく影響を受けました。残念ながら、私たちは羊皮紙の段階で立ち往生しました。これらの問題のいくつかは、待望のページドメディアおよびCSSリージョンの仕様で頭に浮かびます。とはいえ、ブラウザがCSSマルチカラムの実装を開始したとき、より雑誌のようなレイアウトに向けた最初のステップが実行されました。この効果を生成するコードはかなり単純です。
p {
-webkit-column-count：2;
-moz-column-count：2;
列数：2;
}
A List Apartのブログから、CSS3の複数列の仕様、およびサポートなしで任意のブラウザーに使用できるJavaScriptフォールバックについて詳しく知ることができます。
計算
寸法の計算は難しい場合があります。昔は、混合単位計算はもちろんのこと、どんな種類の単位計算もする方法がありませんでした。 calcのおかげでそれはすべて変わりました。初期要素の幅に影響を与えない、またはbox-sizing：border-box;のようなものを利用しないパディング効果を作成します。最近まで、含まれる要素を追加することによってのみ可能でした。
.padded {
マージン：0自動;
位置：相対;
幅：-webkit-calc（100％-（20px * 2））;
幅：-moz-calc（100％-（20px * 2））;
幅：calc（100％-（20px * 2））;
}
calc（）は、.paddedの親幅と、定義された20pxのパディングを差し引いたものに基づいて適切な幅の計算を行います。要素の両側でこれに2を掛け、相対位置と左右のマージンの自動を利用して要素を中央に配置しました。
スタイル
透明性
要素の正しいスタイルを取得することは、CSSで利用できるツールの種類に常に依存してきました。透明性は、2000年代初頭から中期に遭遇する最初のサポートバリアントの1つです。
HTML5の出現とより焦点を絞った標準化の取り組みにより、ブラウザーには不透明度プロパティの標準実装があり、新しいカラーモジュール仕様に従ってアルファチャネルのサポートが公開されています。これには、RGBAおよびHSLAガイドラインが含まれます。
a {
色：rgba（0,255,0,0.5）;
背景：rgba（0,0,255,0.05）;
ボーダー：rgba（255,0,0,0.5）;
}
HEX値が見つかるところならどこでも、RGBAまたはHSLAカラーを使用できます。仕様ですぐに確認できる、定義された名前の楽しい色の拡張リストもあります。これらは、要素間に動的なブレンドを作成する場合に便利です。
フィルタ
CSSフィルターは非常にエキサイティングです。サードパーティのプラグインを必要とせずにページ上の要素のルックアンドフィールを動的に変更できることは素晴らしいことであり、Photoshopで費やす時間を大幅に削減するのに役立ちます。
img src = "market.webp">
img {
-webkit-フィルター：グレースケール（100％）;
}
CSSフィルターは現在WebKitブラウザーでのみサポートされているため、それらの使用は依存的ではなく、付加的な性質のものである必要があります。詳しくはこちらをご覧ください。
画像置換
テキストを画像に置き換えることは長い間行われてきました。残念ながら、最新の最も洗練された画像置換技術には、アクセシビリティの面でまだ欠点があります。しかし、最近、非常に賢く、独自の権利を持つ2つが明らかになりました。最初のものはスコット・ケルマンによって書かれました：
h1 class = ’hide-text’>マイウェブサイトのロゴ/ h1>
.hide-text {
テキストインデント：100％;
空白：nowrap;
オーバーフロー：非表示;
}
2番目はNicolasGallagherによって書かれました：
.hide-text {
フォント：0/0 a;
テキストシャドウ：なし;
色：透明;
}
レスポンシブビデオ
レスポンシブ環境でメディアを正しくスケーリングするのは難しい場合があります。アダプティブデザインを尊重するWebサイトが増えるにつれ、要素の寸法とアスペクト比を適切に処理することが不可欠になります。
埋め込みビデオは、サードパーティのサービスがコンテンツを提供する方法のために、問題を解決するのが難しいメディアタイプの1つです。典型的なYouTubeの埋め込みは次のようになります。
iframe width = "640" height = "390" src = "http：// www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
iframe要素には、Flashオブジェクトまたは埋め込み要素が含まれます。 iframe {maxwidth：100％;のようなものを使用する}は、幅が変更されたときにネストされた要素のサイズが適切に変更されないため、機能しません。だから、私たちはいくつかのトリックをしなければなりません。
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
iframeを別の要素でラップすると、ビデオに適切なレスポンシブ機能を追加するために必要なコントロールが得られます。
.video {
位置：相対;
パディングボトム：56.25％;
高さ：0;
オーバーフロー：非表示;
}
.video iframe、
.videoオブジェクト、
.video embed {
位置：絶対;
上：0;
左：0;
幅：100％;
高さ：100％;
}
.videoラッパーのpadding-bottomの設定：56.25％;この方法の魔法です。パディングを使用するということは、使用されるパーセンテージが親の幅に基づくことを意味します。 「56.25％」は16：9のアスペクト比を作成します。必要に応じて、自分で数学を行ってください。 9/16 = 0.5625。 0.5625 * 100 = 56.25（これは私たちのパーセントです）。
機能性
簡単に要素を選択
多くのJavaScriptライブラリ（jQueryなど）の人気に伴い、ECMAScript委員会とW3C標準は、開発者がネイティブに欠けていた機能のコア部分の1つである優れた要素の選択に注目しました。 getElementByID（）やgetElementByClassName（）などのメソッドは高速でしたが、開発者コミュニティのセレクターエンジンほど柔軟で堅牢ではありませんでした。 querySelectorAll（）は、ネイティブセレクターメソッドでその柔軟性の一部を模倣する標準化団体の方法でした。
var items = document.querySelectorAll（ ’＃header .item’）;
querySelectorAll（）には、複数のセレクターと混合セレクターを渡すことができます。これについてもっと読む。
新しいアレイの作成
配列を反復処理することは、書くのが面倒になっていることです。 for（）ループの作成と書き換えは楽しいものではありません。 JSバージョン1.6では、map（）メソッドがリリースされ、反復して別の配列から新しい配列を作成する簡単な方法がサポートされました。
var people = ['Heather'、 'James'、 'Kari'、 'Kevin'];
var welcomes = people.map（function（name）{
「こんにちは」+名前+「！」を返します。
});
このコードを実行すると、console.log（welcomes）を実行すると、welcomesが新しい配列になります[「HiHeather！」、「Hi James！」、「Hi Kari！」、「HiKevin！」 ]。
ドキュメントとウィンドウオブジェクトをクリーンアップする
サードパーティのJavaScriptライブラリは、ネイティブのドキュメントやウィンドウオブジェクトをいじりがちです。これは、他のサードパーティライブラリ、およびそれらを含む開発者にとって問題になる可能性があります。どちらの当事者としても、オブジェクトの新しいインスタンスを作成して、両方のオブジェクトのクリーンバージョンで作業していることを確認してください。これを行う最良の方法は、iframe要素を作成し、それをDOMに挿入して、それらのオブジェクトの新しいインスタンスを保存することです。
var iframe = document.createElement（ ’iframe’）;
iframe.style.display = "none";
iframe = document.body.appendChild（iframe）;
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild（iframe）;
Webスタックには大きな改善がありましたが、プロジェクトのレイアウト、スタイル、および機能の中で直面する課題に対応するために、テクノロジースイートを完成させ、洗練し続けることは依然として非常に重要です。良好な成長エコシステムを維持するには、標準化団体とブラウザベンダーに、他の開発者や設計者と独自の知識を共有しながら、新しい仕様と革新的な機能の実装を継続して進めるよう奨励する必要があります。より多くの洞察、より少ないハック。
Darcy Clarkeは、受賞歴のある開発者であり、WordPressテーマ会社ThemifyとデイリーディールアグリゲーターDealPageの共同創設者であり、jQueryチームのメンバーです。彼はPolarMobileでシニアUX開発者として働いています。
これが好きですか？これらを読んでください！
- アプリの作り方
- 最高のフリーフォントをダウンロードする
- すべてのクリエイティブに必要な無料のPhotoshopブラシ
- イラストレーターのチュートリアル：今日試すべき素晴らしいアイデア！
- 落書きアートの素晴らしい例
- ブリリアントワードプレスチュートリアルセレクション
- デザイナーのための最高の無料のウェブフォント
- 無料のテクスチャをダウンロード：高解像度で今すぐ使用可能
