これは例文です
は１つの要素です。, 要素Aの中に要素Bが入っているとき「Bの親要素＝A」です。見方を変えると「Aの子要素=B」です。, widthは『要素の横幅』を決めるもので、heightは『要素の高さ』を決めるものです。, widthとheightの指定の仕方の一例を紹介します（見やすいように要素をオレンジ色にしました）。, ↑widthとheightの値をそれぞれ100pxに指定しました。すると、要素の幅と高さがそれぞれ100pxになりました。, ウェブデザイン初心者が一度はつまずくところかと思いますが、display: inlineの要素では、widthとheightを指定することができません。, この図のように、幅・高さが指定できるのは要素がdisplay:blockもしくはinline-blockのときです（また、ここにはのっていませんがdisplay:tableのときも指定できます）。display:inlineが初期値であるaタグやspanタグではwidthやheightを指定しても大きさを変えることができないことにご注意ください（ごく一部に例外はありますが）。, widthプロパティの初期値はauto（自動）で、CSSで指定しない限り、要素の幅は自動で決められることになります。自動で決まるといっても、決まり方は基本的に以下のようになります。, 段落タグ（p）やdivタグ、見出しタグなどdisplay: blockの要素の場合、widthの値をとくに指定せずにautoになっていると、要素の幅は基本的に横いっぱいに広がります*。, *：親要素がdisplay: tableやdisplay: flexなどの場合を除きます。, display: inlineやinline-blockのときには、要素の幅＝要素の中身（テキスト）の長さとなります。要素内のテキストが3文字のときより、10文字のときの方が幅が大きくなるわけですね。, ただし、要素の幅が親要素以上に大きくなることはありません。親要素が600pxなら、子要素も自動で600pxになります。, ↑p要素にはwidthを指定していませんが、親要素(div)と同じwidthとなりました。, 次に要素のwidthをpx（ピクセル数）で指定してみましょう。pxはいわゆる絶対値の値になります。たとえば、width: 500pxと書けば、親要素に関係なく幅は500pxになります。, このようにpxを使って画像の幅を調整することができます。ちなみに画像の高さも初期値はheight: autoで、widthを小さくすると縦横比を保つように合わせて自動調整されます。, 子要素の幅を、親要素の幅より大きくしてはいけません。なぜならウェブページを見る端末によってはレイアウトが崩れてしまう可能性があるからです。, みなさんも一部の要素だけがびよんとはみ出てしまっているウェブページを見たことがあるかもしれません。これは、親要素より子要素の幅が大きくなってしまっているんですね。, widthの値を%で指定すると、要素の幅は可変になります。つまり、親要素次第で幅が変わるのです。, たとえばwidth:50%の場合を考えてみます。このとき親要素が800pxなら、要素の幅はその50%の400pxになります。, このように値を◯◯%で指定すると、親要素の幅に対する比率で幅が決まります。親要素自身が％で指定されているときも、これは変わりません。実際に試してみるのが分かりやすいかと思います。オレンジが段落の要素（p）、黄色がその親要素、灰色が親要素の親要素になります。, ↑3つのタグが入れ子になっています。1番上の要素（親の親）は幅200px、次の親はその50%で100px、その中のp要素はさらに50%で50pxというような形になります。このように幅は子要素へいくほどどんどん小さくなるわけですね。, 「width: 100%」と「width:auto」の違いは何かと気になりますよね。少し細かい話になりますが、違いは下図のようになります。, autoだとwidthの中にpaddingとborderが含まれるようになります。一方で100%だとwidthにはpaddingとborderの分が含まれません。, つまりwidth:100%の要素にborderかpaddingが指定されていると、その分だけ親要素からはみ出てしまうのです。この問題に対してはいくつかの対処法があります。その中でも一番簡単で分かりやすい対処法はbox-sizing: border-boxというプロパティを指定することです。詳しくは以下の記事で解説していますので目を通してみてください。, 繰り返しになりますが、display:inline-blockの要素では、未指定の場合の幅＝中身の長さとなります。display:inline-blockにした要素を横いっぱいに広げたい場合には、width:100%を指定する必要があります。, こちらも繰り返しになりますが、リンクタグ（a）などdisplay:inlineの要素は、そもそもwidthの指定自体ができないので、100%にしても、横いっぱいには広がりません。リンクタグの幅を指定したい場合には、はじめにdisplay: inline-blockもしくは、display: blockを指定しましょう。, 「親要素に対する比率（%）で幅を指定できる」ということが分かりました。勘の良い人がここで疑問に思うのは「親の親の親の親…まで全くpxで指定されていなかったら、%指定の幅はどうやって決まるのか」ということです。つまり「今はさまれているタグの上のタグの上のタグ…全ての要素の生み親“body”(とhtmlタグ)までpxで幅が指定されていないと、比率もクソもないじゃないか」という疑問ですね。, bodyまで一切pxで幅が指定されていないと、ブラウザの幅＝bodyの幅になります。つまり見る端末によって、またブラウザウィンドウの大きさによって、bodyの幅が変わるのです。 ネタバレ。 height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。 その場合width:80%と指定しても、ページを見る人の環境によって要素の絶対値的な大きさが変わるわけですね。, 横に並んでいる要素を均等の幅に分けたいというときにも、widthの%指定が便利です。, 4等分なら25%ですね。このように要素を横並びにするときには、%指定により等分することができるのです。, ここまでwidthについて説明してきましたが、widthに似たプロパティに『min-width』と『max-width』があります。これはwidthに対して「◯◯pxよりも小さくしない！」や「◯◯pxより大きくしない！」という制限をかけられるとても便利なものです。一言で言えば、最小幅と最大幅ですね。この２つの知識はスマホ、PC、タブレットなど様々な大きさに対応する「レスポンシブWebデザイン」を作るときに必要になるので一度目を通しておくと良いでしょう。, 次はheightプロパティ（高さ）の解説をしていきます。heightもwidthと同じ単位の値を取り、初期値はautoになります。ただ、各値の決まり方が少しずつ異なるので1つずつ見ていきましょう。, とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まります。, 基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がりません。文字や画像などの要素の中身の分だけの高さになります。, 要素内の文字や画像だけではありません。中に子要素が入れば、その分だけ高さは大きくなります。, 実際に試してみましょう。要素の中にpとimgの子要素を入れます。どこまでが高さなのか分かりやすくするために要素に色をつけてみます。, ↑オレンジ色に塗られた部分が要素です。横いっぱいに広がるwidth: autoに対して、height: autoは要素分だけの高さになっていることが分かりますね。 Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About, 1画面単位で紙芝居のように見せていくデザインもよく使われます。画面(ウインドウ)の横幅いっぱいに何かを表示するスタイルは簡単に作れますが、高さいっぱいに何かを表示したい場合には若干の工夫が必要です。そのデザイン方法も押さえておきましょう。, 企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。, 出典： ... スマートフォンの画面に合わせる. ! 【Step 1】 魔法の単位”vw”, “vh”で要素の幅と高さを常に画面の高さに保つ. 初心者向けにcssで文字サイズをディスプレイサイズに合わせて可変にする方法について解説しています。最近ではpcに限らず、スマートフォンやタブレット端末で表示することが当然になってきています。各端末、ディスプレイで文字が適切に表示されているか確認してみま … CSS で幅や高さを指定する際, px や % を使って指定するのが一般的かと思います. ただ, この指定方法だと親要素に幅, 高さに左右されちゃったり, 縦幅に合わせて横幅を変えたいといった場合に困ってしまいます. 5-4. 初心者向けにCSSで要素の高さを指定する100vhと100%の違いについて解説しています。 ... vh：ビューポート（画面サイズ）の高さに対する割合。 ... 田島悠介 フォントサイズをページや要素の幅に合わせる方法について詳しく説明していくね！ それらを解決してくれるのが今回紹介する Viewport units『vw』『vh』『vmax』『vmin』です! ユーザーがズームインすると、 width: 300px要素が画面のより多くを占めるため、デバイス（物理）ピクセルで測定したときに幅が広くなります。 ただし、CSSピクセルでは、幅は300ピクセルのままで、必要に応じてCSSピクセルを拡張することによってズーム効果が作成されます。 © Copyright 2020 サルワカ All rights reserved. 画面の横幅に応じて画像サイズを調整する方法. メディアクエリで画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About, 環境別にCSSソースを分割する方法だと保守が面倒です。あらゆる端末(画面サイズ)に適用できる「1つのCSSソース」を作りたい場合には、モバイルファーストという考え方でCSSを設計しておくと便利です。, モバイルファーストでデザインを設計する際のCSSの書き方を解説。外部のフレームワーク等は使わずに、自力で1から全てを記述する場合の書き方をご紹介致します。シンプルな共通デザインを先に記述し、諸々のデザインを後で付け足す「モバイルファースト」なら、総記述量を減らしやすい上に、更新の手間も少なくて済みます。, 出典： 画面全体の高さに合わせるには. 相対位置への配置です。開始位置はstaticと同じです。実用の際にはabsoluteの開始位置として使用する場合が多くなります。 absolute 1. 画像の表示サイズをブラウザのウインドウ幅や端末の画面幅に自動で合わせたい場合があります。cssを使えば画面幅と画像サイズを合わせるのは簡単ですが「拡大されすぎ／縮小されすぎ」を防ぎたいこともあります。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより … ウェブページ上に画像を掲載する際、オリジナルサイズではなく拡大や縮小して面積を変更して表示したい場合があります。多くの場合では縦横比を維持したままリサイズしたいでしょう。たいていは縦横比を維持したまま拡大縮小が可能ですが、htmlやcssの書き方によっては縦横比が … 画面の半分の高さにしたいときは？ たとえばブラウザの画面の半分の高さにしたいというときは、 全てのhtmlとbodyタグに対してheight:100%と指定したうえで bodyの直下の要素をheight:50%に指定します。 PC版とスマートフォン版サイトを自動振り分けする方法 [ホームページ作成] All About, ※当サイトにおける医師・医療従事者等による情報の提供は、診断・治療行為ではありません。診断・治療を必要とする方は、適切な医療機関での受診をおすすめいたします。記事内容は執筆者個人の見解によるものであり、全ての方への有効性を保証するものではありません。当サイトで提供する情報に基づいて被ったいかなる損害についても、当社、各ガイド、その他当社と契約した情報提供者は一切の責任を負いかねます。, レスポンシブ・ウェブデザインの簡単な作り方 [ホームページ作成] All About, メディアクエリで画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About, モバイルファーストでデザインする際のCSSの書き方 [ホームページ作成] All About, レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About, ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About, 画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS [ホームページ作成] All About, 1枚の背景画像をブラウザの画面全体に広げる方法 [ホームページ作成] All About, 幅広でメニューバー、幅狭ではプルダウンに変化させる [ホームページ作成] All About, 幅が狭い画面では表を展開！ stacktable.jsの使い方 [ホームページ作成] All About, tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About, Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About, 1画面ずつスクロールして進むウェブページを簡単作成 [ホームページ作成] All About, PC版とスマートフォン版サイトを自動振り分けする方法 [ホームページ作成] All About. 初心者向けにCSSのflexで内容に合わせて高さを変える方法について解説しています。flexboxはCSS3から追加されたレイアウトモジュールで段組やレイアウトに特化しています。今回は要素内の内容量に応じて高さを変更するようにしてみます。 CSSのbackground-size プロパティは、背景画像のサイズを指定できます。 表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。 同じ画像をそれぞれの値で表示したサンプルを作成しました。 これは画面のサイズが最大 640px であれば、というもの。つまりは一般的にはスマートフォンの縦画面のサイズということになる。 @media screen and ( min-width: 641px ) これは、画面のサイズが 641px 以上であれば、というもの。PCやタブレットだ。 次に、画面幅によってCSSを切り替えるためのコードを用意していきましょう。 【CSS】 @media screen and (max-width:480px) { /* 画面サイズが480px以下の場合ここの記述が適用される */ } 幅が狭い画面では表を展開！ stacktable.jsの使い方 [ホームページ作成] All About, table要素を駆使して作られた「テーブルレイアウト」なウェブページを、CSSだけでレスポンシブ化する方法を解説。表のセルを作るtd要素などに対してdisplayプロパティを適用すれば、HTML上では表のままで、表を崩す(表ではないように見せる)ことも可能です。特に値「inline-block」を指定すれば、表に似た表示のまま列数を画面幅に合わせて自動変化させることもできます。, 出典： 西村 文宏, まずは、レスポンシブ・ウェブデザインの概要と作り方を簡単に押さえておきましょう。CSS3のメディアクエリ(Media Queries)という記述方法を使って作ります。, 「レスポンシブ・ウェブデザイン」とは、閲覧者の画面サイズに応じて適用するスタイルを分けることで、閲覧者の端末に合ったデザインでウェブページを表示させる方法です。PC用・スマートフォン用など、端末の種類に応じた専用ページを用意することなく、単一のページですべての端末に対応させられるため、手間が少なくメンテナンス性の高いウェブサイト運営ができます。, 出典： CSS jQuery・JS ここまでの話は部分的なブロックに対する高さの指定についてでした。さてさて画面の高さに合わせたい場合はどうするのかというと、先に結論を述べてしまいますが、html要素とbody要素にheight:100%を指定します。 以下は、上記 HTML のページを画面幅に応じて、文字サイズを変更する例です。 main-text クラスを指定した本文の p 要素は、画面幅が 650px 以下の場合は 14px、画面幅が651px～960px の場合は 16px、画面幅が961px 以上の場合は 17px で表示するようにメディアクエリを使って指定 … 皆さんは、CSSで背景画像のサイズを変更する方法を知っていますか？背景画像を使うケースはよくあるので、サイズの指定方法を覚えておくと便利です！そこで今回は、 CSSで背景画像のサイズを指定するための、background-sizeプロパティとは？ background-sizeプロパ … 1画面ずつスクロールして進むウェブページを簡単作成 [ホームページ作成] All About, モバイル環境への対応方法は、何もレスポンシブ・ウェブデザインだけではありません。PC版サイトとモバイル版サイトとを別々に用意する方法もあります。その際は、どちらにアクセスされても適切なサイトへ自動で振り分ける機能を用意しておくと便利でしょう。, スマートフォン利用者を自動的に「スマホ用サイト」へ誘導できるよう、「アクセス者の端末(環境)に応じて閲覧先を自動で切り替える機能」を作ってみましょう。「.htaccess」ファイルを使ってサーバ側でアクセス先を自動振り分けし、スマートフォンユーザだけをリダイレクトする方法を解説。, 出典： 初期値です。指定する事が無いかと言えばそうでもなく、指定したpositionを打ち消す時に使います。レスポンシブでは必須。 relative 1. 画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS [ホームページ作成] All About, 1枚の大きな画像(解像度の高い写真など)を、ブラウザの画面(ウインドウ)全面に背景画像として掲載する方法をご紹介。ブラウザのウインドウサイズに関係なく、1枚の背景画像が必ず(縦横比を維持したまま)画面全体を覆うように表示。スクリプトは不要で、数行のCSSだけで簡単に実現できます。, 出典： 参考：要素にpaddingが指定されれば、その分だけ+αで高くなります。, 今度はheightをpx単位で指定してみましょう。実際に例を見るのが分かりやすいかと思います。さきほどの例と同じコードで、要素の高さを小さくしたり、大きくしたりしてみましょう。, ↑要素の高さの値が中身の高さ分よりも小さくなったため、子要素がはみ出てしまいました。heightをpxを指定するときは、中身がうっかりはみ出てしまわないように慎重に値を決めましょう。, ウェブサイトを作ってみると分かりますが、高さを％で指定することはほとんどありません。また、高さを%で指定するのは少々厄介です。初心者の方は参考程度に読み流せばOKかと思います。, heightの%指定では親要素のheightに対する比率になります。たとえば親要素の高さが500pxのときにheight:50%とすると高さは250pxになります。, しかし、親要素のheightが指定されずautoになっている場合には、%指定をしても効きません。なぜでしょうか。, それはさきほど説明した通り「親要素の高さ」＝「中身の高さ」だからです。子要素のheightが50%になれば、親要素のheightも小さくなります。しかしこの50%は親要素に対する値なので、一体何に対して50%なのかわからなくなりますよね。, すこし話が分かりづらいのですが、なんにせよ親要素のheightが指定されていないと、%指定はできないとおぼえておきましょう。, 例として親要素のheightが①指定されている場合と②されていない場合の両パターンでheightを%指定してみましょう。, ↑親要素のheightを指定いない方は50%の指定がきかず、親要素と同じ高さになってしまいました（覆いかぶさってしまっています）。一方で親のheightを100pxに指定した方は、きちんと50%の指定が適用されています。このように親要素のheightが指定されている場合に限り、heightの%を指定することができます。, たとえばブラウザの画面の半分の高さにしたいというときは、全てのhtmlとbodyタグに対してheight:100%と指定したうえでbodyの直下の要素をheight:50%に指定します。, このようなイメージですね。html,body,親要素をそれぞれブラウザいっぱいの高さにしておいてからheightを%指定するという流れです。, ↑要素の高さが画面の半分の高さになりました。ブラウザの高さを変えても、半分の高さに自動で調整されます。, widthとheightの基本的な使い方を解説してきました。最後にこの記事のまとめを書いておきます。. レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About, 様々な画面(ウインドウ)サイズの環境に対応したいとき、調整方法に困りがちなのが「画像の表示サイズ」です。閲覧者の環境に合った表示サイズに自動調整する仕組みも押さえておきましょう。自動調整といってもスクリプトは不要です。CSSだけで自動調整できる書き方があります。, HTML＋CSSだけで、表示領域の横幅に合わせて画像サイズを変化させる方法を解説。レスポンシブ・ウェブデザインを採用したページや、画面サイズに合わせて自動で画像を(縦横比を維持したまま)拡大縮小させたい場合に活用できます。, 出典： 幅広でメニューバー、幅狭ではプルダウンに変化させる [ホームページ作成] All About, 横長のtableを、狭い画面でも見やすく自動展開してくれる「stacktable.js」の使い方を解説。ページを様々な画面サイズに対応させたい際に困るのが「横長の表」の扱いです。狭い画面だと、列幅が極端に狭くなって読みにくくなります。そこで便利なのが「stacktable.js」スクリプト。指定サイズより狭い画面では、表を行単位で展開(分解)してくれます。, 出典： positionに指定できるのは下記の4つ。 static 1. 要素をフルスクリーン（全画面）サイズにするには、以下の指定でOKです。.box { width: 100vw; height: 100vh; } 幅と高さの単位 “vw” / “vh” サイズの違う画像を幅か高さで揃えて並べるcss セクション: 応用マニュアル カテゴリ: ホームページ画面 対象製品: すぐ使えるcms 2017年06月19日 更新 ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About, 画像の表示サイズを自動で閲覧環境に合わせたい場合に遭遇する、ちょっとした問題を解決するためのCSS記述方法をご紹介。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端に拡大されたり縮小されたりするのは避けたい」など。, 出典： 表示幅でCSSを切り替えよう. html 画面サイズに合わせる (4) divはその親の高さを取りますが、コンテンツを持たないので（divを除く）、コンテンツと同じ高さになります。 体の高さとHTMLを設定する必要があります。 モバイルファーストでデザインする際のCSSの書き方 [ホームページ作成] All About, レスポンシブ・ウェブデザインを採用してCSS(スタイルシート)を記述するためには、「ブレイクポイントをどう設定するか？」を決める必要があります。モバイル端末とPC環境の境界を何pxに設定するか、迷うことも多いのではないでしょうか。そこで、「代表的な端末の画面幅」と「最近の画面解像度シェア」の2点を参考にして、ブレイクポイントを選定する方法をご紹介致します。, 出典： 高さ不明のブロック要素の比率を維持させる方法をご紹介します。応用やブラウザ対策まで。レスポンシブデザインのコーディングにそのまま使えるcssテクニックです。 【CSS】img画像の縦横比を保ったままボックス内に収める方法 「条件付き書式」で行全体の色を自動的に変える方法(Google スプレッドシート) `position : fixed`で全画面表示する時の悩み解消法; 新世代の武道具店「ばんとう武道商店」に行ってきました！ 初心者向けにCSSでスマホの横幅と画面を合わせる方法について解説しています。スマートフォンとPCとの解像度の違い、メタタグとviewportの使い方を説明します。実際の画面での見え方を確認しましょう。 閲覧者の画面サイズに応じて適用するcssを分ける方法が、レスポンシブ・ウェブデザインです。ウェブサイトは1つだけでありながら、閲覧者の環境に適したデザインに表示分けができます。ウェブページをレスポンシブ化する解説記事を12本まとめました。 絶対位置への配置です。static以外が指定された親要素を基準とした配置です（ほとんどの場合relativeになります）。static以外を指定した親要素が無けれ … 幅・高さが指定できるのは要素がdisplay:blockもしくはinline-blockのとき, つまりwidth:100%の要素にborderかpaddingが指定されていると、その分だけ親要素からはみ出てしまうのです。この問題に対してはいくつかの対処法があります。その中でも一番簡単で分かりやすい対処法は, 「親の親の親の親…まで全くpxで指定されていなかったら、%指定の幅はどうやって決まるのか」, その場合width:80%と指定しても、ページを見る人の環境によって要素の絶対値的な大きさが変わるわけですね。, この２つの知識はスマホ、PC、タブレットなど様々な大きさに対応する「レスポンシブWebデザイン」を作るときに必要になるので一度目を通しておくと良いでしょう。, このように親要素のheightが指定されている場合に限り、heightの%を指定することができます。, height・widthの値としては、まず①auto ②◯◯px ③◯◯%の3つを覚えよう, height: autoだと要素の中身（文や画像、子要素、paddingなど）の分だけの高さに. スマートフォンの画面サイズ. 以上、テキスト入力欄の高さを画面(ブラウザ)の高さ100％に合わせるCSSには、単位vhを使って「100vh」を指定すると楽だという話でした。 なお、CSSで長さに使える単位「vh」は、現在ではほぼ「どんなブラウザでも表示できる」と考えて差し支えないでしょう。 【CSSとjQuery】ボックスの高さをブラウザの高さに合わせるテク3つ！ 公開日:2017/11/10 / 最終更新日:2019/02/09. ボックスの高さを画面サイズの高さに合わせる方法【jQuery & CSS】 PCやスマホなど、画面のサイズはデバイスの種類によって違いますが、メインビジュアルの画像などを各デバイスの画面の高さに合わせて表示したい時があると思います。 閲覧者の画面サイズに応じて適用するCSSを分ける方法が、レスポンシブ・ウェブデザインです。ウェブサイトは1つだけでありながら、閲覧者の環境に適したデザインに表示分けができます。ウェブページをレスポンシブ化する解説記事を12本まとめました。, ホームページ作成 ガイド 画像を表示するimgタグに、以下のCSSを設定します。vw(Viewport Width)というCSS3から追加された単位を使うことにより、画面の横幅に応じた比率で、画像の縦横比も維持しながら調整可能です。 レスポンシブ・ウェブデザインの簡単な作り方 [ホームページ作成] All About, メディアクエリ(Media Queries)とは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の細かな条件に応じて、適用するスタイルシートを切り替えられるCSS3の機能です。スクリプトを用いることなく「パソコンなどの広い画面で見るとき専用のCSS」・「スマートフォンなどの狭い画面で見るとき専用のCSS」のように閲覧環境別のデザインを簡単に用意できます。, 出典： CSS3では、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる機能が加わりました。 従来でも、img要素を使って画像を表示していれば、描画領域に合わせて自動的に画像サイズを拡大・縮小させるのは簡単でした。が、背景画像に関しては表示位置を調節するくらいしか方法がなかったのですよね。 しかし！ CSS3で追加されたbackground-sizeプロパティを使えば、背景画像を描画領域の面積に合わせて自動で拡大・縮小させ、描画領域内にぴったり合わせ … tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About, 閲覧者の画面が広くても狭くても、表示可能な領域全体を自動で有効に活用できるよう掲載する方法もあります。, 大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。, 出典： css メディア クエリを使用してレスポンシブにする cssのメディアクエリを使用することで、デバイスの状態(解像度など)に応じたサイズ変更が可能になります。 以下の例ではpタグのサイズを変更しています。