CSS Sayfa Düzenine Giriş

CSS Sayfa Düzeni

Bu makalede, farklı görüntü değerleri gibi bazı CSS düzen özelliklerinin yeniden özetlenmesi ve bu seri boyunca ele alacağımız bazı kavramların tanıtılması yer alacak. Buradaki amaç CSS sayfa düzeni tekniklerine genel bir bakış sunmak.

CSS sayfa düzeni teknikleri, bir web sayfasında bulunan öğeleri almamızı ve aşağıdaki faktörlere göre nereye konumlandırıldıklarını denetlememizi sağlar: normal düzen akışındaki varsayılan konumları, etraflarındaki diğer öğeler, üst kapsayıcılar ve ana görünüm penceresi. Bu seride aşağıdaki sayfa düzeni tekniklerini daha ayrıntılı olarak ele alacağız:

Normal akış
display özelliği
Flexbox
Izgara (Grid)
Float
Konumlandırma
Tablo düzeni
Çok sütunlu düzen

Her tekniğin kullanım alanları, avantajları ve dezavantajları var. Hiçbir teknik kendi başına kullanılması için tasarlanmamış. Her düzen yönteminin ne için tasarlandığını anlayarak, her görev için hangi yöntemin en uygun olduğunu anlayabiliriz.

Normal akış

Normal akış, sayfa düzenini denetlemek için hiçbir şey yapmadığınızda tarayıcının HTML sayfalarını varsayılan olarak düzenleme şeklidir. Hızlıca aşağıdaki HTML örneğine bakalım:

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

Varsayılan olarak, tarayıcı bu kodu aşağıdaki gibi görüntüler:

HTML öğelerin kaynak kodunda gösterdiği sırada üst üste yığılmış olarak gösterir — ilk önce bir paragraf, ardından sıralanmamış liste ve ardından ikinci paragraf.

Birinin altında görünen öğeler, cümledeki sözcükler gibi birbirinin yanında görünen satır içi öğelerin aksine, blok öğeleri olarak tanımlanır.

Not: Blok öğesi içeriğinin yer aldığı yön Blok Yönü olarak tanımlanır. Blok Yönü, yatay yazma moduna sahip İngilizce gibi bir dilde dikey olarak çalışır. Japonca gibi Dikey Yazma Modu olan herhangi bir dilde yatay olarak çalışır.

Sayfamızdaki öğelerin çoğu için normal akış tam olarak ihtiyacınız olan düzeni oluşturur. Ancak, daha karmaşık düzenler için CSS’de bazı araçları kullanarak bu varsayılan davranışı değiştirmeniz gerekir. İyi yapılandırılmış bir HTML belgesiyle başlamak çok önemlidir, çünkü daha sonra ona karşı savaşmak yerine varsayılan olarak işlerin nasıl sıralandığıyla çalışabilirsiniz.

Öğelerin CSS’de nasıl sıralandığını değiştirebilecek yöntemler şunlardır:

display özelliği — block, inline, inline-block gibi standart değerler öğelerin normal akışta nasıl davrandığını değiştirebilir, örneğin, blok düzeyinde bir öğenin satır içi düzey öğe gibi davranmasını sağlayabiliriz. Ayrıca, alt öğelerin ebeveynlerinin içine nasıl yerleştirildiklerini tanımlayan tüm düzen yöntemlerine de sahibiz, örneğin, CSS Grid ve Flexbox.
Floats — left gibi bir float değeri uygulamak, blok düzeyindeki öğelerin bir öğenin bir tarafı boyunca kaymasına neden olabilir – bazen dergilerde resimlerin etraflarında dolaşan metinlere sahip olması gibi.
position özelliği — Kutuların diğer kutuların içine yerleştirilmesini hassas bir şekilde kontrol etmenizi sağlar. static konumlandırma normal akışta varsayılandır, ancak öğelerin diğer değerleri kullanarak, örneğin tarayıcı görünüm penceresinin en üstüne sabitlenmiş olarak farklı şekilde yerleştirilmesini de sağlayabilirsiniz.
Tablo düzeni — HTML tablosunun parçalarını şekillendirmek için tasarlanmış özellikler, tablo dışı öğelerde ve ilişkili özelliklerde kullanılabilir: display: table
Çok sütunlu düzen — Çok sütunlu düzen özellikleri, bir gazetede görebileceğiniz gibi, bir bloğun içeriğinin sütunlarda sunulmasını sağlayabilir.

display özelliği

CSS’de sayfa düzenine ulaşmak için ana yöntemlerin tümü display özelliği içerir. Bu özellik, bir öğenin varsayılan görüntüleme şeklini değiştirmemize izin verir. Normal akıştaki her şeyin varsayılan bir display değeri bulunur. Örneğin, İngilizce paragrafların birbiri altında görüntülenmesi display:block özelliğine sahip olmalarıdır. Paragraf içindeki bazı metinlerin etrafında bir bağlantı oluşturursanız bu bağlantı metnin geri kalanıyla aynı satırda kalır ve yeni bir satıra geçmez. Bunun nedeni, <a> elementinin varsayılan olarak display: inline olmasıdır.

Bu varsayılan görüntü davranışını değiştirebilirsiniz. Örneğin, <li> varsayılan olarak display:block özelliğine sahiptir ve liste öğelerinin bir diğerinin altında görüntülenmesine neden olur. Eğer görüntü değerini, inline yaparsak, cümle içindeki kelimeler gibi, yan yana duracak hale gelirler. Herhangi bir öğenin görünümünü değiştirebilmeniz, html öğelerini nasıl görüneceklerinden ziyade bu öğelerin amaçlarına göre seçim yapabileceğinizi söyler. Görünüşler değiştirilebilir.

Bir öğeyi block veya inline yaparak varsayılan sunuyu değiştirebilmenin yanı sıra, bazı daha farklı düzen yöntemleri de vardır. Ancak, bunları kullanırken genellikle ek özellikleri çağırmanız gerekir. Düzen tartışmamız için en önemli iki değer display:flex ve display:grid.

Flexbox

Flexbox, öğeleri tek bir boyutta – satır veya sütun olarak – düzenlememizi kolaylaştırmak için tasarlanmış CSS modülüdür. Flexbox’ı kullanmak için, düzenlemek istediğiniz öğelerin üst öğesine display:flex uygularsınız; bu öğenin tüm doğrudan çocukları flex öğeler haline gelir. Bunu basit bir örnekte görebiliriz.

Aşağıdaki HTML biçimlendirmesi bize içinde üç <div> olan wrapper adında sınıfa sahip bir öğe verir. Varsayılan olarak bunlar birbirinin altında görüntülenir.

Ancak, üst öğeye display:flex eklersek, bu üç öğe artık sütunlar halinde görünür. Bunun nedeni, divlerin flex öğeleri haline gelmeleri ve flexbox’ın flex kutuya verdiği bazı başlangıç değerlerinden etkilenmeleridir. Üst öğenin flex-direction özelliği row başlangıç değerine sahip olduğundan bunlar bir satırda görüntülenir. Üst öğelerinin align-items özelliğinin başlangıç değeri stretch olduğundan, bu öğelerin tümü esniyor gibi görünüyor. Bu, öğelerin en uzun öğe tarafından tanımlanan flex kutu yüksekliğine kadar uzandığı anlamına gelir. Öğelerin tümü kutunun başında sıraya girer ve satırın sonunda fazladan boşluk bırakır.

.wrapper {
  display: flex;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

Esnek kutuya uygulanabilecek özelliklere ek olarak, esnek öğelere uygulanabilecek özellikler de bulunur. Bu özellikler, diğer şeylerin yanı sıra, öğelerin esneme şeklini değiştirebilir, kullanılabilir alana göre genişlemelerini veya daralmalarını sağlar.

Basit bir örnek olarak, flex özelliğini tüm alt öğelerimize ekleyebilir ve ona 1 değerini verebiliriz. Bu, tüm öğelerin sonunda boşluk bırakmak yerine kabı büyütmesine ve doldurmasına neden olur. Daha fazla alan varsa, öğeler daha geniş hale gelecektir; daha az alan varsa daha da daralırlar. Ayrıca, biçimlendirmeye başka bir öğe eklerseniz, diğer öğelerin tümü ona yer açmak için küçülür; öğeler birlikte tüm alanı kaplaya devam eder.

.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}

