Skip to content

Commit

Permalink
デモを追加
Browse files Browse the repository at this point in the history
  • Loading branch information
@matori
matori committed Nov 8, 2024
0 parents commit 76f306b
Show file tree
Hide file tree
Showing 7 changed files with 249 additions and 0 deletions.
34 changes: 34 additions & 0 deletions 1/absolute-centering-1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>絶対配置による中央寄せ 1</title>
<style>
.container {
position: relative;
width: 500px;
height: 300px;
border: 1px solid silver;
}

.centered {
position: absolute;
inset: 0;
margin: auto;
width: 250px;
height: 150px;
background-color: mistyrose;
}
</style>
</head>
<body>

<div class="container">
<div class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

</body>
</html>
35 changes: 35 additions & 0 deletions 1/absolute-centering-2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>絶対配置による中央寄せ 2（fit-content）</title>
<style>
.container {
position: relative;
width: 500px;
height: 300px;
border: 1px solid silver;
}

.centered {
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
max-width: 80%;
height: min-content;
background-color: mistyrose;
}
</style>
</head>
<body>

<div class="container">
<div class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

</body>
</html>
26 changes: 26 additions & 0 deletions 1/absolute-centering-3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>絶対配置による中央寄せ 3（固定配置）</title>
<style>
.centered {
position: fixed;
inset: 0;
margin: auto;
width: 250px;
height: 150px;
background-color: mistyrose;
}
</style>
</head>
<body>

<div class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</div>

</body>
</html>
33 changes: 33 additions & 0 deletions 1/flexbox-centering.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Flexboxによる中央寄せ</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 300px;
border: 1px solid silver;
}

.centered {
width: 250px;
height: 150px;
background-color: mistyrose;
}
</style>
</head>
<body>

<div class="container">
<div class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

</body>
</html>
32 changes: 32 additions & 0 deletions 1/grid-centering-1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>CSS Gridによる中央寄せ 1</title>
<style>
.container {
display: grid;
place-content: center;
width: 500px;
height: 300px;
border: 1px solid silver;
}

.centered {
width: 250px;
height: 150px;
background-color: mistyrose;
}
</style>
</head>
<body>

<div class="container">
<div class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

</body>
</html>
34 changes: 34 additions & 0 deletions 1/grid-centering-2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>CSS Gridによる中央寄せ 2</title>
<style>
.container {
display: grid;
place-content: center;
place-items: center;
width: 500px;
height: 300px;
border: 1px solid silver;
}

.centered {
width: 250px;
height: min-content;
background-color: mistyrose;
}
</style>
</head>
<body>

<div class="container">
<div class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>

</body>
</html>
55 changes: 55 additions & 0 deletions 1/grid-centering-3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>CSS Gridによる中央寄せ 3</title>
<style>
button {
all: unset;
display: grid;
place-content: center;
column-gap: 10px;
row-gap: 5px;
width: 200px;
height: 100px;
border: 1px solid silver;
line-height: 1;
}

.icon {
grid-column: 1 / 2;
grid-row: 1 / -1;
}

.main {
grid-column: 2 / 3;
grid-right: 1 / 2;
}

.sub {
grid-column: 2 / 3;
grid-row: 2 / 3;
font-size: 11px;
}
</style>
</head>
<body>

<p>
<button>
<span class="icon">😀</span>
<span class="main">にっこり</span>
<span class="sub">Grinning Face</span>
</button>
</p>

<p>
<button>
<span class="icon">😀</span>
<span class="main">にっこり</span>
</button>
</p>

</body>
</html>

0 comments on commit 76f306b

Please sign in to comment.