Про те, як Аня html та css бавилась.

Давно я не поверталась до свого блогу. А от нещодавно вирішила таки навести трошки порядок у ньому. Обрала один із стандартних адаптивних дизайнів сервісу блоггер, змінила всі шрифти на свій улюблений Georgia, змінила фонову картинку, підібрала кольори. Та для цього особливо якихозь знань не потрібно. Достатньо один раз добре розібратисяу стандартних налаштуваннях теми, а далі вже руки самі робитимуть, по пам'яті.

Та я була б не я, якби і там не знайшла собі пригод. Закортіло мені зробити красивий список своїх прозових творів, та не просто, а щоб клікабельні картинки і все це у адаптивній таблиці. Картинки із посиланнями прописуються легко, і блоггер зокрема це також уміє робити за вас.

Адаптивність дизайну чи окремої частини сайту - це те явище, коли він зручно змінюється залежно від розмірів екрану. Всі сучасні зручні сайти саме так і будуються. Аби, коли заходиш зі смартфону чи планшету - сторінка виглядала зручно, достатньо наближено і читабельно.

Так от. Відкопавши у своїй підкорці якісь залишки знань html, які були наздобуті засобом "гайдів" і "втиків", написала таблицю і вкопіювала її у "сторінку" блоггеру. Та от те, що хотілося - не вдалося.
Бо таблиця не хотіла адаптуватися. Це мало виглядати так: у комп'ютерному варіанті три ячійки поряд у один рядок, а коли заходиш зі смарту - ці ячійки мали б автоматично розташовуватись одна під одною, стовбчиком. А вони не змінювали своє положення. Значить код дизайну тут не діє.

Тоді я полізла у всесвіт ютуб і знайшла відеоролик про те, як зробити таблицю адаптивною. І нє, на цьому я не зупинилась.
Побачивши те, що автор ролику пише код таблиці у цікавому редакторі, який вміє купу корисного, навіть самостійно закривати теги і підказувати текст наступного слова у коді - мені захотілося собі цю програму. Завантажила, встановила і після трьох роликів з їх налаштування, нарешті повернулась до відеогайду з адаптивної таблиці.

Звісно, з першого разу в мене код не спрацював. Бо я дуже уважна і пропустила одну букву у одному місці. А програма виявилось ще не всі коди знає, бо не все налаштувала.

Тоді я помітила посилання на код тієї таблиці, що у підсумку отримав автор ролика - під відео, у описі. Яндекс диск. Добре, що для таких випадків зберегла "оперу" на комп'ютері. Завантажила. Працює. Тоді вже на її основі доробила свою таблицю. Звісно, є пара функцій у графі "style", роботу яких я не до кінця розумію, однак код вдався дуже чистий. Що-що, а моїх мінімальних знань вистачає, аби прибрати зайве, побачити шпигунів і погратися з параметрами.

На все пішло два дні. Зате от такий результат (побачити легко - на комп'ютері просто зменшуємо розмір вікна браузера - і таблиця зміниться відповідно заданим параметрам; якщо коротко - адаптивність відштовхується від мінімально дозволеної фіксованої ширини таблиці, і коли ширина вікна браузеру стає менше цієї цифри - таблиця змінюється): Мої твори

П.м.: Якщо комусь потрібно - можу поділитися кодом.🙂