Home-theater-designers
Webサイト/ Webアプリケーションを開発する場合は、レスポンシブデザインを作成する方法を知ることが成功に不可欠です。
以前は、さまざまな画面サイズにうまく適応するWebサイトの作成は、Webサイトの所有者が開発者に要求しなければならなかった贅沢でした。しかし、スマートフォンやタブレットの使用の増加により、ソフトウェア開発の世界ではレスポンシブデザインが必要になっています。
メディアクエリを使用することは、Webサイト/ Webアプリがすべてのデバイスで希望どおりに表示されるようにするための最良の方法です。
レスポンシブデザインを理解する
一言で言えば、レスポンシブデザインは、HTML / CSSを使用して、さまざまな画面サイズに適応するWebサイト/ Webアプリのレイアウトを作成することを扱います。 HTML / CSSでは、Webサイトのデザインで応答性を実現するためのいくつかの異なる方法があります。
- ピクセル（px）の代わりにremおよびem単位を使用する
- 各Webページのビューポート/スケールの設定
- メディアクエリの使用
メディアクエリとは何ですか？
メディアクエリは、CSS3バージョンでリリースされたCSSの機能です。この新機能の導入により、CSSのユーザーは、デバイス/画面の高さ、幅、および向き（横向きまたは縦向き）に基づいてWebページの表示を調整できるようになります。
続きを読む：重要なCSS3プロパティのチートシート
メディアクエリは、コードを1回作成し、プログラム全体で複数回使用するためのフレームワークを提供します。これは、3つのWebページしかないWebサイトを開発している場合はあまり役に立たないように思われるかもしれませんが、何百もの異なるWebページがある会社で働いている場合は、大幅な時間の節約になります。
メディアクエリの使用
メディアクエリを使用するときに考慮する必要があるいくつかの異なる事項があります：構造、配置、範囲、およびリンク。
メディアクエリの構造
メディアクエリ構造の例
@media only/not media-type and (expression){
/*CSS code*/
}メディアクエリの一般的な構造は次のとおりです。
- @mediaキーワード
- not / onlyキーワード
- メディアタイプ（スクリーン、印刷、またはスピーチのいずれか）
- キーワードと
- 括弧で囲まれた独自の表現
- 開いた中括弧と閉じた中括弧のペアで囲まれたCSSコード。
関連している： CSSを使用して印刷用のドキュメントをフォーマットする
キーワードのみを使用したメディアクエリの例
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}上記の例では、CSSスタイリング（具体的には青色の背景色）を、幅が450px以下のデバイス画面（基本的にはスマートフォン）にのみ適用しています。唯一のキーワードはnotキーワードに置き換えることができ、上記のメディアクエリのCSSスタイルは印刷と音声にのみ適用されます。
ただし、デフォルトでは、一般的なメディアクエリ宣言が3つのメディアタイプすべてに適用されるため、1つ以上のメディアタイプを除外することが目的でない限り、メディアタイプを指定する必要はありません。
デフォルトのメディアクエリの例
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}メディアクエリの配置
メディアクエリはCSSプロパティです。したがって、スタイリング言語内でのみ使用できます。コードにCSSを含めるには3つの異なる方法があります。ただし、これらの方法のうち、内部または外部CSSの2つだけがプログラムにメディアクエリを含めるための実用的な方法を提供します。
内部メソッドには、HTMLファイルのタグにタグを追加することと、タグのパラメーター内にメディアクエリを作成することが含まれます。
外部メソッドでは、外部CSSファイルにメディアクエリを作成し、タグを介してHTMLファイルにリンクします。
メディアクエリの範囲
メディアクエリが内部CSSまたは外部CSSのどちらを介して使用されるかにかかわらず、メディアクエリの機能に悪影響を与える可能性のあるスタイリング言語の主要な側面が1つあります。 CSSには優先順位ルールがあります。 CSSセレクター（この場合はメディアクエリ）を使用する場合、CSSファイルに追加された新しいメディアクエリはそれぞれ、前のメディアクエリを上書きします（または優先します）。
上記のデフォルトのメディアクエリコードはスマートフォン（幅450ピクセル以下）を対象としているため、タブレットに別の背景を設定したい場合は、既存のCSSファイルに次のコードを追加するだけでよいと思うかもしれません。
タブレットメディアクエリの例
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
唯一の問題は、優先順位により、450px以下が800px未満であるため、タブレットの背景色が赤になり、スマートフォンの背景色も赤になることです。
この小さな問題を解決する1つの方法は、スマートフォン用のメディアクエリの前にタブレット用のメディアクエリを追加することです。後者は前者を上書きし、背景色が青のスマートフォンと背景色が赤のタブレットができます。
ただし、優先順位を気にせずにスマートフォンとタブレットで別々のスタイリングを実現するためのより良い方法があります。これは、範囲指定と呼ばれるメディアクエリの機能であり、開発者は最大幅と最小幅（範囲）でメディアクエリを作成できます。
範囲の例を使用したタブレットメディアクエリ
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
上記の例では、タブレットとスマートフォンのデザインが2つの別々の幅のコレクションを対象としているため、スタイルシート内のメディアクエリの配置は無関係になります。
リンクメディアクエリ
メディアクエリをCSSコードに埋め込みたくない場合は、別の方法を使用できます。この方法では、HTMLファイルのタグでメディアクエリを使用する必要があるため、スマートフォン、タブレット、コンピューターのスタイル設定を含む1つの大規模なスタイルシートを作成する代わりに、3つの個別のCSSファイルを使用してタグにメディアクエリを作成できます。
タグは、外部スタイルシートからCSSスタイルをインポートするために使用されるHTML要素です。このタグには、CSSのメディアクエリと同じように機能するメディアプロパティがあります。
リンクタグの例でのメディアクエリの使用
href='tablet.css'>
上記のコードは、HTMLファイルのタグに配置する必要があります。これで、main.css、tablet.css、smartphone.cssというファイル名で3つの個別のCSSファイルを作成するだけで、各デバイスに必要な特定のデザインを作成できます。
メインファイルのスタイルは幅が800pxを超えるすべての画面に適用され、タブレットファイルのスタイルは幅が450px〜801pxのすべての画面に適用され、スマートフォンファイルのスタイルは以下のすべての画面に適用されます。 451px。
私のAndroid携帯からハッカーを削除する方法
これで、レスポンシブデザインを作成するためのツールができました
この記事の最後に到達した場合、レスポンシブデザインとは何か、なぜそれが役立つのかを学ぶことができました。 CSSおよびHTMLファイルでメディアクエリを識別して使用できるようになりました。さらに、CSSの優先順位を紹介し、それがメディアクエリの機能にどのように影響するかを確認しました。
画像クレジット：ネガティブスペース/ ペクセル
共有 共有 つぶやき Eメール CSSで背景画像を設定する方法CSSは、Webページをスタイリングするための強力なツールです。背景画像の配置方法を学ぶことで、CSSの基本を学ぶことができます。
次を読む 関連トピック- プログラミング
- ウェブ開発
- ウェブデザイン
- CSS
Kadeisha Keanは、フルスタックソフトウェア開発者およびテクニカル/テクノロジーライターです。彼女は、最も複雑な技術的概念のいくつかを単純化する明確な能力を持っています。技術初心者なら誰でも簡単に理解できる素材を作る。彼女は、執筆、興味深いソフトウェアの開発、そして（ドキュメンタリーを通じて）世界中を旅することに情熱を注いでいます。
KadeishaKeanのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください