divを使わないレスポンシブcss
レスポンシブcssではdivを使うことが多いですが、divを使うと、階層が1つ増えます。階層は少なくなればなるほど、表示されるまでの時間が短くなります。ページのスピードをチェックするPageSpeed Insightsでも最大で何階層あるのか表示されるようになっています。
divを使ったレスポンシブcssは例えばこんな感じです。横幅が1025px以上のときにメインとサイドバーを横並びにし、1180px以上のときにメインとサイドバーの幅は固定し残りは余白にしたい場合です。
htmlはdivを追加してこのようになります。
このcssは長いので、関数を使ってもっと省略して書くこともできます。
htmlはdiv無しでこうなります。
divを使ったレスポンシブcssは例えばこんな感じです。横幅が1025px以上のときにメインとサイドバーを横並びにし、1180px以上のときにメインとサイドバーの幅は固定し残りは余白にしたい場合です。
htmlはdivを追加してこのようになります。
<html>
<body>
<header>ヘッダー</header>
<div id='main-content'>
<main>メイン</main>
<aside>サイドバー</aside>
</div>
<footer>フッター</footer>
</body>
</html><style>
#main-content{
display:block;
}
header,footer,main,aside{
width:100%;
}
@media(min-width:1025px){
header,footer,#main-content{
width:90%;
min-width:1000px;
max-width:1180px;
margin-left:auto;
margin-right:auto;
}
#main-content{
display:flex;
}
main{
width:calc(100% - 336px);
}
aside{
width:336px;
}
}
</style>このcssは長いので、関数を使ってもっと省略して書くこともできます。
<style>
#main-content{
display:block;
}
header,footer,main,aside{
width:100%;
}
@media(min-width:1025px){
header,footer,#main-content{
width:clamp(1000px,90%,1180px);
margin:0 auto;
}
#main-content{
display:flex;
}
main{
width:calc(100% - 336px);
}
aside{
width:336px;
}
}
</style>htmlはdiv無しでこうなります。
<html>
<body>
<header>ヘッダー</header>
<main>メイン</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>
</html><style>
header,footer,main,aside{
width:100%;
}
@media(min-width:1025px){
header,footer{
width:clamp(1000px,90%,1180px);
margin:0 auto;
}
main{
float:left;
width:clamp((1000px - 336px),(90% - 336px),(1180px - 336px));
margin-left:clamp(((100% - 1180px)/2),((100% - 90%)/2),((100% - 1000px)/2));
}
aside{
float:left;
width:336px;
}
footer{
clear:both;
}
}
</style>seo