このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。
基となる作品
はじめに
レスポンシブデザインとは簡単に説明すると様々なデバイス、画面サイズに応じて見やすく表示させることを言います。
そして、レスポンシブデザインを作る時は固定値(px)はあまり使わず%やvwを設定し、メディアクエリというものを使います。
それでは解説していきます
HTML
<body>
<div class="wrapper">
<div>NoImage</div>
<div>NoImage</div>
<div>NoImage</div>
</div>
</body>CSS
body{
margin: 0;
background-color: pink;
}
.wrapper{
width: 100%;
display: flex;
justify-content: space-around;
}
@media screen and (max-width:757px) {
.wrapper{
display: block;
}
}
.wrapper div{
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 20vw;
border: 1px solid black;
}
@media screen and (max-width:757px){
.wrapper div{
width: 75%;
height: 35vw;
margin: 0 auto;
margin-top: 5vw;
}
}
時は