CSS　Grid と flexbox で iOSの電卓画面を再現する記事を見つけました

電卓の機能はついていません

早々に試してみました

現在対応しているブラウザは　Safari 10.1, Firefox 52, Opera 44, Chrome 57　です

htmlを用意する

  <div class="wrapper">
  <h1>0</h1>
  <div class="digits flex">
  <button>9</button>
  <button>8</button>
  <button>7</button>
  <button>6</button>
  <button>5</button>
  <button>4</button>
  <button>3</button>
  <button>2</button>
  <button>1</button>
  <button class="wide">0</button>
  <button>.</button>
 </div>
 <div class="modifiers subgrid">
  <button>AC</button>
  <button>+/-</button>
  <button>%</button>
 </div>
 <div class="operations subgrid">
  <button>/</button>
  <button>X</button>
  <button>-</button>
  <button>+</button>
  <button>=</button>
 </div>
</div>

戻る

最初のCSSを適用する

Reset

0

// CSS     
body { 
  font-family: sans-serif;
}  
.wrapper { 
  min-height: 65vh;
  /* viewport height の　65% */
}
h1 { 
  background-color: #111;
             color: white;
            margin: 0;
           padding: 1rem;
         font-size: 4rem;
}
button { 
  font-size: 2rem;
     border: 1px solid #111;
}
.modifiers button { 
  background-color: #ccc;
}
.operations button { 
  background-color: orange;
}
.digits button{ 
  background-color: #efefef;
}

// CSS     
.wrapper, .subgrid { 
  display: grid;
}

display: grid

要素をグリッドのコンテナとして定義し、グリッド・ﾌｫｰﾏｯﾄを利用できるようにします

// CSS     
.wrapper  {
  grid-template-areas: "total total total total" 
                       "modif modif modif oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper";
} 
h1 {
  grid-area: total;                
}
.modifiers {
  grid-area: modif;
}
.operations {
  grid-area: oper;
}
.digits {
  grid-area: digit;
}

grid-template-areas

grid-area プロパティの値（grid-area 名）をもとに gridの形を定義します grid-area 名を繰り返すことで、それらのセルにまたがった内容を置くことができる ６行４列のグリッドが構成されます

// CSS     
h1 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

display: flex；

要素を flexbox コンテナとして定義します

justify-content: flex-end;

横配置の場合、右揃えにする

align-items: flex-end;

横配置の場合、下揃えにする

// CSS     
.modifiers {
  grid-auto-flow: column;
}

grid-auto-flow: column;

グリッドの子要素の配置を明示しないときに、自動配置アルゴリズムでの配置方法を指定します 置くことのできる列の要素に順番に配置していきます

// CSS     
.modifiers {
  grid-auto-columns: 1fr;
}

grid-auto-columns: 1fr;

自動で配置された列の長さを指定します fr （fraction）単位は、グリッドの空きスペースを分割した長さを表します ここでは .modifiers の３列を３等分の長さに指定しています

// CSS     
.digits {
  display: flex;
}

// CSS     
.digits button {
  flex: 1 0 30%;
 /* flex-grow: 1; flex-shrink: 0; flex-basis: 30%; */
}

// CSS     
.digits {
  flex-wrap: wrap;
}

flex-wrap: wrap;

子要素の折り返しを設定する

// CSS     
.digits {
  flex-direction: row-reverse;
}

flex-direction: row-reverse;

子要素の配置を行方向で右から左に設定する

// CSS     
.digits .wide {
  flex: 2 0 60%;
  /* flex-grow: 2; flex-shrink: 0; flex-basis: 60%; */
}

// CSS     
.digits .wide {
  order: 1;
}

order: 1;

表示順を指定します。１番目に指定しています。あくまで見かけ上だけです。プログラミングの際は注意！

// CSS     
.wrapper {
  grid-auto-columns: 1fr;
}

// CSS     
body { 
  font-family: sans-serif;
}  

h1 { 
　　background-color: #111;
　　　　　　　　　　　　color: white;
　　　　　　　　　　　margin: 0;
　　　　　　　　　　padding: 1rem;
　　　　　　　　font-size: 4rem;
　　　　　　　　　　display: flex;
　　　justify-content: flex-end;
　　　　　　align-items:　flex-end;
}

button { 
  font-size: 2rem;
     border: 1px solid #111;
}
.modifiers button { 
  background-color: #ccc;
}
.operations button { 
  background-color: orange;
}
.digits button{ 
  background-color: #efefef;
}
.wrapper, .subgrid { 
  display: grid;
}

.wrapper  {
  　　　　　　　　min-height: 65vh;
  　　　　　　　　/* viewport height の　65% */
  grid-template-areas: "total total total total" 
                       "modif modif modif oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper";
  　　grid-auto-columns: 1fr;
} 

h1 {
  grid-area: total;                
}

.modifiers {
  grid-area: modif;
}
.operations {
  grid-area: oper;
}
.digits {
  grid-area: digit;
}

.modifiers {
　　　  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.digits {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.digits button {
  flex: 1 0 30%;
 /* flex-grow: 1; flex-shrink: 0; flex-basis: 30%; */
} 

.digits .wide {
  　flex: 2 0 60%;
  　/* flex-grow: 2; flex-shrink: 0; flex-basis: 60%; */
  order: 1;
}

投稿記事

home

CSS Grid

htmlを用意する

0