[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-hizli-html-css-mini-ornekleri-basit-layout-ve-responsive":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},25546,"Hızlı HTML & CSS Mini Örnekleri: Basit Layout ve Responsive","Bu makale, HTML & CSS kullanarak basit layoutlar ve responsive tasarımlar oluşturmayı gösteren kısa örnekler ve pratik ipuçları sunar.","\u003Ch2>Hızlı HTML & CSS Mini Örnekleri: Basit Layout ve Responsive\u003C/h2>\n\u003Cp>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: \u003Ca href='https://www.gk.com.tr/responsive-web-tasarim-rehberi.html'>Responsive Web Tasarım: Mobil Uyumlu Site Nasıl Yapılır? (GK)\u003C/a>.\u003C/p>\n\n\u003Ch3>Hızlı not: ne zaman hangi aracı seçmeli?\u003C/h3>\n\u003Cp>\u003Cstrong>Flexbox\u003C/strong> tek eksende hizalama ve esnek sütun/orta-kolon düzenleri için etkilidir. \u003Cstrong>CSS Grid\u003C/strong> 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: \u003Ca href='https://www.gk.com.tr/responsive-web-tasarim-rehberi.html'>kaynak\u003C/a>.\u003C/p>\n\n\u003Ch3>Mobil öncelikli yaklaşım\u003C/h3>\n\u003Cp>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: \u003Ca href='https://stackoverflow.com/questions/22310002/getting-started-with-responsive-website-layout'>Getting started with responsive website layout (Stack Overflow)\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek 1 — Basit iki sütunlu düzen (Flexbox)\u003C/h3>\n\u003Cp>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.\u003C/p>\n\n\u003Cblockquote>\n<!-- HTML -->\u003Cbr>\n<div class="container">\u003Cbr>\n  <header class="site-header">Logo / Başlık</header>\u003Cbr>\n  <div class="content">\u003Cbr>\n    <aside class="sidebar">Yan menü</aside>\u003Cbr>\n    <main class="main">Ana içerik</main>\u003Cbr>\n  </div>\u003Cbr>\n  <footer class="site-footer">Alt bilgi</footer>\u003Cbr>\n</div>\n\u003C/blockquote>\n\n\u003Cblockquote>\n/* CSS */\u003Cbr>\n* { box-sizing: border-box; }\u003Cbr>\n.container { max-width: 1200px; margin: 0 auto; padding: 16px; }\u003Cbr>\n.content { display: flex; flex-wrap: wrap; gap: 16px; }\u003Cbr>\n.sidebar { flex: 1 1 250px; min-width: 200px; }\u003Cbr>\n.main { flex: 2 1 500px; }\u003Cbr>\n@media (max-width: 768px) { .content { flex-direction: column; } }\n\u003C/blockquote>\n\n\u003Cp>Açıklama: .content bloğu flex olarak ayarlanır ve \u003Cem>flex-wrap\u003C/em> sayesinde alan daraldığında öğeler alt alta geçer. \u003Cstrong>flex\u003C/strong> değerleri ile öğe genişlikleri esnetilip öncelik verilebilir.\u003C/p>\n\n\u003Ch3>Örnek 2 — Kart düzeni (CSS Grid)\u003C/h3>\n\u003Cp>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).\u003C/p>\n\n\u003Cblockquote>\n<div class="grid">\u003Cbr>\n  <article class="card">Kart 1</article>\u003Cbr>\n  <article class="card">Kart 2</article>\u003Cbr>\n  <article class="card">Kart 3</article>\u003Cbr>\n  <!-- ... -->\u003Cbr>\n</div>\n\u003C/blockquote>\n\n\u003Cblockquote>\n/* CSS */\u003Cbr>\n.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }\u003Cbr>\n.card { background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\u003Cbr>\n@media (max-width: 480px) { .card { padding: 12px; } }\n\u003C/blockquote>\n\n\u003Cp>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).\u003C/p>\n\n\u003Ch3>Örnek 3 — Basit responsive açılır menü (sadece HTML & CSS)\u003C/h3>\n\u003Cp>JavaScript kullanmadan basit bir açılır menü yapmak için \u003Cem>checkbox\u003C/em> 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: \u003Ca href='https://www.kodlamaklazim.com/blog/html-ve-css-kullanarak-responsive-acilir-menu-ornegi'>Html ve Css Kullanarak Responsive Açılır Menü Örneği (Kodlamaklazım)\u003C/a>.\u003C/p>\n\n\u003Cblockquote>\n<nav class="nav">\u003Cbr>\n  <label for="menu-toggle" class="menu-icon">☰ Menü</label>\u003Cbr>\n  <input type="checkbox" id="menu-toggle" class="menu-toggle">\u003Cbr>\n  <ul class="nav-list">\u003Cbr>\n    <li><a href="#">Anasayfa</a></li>\u003Cbr>\n    <li><a href="#">Hizmetler</a></li>\u003Cbr>\n    <li><a href="#">İletişim</a></li>\u003Cbr>\n  </ul>\u003Cbr>\n</nav>\n\u003C/blockquote>\n\n\u003Cblockquote>\n/* CSS (özet) */\u003Cbr>\n.menu-toggle { display: none; }\u003Cbr>\n.nav-list { display: none; list-style: none; padding: 0; margin: 8px 0 0 0; }\u003Cbr>\n.menu-toggle:checked + .nav-list { display: block; }\u003Cbr>\n@media (min-width: 769px) { .nav-list { display: flex; } .menu-icon { display: none; } }\n\u003C/blockquote>\n\n\u003Cp>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).\u003C/p>\n\n\u003Ch3>Medya sorguları ve esnek birimler\u003C/h3>\n\u003Cp>Responsive düzenlerde \u003Cstrong>esnek birimler\u003C/strong> (%, vw, rem) ve \u003Cstrong>medya sorguları\u003C/strong> 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: \u003Ca href='https://stackoverflow.com/questions/22310002/getting-started-with-responsive-website-layout'>Stack Overflow\u003C/a>).\u003C/p>\n\n\u003Ch3>Hızlı kontrol listesi (release öncesi)\u003C/h3>\n\u003Cul>\n  \u003Cli>Cihaz boyutlarında temel akış testi (telefon, tablet, desktop).\u003C/li>\n  \u003Cli>Esnek birimler ve mobil-first medya sorguları kullanımı.\u003C/li>\n  \u003Cli>Menü ve formların klavye ile kullanılabilirliği (erişilebilirlik).\u003C/li>\n  \u003Cli>Görseller için uygun boyut ve \u003Cem>srcset\u003C/em> kullanımı.\u003C/li>\n  \u003Cli>Performans: kritik CSS'yi önceliklendirme ve gereksiz büyük dosyalardan kaçınma.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Adım adım uygulama önerisi\u003C/h3>\n\u003Col>\n  \u003Cli>Tasarımı kağıt üzerinde veya tasarım araçlarında küçük ekran için planlayın.\u003C/li>\n  \u003Cli>HTML yapısını basit ve semantik tutun.\u003C/li>\n  \u003Cli>Önce mobil stiller, sonra geniş ekranlar için medya sorguları yazın.\u003C/li>\n  \u003Cli>Flexbox veya Grid'i ihtiyaçlara göre seçin (tek eksen için Flexbox, iki eksen için Grid).\u003C/li>\n  \u003Cli>Tarayıcı devtools ve gerçek cihazlarda test edin.\u003C/li>\n\u003C/ol>\n\n\u003Chr>\n\n\u003Ch3>Kaynaklar ve ileri okuma\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href='https://www.gk.com.tr/responsive-web-tasarim-rehberi.html'>Responsive Web Tasarım: Mobil Uyumlu Site Nasıl Yapılır? (GK)\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://stackoverflow.com/questions/22310002/getting-started-with-responsive-website-layout'>Getting started with responsive website layout (Stack Overflow)\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://www.kodlamaklazim.com/blog/html-ve-css-kullanarak-responsive-acilir-menu-ornegi'>Html ve Css Kullanarak Responsive Açılır Menü Örneği (Kodlamaklazım)\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>Bu örnekler eğitseldir; canlı projede kullanmadan önce tarayıcı uyumluluğu ve erişilebilirlik testleri yapmanız önerilir.\u003C/p>","Hızlı HTML & CSS Mini Örnekleri — Basit Layout ve Responsive","Kısa, uygulanabilir HTML & CSS örnekleri: Flexbox, Grid ve CSS-only responsive menülerle basit layoutlar oluşturma adımları ve pratik ipuçları içerir.","HTML & CSS Mini Örnekleri, html css örnekleri, web tasarımı örnekleri, kolay kod örnekleri, responsive örnekleri","hizli-html-css-mini-ornekleri-basit-layout-ve-responsive","2026-04-07T19:12:48.000Z",{"id":16,"title":17,"slug":18},203,"HTML & CSS Mini Örnekleri","html-css-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/3a7fc80d468ea0aad8307436d7b7355e.jpg","/media/blog/3a7fc80d468ea0aad8307436d7b7355e_thumb.jpg","/media/blog/3a7fc80d468ea0aad8307436d7b7355e.webp","/media/blog/3a7fc80d468ea0aad8307436d7b7355e_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,871,0,"5 dk okuma süresi","/blog/html-css-mini-ornekleri/hizli-html-css-mini-ornekleri-basit-layout-ve-responsive",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/3a7fc80d468ea0aad8307436d7b7355e.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/hizli-html-css-mini-ornekleri-basit-layout-ve-responsive",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/html-css-mini-ornekleri/hizli-html-css-mini-ornekleri-basit-layout-ve-responsive",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/html-css-mini-ornekleri",{"@type":102,"position":114,"name":7,"item":65},4]