<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
</div>

Not: Bu, Flexbox’ta yapabileceklerimize dair çok kısa bir giriş oldu. Daha fazla bilgi edinmek için Flexbox makalemize bakın.

Izgara (Grid) Düzeni

Flexbox tek boyutlu düzen için tasarlanırken, Izgara Düzeni iki boyut için tasarlanmıştır — öğeleri satır ve sütunlar halinde sıralar.

Flexbox’a benzer şekilde, grid düzenini de display değeriyle etkinleştiriyoruz — display:grid. Aşağıdaki örnek, bir üst öğe ve bazı alt öğelerle flexe benzer biçimlendirme kullanır. display:grid‘in yanı sıra, sırasıyla grid-template-rows ve grid-template-columns özelliklerini kullanarak üst öğe için bazı satır ve sütun altyapısı da tanımlarız. Her biri 1fr olan üç sütun ve 100px olan iki satır tanımladık. Alt öğelere herhangi bir kural koymamıza gerek yok; Otomatik olarak ızgaranın oluşturduğu hücrelere yerleştirilirler.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

Copy to Clipboard

<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
    <div class="box4">Four</div>
    <div class="box5">Five</div>
    <div class="box6">Six</div>
</div>

Bir ızgaranız olduğunda, yukarıda görülen otomatik yerleştirme davranışına güvenmek yerine öğelerinizi istediğiniz yere yerleştirebilirsiniz. Aşağıdaki örnekte, aynı ızgarayı tanımladık, ancak bu sefer sadece üç alt öğeyle. grid-row ve grid-column özelliklerini kullanarak her öğenin başlangıç ve bitiş yerlerini ayarladık.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
</div>

Bu makalenin geri kalanı, sayfanızın ana düzeni için daha az önemli olan, ancak yine de belirli görevlerin elde etmesine yardımcı olan diğer düzen yöntemlerini kapsar. Her düzen görevinin doğasını anladığınızda tasarımınızın için en uygun düzen türünü seçebilirsiniz.

Float

Float, kendisinin ve onu normal akışta izleyen blok öğelerin davranışlarını değiştirir. Kayan öğe sola veya sağa taşınır ve normal akıştan kaldırılır ve çevreleyen içerik de bunun etrafında kayar.

Float özelliğinin dört olası değeri vardır:

left — Öğeyi sola kaydırır.
right — Öğeyi sağa kaydırır.
none — Hiçbir kayma belirtmez. Bu varsayılan değerdir.
inherit — Değerin üst öğeden devralınması gerektiğini belirtir.

Aşağıdaki örnekte bir div sola kaydırılır ve çevresindeki metin ile arasına kenar boşluğu veriyoruz. Bu, bize, kutulu öğenin etrafına sarılmış metin etkisi verir ve modern web tasarımında kullanılan floats hakkında bilmeniz gerekenlerin çoğunu bu örnek karşılar.

<h1>Simple float example</h1>

<div class="box">Float</div>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

Konumlandırma teknikleri – position

Konumlandırma, bir öğeyi normal akışta yerleştirileceği yerden başka bir konuma taşımanıza olanak tanır. Konumlandırma, sayfanın ana düzenlerini oluşturmak için bir yöntem değildir; daha çok, sayfadaki belirli öğelerin konumunu yönetmek ve ince ayarla ilgilidir.

Bununla birlikte, position özelliğine dayanan belirli düzen desenleri elde etmek için yararlı teknikler de bulunur. Konumlandırmayı anlamak, normal akışı anlamaya ve bir öğeyi normal akışın dışına taşımanın ne anlama geldiğini çözmeye de yardımcı olur.

Bilmeniz gereken beş tür konumlandırma vardır:

