Skip to content

Instantly share code, notes, and snippets.

@dorayakikun

dorayakikun/css-sandbox.html

Last active January 14, 2019 04:45
Show Gist options
  • Save dorayakikun/d6bce4e9bbe9614bf7c112da02f65183 to your computer and use it in GitHub Desktop.
Save dorayakikun/d6bce4e9bbe9614bf7c112da02f65183 to your computer and use it in GitHub Desktop.
Download ZIP
CSS練習帳
Raw
css-sandbox.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CSS練習帳</title>
<style>
.title {
width: 30%;
margin: 10px auto;
}
.card {
width: 30%;
height: 100px;
margin: 10px auto;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 3px 1px -2px rgba(0, 0, 0, 0.12);
border-radius: 4px;
}
.card:hover {
background-color: rgba(0, 0, 0, 0.08);
}
/**
styled-componentでhoverさせるには
&:hover {
background: #555;
}
*/
.caption {
margin: 5px auto;
}
.nav-list {
display: table;
table-layout: fixed;
margin: 10px auto;
padding: 0px;
}
.nav-list li {
display: table-cell;
width: 25%;
}
.nav-list-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
}
.nav-list-flex li {
flex: 1 1 25%;
}
.nav-list-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
}
.nav-list-columns {
columns: 4;
list-style-type: none;
}
.navi-list-inline-block li {
display: inline-block;
width: 24%;
}
.navi-list-grid-layout {
display: grid;
grid-template-columns: repeat(4, 24%);
grid-template-rows: auto auto;
list-style-type: none;
}
.navi-list-grid-layout li {
}
.pre-wrap {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<div>
<h2 class="title">CSS練習帳</h2>
<div class="card">
<h4 class="caption">display: table</h4>
<ul class="nav-list">
<li><a href="#">どらやき</a></li>
<li><a href="#">大判焼き</a></li>
<li><a href="#">きんつば</a></li>
<li><a href="#">ゆべし</a></li>
<li><a href="#">ようかん</a></li>
<li><a href="#">羽二重餅</a></li>
<li><a href="#">赤福</a></li>
<!-- 2行以上は表現できない -->
</ul>
</div>
<div class="card">
<h4 class="caption" id="flex"><a href="#flex" aria-hidden="true"></a>display: flex</h4>
<ul class="nav-list-flex">
<li><a href="#">どらやき</a></li>
<li><a href="#">大判焼き</a></li>
<li><a href="#">きんつば</a></li>
<li><a href="#">ゆべし</a></li>
<li><a href="#">ようかん</a></li>
<li><a href="#">羽二重餅</a></li>
<li><a href="#">赤福</a></li>
<!-- 上段と数を揃えないと上下でレイアウトが崩れてしまう -->
</ul>
</div>
<div class="card">
<h4 class="caption">cloumns</h4>
<ul class="nav-list-columns">
<li><a href="#">どらやき</a></li>
<li><a href="#">大判焼き</a></li>
<li><a href="#">きんつば</a></li>
<li><a href="#">ゆべし</a></li>
<li><a href="#">ようかん</a></li>
<li><a href="#">羽二重餅</a></li>
<li><a href="#">赤福</a></li>
</ul>
</div>
<div class="card">
<h4 class="caption">inline-block</h4>
<ul class="navi-list-inline-block">
<li><a href="#">どらやき</a></li>
<li><a href="#">大判焼き</a></li>
<li><a href="#">きんつば</a></li>
<li><a href="#">ゆべし</a></li>
<li><a href="#">ようかん</a></li>
<li><a href="#">羽二重餅</a></li>
<li><a href="#">赤福</a></li>
</ul>
</div>
<div class="card">
<h4 class="caption">grid-layout</h4>
<ul class="navi-list-grid-layout">
<li><a href="#">どらやき</a></li>
<li><a href="#">大判焼き</a></li>
<li><a href="#">きんつば</a></li>
<li><a href="#">ゆべし</a></li>
<li><a href="#">ようかん</a></li>
<li><a href="#">羽二重餅</a></li>
<li><a href="#">赤福</a></li>
</ul>
</div>
<div class="card">
<h4 class="caption">preタグ</h4>
<pre class="pre-wrap">いろはにほへと　ちりぬるを　わかよたれそ　つねならむ　うゐのおくやま　けふこへて　あさきゆめみし
ゑひもせす</pre>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment