レスポンシブなウェブサイトを作成するにはどうすればよいですか?変身させろ！ ▷➡️ Postposmo

レスポンシブウェブサイトを作成するには？ ここでは、今日のWebモデルに基づいたこの適応手法に関する情報を取得できます。つまり、単一の設計で、任意のコンピューターまたは電子デバイスからWebポータルに正しくアクセスして表示できます。

¿レスポンシブウェブサイトの作り方?

ウェブサイトを可能な適応に反応したり敏感にしたりすることは非常に便利です。あらゆる電子プラットフォームからインターネット上で正しく動作することの成功を保証することに加えて。次の行では、レスポンシブWebを作成する方法を明確にしています。これは、Webページの適応性の本質から考えられています。したがって、レスポンシブモデルでウェブページをデザインする場合、ナビゲーションに使用する電子機器に応じて、ウェブの外観や画像を調整して見ることができます。

コンピューター、タブレット、スマートフォン、ラップトップなど、インターネットをナビゲートするために現在存在するさまざまな量の機器や電子機器に気付いている人は誰もいません。インターネットの初期の頃、ウェブサイトの開発者は、一般的なピクセル幅のページを作成することに慣れていました。たとえば、90年代には、既存のモニターの単一画面サイズは14インチで、固定幅は640ピクセルでした。 Webページの設計者は、存在する唯一のモニターの標準寸法にデザインを適合させました。

2000年の初めに近く、2010年代に入るまで、モニターモデルとピクセル幅はさまざまでした。ウェブデザインはそれぞれのバリエーションに合わせて調整されました。大きな技術革命が起こり、ウェブページのデザインシナリオに不均衡が生じたのは2010年からでした。インターネットの分野では、携帯電話によるナビゲーションが導入されました。この新しいテレフォニーは、コンピューターと同じようにブラウザーを使用していました。この大きな技術革命により、Webページのレスポンシブデザインまたはアダプティブデザインとして知られるものに進む時が来ました。

レスポンシブウェブの作り方を知ることの重要性

Webページの開発者がレスポンシブWebの作成方法を知っていることは非常に重要です。インターネット上で名声のあるグーグル社でさえ、それが非常に必要なものであると示していること。レスポンシブモデルで設計されたWebページはナビゲーションの最適化を可能にし、コンテンツの重複を回避し、非常に安定した画質を提供します。レスポンシブウェブサイトを作成するときに重要なその他の側面は次のとおりです。

ハイパーテキストマークアップ言語（HTML）とCSS言語を単一に適応させることで、あらゆる画面解像度をカバーすることができます。したがって、デバイスにアクセスしたり閲覧したりできるデバイスの種類ごとにWebページを作成する必要がなくなります。この側面により、設計時間も短縮されます。
ブラウジング時に自動的に適応し、特定の訪問ごとに読書と対話を可能にします。
彼らはなんとか検索エンジンで彼ら自身をより良くそしてより速く位置づけることができます。このタイプの設計は重複とリダイレクトを回避するためです。
このデザインで作成されたWebページは、独自のシンプルな共有方法により、コンテンツをより迅速に広めることができます。

レスポンシブウェブデザインとは

レスポンシブウェブデザインは、アダプティブウェブデザインとも呼ばれ、ウェブページをデザインまたは開発する方法です。このシステムは、単一の設計で作成されたWebサイトに、任意のコンピューターまたは電子プラットフォームからアクセスまたはアクセスできるようにするという特殊性を備えています。レスポンシブという名前は、レスポンシブ、適応性、知覚可能、目に見えるなどの何かを指す英語の用語です。

このタイプのWebサイトは、各画面幅の測定値に合わせて調整できるため、この手法にはこの名前が付けられています。ナビゲーションに使用するデバイスを区別することなく、表示と正しい操作を可能にします。

これは、画像とコンテンツの整理、およびレスポンシブWebメニューのシンプルさのおかげで可能になります。このタイプのWebページデザインを定義して非常に人気のあるものにするXNUMXつの主要な修飾子は、次のとおりです。

シンプル
経済的
速い
そして何よりも、それらは完全に機能しています

レスポンシブデザインWebの作り方とその複雑さ

ウェブページのデザインと開発に関する複雑さは、ナビゲーション付きの携帯電話がインターネットシーンに登場し始めた2010年代から現れたと言えます。 PCのように、Google、Firefox、Explorerなどのブラウザを使用していました。このようにして、さまざまなWebサイトにアクセスする新しい可能性が生まれます。これらの時代に、インターネットにアクセスできる最初の電子タブレットも登場し始めました。

そこから、Webページのデザインの必要性はより複雑になりました。ウェブサイトの表示と操作のために存在した多種多様な画面サイズのため。どのタイプのデバイスでも機能するタイプのデザインを見つけて、自動的に調整する必要がありました。

XNUMXつ、XNUMXつ、またはXNUMXつの主要な画面解像度用に設計することはできなくなりました。コンピュータモニターよりもはるかに小さいことに加えて、デバイスの解像度がますます変動することを理解する必要がありました。

この瞬間は、ウェブデザインの剛性の終わりを示しました。また、多種多様なデバイスだけでなく、それぞれに次のような特定の特性があります。

画面サイズ
画面解像度
CPUパワー
OSの
とりわけメモリ容量。

次に、新しいWebデザインモデルが導入されます。その目的は、単一のデザインで、ブラウジングデバイスに関係なく正しい視覚化が可能になることです。ただし、このタイプのWebサイトの開発には、ある程度の複雑さがあります。

レスポンシブWebの開発が複雑になる理由は何ですか？

レスポンシブと呼ばれる適応性の設計の下でWebサイトを開発することは、今日でもその程度の複雑さを持っています。以下に示すXNUMXつの主な原因によるものです。

1-これは長い間開発されていない技術であり、複数の適用手段があるため、すべてのオプションの中でどれが最良であるかを判断することはできませんでした。この種のウェブデザインに関しては、常に革新が生まれており、常に開発されています。したがって、最適なフレームワークやサポートテクノロジーを決定することも、考えられる障害の最大数に対する解決策を保証する一般的なルールを決定することも困難です。このタイプのウェブサイトの開発をより簡単にするために。

2- XNUMXつ目の原因は、適応設計システムが技術的な観点だけに基づいているわけではないことです。方法については、画面やデバイスによってサイトが異なります。むしろ、考えられる各ナビゲーションシナリオでどのように機能するかを考えて設計する必要があります。この原因により、レスポンシブWebデザインモデルが高度に複雑になり、サイト開発者として働く人々によってクリアされます。

