Skip to content

Instantly share code, notes, and snippets.

@ytyng

ytyng/flex-example-01.html

Last active March 10, 2024 08:14
Show Gist options
  • Save ytyng/d83b840c334ac251816c038ac00e0280 to your computer and use it in GitHub Desktop.
Save ytyng/d83b840c334ac251816c038ac00e0280 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flex-example-01.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
* {
box-sizing: border-box;
}
body {
}
header {
background-color: royalblue;
color: white;
}
.body-container {
nav {
background-color: #ddd;
}
main {
}
}
footer {
background-color: #bbb;
font-size: 0.85em;
}
</style>
</head>
<body>
<header>
<div class="header-left">
<i class="bi bi-globe-asia-australia"></i>
私のイケてるサイト
</div>
<div class="header-right">
<div class="header-menu-item">
<i class="bi bi-chat"></i>
<div class="header-menu-text">お知らせ</div>
</div>
<div class="header-menu-item">
<i class="bi bi-gear"></i>
<div class="header-menu-text">設定</div>
</div>
</div>
</header>
<div class="body-container">
<nav>
ナビ
</nav>
<main>
<h1>メインコンテンツ</h1>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
<p>メインのコンテンツです。</p>
<p>内容が長くなった時は、このエリアの右側にスクロールバーが出ます。</p>
</main>
</div>
<footer>
<div class="footer-left">
サイトフッター
</div>
<div class="footer-right">
連絡する
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment