Google standartlarına göre bir web sayfası yalnızca masaüstü cihazlarda değil aynı zamanda cep telefonu gibi mobil cihazlarda da çalışmalı. Aksi halde mobil uyumlu olmayan site, mobil cihazlarda Google sıralamasında oldukça aşağılarda yer alacaktır. İşte bu yüzden aslında artık mobil uyumlu diye bir şey yok. Yani yapılan her web sitesi zaten mobile uyumlu olmak zorunda!

Mobil Uyumlu Site CSS Analizi

Öncelikle bir önceki dersimiz olan HTML Web Sayfası Oluşturma dersinin sonunda vermiş olduğum örneği incelemek istiyorum. Bu sayede CSS’de kullanılan özellikleri tanıyabilir ve nerede hangi özelliği neden kullandığımızı daha iyi kavrayabilirsiniz. Örneği henüz indirmediyseniz burayı tıklayarak indirebilirsiniz.

CSS’de Element Seçme ve Özellik Verme

CSS’de bir özellik vermek için [enlighter lang=”css”]a{}[/enlighter] şeklinde önce elementi seçmemiz gerekiyor. Daha sonra süslü parantezler içerisine [enlighter lang=”css”]a{text-decoration: none;color: black;}[/enlighter] şeklinde yazacağımız kodlar seçtiğimiz elemente özellikler vermemizi sağlayacak. Mesela burada kullandığımız [enlighter lang=”css”]text-decoration: none;[/enlighter] özelliği bağlantıların üzerine gelindiğinde çıkan alt çizgiyi kaldırmaya yararken [enlighter lang=”css”]color: black;[/enlighter] özelliği metnin rengini siyaha çeviriyor.

CSS Element Seçme ve Özellik Verme Örneği:
[enlighter lang=”css”]
a {
text-decoration: none;
color: black;
}
[/enlighter]

Genellikle en başta kullandığımız [enlighter lang=”css”]*[/enlighter] seçicisi, bu CSS kodlarının çalıştığı yerdeki tüm HTML elementlerini seçerek her şeye süslü parantezler arasındaki özellikleri tanımlar. Burada sitedeki tüm elementlerin yazı tipini Arial olarak tanımladık ve tarayıcının belirlediği Margin ve Padding boşluklarını sıfırladık. Şimdi dilediğimiz elemente istediğimiz gibi Margin ve Padding verebiliriz.

CSS ile Tarayıcı Tanımlı Özellikleri Kaldırma Örneği:
[enlighter lang=”css”]
* {
font-family: Arial;
margin: 0;
padding: 0;
}
[/enlighter]

CSS’de Padding ve Margin Özellikleri

Margin CSS’de dış boşlukları, Padding ise iç boşlukları tanımlamaktadır. Aşağıdaki görselden de anlaşılacağı gibi bir elemente 10 piksel Padding verildiğinde o element her yönden 10 piksel büyüyecektir. Ancak 10 piksel Margin verildiğindeyse elementin her tarafından 10 piksel boyutunda boşluk oluşacaktır.

İndirdiğiniz sayfanın Footer yani alt kısmında Padding ve Margin kullanımına bir örnek görebilirsiniz. Buradaki CSS kodunda [enlighter lang=”html”]

[/enlighter] elementinin içerisinde yer alan [enlighter lang=”css”].menu[/enlighter] sınıfının içindeki [enlighter lang=”css”]li[/enlighter] elementindeki bağlantı etiketini seçiyoruz. Daha sonra Padding değerini yani etiketin boyutunu arttıran değeri 6 piksel olarak ayarlıyoruz. Bununla birlikte Margin değerini de 6 piksel yaparak etiketlerin birbirlerinden uzaklaşmasını sağlıyoruz.

[enlighter lang=”css”]
footer .menu li a {
padding: 6px;
margin: 6px;
}
[/enlighter]

Yukarıdaki CSS koduyla verdiğimiz Padding ve Margin özellikleriyle aşağıdaki gibi bir görüntüye kavuşuyoruz. Gördüğünüz gibi Anasayfa, Portfolyo ve Hakkımda yazıları arasında 6 piksellik bir boşluk bulunuyor.

Burada [enlighter lang=”css”].menu[/enlighter] sınıfı HTML içerisinde [enlighter lang=”html”][/enlighter] şeklinde kullanıldığında CSS’de verilen özelliklerin bu sınıfla ilişkili elemente geçmesini sağlıyor.

Bir önceki derste hazırladığımız örneğin birkaç adımını inceleyerek bazı CSS özelliklerinin kullanımını ve sınıfların HTML’de kullanılışını öğrendiğimize göre artık sitemizi oluşturmaya devam edebiliriz.

CSS ve HTML ile Anasayfa Oluşturma

Örneğimiz “index.html” adında tek bir HTML sayfasından oluşuyordu. Şimdiyse birkaç sayfa haline getireceğiz ama önce anasayfayı biraz daha geliştirelim.

[enlighter lang=”html”]

[/enlighter]

[enlighter lang=”html”]

[/enlighter] etiketi içerisinde yer alan ve “Kutu” isimli sınıfa sahip yukarıdaki kısmı aşağıdaki kodla değiştireceğiz.

[enlighter lang=”html”]

[/enlighter]