アダプティブまたはレスポンシブWebデザインを操作するのに十分なスキルを行使して習得するには、他のタイプのWebデザインよりも時間がかかります。しかし、コンピューティングの進歩に伴い、複雑さの程度が少なくなることが期待されています。この点でさらに進化するために、レスポンシブデザインのタイプに関与するウェブサイトの知識を持つスタッフから、次のような専門スタッフがいます。

レイアウト
デザイナー
プログラマー
コマーシャルおよびデジタルマーケティングスタッフ

設計時間を短縮する

前のXNUMXつの原因が解決されれば、おそらくこれによりレスポンシブWebの開発または作成の期間が短縮されます。同時に、通常のウェブサイトで利用できるようにすることも可能です。

一方、現在のところ、モバイルデバイス用の新しいWebデザインを最初から開発する方が速いかもしれません。 Webを変換または再設計して、適応性または応答性を高めます。いつの日か誰かがそれを実行して達成する方法を見つけるという希望は常にあります。それを期待しましょう。

その間、何ができるでしょうか？

私たちがウェブ上に持っているサイト全体を再設計して適応可能にすることはまだ非常に複雑であるという事実。サイトに小さな変更を加えるのをやめるという意味ではありません。それを改善し、さまざまなブラウザやさまざまな電子機器での適応に対応できるようにするため。

最初に行うことは、ナビゲーションサイトのWebデザインの種類を確認することです。主に確認してください：

ウェブサイトのレイアウト
HtmlとCSSの観点からのその構造は何ですか

これらのXNUMXつの基本的なポイントを分析すると、Webサイトを改善するために小さな変更を加えることができることがわかります。

レスポンシブWebの作成方法を知るために考慮すべき以前の考慮事項

通常のデザインで開発されたWebポータル、ランディングページ、またはコンテンツブログが既にあり、レスポンシブまたはアダプティブデザインのWebサイトに変換したい場合。それはただ決断を下し、それを達成するための最初の一歩を踏み出し、それを行う決断をすることです！

ウェブサイトを従来のデザインからレスポンシブに変換するという事実は、元の作業がすべて失われることを意味するものではありません。すべてのコンテンツが破棄されるわけではありませんが、わずかな変更が加えられます。画像、テキスト、および既存のサイトの他の要素などのコンテンツを使用して、変換で正しく機能させることができます。

ただし、サイトを適応させて改善するという選択肢に直面した場合、実施する作業に有利ないくつかの事前の考慮事項を知っておくと便利です。

既存のWebムーブメントを確認する

既存のWebに変更を加える前に、Webが持っているトラフィックを確認することをお勧めします。つまり、Webサイトにアクセスした人の数に関する統計です。この情報に基づいて、より大きな成功とより良い検索ポジショニングを実現するために、デザインの変更に取り組みます。 Webの再設計と適応では、次のことを知っておくと便利です。 SEOツール、ネットワーク内でより良いポジショニングを取得する場合に最適だからです。

良いインスピレーションが必要です

見て、作ることもお勧めします競合他社の分析または、レスポンシブWebデザインへの変更が適用されるWebサイトに類似したコンテンツを含むページ。このプレビューは、コンテンツの改善の可能性について調査を行うことを目的としています。しかし、それらの類似したページが異なるデバイスでどのように機能するかも。インスピレーションや改善のモデルとなる可能性のあるサイトを選択するために考慮すべき側面。これらのページや、ズームやスクロールの必要性が少ないページでのナビゲーションが簡単になります。ここでは、のための最高のトリックを見つけることができます SEOを改善する良いコンテンツを実現するためにそれらを適用してください！

セマンティックHTMLを支持

セマンティックHTMLの使用は、元のWebサイトのレイアウトが正しく確立されたことを示します。必須のHtml要素のみが使用されたため、これは非常に役立ちます。 Webの開発では、同じWebのデザインの上にある各タグのセマンティクスを念頭に置いてください。クラスとIDに応じて、CSSに設計の独自の作業を任せます。

レスポンシブウェブサイトを作成する方法の過程で、次のような要素があります。

DIV
P
UL
LI、とりわけ

ただし、モデルの設計全体を省く手順に従う必要がある場合。煩わしいCSSは使用できないため、つまり、コード内でStyle属性を使用しないでください。より洗練され、より少ないDIVで、Htmlは、適応の実行を容易にしたり、Webの感度を高めたりするのに役立ちます。得られた結果でCSSが強化されるためです。

レスポンシブウェブサイトを作成する方法について、ズームを適切に設定します

Webサイトを完全に表示するには、モバイルブラウザのズームインを適切に選択することをお勧めします。レスポンシブウェブデザインの開発が始まる前は、モバイルデバイス上のブラウザがすでに存在していました。これらのデバイスでWebサイトを完全に表示するには、ブラウザはズームツールを使用する必要があります。したがって、モバイルデバイスから従来の設計のWebサイトにアクセスする場合。携帯電話の自然な解像度は表示されませんが、960ピクセルの幅に調整されるまで、ズームツールによって実行された適応が表示されます。

他に方法がなかったため、開発者はズームの変更または調整を実行するHtmlを作成していました。このようにして、デバイスで解像度の調整を実行するときに、チームに別のタイプのスケーリングを使用するように指示する必要があります。使用するのに適したタイプは、Webサイトのヘッドに入力されるビューポートと呼ばれるメタタグです。このメタタグを使用すると、変換されたWebでブラウザが実行する手順を詳しく説明できます。逐語的に書かれた次の構文を参照してください。

ビューポートメタタグのこのシンボリックレイアウトは、レスポンシブWebデザインで最も頻繁に使用されるものです。ただし、この目的に使用できる構成は他にもたくさんあります。提示された構文には、モバイルブラウザをWebに適応させるXNUMXつの変数が含まれているだけで、その逆はありません。これらの変数は次のとおりです。

デバイス-デバイスの幅または幅

画面のピクセル単位の幅がモバイルデバイスの幅と一致するように、変数width=device-widthが構成に含まれています。このようにして、モバイル自体の解像度が表示されます。

可能な限り最高の使用法を提供するために、モバイルブラウザはデスクトップ画面の幅に似たページを表示します。この幅は、モバイルデバイスによって異なる場合があります。しかし、多くの場合、それは約980ピクセルのXNUMXつです。続いて、フォントサイズを拡大し、デバイスの画面に合うようにコンテンツのスケールを変更することで、コンテンツの外観を最適化しようとします。

