転職サイト口コミ

レスポンシブ作りかけ

モバイルファースト

スマホ画面を基準に作り、タブレット画面やデスクトップ画面をメディアクエリで指定する方法です。スマホ画面とタブレット画面とデスクトップ画面で共通する項目はスマホ画面のCSSに記述します。


タブレット画面とデスクトップ画面のそれぞれ特有のCSSだけ記述します。開発に慣れるとモバイルファーストの方が記述量が減らせるので便利です。

モバイルファーストではmin-widthを指定します。

min-widthとは最小幅を指定するプロパティです。

例えば、ブレイクポイントは以下のようになります。

スマートフォン横以上:@media screen and (min-width : 481px){}

タブレット縦以上:@media screen and (min-width : 769px){}

実際にどのように変化するかHTMLとCSSを記述して確認してみましょう。

<p>レスポンシブデザイン</p>p {color: black;}@media screen and (min-width: 481px) {p {color: red; }}@media screen and (min-width: 769px) {p {color: blue;}}

レスポンシブデザインパターン

縦横比を維持して拡大縮小

縦横比を3:4に維持して拡大縮小する例
<div class="item">  <p class="item-content">テキスト</p></div>
==========.item{ width: 100%;  position:relative;}.item::before{  content:"";  display: block;  padding-top: 75%;  (3/4に編集)}.item-content{  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  background-color: yellow;}==========

縦横比を維持せず拡大縮小

コンテンツの縦幅を基準にして拡大縮小します。画像などで使用されることが多いです。html<img class="item" src="img/red.jpg" alt="">
css.item{ width: 100%;  height: auto;}

メディアクエリで拡大縮小

メディアクエリを使用することでデバイスごと要素の大きさを変えることができます。<p class="item">要素</p>.item {  font-size: 32px;}@media screen and (max-width: 768px){  .item{  font-size: 16px;  }}
@media screen and (max-width: 480px){  .item{  font-size: 12px;  }}

別の要素を表示するパターン

スマホ版とパソコン版の要素を2つ用意しておき、それぞれの時に要素の表示と非表示を切り替えていくパターンです。こういったパターンは実装するのは至って簡単です。要素を二つコーディングしておいて、メディアクエリでdisplay: none;によって表示と非表示を切り替えるだけです。<p class="item1">要素1</p><p class="item2">要素2</p>
.item2 {  display: none;}@media screen and (max-width: 768px){  .item1{    display: none;  }  .item2{    display: block; }}

レイアウトで折り返すパターン

画面幅が大きいときは横に並べておき、幅が小さい時は縦にならべるパターンです。記事一覧のカードが画面が小さくなるにつれ3列から2列、2列から1列になっていくイメージです。このパターンを実装する方法にはFlexboxがおすすめです。【HTML】<div class="parent">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div></div>
【CSS】.parent {  display: flex;  justify-content: space-between;  flex-wrap: wrap;}.child {  width: 33%;  height: 200px;  background: #ff0000;}@media screen and (max-width: 768px){  .child {width: 49%;}}@media screen and (max-width: 480px){  .child {    width: 100%;  }}

p {  color: black;}@media screen and (max-width: 768px)

{  p {    color: blue;  }}@media screen and (max-width: 480px)

{  p {  color: red;  }}

-転職サイト口コミ