Statik konumlandırma, her öğenin aldığı varsayılan değerdir, static. Bu sadece “öğeyi akışta normal konumuna getir – burada görülecek özel bir şey yok” anlamına gelir.
Göreli konumlandırma, bir öğenin sayfadaki konumunu değiştirmenize, normal akıştaki konumuna göre taşımanıza ve sayfadaki diğer öğelerle çakışmasını sağlamanıza olanak tanır, relative.
Mutlak konumlandırma, bir öğeyi kendi ayrı katmanında oturuyormuş gibi sayfanın normal düzen akışının tamamen dışına taşır. Buradan, öğeler html kenarlarına (veya en yakın konumlandırılmış üst öğesine) göre bir konuma sabitleyebilirsiniz. Böylece farklı içerik panellerinin birbirinin üzerine konumlandığı ve istenildiği zaman gösterildiği veya gizlendiği sekmeli kutular veya varsayılan olarak ekrandan görünen, ancak bir kontrol düğmesi kullanılarak ekranda kaydırılabilen bilgi panelleri gibi karmaşık düzen efektleri oluşturabiliriz, absolute.
Sabit konumlandırma, öğeyi tarayıcı penceresine göre konumlandırması dışında mutlak konumlandırmaya çok benzer. Böylece ekranda her zaman aynı yerde kalan kalıcı menüler gibi efektler oluşturmak için yararlıdır, static.
Yapışkan konumlandırma, yeni bir konumlandırma yöntemidir. Öğenin görünüm açısından tanımlanmış bir uzaklığa gelene kadar static gibi davranmasını, bu noktadan sonra ise fixed davranmasını sağlar.

Basit konumlandırma örneği

Bu sayfa düzeni tekniklerine aşinalık sağlamak için birkaç basit örneğe bakalım. Örneklerimizin hepsi aşağıdaki gibi aynı HTML’ye sahip olacaktır:

<h1>Positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>

Bu HTML’i varsayılan olarak aşağıdaki CSS ile stilleştirelim:

body {
  width: 500px;
  margin: 0 auto;
}

p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

Çıktı aşağıdaki gibi olacak:

Göreli konumlandırma

Göreli konumlandırma, bir öğeyi normal akıştaki varsayılan konumundan ötelemenizi sağlar. Bu sayede, alt simge gibi metin hizalaması da yapabiliriz. Göreli konumlandırma eklemek için aşağıdaki kuralı ekleyebiliriz:

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}

Burada orta paragrafımıza bir position:relative değeri veriyoruz. Bu değer kendi başına hiçbir şey yapmaz, bu nedenle top ve left özellikleri de ekleriz. Bunlar, etkilenen öğeyi aşağı ve sağa taşımaya yarar. Bu, beklediğimiz şeyin tam tersi gibi görünebilir, ancak bunu sol ve üst taraflarına itilen öğe olarak düşünmeniz gerekir, bu da sağa ve aşağı doğru hareket etmesine neden olur.

Bu kodun eklenmesi aşağıdaki sonucu verecektir:

.positioned {
  position: relative;
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  top: 30px;
  left: 30px;
}

Mutlak konumlandırma

Mutlak konumlandırma, bir öğeyi normal akıştan tamamen kaldırmak ve bunun yerine üst öğenin kenarlarından uzaklıklar kullanarak konumlandırmak için kullanılır.

Konumlandırılmamış örneğimize geri dönersek, mutlak konumlandırmayı uygulamak için aşağıdaki CSS kuralını ekleyebiliriz:

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

Burada orta paragrafımıza bir position:absolute değeri ve daha önce olduğu gibi aynı top ve left özellikleri veriyoruz. Bu kodun eklenmesi aşağıdaki sonucu verir:

.positioned {
    position: absolute;
    background: rgba(255,84,104,.3);
    border: 2px solid rgb(255,84,104);
    top: 30px;
    left: 30px;
}

Bu sonuç öncekine göre çok farklı! Konumlandırılmış öğe artık sayfa düzeninin geri kalanından tamamen ayrıldı ve üst kısma yerleşti. Diğer iki paragraf ise konumlandırılmış kardeşleri yokmuş gibi bir arada duruyorlar. top ve left özellikler, absolute konumlandırılmış öğeler üzerinde relative konumlandırılmış elemanlara göre daha farklı bir etkiye sahiptir. Bu durumda uzaklıklar sayfanın üstünden ve solundan hesaplanır.

Sabit konumlandırma

Sabit konumlandırma, elemanımızı mutlak konumlandırma ile aynı şekilde belge akışından kaldırır. Ancak, üst öğeden ölçülen uzaklıklar yerine, görünüm penceresinden uzaklıklar uygulanırlar. Öğe görünüm penceresine göre sabit kaldığından, sayfa altında kaydırırken sabit kalan bir menü gibi efektler oluşturabiliriz.

