Простий приклад галереї на семантичних тегах – частина 1

Сьогодні починаємо розгляд прикладу простої галереї на семантичних HTML тегах.

Сам приклад буде складатися з кількох частин. Пропонується перша частина прикладу.

Галерея складається з дев’яти малюнків, розміщених сіткою, зі стилізованими підписом до кожного малюнку.

Дана галерея презентується як навчальний приклад для виконання практичного завдання.

Код HTML

<main>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure><img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure><img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>
<figure>
<img src="img/flamingo.png" alt="">
<figcaption>Фламінго</figcaption>
</figure>    
</main>

Код CSS

*{margin:0; font-size: calc(1em + 1vw);} main{ display:grid; grid-template-columns:repeat(3,1fr); gap:2em; } figure img { width: 100%; height: 100%; object-fit: cover; } figcaption { background-color:#bfffbf; text-align:center; line-height: 2em; }

Вигляд

Семантична галерея

Семантична галерея

Я думаю, що до HTML коду складностей не виникне, а CSS код з коментарями – поясненнями до кожного рядка варто дослідити.

/* Встановлюємо нульові відступи для всіх елементів на сторінці */
* {margin:0;
   /* Встановлюємо розмір шрифта, використовуючи функцію calc(), 
       яка дозволяє виконувати обчислення прямо у значеннях CSS.
       Тут розмір шрифта встановлюється як сума 0.5em і 1vw.
       0.5em - це відносна одиниця, заснована на розмірі шрифта батьківського елемента.
       1vw - це одиниця відносна до 1% ширини вікна переглядача.
       Таким чином, розмір шрифта адаптується до ширини вікна переглядача, 
       забезпечуючи більшу гнучкість і кращу адаптивність на різних пристроях. */
    font-size: calc(0.5em + 1vw);
}

/* Стилізуємо елемент <main> */
main {
    /* Встановлюємо тип відображення елемента як сітку (grid) */
    display: grid;

    /* Визначаємо три колонки в сітці з однаковою шириною. Функція repeat(3, 1fr) означає, 
       що буде створено три колонки з однаковою "гнучкою" шириною (1fr) */
    grid-template-columns: repeat(3, 1fr);

    /* Встановлюємо відступи між елементами сітки (колонками та рядками) */
    gap: 2em;
}

/* Стилізуємо зображення всередині тега <figure> */
figure img {
    /* Встановлюємо ширину зображення на 100% від ширини свого контейнера */
    width: 100%;

    /* Встановлюємо висоту зображення на 100% від висоти свого контейнера */
    height: 100%;

    /* Визначаємо, як зображення має заповнювати свій контейнер, 
       'cover' означає, що зображення буде масштабуватися для заповнення контейнера, 
       при цьому його пропорції зберігаються */
    object-fit: cover;
}

/* Стилізуємо тег <figcaption>, який зазвичай використовується для опису зображення */
figcaption {
    /* Встановлює колір фону для <figcaption> */
    background-color: #bfffbf;

    /* Вирівнює текст всередині <figcaption> по центру */
    text-align: center;

    /* Встановлює висоту рядка тексту, що в два рази перевищує розмір шрифта */
    line-height: 2em;
}

Переглянути робочий приклад в онлайн редакторі коду «Practice».

Продовження прикладу дивіться Простий приклад галереї на семантичних тегах – частина 2

Залишити відповідь