30便利なレスポンシブWebデザインチュートリアル
だから私たちは私たちの終わりに達しました 「レスポンシブWebデザインウィーク」, 今夜の投稿はシリーズの最後になります。さまざまなデバイスに表示されたときに、これらのコードを自由に操作して対応するためのスキルを磨く手助けをします。そしてこれをするために、私達は特色にしている 30レスポンシブWebデザインのチュートリアル オンラインで見つかりました。このリストは網羅的なものではありませんが、あらゆる種類の画面サイズに対応するアダプティブWebサイトを設計するための基本を理解するのに役立ちます。.
「Breaking the Ice」で紹介されているチュートリアルから始めましょう。RWD：101クラスのようなもので、概念を理解するために参加してから「Start Building」演習に進むことにします。.
最後に、「その他」セクションで終わります。ここでは、水平レイアウト、「伸縮性のある」ビデオ、ドロップダウンメニュー、スライドからトップへのアコーディオンナビゲーション、サムネール、およびテーブルに関する問題を扱うチュートリアルを紹介します。.
でもまず…
これが、今週初めに著者が紹介した2つのチュートリアルの要約です。
レスポンシブWebサイトナビゲーション
著Thoriq Firdaus - [チュートリアルを見る]
これは、あなた自身のレスポンシブWebサイトナビゲーションを作成するのに役立つチュートリアルです。 Webサイトの最も重要な側面の1つは、サイトのさまざまな部分を簡単に移動できることです。このチュートリアルでCSS3でこれを最適化する方法を学んでください。.
レスポンシブレジュメ
Jake Rocheleau著 - [チュートリアルを見る]
あなたがWebの専門家で、オンライン履歴書がすでにあなたのキャリアの一部であり、小包である場合は、その履歴書も即応可能にする機会を利用するべきです。雇用主やクライアントがどのデバイスでもあなたを見つけやすくします。そしてあなたがそれをしている間、あなた自身の履歴書はあなたが開発者としてできることのポートフォリオとしても倍増します.
氷を壊します
今、どこにいたの？ああ、砕氷行動を起こしましょう!
レスポンシブWebデザイン入門ガイド
ニックプチ - [チュートリアルを見る]
このチュートリアルは、Webレスポンシブデザインが何を意味するのか、それがどのように明るみに出たのか、そして流動的なグリッドやメディアクエリについての説明など、初心者にとってはすばらしい出発点です。チュートリアルの一番下にあるリソースもチェックしてください。.
レスポンシブWebデザインの紹介：ビデオ
ニックプチ - [チュートリアルを見る]
これは、レスポンシブWebデザインの概要、Webサイトのデザインへの影響、レスポンシブWebデザインの作成に関連する要素の概要をまとめた、9分近くのチュートリアルです。 。レスポンシブWebデザインについて、最初にコーディングを行わずに理解したい場合は、このビデオから始めてください。.
Webサイトをレスポンシブサイトにする方法
ロチェスターOliveira著 - [チュートリアルを見る]
これは基本から始まるもう1つのチュートリアルですが、Webサイトをさまざまなデバイスから見たときに影響を受ける要素や、Webサイトに対応しているOSやブラウザなど、すべてを少しずつ細分化します。作者は、作業をはるかに簡単にするために役立つWordPressおよびjQueryプラグインも紹介しました。.
3段階のレスポンシブデザイン
著ニックLa - [チュートリアルを見る]
このチュートリアルでは、メタタグ、HTML構造、そして最も重要なメディアクエリを使ってレスポンシブWebデザインを作成する方法について説明します。理解するにはCSSの知識が必要です…
レスポンシブWeb用の設計
マックス・ルズリアガ - [チュートリアルを見る]
レスポンシブWebデザインを作成するためのガイドなので、ここではそれほどチュートリアルではない記事を紹介します。とは言っても、著者は文字通りあなたにレスポンシブWebデザインのするべきことといけないことを伝えます。特定の機能が十分に反応しない理由、プロポーションやモジュールを扱う方法についての説明があります、そして何よりも、それは比較的短く吸収しやすいです.
レスポンシブWebデザイン：ビジュアルガイド
Andrew Gormley著 - [チュートリアルを見る]
テキストで埋められたチュートリアルが実行可能なオプションではない場合は、代わりにこのビデオチュートリアルを試してください。それはまだかなり技術的ですが、それがあなたが気分を良くさせるのであれば、あなたは多くの読書をする必要はありません。それは約25分の長さであり、ビデオ製作者は実際に彼がコード化する部分を通して早送りし、そしてコードが何をするかを説明するために戻って行きます.
構築を開始
それでは、まずはじめにレスポンシブデザインの作成を始めましょう。
流体グリッド
Ethan Marcotte著 - [チュートリアルを見る]
グリッドを言うと、「硬い構造」と思うでしょう。流動的で、ブラウザに圧力をかけると画面の片側から下または上または横に流れる可能性があると思いますが、これら2つをまとめると流体グリッドがどのようにあなたの設計をより敏感にするのを助けることができるかを完全に理解するためにあなたはおそらくあなたがこのチュートリアルを見る必要があると思うでしょう.
流体画像
Ethan Marcotte著 - [チュートリアルを見る]
この記事の終わりまでに、イーサン・マルコットが誰であるかを知っているはずです。ここにヒントがあります。彼は、Webレスポンシブデザインの概念と用語を思いついた人です。このリストの他のすべてのチュートリアルで彼の名前はほとんど変わりませんので、マスター自身から直接流動的な画像についてアドバイスを受けないでください。?.
レスポンシブWebデザインにおけるスケーラブルなナビゲーションパターン
マイケルメスカー著 - [チュートリアルを見る]
このチュートリアルでは、著者が大規模レスポンシブWebデザインプロジェクトの作業から学んだ教訓について説明します。ユーザーフレンドリーで即応性のある結果を得るための設定が簡単なテンプレートの作成方法についての彼の「チュートリアル」を読んでください。デスクトップ、タブレット、モバイルの各ビューに最適な方法でインターフェースを設計する方法を理解することは、舞台裏の素晴らしい見方です。.
CSS3メディアクエリを使用したレスポンシブWebデザイン
著ニックLa - [チュートリアルを見る]
HTML5とCSS3を使ってクロスブラウザ対応のWebサイトテンプレートを設計する方法を学ぶためのもう1つの優れたチュートリアルです。これは段階的なアプローチであり、メディアクエリの影響をよりよく理解するために、メディアクエリが実装される前後にWebデザインのデモがあります。.
CSSの効果：テキストの高さに合わせてスペースイメージ
Zoe Mickley Gillenwater著 - [チュートリアルを見る]
このチュートリアルでは、ブラウザウィンドウがどのようにサイズ変更されていても、固定幅の画像のサイズと間隔を変えて付随するテキストに合わせるためのコツを学ぶことができます。.
メディアクエリを使用した適応型レイアウト
著アーロングスタフソン - [チュートリアルを見る]
CSSメディアクエリーでアダプティブレイアウトまたはフレキシブルレイアウトを使用する方法を学びます。あなたのデザインをダブルコラムビューまたはシングルコラムビューに適応させることと、iPhoneとiPadのためにデザインを準備することを学ぶためにただ練習に従ってください.
応答画像：文脈を意識した画像サイズ決定の実験
著スコットJehl - [チュートリアルを見る]
これはbuild-from-mobile-firstアプローチを使ったチュートリアルです。この手法では、より大きな画面解像度で使用するイメージのサイズを大きくし、イメージ要求とUAスニッフィングを除いたサイズを指定します。.
もっとやりなさい
エラスティックビデオ
著ニックLa - [チュートリアルを見る]
このチュートリアルでは、ブラウザウィンドウのサイズが変更されたときのビデオの拡大/縮小について説明します。これは本質的にはCSSのトリックであり、チュートリアル自体の中でうまくいくトリックを見るためのデモがあります.
画像の一部の非表示と表示
Zoe Mickley Gillenwater著 - [チュートリアルを見る]
チュートリアルは実際には作者の本から引用したもので、画面の解像度に応じて画像の一部を表示または非表示にする方法を説明しています。画面サイズが変わったときに動的に画像をトリミングする方法を説明します。スペースが限られているときは、フル画像の一部だけを表示します.
CSS3を使ったレスポンシブコンテンツナビゲータ
メアリールーによって - [チュートリアルを見る]
ユーザーが自分の側をナビゲートするための空想的な方法を好みますか？それから、このチュートリアルを読んで、フェードイン、スライド、回転、拡大など、いくつかのクールなトランジションでコーディングする方法を学ぶ必要があります。トランジションは基本的に特定のコーディングで表示または非表示にされたコンテンツレイヤーです.
レスポンシブWebデザインテンプレートを作成する
ハリーアトキンス - [チュートリアルを見る]
これはレスポンシブを作成するための短いチュートリアルです。 Webテンプレート これはデスクトップとiPhoneの両方で機能します。.
レスポンシブ水平レイアウト
メアリールーによって - [チュートリアルを見る]
このチュートリアルでは、スクロール可能な複数のコンテンツパネルを使用して水平レイアウトを作成する方法について説明します。を使う 種の起源 サンプルテキストとして、本の各章はフルブラウザモードで互いに隣接して配置された列に分けられていますが、十分に小さく縮小されると、レイアウトは完全に垂直方向にスクロールする「本」に変わります。.
小さい画面用のメニューをドロップダウンに変換する
著クリスCoyier - [チュートリアルを見る]
このチュートリアルでは、ブラウザウィンドウが狭いとき、またはモバイルデバイスを使用しているときに、メニューをドロップダウンリストに変換する方法を説明します。ページの右上隅にあるリンクの行は、ナビゲーションオプションを犠牲にすることなくスペースを節約するためにドロップダウンメニューに変換されます。.
柔軟なスライド対アコーディオン
メアリールーによって - [チュートリアルを見る]
スクリーンサイズと解像度に基づいてフェードイントランジションと調整可能な幅で、シンプルで柔軟なアコーディオンレイアウトを作成する方法を学びます.
CSS3オリエンテーションメディアクエリーの使い方
著ライアンセドン - [チュートリアルを見る]
縦（横よりも縦の高さ）と横（縦よりも横の幅）のモードを定義する単純な規則に基づいて、表示するモードに基づいて特定のスタイルをターゲットにするメディアクエリーを作成できます。このチュートリアルではそれを行う方法を説明します。ブラウザウィンドウを縮小するときに色を使用して色を変更する色変更カメレオンへのリンクもあります。.
応答データテーブル
著クリスCoyier - [チュートリアルを見る]
小さな画面サイズになるとテーブルは頭痛の種の原因となりますが、それはテーブルを完全に避ける必要があるという意味ではありません。モバイル画面サイズに切り替えたときに、メディアクエリを使用してテーブルのフォーマットを完全に変更する方法を学びます。このチュートリアルに基づいて作ることができる魔法のアイデアを得るためにデモを見てください.
視差効果のある流体CSS3スライドショー
リングウィング - [チュートリアルを見る]
背景画像を2つ使用し、背景の位置を変更すると、視差効果が見られるCSS3スライドショーを作成します。それとは別に、スライドショーは柔軟性があり、ブラウザウィンドウが閉じるときにサイズを変更します。.
レスポンシブサムネイルギャラリーを構築する方法
Joshua Johnson著 - [チュートリアルを見る]
これは、ギャラリーにサムネイルを表示するWebサイトに最適です。ブラウザウィンドウのサイズが変更されると、レイアウトは2列（小さい画面サイズ）と5列（最大）の間に収まるように変更されます。より類似したスライドショーやスライダーについては、トップ10無料のレスポンシブ画像ギャラリー/スライドショーの記事をご覧ください。.
モバイルデバイス用にあなたのEメールを最適化する
By Ros Hodgekiss - [チュートリアルを見る]
Webサイトのように、電子メールでも小画面表示に最適化できます。ほとんどの場合、HTML形式の電子メールのテキストは、読みやすいように作られていないポイントにサイズ変更されています。このチュートリアルから、これ以上の管理方法を学ぶ.
フレームワークを使う
スケルトンを使ってレスポンシブなモバイル向けWebサイトを構築する
Joshua Johnson著 - [チュートリアルを見る]
スケルトンはそれを使用してレスポンシブWebサイトを構築するための素晴らしいフレームワークです。このチュートリアルでは、スケルトンフレームワークを使用して優れたレスポンシブデザインを構築する方法を段階的に説明します。実装するのがどれほど簡単かを見るとうんざりします。.
HTML5とLess Framework 3を使ったレスポンシブWebデザイン
ルイシモノー - [チュートリアルを見る]
Lessを正しく紹介していないのであれば、まずLessのCSSチュートリアルをチェックしてLessの趣味を確認してください。このチュートリアルでは、Lessフレームワークを使用して、メディアクエリの効果を明確に確認できます。.
結論
そしてそれが私たちの結論です レスポンシブWebデザイン シリーズ。このシリーズで取り上げたテーマ、ツール、その他のリソースが、レスポンシブWebデザインの概念を読者に公開するのに役立ったことを願っています。あなたが私達に言わないのであればしかし、どのように私たちは知っているだろう?
ご意見をお聞かせください シリーズについては、あなたがより多くのアイデアのための提案があればあなたがhongkiat.comで見たいです。以下の行、またはコメントをください。.
