nksm · September 26, 2015 06:32 · Sep 26, 2015 · Jan 23, 2015 · Jan 23, 2015
diff --git a/button タグで flexbox を利用する.markdown b/button タグで flexbox を利用する.markdown
@@ -0,0 +1,7 @@
+button タグで flexbox を利用する
+------------------------
+button タグで flexbox で中央揃えをしようとした場合、Safari だとレンダリング結果が違う。
+
+A [Pen](http://codepen.io/nksm/pen/wBeGxW) by [nakashima akira](http://codepen.io/nksm) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/nksm/pen/wBeGxW/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+.container
+  header.header
+    h1.title button タグで flexbox を利用する
+    p.description button タグで flexbox を利用し、テキストを中央揃えをしようとした場合、Safari だとレンダリング結果が違う。
+
+  section
+    header
+      h1 flexbox を利用しない
+    button.btn button タグにテキスト
+    div.btn div タグにテキスト
+
+  section
+    header
+      h1 flexbox を利用する
+    button.btn.btn--flex button タグにテキスト
+    div.btn.btn--flex div タグにテキスト
diff --git a/style.css b/style.css
@@ -0,0 +1,49 @@
+@import "compass/css3";
+
+.container {
+  width: 500px;
+  margin: auto;
+  background-color: transparent;
+}
+
+.header {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #000;
+}
+
+.title {
+  margin: 10px;
+  font-weight: bold;
+}
+
+.description {
+  margin: 10px;
+  line-height: 1.7;
+}
+
+section {
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+
+.btn {
+  width: 300px;
+  height: 100px;
+  &--flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+button {
+  -webkit-appearance: none;
+  border: 0;
+}
+
+div {
+  background-color: #ccc;
+}
diff --git a/button-タグで-flexbox-を利用する.markdown b/button-タグで-flexbox-を利用する.markdown
@@ -1,6 +1,6 @@
 button タグで flexbox を利用する
 ------------------------
-button タグで flexbox で中央揃えをしようとした場合、Safari だとレンダリング結果が違う。
+button タグにて flexbox を利用し中央揃えをしようとした場合、Safari だとレンダリング結果が違う。
 
 A [Pen](http://codepen.io/nksm/pen/wBeGxW) by [nakashima akira](http://codepen.io/nksm) on [CodePen](http://codepen.io/).
 

diff --git a/button-タグで-flexbox-を利用する.markdown b/button-タグで-flexbox-を利用する.markdown
@@ -0,0 +1,7 @@
+button タグで flexbox を利用する
+------------------------
+button タグで flexbox で中央揃えをしようとした場合、Safari だとレンダリング結果が違う。
+
+A [Pen](http://codepen.io/nksm/pen/wBeGxW) by [nakashima akira](http://codepen.io/nksm) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/nksm/pen/wBeGxW/license).
diff --git a/index.jade b/index.jade
@@ -0,0 +1,11 @@
+section
+  header
+    h1 flexbox は利用しない
+  button.btn テキスト
+  div.btn テキスト
+
+section
+  header
+    h1 flexbox を利用する
+  button.btn.btn--flex テキスト
+  div.btn.btn--flex テキスト
diff --git a/style.scss b/style.scss
@@ -0,0 +1,23 @@
+@import "compass/css3";
+section {
+  margin-bottom: 20px;
+}
+
+.btn {
+  width: 100px;
+  height: 50px;
+  &--flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+button {
+  -webkit-appearance: none;
+  border: 0;
+}
+
+div {
+  background-color: #ccc;
+}