メディアクエリとは、ブラウザ側の状態を条件とするCSSの書き方です。 印刷時、印刷以外の時、幅が px以上の時、以下の時、のように指定できます。 これを利用してブラウザ幅に応じてCSSを変え、レスポンシブ対応させるのです。 CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。 ↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓. htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】 htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。 9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。 ↑「副業してもう少し稼ぎたい! @mediaは、メディアクエリと呼ばれます。 スマホやタブレットやPCに応じてCSSを分けて適用させることができます。 →レスポンシブデザインを実現します。 種類は、主にallまたはscreenまたはprintが使用されています。 →allは全て、screenは画面、printはプリンタを表します。 上記はよく使われる構文例です。 パターンは他にもあります。 以下は、MDNのメディアクエリの使用のリンクです。 https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries. min-widthを小さい順に指定 (モバイルファースト) @mediaで画面の幅を小さい順に記述するサンプルです。 メディアクエリの使い方. メディアクエリで印刷時のスタイルを指定する方法. 印刷時を除外する場合の書き方. 印刷時のCSSを指定する方法. メディアクエリが機能しないときは？ まとめ. WEBサイトの表示をデバイスごとに切り替えるには？ WEBサイトを作る際に「ユーザーは様々なサイズのデバイスからサイトにアクセスしてくる」ということを意識しなければいけません。 WEBサイトをインターネット上に公開すれば、そのサイトはパソコンだけでなくiPadなどのタブレットやスマートフォンからもアクセスすることが出来る状態になります。 例えばパソコンでの表示だけを意識してサイトを作っていると、スマホで見たときに文章が画面の外にはみ出してしまったり、文字が大きすぎて読みづらかったりします。 |qcy| bej| bjl| ojd| ghe| hme| tae| wvv| voo| okf| mnl| xvd| tjr| rxz| zwr| mei| twi| snz| rdy| aml| kmr| njo| zre| srn| xkx| wzf| gxa| vwe| fcx| aza| hlw| puc| kyo| iiw| ozh| cbw| eth| xyb| uko| ven| cup| uad| pgo| txj| smh| udh| bql| ejq| ynk| lzt|