これにより、ユーザーはそれがやや一貫性がないか混乱していることに気づき、コンテンツを操作するためにズームインするためにダブルタップする必要があります。ビューポートメタタグ変数を利用する：width = device-widthは、幅を調整するためのレイアウトに対するアクションを要求します。ページが小さな携帯電話に表示されているかPCモニターに表示されているかにかかわらず、ページがさまざまな画面サイズに合うようにコンテンツを再調整できるようにします。

初期スケールまたは初期スケール

initial-scale =変数は、デバイスに応じてCSSピクセルとモバイルピクセル間のリレーショナルスケールを決定するために構成に含まれています。上記の構成では、初期スケールとして示されています：initial-scale=1.0。ここでの構文は、ピクセル間の比率が1：1であることを示しており、CSSピクセルがデバイスピクセルに読み取られます。次に、この値をズームに採用するようにモバイルブラウザに命令が出され、デバイスで使用される値になります。ただし、次のXNUMXつのオプションを見てみましょう。

初期スケール変数が1.0の場合、XNUMX対XNUMXであるため、ズームなしの表示を指します。
一方、initial-scale = 2.0の場合、変数はページ全体でそのサイズのXNUMX倍に拡大されたズームを参照します。

したがって、携帯電話の幅に合うように設計されたWebサイトで使用する適切なオプションが最初になります。これは、ズームを適用しないようにデバイスに指示します。ただし、この変数を含めたり適用したりしないことが最善のオプションとなる場合もあります。このようにして、同じ携帯電話が、デザインで示されている幅にズームを独自に適応させる携帯電話であることに変わりはありません。

基本的なビューポート構成–アプリケーション例:

幅が500ピクセルで、初期スケールコマンドが指定されているかどうかに関係なく、Webは500ピクセルの画面幅のように見えます。ただし、モバイルでは、元の構成がWebの合計320ピクセルの500ピクセルとほぼ同等の比率で表示されます。

一方、初期スケールの順序が指定されていない場合は、調整されたズームの下でWeb全体、つまり500ピクセルが表示されます。ビューポートタグのこれらXNUMXつの一般的な構成の構文は、テキストでは次のようになります。

以前の構成は、モバイル解像度に適切に適合されたレスポンシブデザインのWebサイト用です。モバイル解像度に完全に適合していないWebサイトの場合、構成は次のようになります。

典型的なものに加えて、いくつかの他の構成があります。そのXNUMXつは、ズームを適用して、モバイルの幅でWebサイトを設計することです。しかし、このタイプのデザインは、ユーザーにとって非常に奇妙で混乱を招くでしょう。

レスポンシブウェブサイトの作り方–メディアクエリ

レスポンシブウェブサイトやアダプティブページの作成方法を知りたい場合は、メディアクエリと呼ばれるシステムを適用する必要があることを知っておく必要があります。この手法を使用すると、画面の解像度に応じて、条件によってさまざまな形状やスタイルを確立できます。しかし、メディアクエリとは何ですか？

メディアクエリ

メディアクエリは、CSSセンテンスを確立することで構成される手法です。すでに与えられている、または確立されている特定の条件が満たされている限り、Webデザインに適用可能なステートメントを作成できます。これらのメディアクエリステートメントは、基本的にWeb上のXNUMXつのポイントに適用できます。

まず、CSSファイルの呼び出しで、ファイルをロードするための条件をそれぞれに指定します。例：

次に、同じCSSファイルで、使用するCSS分数が含まれる別のスペースを確立します。例：

