といっても、dotinstallのコピペ
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Site</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <section> <div class="image">image</div> <div class="text">text</div> <aside>ad</aside> </section> </body> </html>
css
/* common */ /* small screen */ body { margin: 0; } aside { display: none; } .image { background: pink; height: 100px; } .text { background: silver; height: 100px; } /* medium screen */ @media (min-width: 600px) { section { display: flex; } .image { width: 200px; } .text { flex: 1; } } /* large screen */ @media (min-width: 800px) { section { width: 800px; margin: 0 auto; } aside { display: block; background: plum; width: 160px; } }