Yukarıdaki kodları “index.html” dosyanıza ekledikten sonra aynı klasörün içerisine 1920 piksel genişliğe sahip “anasayfa.jpg” bir de resim atmalısınız. Ayrıca tüm elementleri yüzde hesabıyla oluşturduğumuzdan Padding değerlerinin elementleri ekstradan büyütmesini engellemek adına “style.css” dosyasındaki [enlighter lang=”css”]*[/enlighter] seçicisi içine [enlighter lang=”css”]box-sizing: border-box;[/enlighter] özelliğini de eklemeliyiz. Yine “style.css” dosyasındaki [enlighter lang=”css”]main[/enlighter] elementine [enlighter lang=”css”]display: inline-block;[/enlighter] özelliğini ekleyerek içindeki elementlere göre boyutlanmasını sağlıyor ve Padding değerlerini [enlighter lang=”css”]padding: 0 0 50px 0;[/enlighter] şeklinde ayarlıyoruz.

Daha sonra aşağıdaki kodları da “style.css” dosyamızın en sonuna ekliyoruz. Buradaki özellikler, yeni oluşturduğumuz elementlerin özellikleridir. En alttaki [enlighter lang=”css”]@media screen and (max-width: 768px) {}[/enlighter] sorgusu, tarayıcı boyutu eğer 768 pikselin altındaysa devreye girecek CSS özelliklerini barındırıyor. Yani mobil cihazlara özel stil vermeye yarıyor. Burada, anasayfadaki yuvarlaklar içindeki yazıların 768 pikselden küçük ekranlarda tam genişliğe sahip olması için kullandık.

Style.css Dosyamızın Sonuna Eklenecek Anasayfa Özellikleri:
[enlighter lang=”css”]
.genis-resim {
background-color: black;
width: 100%;
height: 400px;
}
.genis-resim img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.ana-metin {
position: absolute;
top: 160px;
width: 100%;
font-size: 64px;
color: white;
z-index: 1;
}
.ikon {
width: 150px;
background-color: #ea9809;
color: white;
font-size: 24px;
text-align: center;
font-weight: 600;
padding-top: 60px;
height: 150px;
border-radius: 150px;
margin: 0 auto;
}
.ceyrek-sutun {
width: 25%;
display: block;
float: left;
margin-top: 50px;
}
.ceyrek-sutun p {
text-align: center;
padding: 5px 20px;
}
hr {
margin: 60px 0 40px 0;
display: inline-block;
width: 100%;
border: 0;
border-top: 1px solid #d8d8d8;
}
@media screen and (max-width: 768px) {
.ceyrek-sutun {
width: 100%;
}
}
[/enlighter]

Böylece anasayfamızı kısmen de olsa düzenlemiş olduk. Bu işlemlerin ardından anasayfamız artık aşağıdaki gibi görünecek.

Şimdi “hakkımda.html” sayfasını oluşturalım. Yine aynı klasörün içerisine “index.html” dosyasındaki her şey kopyalayarak başlıyoruz. Daha sonra [enlighter lang=”html”]

[/enlighter] etiketindeki içeriği anasayfamızın ilk başta sahip olduğu aşağıdaki kodla değiştireceğiz.

Hakkımda Sayfasının HTML Kodları:
[enlighter lang=”html”]

[/enlighter]

Daha sonra her iki sayfanın menüsündeki bağlantılara sayfaların adını [enlighter lang=”html”]Anasayfa[/enlighter] şeklinde yazdığımızda sayfalar arasında bağlantı oluşacaktır. Henüz yalnızca HTML ve CSS kullandığımız için PHP gibi web yazılım dilleriyle dosyaları birbirlerine bağlamadık. İlerleyen derslerde PHP ile de çalışacağız.

Bir sonraki sayfamız olan “portfolyo.html” dosyamızı da oluşturup içerisine aynı kodları yerleştiriyoruz ve [enlighter lang=”html”]

[/enlighter] etiketi içerisindekileri aşağıdakilerle değiştiriyoruz.

Portfolyo Sayfasının HTML Kodları:
[enlighter lang=”html”]

[/enlighter]

“Portfolyo.html” sayfamızı oluşturduk şimdi [enlighter lang=”css”]@media screen and (max-width: 768px) {}[/enlighter] sorgusundan itibaren olan kısımla birlikte “style.css” dosyamızın en altına aşağıdaki stilleri ekliyoruz.

Portfolyo Sayfası Stilleri:
[enlighter lang=”css”]
.portfolyo {
width: 25%;
display: inline-block;
text-align: center;
margin-top: 25px;
float: left;
}
@media screen and (max-width: 768px) {
.ceyrek-sutun {
width: 100%;
}
.portfolyo {
width: 50%;
}
}
@media screen and (max-width: 414px) {
.portfolyo {
width: 100%;
}
}
[/enlighter]

Böylece “Portfolyo.html” sayfamız da mobil cihazlara duyarlı bir şekilde oluşmuş olacak ve aşağıdaki gibi bir görünüme kavuşacak.

Sonuç ve Bir Sonraki Ders

Bu derste CSS’teki önemli birkaç özelliği ve genel olarak CSS kullanımını öğrenirken aynı zamanda birkaç sayfalık oldukça basit bir de mobil uyumlu internet sitesi tasarlamış olduk. Bir sonraki dersimizde Bootstrap kullanımını öğreneceğiz ve temel anlamda ihtiyacınız olacak birkaç özelliğini birlikte keşfetmek için basit bir tema yapacağız.

Derste oluşturduğumuz mobil uyumlu site temasının tüm dosyalarını indirmek için burayı tıklamanız yeterlidir.

• WordPress Yönetici Paneli Başlangıç
• WordPress Kurulumu
• WordPress Nedir
• Bootstrap ile Web Sayfası Oluşturma