ヘッダー

基礎実習2 レシポンシブ設定

topへ戻る

セクション

CSS

body {
    margin: 0; padding: 0; }
header {
    height: 300px;
    width: 100%;
    background-color: #eabf2a;
}
nav {
    width: 100%;
    height: 100px;
    background-color: #da5789;
}
main {
    display: flex;
    height: 1000px;
}
aside {
    flex: 1;
    background-color: #e88e4f;
}
section {
    flex: 2;
    background-color: #35aedd;
}
footer {
    height: 300px;
    width: 100%;
    background-color: #d55167;
}
@media screen and (max-width:600px){
nav{
    display: none;
    }
main{
    flex-direction: column;
    height: auto;
    }
}