Bu örnekte, HTML’miz üç metin paragrafı içeriyor. Ayrıca position: fixed özelliği verdiğimiz bir div de bulunuyor.

<h1>Fixed positioning</h1>

<div class="positioned">Fixed</div>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>

.positioned {
    position: fixed;
    top: 30px;
    left: 30px;
}

Yapışkan konumlandırma

Yapışkan konumlandırma, elimizdeki son konumlandırma yöntemidir. Statik konumlandırmayı sabit konumlandırma ile karıştırır. Öğenin görünüm açısından tanımlanmış bir uzaklığa gelene kadar static gibi davranmasını, bu noktadan sonra ise fixed davranmasını sağlar.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

Tablo düzeni

HTML tabloları tablo verilerini görüntülemek için uygundur. Ancak yıllar önce – temel CSS bile tarayıcılar arasında güvenilir bir şekilde desteklenmeden önce – web geliştiricileri, tüm web sayfası düzenleri için de tabloları kullandılar, başlıklar, altbilgiler, sütunlar vb. Bu o zaman işe yaradı, ancak birçok sorun da getirdi: tablo düzenleri esnek değil, işaretlemede çok ağır ve hata ayıklaması zor.

CSS’de tablo biçimlendirmesi kullandığınızda ise web sayfasında tablo düzenini tanımlayan bir CSS özellikleri kümesi kullanılır. Bu özellikler tablo olmayan öğeleri düzenlemek için de kullanılabilir.

Aşağıdaki örnekte böyle bir kullanım göster verilmiştir. Bu noktada, Flexbox veya Grid desteği olmayan çok eski tarayıcılara sahip olduğumuzu ve eski bir yöntemi kullandığımızı kabul ediyoruz.

İlk olarak, html yapısını oluşturuyoruz. Her öğenin bir etiketi bulunuyor ve ayrıca bir de paragrafımız mevcut:

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age">
  </div>
</form>

CSS’ye gelince, display özelliğinin kullanımı dışında çoğu oldukça sıradan. <form>, <div>, <label> ve <input>‘ların sırasıyla tablo, tablo satırları ve tablo hücreleri gibi görüntülenmesi söyledik. Böylece bu öğeler HTML tabloları gibi davranarak etiketlerin ve inputların varsayılan olarak güzel bir şekilde sıraya girmeleri sağlanacak. Daha sonra tek yapmamız gereken her şeyin biraz daha güzel görünmesini sağlamak için biraz boyutlandırma, vb. eklemek.

Paragrafa da display:table-caption verildiğini fark edeceksiniz, bu da paragrafın bir <caption> gibi davranmasını sağlar.

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

Bu bize aşağıdaki sonucu verir:

Çok sütunlu düzen

Çok sütunlu düzen CSS modülü, bir gazetedeki metnin akışına benzer şekilde sütunlardaki içeriği sıralamayı sağlar. Yukarı ve aşağı sütunları okumak, kullanıcıların yukarı ve aşağı kaydırmak zorunda kalması nedeniyle bir web bağlamında daha az yararlı olsa da, içeriği sütunlar halinde düzenlemek yine de yararlı bir teknik olabilir.

Bir bloğu çok sütunlu bir kapsayıcıya dönüştürmek için, tarayıcıya kaç sütuna sahip olmak istediğimizi söyleyen sütun sayısı özelliğini (column-count) veya üst öğede belirtilen genişlikte mümkün olduğunca çok sütunla doldurmasını söyleyen sütun genişliği özelliğini (column-width) kullanırız.

<div class="container">
    <h1>Multi-column layout</h1>

    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>

</div>

Bu üst öğede 200 pikselden oluşan bir alan kullanıyoruz ve bu alana sığacak kadar sütun oluşturmasını sağlıyoruz. Sütunlar arasında kalan boşluk öğeler arasında paylaşılacak.

    .container {
        column-width: 200px;
    }

Özet

Bu makalede, bilmeniz gereken tüm CSS düzen yöntemlerinin kısa bir özetine baktık. Her bir yöntem hakkında daha fazla bilgi için okumaya devam edin!