Gereksinimler ve Ön Hazırlık
Bu uygulamayı gerçekleştirmek için herhangi bir özel yazılım kurulumuna ihtiyacınız yoktur. Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve bir kod editörü (VS Code gibi) yeterlidir. Projenizin kök dizininde bir index.html ve bir style.css dosyası oluşturarak işe başlayabilirsiniz.
HTML5 standartlarını takip edeceğimiz için ve
Adım 1: HTML Yapısını Oluşturma
İçindekiler listesinin temelini oluştururken, hiyerarşik bir yapı kurmak önemlidir. etiketi, içindekiler listesinin dokümanın bir navigasyon bölümü olduğunu belirtir. İçeride ise liste öğeleri için etiketlerini kullanacağız.
Adım 2: CSS ile Görselleştirme
Listenin varsayılan görünümü oldukça sadedir. CSS kullanarak bunu modern bir arayüze dönüştürebiliriz. Liste işaretlerini kaldırmak ve boşlukları düzenlemek, ilk adımımız olmalıdır.
.toc-container {
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
max-width: 300px;
}
.toc-list {
list-style-type: none;
padding: 0;
}
.toc-list li {
margin-bottom: 10px;
}
.toc-list a {
text-decoration: none;
color: #333;
transition: color 0.3s ease;
}
Yukarıdaki kod bloğu, listeye temiz bir görünüm kazandırır. transition özelliği ise bağlantıların üzerine gelindiğinde renk geçişini yumuşatır.
Adım 3: Etkileşimli Hover Efektleri Ekleme
Kullanıcıların hangi başlığın üzerinde olduklarını anlamaları için etkileşimli CSS sınıfları eklemeliyiz. Bu, tasarımın profesyonel görünmesini sağlar.
.toc-list a:hover {
color: #007bff;
padding-left: 5px;
border-left: 3px solid #007bff;
}
Bu stil, kullanıcı fareyi bir bağlantının üzerine getirdiğinde hem rengin değişmesini hem de hafif bir girinti efektiyle görsel bir geri bildirim oluşmasını sağlar.
Adım 4: İçindekiler Listesi İçin Karşılaştırma Tablosu
Farklı yöntemlerin avantaj ve dezavantajlarını anlamak, doğru tekniği seçmenize yardımcı olur.
Yöntem
Avantaj
Dezavantaj
Saf HTML/CSS
Hızlı, hafif, bağımlılık yok
Dinamik içerikte manuel güncelleme
JavaScript Destekli
Otomatik başlık algılama
Daha fazla dosya boyutu
Adım 5: Sayfa İçi Yumuşak Kaydırma (Smooth Scroll)
Kullanıcı bir bağlantıya tıkladığında sayfanın aniden zıplaması yerine yumuşak bir şekilde kayması, modern web sitelerinin olmazsa olmazıdır. Bunu CSS ile tek satırda yapabilirsiniz.
html {
scroll-behavior: smooth;
}
Bu kod, tüm sayfa içindeki bağlantıların hedeflerine giderken yumuşak bir animasyonla kaymasını sağlar. Bu özellik, 2026 yılı itibarıyla tüm modern tarayıcılar tarafından desteklenmektedir.
Adım 6: Responsiveness (Duyarlılık) Ayarları
Mobil cihazlarda içindekiler listesinin çok yer kaplamasını istemeyebilirsiniz. CSS Medya Sorguları (Media Queries) kullanarak ekran küçüldüğünde listenin tasarımını değiştirebiliriz.
@media (max-width: 600px) {
.toc-container {
max-width: 100%;
padding: 10px;
}
}
Bu yapı, ekran genişliği 600 pikselin altına düştüğünde listenin tüm genişliği kaplamasını sağlar. Böylece mobil cihazlarda daha iyi bir okuma deneyimi sunulur.
Güvenlik Uyarısı: HTML içeriğinize kullanıcıdan gelen verileri doğrudan ekliyorsanız, XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. İçeriklerinizi her zaman temizleyin veya güvenli bir şekilde render edin.
Sıkça Sorulan Sorular
İçindekiler listesi SEO'yu etkiler mi?
Evet, Google gibi arama motorları, yapılandırılmış bir içindekiler listesini "sitelinks" olarak arama sonuçlarında gösterebilir ve bu da tıklanma oranınızı artırır.
CSS ile içindekiler listesini otomatik numaralandırabilir miyim?
Evet, CSS counter-reset ve counter-increment özelliklerini kullanarak HTML'de sayı yazmadan otomatik numaralandırma yapabilirsiniz.
Bu yöntem tüm tarayıcılarda çalışır mı?
Evet, paylaşılan tüm CSS özellikleri modern tarayıcıların tamamında desteklenmektedir.
İçindekiler listesi ne kadar uzun olmalı?
Kullanıcının ekranını tamamen kaplamayacak kadar kısa tutulmalı, gerekirse uzun listeler için "daraltılabilir" bir yapı tercih edilmelidir.
Daha fazla hiyerarşi eklemek istersem ne yapmalıyım?
İçindekiler Listesi İçin İleri Düzey CSS İpuçları
İçindekiler listenizi daha profesyonel ve kullanıcı odaklı hale getirmek için CSS'in sunduğu modern seçicileri ve özellikleri kullanabilirsiniz. Özellikle :target sözde sınıfı, kullanıcı bir başlığa tıkladığında o başlığın vurgulanmasını sağlayarak kullanıcı deneyimini (UX) bir üst seviyeye taşır.
Aşağıdaki örnekte, tıklanan başlığın arka planını geçici olarak değiştirerek kullanıcıya görsel bir geri bildirim sunan bir yapı mevcuttur:
/* Tıklanan başlığı vurgula */
:target {
background-color: #fff3cd;
border-left: 5px solid #ffc107;
padding-left: 10px;
transition: all 0.3s ease;
}
/* Liste öğeleri için özel işaretçiler */
.toc-list li::marker {
color: #007bff;
font-weight: bold;
}
Ayrıca, uzun içeriklerde okuyucunun kaybolmaması için position: sticky özelliğini kullanarak içindekiler listesini ekranın kenarında sabitleyebilirsiniz. Bu, kullanıcının sayfayı kaydırırken her an navigasyona erişebilmesini sağlar.
Performans ve Erişilebilirlik Optimizasyonu
İçindekiler listesi oluştururken dikkat edilmesi gereken en önemli konulardan biri, ekran okuyucular (screen readers) için erişilebilirliktir. nav etiketi içerisinde aria-label kullanarak bu bölümün amacını belirtmek, engelli kullanıcılar için büyük bir kolaylık sağlar.
Performans açısından ise, çok uzun listelerde CSS dosyalarınızın boyutunu korumak için gereksiz animasyonlardan kaçınmalı ve mümkünse will-change özelliğini kullanarak tarayıcıya hangi öğelerin değişeceğini önceden bildirmelisiniz.
Erişilebilirlik İçin HTML Yapısı
Bu Sayfada
İpucu: Eğer sayfanızda çok fazla başlık varsa, içindekiler listesini "Göz At" veya "Hızlı Erişim" başlığı altında gruplandırarak sayfa düzenini sadeleştirebilirsiniz. Ayrıca, mobil cihazlarda bu listeyi tamamen gizleyip, sadece bir "Menü" butonu ile açılır-kapanır şekilde sunmak, küçük ekranlarda alan tasarrufu sağlar.
Hata Ayıklama (Debugging) Stratejileri
İçindekiler listesinin çalışmadığı veya bağlantıların yanlış yere gittiği durumlarda şu adımları izleyebilirsiniz:
- ID Çakışmaları: Sayfa içerisinde aynı
id değerine sahip birden fazla öğe olmadığından emin olun.
- Z-Index Sorunları: Eğer listeniz sabit (fixed) konumdaysa, diğer öğelerin altında kalıp kalmadığını
z-index değerini artırarak kontrol edin.
- Scroll Padding: Sabit bir üst menünüz varsa, başlıkların menünün altında kalmaması için
scroll-padding-top özelliğini CSS içerisinde html etiketine uygulayın.
html {
scroll-padding-top: 80px; /* Sabit menü yüksekliğiniz kadar */
}
Sonuç
Bu rehberde, Html & Css ile özelleştirilebilir bir içindekiler listesi nasıl yapılır konusunu adım adım inceledik. Semantik HTML kullanımı, CSS ile görselleştirme ve yumuşak kaydırma gibi tekniklerle kullanıcı dostu bir navigasyon yapısı oluşturduk. Bir sonraki adım olarak, bu statik yapıyı JavaScript kullanarak otomatik başlık toplayan dinamik bir yapıya dönüştürmeyi deneyebilirsiniz.
Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Üretim ortamında kullanmadan önce tarayıcı uyumluluğunu test etmeniz ve web standartlarına uygunluğunu doğrulamanız önerilir.
Yorumlar (0)
Yorum Yaz