H12 - Media queries en responsive layout

Je gaat verder met dezelfde desktopsite uit H11. Op een smal scherm komen de hoofddelen onder elkaar en passen menu, footer, kaarten en tabel zich aan. De eindopdracht is het afronden en controleren van je bestaande werk.

Een website wordt bekeken op grote schermen, laptops, tablets en telefoons. Een layout die op een breed scherm mooi werkt, kan op een smal scherm te krap worden.

Responsive design betekent dat de layout zich aanpast aan de beschikbare schermruimte. De HTML blijft meestal hetzelfde. De CSS verandert de plaatsing, breedtes en soms de volgorde.

• Op een desktop kun je meerdere kolommen naast elkaar zetten.
• Op een telefoon zet je onderdelen meestal onder elkaar.
• Media queries gebruik je om CSS-regels alleen bij bepaalde schermgroottes toe te passen.
• De inhoud blijft bereikbaar op elk scherm.

Een media query stelt een voorwaarde. De CSS binnen de query geldt alleen wanneer die voorwaarde klopt. Deze tijdelijke proefrand maakt zichtbaar wanneer de query actief is, ook boven je achtergrondafbeelding.

@media (max-width: 900px) {
    .site-header {
        border: 4px solid var(--kleur-accent);
    }
}

• @media start de voorwaarde.
• max-width: 900px geldt tot en met 900 pixels vensterbreedte.
• Boven 900 pixels doet deze proefregel niets.
• Je gewone externe CSS blijft op beide breedtes werken.

Desktop eerst begint bij een brede layout en vereenvoudigt die met max-width. Mobiel eerst begint bij één kolom en breidt die met min-width uit. Voor jouw bestaande H11-site kiezen we desktop eerst; je hebt de brede indeling al.

Desktop eerst: onze aanpak

/* De bestaande drie-kolomsregels staan hierboven. */
@media (max-width: 900px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

Mobiel eerst: alleen ter vergelijking

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header" "nav" "main" "aside" "footer";
}

@media (min-width: 901px) {
    body {
        grid-template-columns: 190px minmax(0, 1fr) 230px;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header header header"
            "nav    main   aside"
            "footer footer footer";
    }
}

Verander bij named areas niet alleen het kolomaantal: ook de rijen en de tekening moeten bij de nieuwe indeling passen. Voeg de twee aanpakken niet allebei toe. In item 8 maken we onze desktop-eerstquery compleet.

De Holy Grail layout is een klassieke webdesign-layout. Hij bestaat uit een header bovenaan, een navigatiekolom links, hoofdinhoud in het midden, een zijbalk rechts en een footer onderaan.

+--------------------------------------+
| header                               |
+----------+----------------+----------+
| nav      | main           | aside    |
+----------+----------------+----------+
| footer                               |
+--------------------------------------+

• header staat bovenaan.
• nav staat links.
• main is de belangrijkste inhoud.
• aside is extra informatie aan de rechterkant.
• footer staat onderaan.

Vroeger was deze layout lastig te maken. Met CSS Grid en named grid areas is hij overzichtelijk.

De bestaande semantische body-structuur blijft gelijk. In de head hoort ook een viewport-instelling, zodat telefoons je media queries op hun werkelijke apparaatbreedte kunnen gebruiken. Geef de vier pagina’s ieder een eigen title en description.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Mijn eigen projecten en interesses.">
    <title>Home | Sam de Vries</title>
    <link rel="stylesheet" href="style.css">
</head>

Alle pagina’s verwijzen naar dezelfde externe style.css. Inline CSS en style-blokken waren tijdelijke oefeningen en horen niet in deze eindversie.

Elk onderdeel krijgt in CSS een grid-area naam. Die namen gebruiken we straks in grid-template-areas.

.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.site-main { grid-area: main; min-width: 0; }
.site-aside { grid-area: aside; }
.site-footer { grid-area: footer; }

• De naam achter grid-area kies je zelf.
• Gebruik korte en duidelijke namen.
• Dezelfde namen moeten terugkomen in grid-template-areas.

Dit is de brede Holy Grail-layout die je in H11 al hebt gemaakt. De header en footer lopen over drie kolommen. De middelste rij bestaat uit navigatie, hoofdinhoud en zijbalk.

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 24px;
}

• 190px is de linkerkolom voor de navigatie.
• minmax(0, 1fr) is de flexibele middenkolom voor de hoofdinhoud. fr betekent fractie van de beschikbare ruimte.
• 230px is de rechterkolom voor de zijbalk.
• auto 1fr auto maakt drie rijen: boven, midden en onder.
• gap maakt ruimte tussen de vakken.

Op een smal scherm passen drie kolommen vaak niet goed. Daarom maken we met een media query één kolom. De onderdelen komen dan netjes onder elkaar.

@media (max-width: 900px) {
    body {
        padding: 16px;
        gap: 16px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }

    .site-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

• Er is nu maar één kolom: 1fr.
• Elke rij heeft daarom ook maar één naam.
• De volgorde is duidelijk van boven naar beneden.
• De HTML hoeft hiervoor niet aangepast te worden.

Een gegevenstabel kan breder zijn dan een telefoon. Zet alleen die tabel in een technische wrapper binnen de bestaande projecttabel-section. De inhoud blijft intact; de wrapper mag horizontaal scrollen. Tabindex maakt hem met het toetsenbord bereikbaar.

<div class="tabel-wrapper" tabindex="0" role="region" aria-label="Projectoverzicht">
    <!-- Hier blijft je bestaande volledige table met caption, thead en tbody staan. -->
</div>

.tabel-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 420px;
}

Hier zie je hoe de bestaande onderdelen samenkomen. Het HTML-voorbeeld is Home; Portfolio, Over en Contact houden dezelfde buitenstructuur en hebben elk hun eigen inhoud, title, description en huidige menulink. Gebruik je eigen teksten en bestanden; controleer afbeeldingsafmetingen tegen je eigen beelden.

De hoofdindeling is grid. De nav bevat een flexibele menulijst, de footer is zelf een flex-container en de projectkaarten op Portfolio gebruiken hun eigen flexbox. Alle vier de pagina’s verwijzen naar dezelfde externe style.css.

Home: index.html

<!doctype html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Ontdek de projecten van Sam de Vries, beginnend webmaker.">
    <title>Home | Sam de Vries</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <p>Sam de Vries · Portfolio</p>
        <h1>Ik maak ideeën zichtbaar.</h1>
    </header>

    <nav class="site-nav" aria-label="Hoofdnavigatie">
        <ul>
            <li><a href="index.html" class="huidig" aria-current="page">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="over.html">Over</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <main class="site-main">
        <div class="pagina-breedte">
            <p class="intro">Ik ben Sam. Ik leer ontwerpen en websites bouwen met HTML en CSS.</p>
            <p><a href="#projecten">Bekijk mijn uitgelichte werk</a></p>
            <section id="projecten">
                <h2>Uitgelicht werk</h2>
                <article class="kaart uitgelicht">
                    <h3>Mijn eerste website</h3>
                    <a href="portfolio.html">
                        <img src="img/project-01.webp" alt="Bekijk het project Mijn eerste website" width="640" height="400">
                    </a>
                    <p>Een <strong>eigen portfolio</strong>, gemaakt door <em>stap voor stap</em> te leren.</p>
                </article>
            </section>
            <section>
                <h2>Over mij</h2>
                <p>Ik ontdek graag hoe een idee een bruikbare website wordt.</p>
                <a href="over.html">Lees meer over mij</a>
            </section>
        </div>
    </main>

    <aside class="site-aside">
        <h2>Nu aan het leren</h2>
        <p>Responsive websites die op elk scherm prettig werken.</p>
        <a href="contact.html">Neem contact op</a>
    </aside>

    <footer class="site-footer">
        <p>© Sam de Vries</p>
        <p>Gemaakt met HTML en CSS</p>
        <a href="mailto:sam@example.com">Stuur een e-mail</a>
    </footer>
