ポートフォーリオ制作(メディアクエリ15)

こんにちは、コンスキです。

今回は、Google DevToolsを使った擬似的なスマホではなく、実物のスマホでサイトを表示してみて、問題なく表示されるかを確認します。

実機で発見した問題

私の手元にあるiPhone 8でこのポートフォーリオを表示した際に次のように表示される部分がありました。

パソコン上でGoogle DevToolsを使ってiPhone 8で表示した時の見た目は既に確認済みです。

その時には、綺麗に表示されていました↓

Webサイトを作っている会社は、制作したサイトを実際のスマホを使って確認する「実機検証」というもの行なっていると聞いたことがあります。

Google DevToolsの検証機能はあくまでも擬似的な検証であって、本物のスマホで表示した時の見た目と全く同じにはならないことを知りました。

ここで困ったことがあります。

それは、スマホだとGoogle DevToolsのような検証機能が使えないということです。

検証機能が使えないと、どの要素のせいでレイアウトが崩れているのか、ピンポイントに知ることができません。

仕方がないので、パソコンの方でGoogle DevToolsを使ってもう一度確認してみました。

すると、変だともう部分がありました。

Blogセクションの要素には高さがなかったんです。

ふと思い出したのですが、 Blogセクションの部分の要素には「position: absolute;」や「position: relative;」というスタイルを多用していました。

子要素に「position: absolute;」を使うと親要素の高さがなくなるんですよね。

もしかしたら、これが原因なのかもしれないと思って、高さがなくなっている要素に十分な高さを設定してみました。

/* Blogセクション */
#blog_content {
	height: 440px;
}
#blog_container {
	height: 440px;
}
#blog_content_container {
	height: 440px;		
}
#blog_content_img_container {
	height: 440px;		
}
#img_slider_item_container {
	height: 210px;
}
#blog_content_pagination {
	left: 20vw;
	top: 0px;
	width: 120px;
}
#blog_content_text_container {
	top: 20px;
}
.blog_text_title {
	font-size: 24px;
	text-align: center;
}
.blog_text_content {
	font-size: 14px;
}

結果は何も変わりませんでした。