Hızlı HTML & CSS Mini Örnekleri: Basit Layout ve Responsive

Bu rehber kısa, uygulanabilir HTML & CSS örnekleriyle basit layout ve responsive çözümler gösterir. Aşağıdaki örneklerde Flexbox ve CSS Grid kullanımı, medya sorguları ve bir CSS-only açılır menü örneği yer alır. Responsive tasarımın önemi ve temel uygulamalar için bkz: Responsive Web Tasarım: Mobil Uyumlu Site Nasıl Yapılır? (GK).

Hızlı not: ne zaman hangi aracı seçmeli?

Flexbox tek eksende hizalama ve esnek sütun/orta-kolon düzenleri için etkilidir. CSS Grid ise iki eksenli (satır ve sütun) daha karmaşık düzenleri kolaylaştırır. Bu iki yöntemin responsive projelerde yaygın kullanımı ve avantajları için bkz. GK rehberi: kaynak.

Mobil öncelikli yaklaşım

Mobil öncelikli (mobile-first) tasarım, önce küçük ekranlar için stiller yazıp sonra büyük ekranlara genişletmeyi önerir. Bu yaklaşım, kaynaklar ve tartışmalar çerçevesinde sıkça önerilir; başlangıç için faydalı referans: Getting started with responsive website layout (Stack Overflow).

Örnek 1 — Basit iki sütunlu düzen (Flexbox)

Aşağıdaki örnek, bir yan menü ve ana içerik sütunu içeren basit, responsive bir layout gösterir. Küçük ekranlarda sütunlar alt alta gelir; büyük ekranlarda yanyana görünür.

<!-- HTML -->
<div class="container">
<header class="site-header">Logo / Başlık</header>
<div class="content">
<aside class="sidebar">Yan menü</aside>
<main class="main">Ana içerik</main>
</div>
<footer class="site-footer">Alt bilgi</footer>
</div>
/* CSS */
* { box-sizing: border-box; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.content { display: flex; flex-wrap: wrap; gap: 16px; }
.sidebar { flex: 1 1 250px; min-width: 200px; }
.main { flex: 2 1 500px; }
@media (max-width: 768px) { .content { flex-direction: column; } }

Açıklama: .content bloğu flex olarak ayarlanır ve flex-wrap sayesinde alan daraldığında öğeler alt alta geçer. flex değerleri ile öğe genişlikleri esnetilip öncelik verilebilir.

Örnek 2 — Kart düzeni (CSS Grid)

Grid ile bir kart galerisini responsive şekilde düzenlemek çok kısa kodla mümkündür. Aşağıdaki örnek otomatik sığan sütunlar kullanır (auto-fit / minmax).

<div class="grid">
<article class="card">Kart 1</article>
<article class="card">Kart 2</article>
<article class="card">Kart 3</article>
<!-- ... -->
</div>
/* CSS */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
@media (max-width: 480px) { .card { padding: 12px; } }

Açıklama: repeat(auto-fit, minmax(...)) yapısı, mümkün olan maksimum sütun sayısını ve sütunların minimum genişliğini tanımlayarak düzeni otomatik olarak kapsayıcı genişliğe göre değiştirir. Bu yaklaşım Grid'i responsive yapmak için güçlü bir yöntemdir (kaynak: GK).

Örnek 3 — Basit responsive açılır menü (sadece HTML & CSS)

JavaScript kullanmadan basit bir açılır menü yapmak için checkbox hilesi (checkbox hack) kullanılabilir. Aşağıda temel bir yapı yer alır; bu yaklaşımın erişilebilirlik sınırlarını göz önünde bulundurun ve gerektiğinde JavaScript tabanlı çözümlerle tamamlayın. Kod örneği ve açıklama için ayrıca şuraya bakabilirsiniz: Html ve Css Kullanarak Responsive Açılır Menü Örneği (Kodlamaklazım).

<nav class="nav">
<label for="menu-toggle" class="menu-icon">☰ Menü</label>
<input type="checkbox" id="menu-toggle" class="menu-toggle">
<ul class="nav-list">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
/* CSS (özet) */
.menu-toggle { display: none; }
.nav-list { display: none; list-style: none; padding: 0; margin: 8px 0 0 0; }
.menu-toggle:checked + .nav-list { display: block; }
@media (min-width: 769px) { .nav-list { display: flex; } .menu-icon { display: none; } }

Not: Bu yöntem basit siteler ve prototipler için uygundur. Erişilebilirlik ve klavye desteği için ek önlemler almayı unutmayın (ör. ARIA rolleri, focus yönetimi).

Medya sorguları ve esnek birimler

Responsive düzenlerde esnek birimler (%, vw, rem) ve medya sorguları birlikte kullanılır. Küçük ekranlar için önce temel stilleri yazıp sonra daha geniş ekranlar için @media eklemek, mobil öncelikli gelişim akışını kolaylaştırır (tartışma ve öneriler: Stack Overflow).

Hızlı kontrol listesi (release öncesi)

  • Cihaz boyutlarında temel akış testi (telefon, tablet, desktop).
  • Esnek birimler ve mobil-first medya sorguları kullanımı.
  • Menü ve formların klavye ile kullanılabilirliği (erişilebilirlik).
  • Görseller için uygun boyut ve srcset kullanımı.
  • Performans: kritik CSS'yi önceliklendirme ve gereksiz büyük dosyalardan kaçınma.

Adım adım uygulama önerisi

  1. Tasarımı kağıt üzerinde veya tasarım araçlarında küçük ekran için planlayın.
  2. HTML yapısını basit ve semantik tutun.
  3. Önce mobil stiller, sonra geniş ekranlar için medya sorguları yazın.
  4. Flexbox veya Grid'i ihtiyaçlara göre seçin (tek eksen için Flexbox, iki eksen için Grid).
  5. Tarayıcı devtools ve gerçek cihazlarda test edin.

Kaynaklar ve ileri okuma

Bu örnekler eğitseldir; canlı projede kullanmadan önce tarayıcı uyumluluğu ve erişilebilirlik testleri yapmanız önerilir.