@media screen and（min-width：320px）and（max-width：480px）{

/*この幅の範囲のスタイル宣言*/

実際、メディアクエリは、レスポンシブWebデザインを離れて、Web内の他のさまざまな問題に取り組む可能性を可能にする強力なツールです。後で文書化する価値があります。メディアクエリのこの手法についてもう少し詳しく説明します。

一方、今のところ、メディアクエリシステムについてXNUMXつのポイントを知っていれば十分です。

CSSファイルでメディアクエリの宣言を行う方法
昔ながらのインターネットブラウザへのメディアクエリ技術の寄付で更新する方法

メディアクエリ宣言

前の段落では、メディアクエリを実行するXNUMXつの方法を観察することができました。 XNUMXつ目は外部スタイルページで、XNUMXつ目はスタイルページに直接書き込む方法です。

レスポンシブウェブデザインを作成する方法のコンテキストでは、メディアクエリは、モバイルの測定値または値に基づいて別のスタイル宣言をいつ行う必要があるかを認識するためのインジケーターとして使用されるCSS宣言であることを理解する必要がありますまたは、Webが表示される別のデバイス。

たとえば、メディアクエリによって定義された条件内にあるCSSフラクションを宣言する方法には、次の構文構成があります。

@media screen and（[CONDITION]）{

/*この画面幅以下の新しいルール*/

}

同様に、画面の幅に応じて、XNUMX種類のメディアクエリステートメントを生成できます。このようにして、それぞれの場合にアプリケーションを確認できます

-最初の宣言は、ピクセルの幅=X未満の解像度にのみ適用されます。

@media screen and（max-width：[WIDTH] px）{

/*この画面幅以下の新しいルール*/

}

-XNUMX番目の宣言は、ピクセルの幅=Xより大きい解像度にのみ適用されます。

@media screen and（min-width：[WIDTH] px）{

/*この画面幅以上の新しいルール*/

}

-XNUMX番目の宣言は、XとYの間に定義されたピクセルの範囲の間に幅がある解像度に適用されます。

@media screen and（min-width：[WIDTH X] px）and（max-width：[WIDTH Y] px）{

/*この画面幅以上の新しいルール*/

}

XNUMXつのうちどれですか？

決定は開発者の好みに基づいて行われます。ただし、上記の最初のメディアクエリステートメントを適用するのが一般的です。累積的に適用することをお勧めします。幅が狭くなるたびに、デザインの要素が変更されるように。

メディアクエリをInternetExplorerと互換性のあるものにする

Internet Explorerは、Web上に存在する最初のブラウザのXNUMXつでした。したがって、このブラウザは、ネットワークユーザーが頻繁に使用する多くのシステム、パラメータ、または手法をサポートしていないか、互換性がない可能性があります。しかし、Web開発には多くの技術スタッフがいて、イノベーションの探求に完全に関与しています。これらの古いブラウザを有効にして互換性を持たせるためのさまざまなライブラリを作成しました。

互換性のあるバージョンをInternetExplorerの9番未満にするため。次のJavaScriptライブラリを適用しているだけです：css3-mediaqueries-js。

次のスクリプトをWebサイトの先頭に配置することで、不便を感じることなくメディアクエリを処理できるようになります。

得られた結果は最も完璧ではないかもしれませんが、それは一般的にかなりの程度の互換性を可能にします。

レスポンシブウェブサイトの作り方–基本的なデザイン

ウェブサイトを適応させて変換する方法はいくつかあるかもしれませんが、レスポンシブウェブサイトには現在、XNUMXつの基盤またはデザインコンセプトの形式があります。以前は、開発者のプレビューが、これらのデザインに適用するためのいくつかの新しい詳細とともに表示されていました。これは、固定または固定として特徴付けられるWebサイトを開発する習慣に由来します。レスポンシブで設計されたウェブサイトに移動するには、その剛性の特性を変更します。

今日、あなたはあなたがウェブを閲覧することができる無限の電子機器を見つけることができます。そして時間の経過とともに量は大きくなります。 Webサイト開発者は、これらのWebサイトがこの幅広いデバイスに正しく適応できることを要求します。

作業を簡素化するための基本設計

レスポンシブデザインのタスクを簡素化するXNUMXつの方法は、それらに取り組む方法を知るために、それらをXNUMXつの基本的なグループに分割または分類することです。これらのXNUMXつの大きな資格グループは次のとおりです。

大画面：ウェブサイトに十分なスペースがあり、不便を感じることなく完全に表示できるようになっています。
古い画面または小さい画面：Webが完全な視覚化に十分な幅を見つけられない、つまり、画面のフレームに収まらない。不快な下のバーも表示されますが、コンテンツをさらに少なく表示することはできません。
モバイルデバイスの画面：Webは、これらのデバイス上に非常に小さなスペースを見つけるため、一般的なデザインでのみ、そのコンテンツの情報を読み取ることができます。

したがって、Webサイトの元のデザインとレイアウトを、使用可能で実行可能な更新されたものに変換したい場合。必要なのは、これらXNUMXつの基本グループを解決することです。解を得るのが難しい程度は、一般に、モデルがどのように定式化されているかによって異なります。しかし、一般的に、今日のテクノロジーでは、Web上でいくつかの変更を行うことができます。

大画面用のレスポンシブWebを作成する方法–ソリューション

このベースポイントでは、通常、大きな問題はありません。 Webはこれらの大画面フォーマットで表示されるように設計されているためです。現在の標準では、Webサイトは960ピクセル単位の画面幅の中央フレームに基づいています。ズームを調整して携帯電話にロードすると、ほとんどの携帯電話に正しく収まるようになっています。しかし、古いWebサイトの場合、そのピクセル幅の中央フレームは、おそらく1024ピクセルの幅の画面用に設計されています。いずれの場合も、この基本グループでは、次の構文で示されるようにコンテナーを使用するのが妥当です。

#main {width：960px; マージン：0自動; }

この構成は、Web中心の「メイン」コンテナーの設定をサポートします。このコンテナに加えて、さまざまな背景を追加して、Webの外観を豊かにすることができます。白黒ページをできるだけ避けるために、そのデザインを少し開発します。

要するに、このレベルの大画面では、Webを変換するために多くのことは行われていません。大画面で短距離のテレビから見たいというWebユーザーもいる可能性がありますが。

これらのケースでは、モバイルベースグループのように大きな変更を加える必要があります。しかし、通常、テレビを使用してナビゲートする人は多くないため、開発者は通常、これらの適応に多くの時間を投資しません。それでもこのタイプの適応に取り組みたい場合は、以下に示すように、モバイルグループで適用されるものと同様の規制を確立することをお勧めします。

小さな画面用のレスポンシブWebを作成する方法–ソリューション

この基本的な設計グループから、適応されるWebの変換の複雑さが始まります。シナリオは、特定の画面幅で動作するように作成された次のページです。実際、その幅に調整されたコンピューターから多くの人が訪れます。しかし、Webにアクセスするためのデザインの解像度よりも低い解像度のデバイスを使用している、考慮すべき人の割合も非常に高くなっています。

この分類グループでは、画面解像度がデザインよりも低いデバイスをモバイルデバイスから分離する必要があります。さて、これらのケースはXNUMX番目の設計ケースで分析されます。したがって、小画面デバイスが終了するポイントとモバイルデバイスが開始するポイントの明確な定義から開始する必要があります。

同様に小さな画面の場合、元のWebサイトの解像度を下げて、それらのデバイスに適合させる必要があります。この減少が、行き過ぎずに、どの程度実行されるのかが明確でなければならないということだけです。多数の要素が小さな画面に集まらないようにして、ウェブの外観を減らします。

制限を設定するために必要な情報

モバイルデバイスからの情報は以下で共有されます。これは、モバイルデバイスになるために、小さな画面でなくなるときの限界を確立することになると非常に重要になります。これにより、決定が容易になります。

モバイルデータ:

最も頻繁に使用される形式である垂直方向に使用されるモバイル。通常、320ピクセル幅の解像度を採用しています。
水平位置では、モバイル解像度はデバイス画面の実際のサイズに調整されます。この解像度は通常、幅が400〜600ピクセルです。
一方、タブレットでは、解像度はデバイスによって異なります。一般的に、ベストセラーモデルの統計を考慮すると、解像度は約600ピクセル幅です。 1024ピクセル幅にも到達できます。

画面幅の制限

上記の情報によると、この分類のレスポンシブWebデザインで採用される最大の標準幅制限は、最大400ピクセルの幅です。この幅の測定から、ウェブの視覚化の変化を大幅に開始する必要があり、その基本的な操作には特定の変化があります。

ただし、一部の開発者は、この制限を600ピクセルの幅に設定しています。この解像度から作成し、小さな画面とモバイルデバイス間の中間的な適応。

下限側では、最大320ピクセルの最小画面幅を採用するように設定されています。いずれにせよ、これらの与えられた制限よりも大きい範囲を確立するのはWeb開発者次第です。ただし、すべての小画面デバイスをカバーすることはお勧めできません。

小画面ソリューションの主なナビゲーションスタイル

小画面のアダプティブソリューションでは、少なくともこれらXNUMXつの主要なナビゲーションスタイルをキャプチャするだけで十分な場合があります。以下にリストされています：

垂直方向に使用されるモバイルデバイス：この場合、デバイスの画面では、320〜400ピクセルの解像度範囲で確立された、非常に単純化された読み取りとナビゲーションのみが可能です。
水平方向に使用されるモバイルデバイスとタブレット：この場合、従来の水平表示はすでに実現できます。ただし、ナビゲーションはクリックではなくタッチによって生成されることに注意する必要があります。このアクションによると、回避する必要があります：400、600、または800ピクセルのonMouseOver。
卓上デバイス：これらの場合、通常のWebデザインは、画面幅が800ピクセルを超えても問題なく機能します。

上記のすべてを述べた上で、小さな画面はさまざまなPC、横向きのモバイルデバイス、およびタブレットを意味すると理解されます。この多様性は、Webをレスポンシブデザインに適応させるためのソフトな複雑さでこのグループをカバーします。この場合、ブロックによって実行されるレイアウト作業である作業を簡素化するために非常に重要です。 XNUMX種類のデバイスをXNUMXつのアクションに統合するため。

モバイル画面が考慮される幅から明確に定義されている場合。表示する中間画面のフォーマットを明確にしました。現在のレイアウトのブロックを変換して、画面に応じてサイズを変更し、正しく表示できるようにするため。

グローバル幅コンテナ

Webサイト内のグローバルコンテナは、グローバル幅をポイントまたは表示する機能を果たします。つまり、これらの要素を使用すると、Webサイトの中央に特定の幅を指定できます。固定幅から最大幅またはキャップ幅に変更することで、構成にある程度の柔軟性を与えます。 Webフレームワークの最初の宣言で確立され、幅 a 最大幅。同様に、最小幅は、最小幅宣言を使用して、以前に確立された範囲に従って確立されます。したがって、制御範囲内にないと考えられていたデバイスの幅を制御することが可能になります。上記の画面幅制限の範囲を取ります。宣言の構文は次のようになります。

#main {max-width：960px; min-width：320px; margin：0 auto;}

大画面の場合、解決策は同じです。ただし、同時にウェブのサイズが徐々に小さくなると、中央のフレームの幅も小さくなります。

実例

以下は、幅フレーム変換の設定の実際的な例です。この例では、幅が1080ピクセルのWebサイトがあり、ヘッダー、メインコンテンツ、およびフッター要素に適用されています。最初に行うことは、固定幅としてではなく、最大ページ幅として、さまざまなグローバルコンテナブロックの幅を示すことです。文に関しては、使用されるこのタイプのブロックの数によって異なります。それでは、次の構文を見てみましょう。

#header #top {position：relative; 最大幅：1074px; min-width：320px; 高さ：115px; マージン：0自動; […]}

[...]

#header ul.menu {position：relative; max-width：1008px; min-width：320px; 高さ：95px; […]}

[...]

＃aux-main {position：relative; max-width：1008px; min-width：320px; マージン：0自動; […]}

[...]

#footer ul {max-width：768px; min-width：320px; margin：10px auto;}

インテリアコンテナ

この時点から、レスポンシブWebサイトを変換して作成する方法についてもう少し詳しく説明します。変換されるページがデザインまたはレイアウトで構成され、さまざまな要素に分割されていることはほぼ確実です。たとえば、次のようになります。

XNUMXパーセント幅のヘッダー
幅のかなりの部分を占めるコンテンツ
側面の一部にXNUMXつまたは複数のサイドバーまたは側面バー
幅のXNUMX％を占める、フッター

したがって、ページ上の列を定義する固定幅のコンテナがいくつかあります。これらのコンテナは、次のようなさまざまな手法を適用することで列に変換された可能性があります。

最大量のフロート
表示：場合によってはインライン
他のディスプレイ：ボックス

次のステップは、これらの要素をそれほど正確ではないステートメントに変換できるようにすることです。そのため、親コンテナは、ポイントされた元のステートメントを正確に調整しません。または、同じことですが、次のように、ウェブサイトの幅のスペースを参照するすべての要素で、ピクセルからパーセンテージ値に変更する必要があります：

幅
最大幅
マージンと
パディング

以前に行ったレイアウト作業により、このステップは非常に簡単になります。除算のみを行っているため、コンテナ要素のピクセル単位のメジャーに対応するものをパーセンテージ値で判別できるようにします。したがって、パーセンテージは次の数式を適用して計算されます。

[内部要素幅のPx]/[親要素幅のPx]*100

このステップはすでに解決されているため、Web開発者がパーセンテージで測定したWebモデルでの作業に慣れるのは良い方法です。

パーセンテージの計算

実行する次のステップは、パーセンテージの計算です。この部分では、列の観点から厄介なことが示される可能性があります。以前の列はfloat要素で作成されていたため、フレームを縮小すると、サイドバーがコンテンツの下に移動します。ただし、前述の式が適用されます。このようにして、グローバルコンテナDIV内の各要素のパーセンテージ計算が実行されます。上記のように、1080ピクセルの幅がありました。これらの測定値をパーセンテージ値に変換すると、次の構文が得られます。

#main #content {float：left; 幅：63.9880952％; margin：30px 0 0 1.98412698％; }

[...]

#main #sidebar {float：left; マージン：20px 0 0 3.47222222％; 幅：28.7698413％; }

ご覧のとおり、幅と水平方向のマージンの両方が変換されています。このようにして、Webサイトは正方形の外観を維持します。注意すべきもうXNUMXつの重要な点は、パーセンテージで示される小数点以下の桁数です。その目的は、計算がピクセル単位の元の値に対して可能な限り正確になることです。

サイズが大きくなる緩い内部要素の解決策

Webページを変換する過程で、モデル内の特定の緩い要素を見つけることができます。これらの要素は、その類型によって、最大グローバルコンテナであるmax-widthを超えて大きくなる可能性があります。これらの要素は、修正されていることが検出されるため、ブラウザのサイズを操作することで検出できます。これらの要素を修正または回避するもうXNUMXつの簡単な方法は、コンテナーを選択し、内部要素がコンテナー自体のサイズを超えないように順序を指定することです。

開発中の例では、この最後の形式の修正がメインコンテンツとサイドバー内に適用されます。したがって、ウィジェットから発生する可能性のある特定の問題は、それ自体で解決できます。これによると、緩い内部要素を解決するための構成は次のようになります。

#main #content {float：left; 幅：63.9880952％; margin：30px 0 0 1.98412698％; }

#main #content * {max-width：100％}

[...]

#main #sidebar {float：left; マージン：20px 0 0 3.47222222％; 幅：28.7698413％; }

#main #sidebar * {max-width：100％}

絶対位置に配置された要素

変換するWebページに配置されているすべての要素。同じ前のプロセスを幅でそれらに適用し、横軸のパーセンテージの値にそれらを適応させて、それらの幅を変える必要があります。開発中の例では、ヘッダーにいくつかの要素が配置されていると仮定します。それらの位置は、ウェブの寸法が縮小されたときにそれらが空中に浮いたままにならないように、これらの要素に適合させる必要があります。この場合、構成は次のようになります。

[...]

#header #top p.breadcrumb {position：absolute; top：90px; 左：3.72439479％; color：white;}

[...]

#header #top p.like {position：absolute; top：10px; 左：54.0037244％; }

[...]

#header #top div.vcard {position：absolute; top：11px; 右：5.49348231％; 幅：27.9329609％;}

内部要素にメディアクエリを適用する

ページの幅を調整する場合、コンテンツが原因で再設計にスペースが見つからない要素が存在する可能性があります。これらは、適応を悪く見せることによって邪魔になる可能性があります。この厄介な状況を回避するために、特定のディメンションが発生したときにCSSを大幅に変更できる単純なメディアクエリが使用されます。

メディアクエリは非常に強力なツールであり、多くの工夫を加えることができます。今回は、画面の幅とCSSが変更される場所に関する特定の条件を定義するために適用されます。このために、次の構文を思い浮かべます。

@media screen and（max-width：[WIDTH] px）{

/*この画面幅以下の新しいルール*/

}

このメディアクエリステートメントは、特にレイアウトをさまざまな解像度に適合させることを目的としています。そのため、特定の画面幅を指定すると、ユーザーを支援する以上の煩わしさをもたらす可能性がある特定の二次要素を非表示にするために何よりも使用できます。小さなカップリングを作成するのに役立つことに加えて、いくつかの要素がさまざまなシナリオでの再設計に適合することができるようにします。

言われていることを例示するために、800および600ピクセル未満の解像度のいくつかの要素は非表示になります。ある場合には、それらは適応されるウェブサイトのメインページのコンテンツの正しい見方を妨げています。次の構文によると：

@media screen and（max-width：800px）{

#header #top p.like、

#header #top p.breadcrumb、

#header #top div.vcard p.twitter、

#header #top div.vcard p.linkedin、

#header #top div.vcard p.delicious、

#header #top div.vcard p.google、

.vcard h2 {display：none;}

}

@media screen and（max-width：600px）{

#sidebar .twitter {display：none;}

}

ご覧のとおり、800ピクセル未満の解像度で非表示になっています。

-いいね

-ブレッドクラム

-ソーシャルボタンなど

600ピクセルから、最後のツイートがサイドバーから削除されます

メディアクエリでは、一部のスタイルを変更することもできます

すでにご覧のとおり、メディアクエリを使用すると、一部の内部要素を非表示にできます。ただし、一部のスタイルに変更を加えることもできます。この特殊性は、要素が幅の点で適応されていないことに加えて、消えたり隠されたりすることを望まない、または望まれない場合に使用できます。この状況がWebで発生した場合は、変換する必要があります。次に、メディアクエリを使用して、スタイルを微妙に変更し、適応させるようにします。

作業中のWebで、ソーシャルボタンがこのタイプの問題を引き起こしていると仮定します。また、ページの幅が960ピクセルを下回ると、アイコンを削除してフォントサイズを小さくすることで、フォーマットを微妙に変更することにします。その場合、構成は次のようになります。

@media screen and（max-width：960px）{

#header #top div.vcard p {font-size：9px;}

#header #top div.vcard p.twitter a、

#header #top div.vcard p.linkedin a、

#header #top div.vcard p.delicious a、

#header #top div.vcard p.google a {background：none; パディング：0;幅：50％; float：left;}

}

メニューをどうするか

小さな画面でレスポンシブウェブサイトを作成するプロセスの中で、メニューはどうですか？この質問に対する答えは、解決するのがやや複雑な問題であるということです。これは通常、ある程度長い要素のセットであり、メニュー自体でもあるため、Webのメインコンテンツではありません。したがって、小さな画面でページを開くと、メニューが多くのスペースを占めることは許されません。

タッチデバイスでは、小さなリンクのリストが表示されるのはユーザーにとって煩わしい場合があるため、リンクを縮小することは最も実行可能な解決策ではありません。有利な代替手段は、メニューをselect要素に置き換えることです。これは、ユーザーが快適に選択できるオプションのメニューを表示するコントロールを表します。 select要素は、長いメニューリストを小さなブロックに縮小するため、タブレットやモバイルなどのデバイスに最適です。

新しいレスポンシブデザインでこの置換を行う場合は、tinynavjqueryプラグインを使用することをお勧めします。シンプルで互換性の高いこのプラグインは、メニュー内のすべてのULアイテムを参照します。そして、これにより、指定された特性を持つ選択要素がリストの先頭に追加されます。その後、実行する必要のあるステップは、好ましい解決策が達成されるまで、メディアクエリでULまたは選択を非表示にすることです。

select要素を使用した手順

メニューをselect要素に置き換える手順は、上記のプラグインを介して実行されます。リンクリストのヘッダーに配置する必要があります。そのため、ページの幅が800ピクセル未満になり始めると、リンクはselectに置き換えられます。次に、次の手順に従います。

スクリプトを追加し、jqueryプラグインの準備ができたら、新しい要素への呼び出しを設定します。以下によると：

$（«。menu ul»）。tinyNav（）;

この構成では、トップメニューの各リンクリストに選択が追加されます

次の宣言を使用して、新しいselect要素を非表示にするように基本CSSに指示します。

.tinynav {表示：なし}

適切なメディアクエリを利用し、その中に選択の形式とリスト自体を非表示にする順序を追加します。次のように構成を残します。

@media screen and（max-width：800px）{

#header ul.menu li ul {display：none}

.tinynav {表示：ブロック; 位置：絶対; 下：5px; 幅：79％; マージン左：15％}

}

このように、画面の解像度を800ピクセル未満の幅に下げることにより、Webメニューは選択要素に置き換えられます。

レスポンシブWebの作成方法の背景をブロックする

Webの適応のこの時点で、難易度はモデルの状態によって異なります。 Webを設計する場合、CSSポイントでは、ブロックは通常、画像の背景で装飾されます。装飾プロセスでは、膨大な数の技法が使用されます。サイズ変更に関しては、他のものより簡単なものもあります。

いくつかの解決策

そのため、使用する手法によっては、手順が単純になったり、単純になったりする場合があります。ウェブの背景が、エッジが非表示になると目的を失う場合もあります。これらの場合、克服すべき大きな問題が発生します。これに対するいくつかの解決策は次のとおりです。

できるだけ多くの背景をCSS3スタイルに変更します。これは変化に非常によく適応します。丸みを帯びたエッジ、シャドウ、またはグラデーションを使用する場合、ほとんどのブラウザと互換性を持たせるのは簡単です。 CSSのXNUMXつの状況では、ブロックを確立するためにデザインで多数の画像を必要とすることは困難です。
背景画像を使用せずに、メディアクエリとアダプティブ幅がどのように機能するかに可能な限り最も近いCSS3に置き換えます。
すでにブロックの状況を支配しているファンドの場合。このスタイルをブロックに複製し、元の背景がほとんど区別されないようにすることをお勧めします

煩わしい可能性のあるXNUMX種類の背景画像に対する他の解決策は次のとおりです。

ページのフレームに境界線があり、表示されている部分の外側に残っていても、最終結果は気にならないため、残されます。
特定のタイトルのアイコン。これは、迷惑になり始めたときにメディアクエリで非表示にすることで修正されます。
ヘッダーのグローバルな背景には、Webの作成者の名前が表示される白いボックスが含まれています。このため、作成者ボックスで同じスタイルを繰り返して、ページのサイズを小さくすることで、一方の背景をもう一方の背景で非表示にすることができます。

モバイル画面用のレスポンシブWebを作成する方法–ソリューション

小さな画面でレスポンシブウェブサイトを作成する方法のいくつかの側面は、すでに以前に見られました。この知識があれば、1080ピクセルの固定幅のリジッドなウェブデザインから、多数のデバイスの小さな画面に非常に適応できるデザインに移行できます。しかし、モバイル画面向けのレスポンシブデザインソリューションはありません。

モバイル向けのデザインで小さな画面に見られたものを適用することで、変更により許容できるように見えます。ヘッダーに要素が凝集したXNUMX列のレイアウトはモバイルでは非常に実用的ではないため、さらに完成させる必要があります。

したがって、モバイルデバイスで正しい表示を実現するためのプロセスを開始することが適切です。モバイルでのナビゲーションの使用は、通常のWebサイトでの使用と同じではないことに注意することが重要です。次に、単純な画面幅の適応性の変更や要素の非表示よりもさらに進んでください。

この場合のビューポートタグ

ビューポート要素は、Webをモバイルに適応させるための優れたツールです。まず、ビューポートは、デバイスがWebサイトを表示するときに、ズームを機能させる方法をモバイルに示すのに役立つためです。とはいえ、基本的にXNUMXつのオプションを提示できます。以下に示します。

1オプション：モバイル解像度と適切に結合されたレスポンシブデザインのWebサイトでは、次のものを利用できます。

このオプションは最も理想的ですが、最も面倒でもあります。列の幅を500または400ピクセル未満に減らすと、幅が完全に管理できなくなるためです。したがって、Webの視覚化に根本的な変更を加える必要があります。

2オプション：モバイルの解像度にまだ完全に適合していないWebサイトの場合、次のようになります。

この他のオプションはより迅速かもしれません。これは、モバイルを希望の解像度で表示できることがデザインでのみ示されているためです。言い換えれば、Webは引き続き通常のページであり、より縮小されたバージョンまたは適合されたバージョンでのみ使用されます。

考えられる結果

XNUMX番目のオプションを選択した場合、レスポンシブで適応または設計されるWebサイトでXNUMXつの問題が発生する可能性があります。

–最初の：この場合のビューポートは、すべてのモバイルブラウザでグローバルに機能します。たとえば、幅500ピクセルのビューポートタグが示されている場合、幅が約800ピクセルのiPadデバイスでは、幅500ピクセルのページしか表示されません。使用可能なスペースのXNUMX％を利用できない。

–2番目の：幅500ピクセルのビューポートを示す場合に続きます。この場合、320ピクセル幅の解像度で、作業中のWebのコンテンツが非常に縮小されたモードで表示されます。したがって、調整を行わないと機能しなくなります。一方、メニューやソースを調整するために特定の調整が行われると、小さな画面の場合、Webバージョンはタブレットに表示されるように同じように変更されます。結論として、ビューポートタグを使用して固定幅を示すソリューションは最速かもしれませんが、もはや効率的ではありません。

ビューポートタグのオプション2を選択した結果を確認すると、オプション1が最も推奨されます。このように、ページの先頭でオプション1として上記に示したビューポートを使用すると、モバイル自体が可能な解像度を表示できます。

この視覚化の決定により、後でモバイルバージョンのメディアクエリに取り組むことになります。これには、列から320パーセント幅のブロックに移動する必要があります。また、XNUMXピクセル幅で読みやすいように、特定の要素を削除、圧縮、フォントを調整します。

列を削除する

前述のように、モバイルレスポンシブアダプテーションでは、ヘッダー内の要素の凝集を回避するために、XNUMXつの列の外観でデザインを完成させる必要があります。このプロセスでは、一方を他方に重ねて配置することで列が削除されますが、発生する可能性のあるシナリオはXNUMXつあります。

–列がHtmlですでに順序付けられていること：この場合、それらはすでにモバイル向けに望ましい方法で提示されています。 Floatを非表示にするか、display：inline-blockまたはdisplay：boxを変更して、通常のdisplay：blockに置き換えるだけで済みます。次の構文を適用する。

@media screen and（max-width：400px）{

#content {display：block; float：none; }

}

–列が順序付けられていない場合：このシナリオでは、下部のブロックがページの上部を占めるように、絶対位置で作業する必要があります。余白を使用して上のブロックを下のブロックに移動するだけでなく、それらが重ならないようにします。例として、次の分布を想定します。

この構造化では、モバイルではコンテンツの前にサイドバー要素を配置することが望まれます。したがって、CSSは次のようになります。

@media screen and（max-width：400px）{

#main {position：relative; 幅：100％; }

#content {margin-top：80px; 幅：100％; float：none;}

#sidebar {高さ：80px; 位置：絶対; top：0; 幅：100％; float：none; }

}

モバイル版で絶対位置を使用する必要があるXNUMX番目のシナリオを視覚化するために、次の構造例を示します。

@media screen and（max-width：450px）{

#main #sidebar {display：block; float：none！important; 幅：100％; 位置：絶対; 上：-80px; margin：0！important; border-bottom：1px solid #aaa; パディング：0 0 20px 0;}

#main #content {float：なし; width：auto; マージン：100px 0 0 0; }

}

この場合、モバイル版では幅が450ピクセルに変更されています。

フォントの調整

モバイル版のレスポンシブアダプテーションで対処しなければならないもうXNUMXつの側面は、フォントの調整です。なぜなら、ウェブが設計されたとき、それは大きなモニターを念頭に置いて作られたからです。垂直方向の画面が小さいモバイルバージョンに移行する場合、Webサイトは読みやすく表示されにくいことがよくあります。 Webの見出しは多くのスペースを占め、フォントのサイズが原因でコンテンツのテキストが読みにくくなります。これによると、すべてのソースを確認し、モバイル画面に表示するための実行可能な構成にする必要があります。

以下は、メニューフォントが変更され、タイトルのフォントサイズが縮小され、コンテンツのフォントサイズが拡大された、この側面に関する調整です。次の構成に注意してください。

#header ul.menu li、

#header ul.menu li.analytics、

#header ul.menu li.development {background：none;}

#header ul.menu li h4 {margin：30px 0 0 0px; font-size：12px; text-indent：10％;}

#main #content .hnews h3 a、

#main #content .hnews h1 a {font-size：22px; }

#main #content .hnews .entry-content {font-size：16px;}

美学とスタイルに関するその他の調整

モバイル版のデザインでレスポンシブウェブサイトを作成する方法について、これまでのすべてのプロセスを実行しました。残っているのは、ウェブの外観とスタイルに最後の仕上げをすることです。この場合、新しいバージョンに適合しないスタイルを再設計し、新しいバージョンに配置されるようになったスタイルを破棄することができます。同様に、サイドバーなどの一部の要素を移動して、別の場所に配置したり、余白を変更したりすることもできます。最終的に行く準備ができている美しいモバイルウェブを達成するために。

レスポンシブウェブサイトを作成するには？ –テストとテスト

Web開発だけでなく、何か新しいものの作成や構造化の観点から設計している場合。テストまたはテスト段階があり、結果が最適であるか、改善が必要かどうかを確認できます。

とはいえ、これまでの手順をすべて実行した後で、チェックまたはテストを実行すると便利です。これらのテストは、ステップの実行時に実行し、各ステップで達成されている変更を検証できるようにする必要があります。同様に、ウェブの運用においては、以下のXNUMXつのチェックを行う必要があります。

ブラウザでテストしてください

レスポンシブデザインで作業するときは、画面の幅を調整する必要があります。新しい形をとっている新しい適応をチェックするために。同様に、小さなエラーを検出できるため、使用するメディアクエリを調整できます。画面幅を確認するには、次のXNUMXつの方法があります。

ブラウザの最大化を削除してその幅をテストすることにより、ライブで行動します。
ISHのようなものを利用して、簡単なコマンドでこれらのテスト設定を実行できます。

モバイルキャッシュをバイパスする

モバイルデバイスは、その性質上、通常のブラウザよりもさらに多くのデータを必要以上にキャッシュします。通常のものでは、キャッシュなしで負荷を誘発するには、通常CTRL+F5を実行するだけで十分です。このタイプのアクションは携帯電話では困難ですが、特定のブラウザでさえキャッシュを無効にするオプションがあります。キャッシュなしでより良い作業を容易にするために、以下が推奨されます：

次のようなCss呼び出しの変数を操作します。

"/styles.css?version=xxxx"

それぞれの特定の場合にバージョン番号を変更します。 URLを変更して、キャッシュを使用しないようにするため。

ブラウザで直接作業します。モバイルの最小解像度を420〜450ピクセルにゆっくりと上げます。このようにして、十分に縮小することでブラウザに表示させることができます。もうXNUMXつの方法は、Webページのサイズを変更するツールを使用することです。

これらのアクションにより、間違いなく、テストを実行するときに、より実用的で快適な結果が得られます。

レスポンシブウェブサイトを作成するには？ -結論

上記のすべてにおいて、レスポンシブウェブのデザインに頻繁に適用されるいくつかの技術、技術ツール、および手順を知ることができました。この知識はすべて、アダプティブデザインに持ち込みたい既存のWebサイトにも適用できます。新しいウェブサイトの構築に取り組む必要はありません。

したがって、次の質問に：あなたが学んだすべてを行うことで、レスポンシブデザインのウェブサイトを作ることは可能ですか？明らかに、答えははっきりとしたいいえです。なんで？なぜなら、元々はそうではなかった、適応に敏感なウェブサイトを作ることしかできなかったからです。それは堅いまたは固定された性質の下で考案されたので。

考えられる結果または間違い

従来のWebサイトまたは変更に敏感なWebサイトを適応させるプロセス中に、いくつかの間違いを犯す可能性があるため、特定の結果が発生します。見てみましょう。

-ページの作成時に非常に重要だった特定の要素を削除する必要があります。一方、それらを排除するアクションは、Web訪問者に送信されるコンテンツの重要性のためではなく、外観に基づいて行われました。

-全体的な視覚的側面で完璧を達成していない可能性があります。既存のものだけを改善することができる。 Webが最初から作成された場合のまったく異なるケース。

-元のWebサイトのモデルによっては、変更への適応が終了する場合と終了しない場合があります。この試みの開発者は、いくつかのモックアップを使用して、中間ソリューションしか作成できません。

最後にレスポンシブデザインについて

最後に、実行されたのは単純な詳細だけでした。元々なかった設計に適応できるモデルを取得するために作業することの重要性を強調します。レスポンシブデザインを読むと、レイアウト作業ではなくデザインについて話していることがわかります。したがって、レスポンシブWebサイトを作成する方法は、元の新しいデザインのコンテキストから作成する必要があります。

ただし、モバイルの解像度を変更して適応できるWebサイトを、固定されたものから始めて表示できることは、かなり大きく、有用な成果です。ここで説明されていることは、レスポンシブデザインのトレーニングを受けていることを意味するものではありません。このためには、さらに多くの研究が必要です。

より一般化されたさまざまな、より多くの技術的プロセスの基礎、知識、および学習がはるかに必要になるためです。

レスポンシブウェブサイトの作り方–最後のヒント

結論として、レスポンシブデザインがウェブ上で最新のものであることを知ることが重要です。このタイプのウェブデザインには、新しい考え方が必要です。これらのWebサイトの開発は、次のヒントに従うことで簡単になります。

モバイルを最初に考える：設計するときは、モバイル画面の小さいサイズに適応することから始めると便利です。したがって、コンテンツをより大きなサイズの画面に調整した後。なぜなら、携帯電話を念頭に置いてデザインする場合、ページに表示する必要のあるコンテンツをより客観的にして、提示するのに本当に重要なものだけを残すことができるからです。
特定のモバイルまたはタブレットのデザインを最適化しないでください
標準とグッドプラクティスに従ってください。たとえば、ファイル自体で定義されているCSSスタイルをHtmlタグ内で使用しないでください。
デザインのピクセルのスレーブになることは避けてください。要素はそれらに対応する位置を見つけることに注意してください。これは、コンテナの流動性と寸法に注意を払うためです。希望どおりに表示されない場合は、メディアクエリを適用して要素のレイアウトを修正するだけです。