</body>
</html>

Gedeeld bestand: style.css

Vergelijk de regels per onderdeel met je eigen stylesheet en werk die bij; plak niet blind een tweede volledige set eronder. De variabelen, inhoud, afbeeldingen en kaartclasses uit eerdere hoofdstukken blijven behouden.

:root {
    --kleur-tekst: #17233b;
    --kleur-achtergrond: #e7eef6;
    --kleur-vlak: #ffffff;
    --kleur-accent: #2458d3;
    --kleur-accent-donker: #183b91;
    --kleur-rand: #d3ddec;
}

* {
    box-sizing: border-box;
}

/* Basis en hoofdindeling */
body {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: var(--kleur-tekst);
    background-color: var(--kleur-achtergrond);
    background-image: url("img/achtergrond.webp");
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 24px;
}

.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.site-main { grid-area: main; min-width: 0; }
.site-aside { grid-area: aside; }
.site-footer { grid-area: footer; }

.site-header,
.site-nav,
.site-main,
.site-aside,
.site-footer {
    padding: 24px;
    border: 1px solid var(--kleur-rand);
    border-radius: 16px;
    background-color: var(--kleur-vlak);
    /* Optionele afwerking: een zachte, donkere schaduw. */
    box-shadow: 0 8px 28px rgb(23 35 59 / 8%);
}

.pagina-breedte {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Tekst, beelden en links */
h1, h2, h3, p {
    margin-top: 0;
    margin-bottom: 16px;
}

h1 {
    font-size: 40px;
    line-height: 1.2;
}

.intro {
    font-size: 20px;
}

section {
    margin-bottom: 24px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

a {
    color: var(--kleur-accent);
}

a:hover {
    color: var(--kleur-accent-donker);
}

a:focus-visible,
.tabel-wrapper:focus-visible {
    outline: 3px solid var(--kleur-accent);
    outline-offset: 4px;
}

/* Flexbox binnen de navigatie */
.site-nav ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-nav a {
    display: block;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--kleur-tekst);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav .huidig {
    border-color: var(--kleur-accent);
    color: var(--kleur-accent-donker);
    font-weight: bold;
    text-decoration: underline;
}

/* De bestaande projectkaarten op Portfolio */
.kaarten {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
}

.kaart {
    flex: 1 1 220px;
    min-width: 0;
    padding: 20px 24px;
    border: 1px solid var(--kleur-rand);
    border-radius: 16px;
    background-color: var(--kleur-vlak);
}

.uitgelicht {
    border-color: var(--kleur-accent);
}

/* Tabel op Portfolio */
.tabel-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border: 1px solid var(--kleur-rand);
    text-align: left;
}

th {
    background-color: var(--kleur-achtergrond);
}

/* Flexbox binnen de footer */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.site-footer p {
    margin: 0;
}

/* Aanpassingen voor smalle schermen */
@media (max-width: 900px) {
    body {
        padding: 16px;
        gap: 16px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }

    .site-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

De afronding van hoeken ken je uit H6. Box-shadow is optioneel: de waarden betekenen horizontale verplaatsing, verticale verplaatsing, vervaging en schaduwkleur. Focus-visible tekent een duidelijke focusrand voor toetsenbordbediening; outline neemt geen plaats in de layout in. Je mag je eigen kleurkeuze behouden, zolang links en tekst goed leesbaar blijven.

• Begin met een duidelijke HTML-structuur.
• Gebruik grid-template-areas om de layout leesbaar te houden.
• Gebruik duidelijke grid-area namen.
• Test je layout op een breed scherm en een smal scherm.
• Gebruik de browser-inspector om de grid-overlay te bekijken.
• Gebruik media queries om de layout eenvoudiger te maken op kleine schermen.
• Verander alleen wat nodig is in de media query.