چیدمان (Layout)
چیدمان (Layout) یعنی چطور بخش های صفحه کنار هم می نشینند. مثل مجله، ستون ها و باکس ها داریم. با انتخاب درست چیدمان، صفحه مرتب، خوانا و واکنش گرا می شود.
المان های معنایی برای چیدمان
المان معنایی یعنی تگی که معنی بخش را نشان می دهد. این ها برای چیدمان ساده ترند.
- <header> برای سرصفحه سند یا بخش
- <nav> برای لینک های ناوبری
- <section> برای بخش های صفحه
- <article> برای محتوای مستقل
- <aside> برای نوار کناری
- <footer> برای پاصفحه
- <details> و <summary> برای جزئیات قابل باز و بسته شدن
تکنیک های چیدمان با CSS
برای چیدمان چندستونه چهار راه معروف داریم: فریم ورک ها، float، فلکس باکس (Flexbox) و گرید (Grid). هرکدام مزایا و محدودیت هایی دارند.
نمونه چیدمان با Float
float ساده است؛ اما وابسته به جریان سند است. در نمونه زیر ساختار کلی صفحه را می بینی.
<header class="header">
<h2>Cities</h2>
</header>
<section class="section">
<nav class="nav">
<ul>
<li><a href="javascript:void(0)">London</a></li>
<li><a href="javascript:void(0)">Paris</a></li>
<li><a href="javascript:void(0)">Tokyo</a></li>
</ul>
</nav>
<article class="article">
<h1>London</h1>
<p>London is the capital city of England.</p>
<p>Its history goes back to the Romans.</p>
</article>
</section>
<footer class="footer">
<p>Footer</p>
</footer>
نمونه چیدمان با Flexbox
فلکس باکس برای اندازه های مختلف عالی است. آیتم ها انعطاف پذیر می شوند و راحت می چینند.
<header class="header2">
<h2>Cities</h2>
</header>
<section class="section2">
<nav class="nav2">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article class="article2">
<h1>London</h1>
<p>London is the capital city of England.</p>
<p>It has millions of inhabitants.</p>
</article>
</section>
<footer class="footer2">
<p>Footer</p>
</footer>
Grid در یک نگاه
گرید سیستم سطری ستونی می دهد. بدون float و position هم صفحه حرفه ای می سازی. برای شروع، معرفی گرید CSS را ببین.
گام های تمرینی
- با تگ های معنایی اسکلت بساز.
- یک نسخه با float پیاده کن.
- همان طرح را با فلکس باکس بساز.
- تفاوت واکنش گرایی را بررسی کن.
نکته: برای پروژه های سریع، از فریم ورک ها استفاده کن؛ اما اصول چیدمان را یاد بگیر.
پیوندهای مرتبط در سایت
موضوع چیدمان پایه صفحات است. برای موبایل به چیدمان واکنش گرا سر بزن. درباره معنا هم المان های معنایی را بخوان.
جمع بندی سریع
- از تگ های معنایی استفاده کن.
- float ساده است؛ انعطاف کمتر دارد.
- فلکس باکس برای ریسپانسیو عالی است.
- گرید برای صفحه های پیچیده بهتر است.
- یک روش را انتخاب کن و تمرین کن.