kainobi2: 9月 2018

2018年9月22日土曜日

Flexbox を利用して要素を中央と右端に表示

Flexbox を利用して、要素を中央と右端に表示してみます。
parent クラスで display: flex としているので、justify-content に center とすることで、子要素（メインアイテム）を中央表示にしています。

item クラスで position: absolute としているので、子要素（メニュー）は常に右端にくっついています。また、parent クラスで position: relative としているので、子要素（メニュー）は親要素の中で絶対位置の計算が行われます。

イメージ

CSS

<style>
    .parent {
        position: relative;
        display: flex;
        justify-content: center;

        border: black solid 1px;
        padding: 20;
    }

    .item {
        display: flex;

        margin: 3px;
        padding: 15px;
        border: black solid 1px;
    }

    .menu {
        position: absolute;
        right: 0;

        margin: 3px;
        padding: 15px;
        border: black solid 1px;
    }
</style>

HTML

<div class="parent">
    <div class="item">メインアイテム</div>
    <div class="item">メインアイテム</div>
    <div class="menu">メニュー</div>
</div>

2018年9月17日月曜日

JavaScript ネイティブの Promise を利用する方法

JavaScript ネイティブの Promise を利用する方法を調べてみました。備忘録のためメモしておきます。

処理が成功したら resolve メソッドを呼びます。処理が失敗したら、reject メソッドを呼びます。reject メソッドを呼ぶと、catch 句に入ります。

function myTest() {
  const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
          console.log('スタート');
          //処理が成功したら、resolve を呼ぶ。
          resolve('1つ目の処理');
      }, 1000);

  });
  promise.then((message) => {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              console.log(message);
              resolve('2つ目の処理');
              //エラーの場合、resolve ではなく reject を呼ぶ。
              // reject('xxx');

          }, 300);

      })
  }).then((message) => {
      return new Promise((resolve, reject) => {
          console.log(message);
          console.log('3つ目の処理');
      })
  }).catch((error) => { // エラーの場合
      console.error('エラー', error);
  });
}

2018年9月16日日曜日

Flexbox を利用してレスポンシブなレイアウトを実現する

タイトルのままです。Flexbox を利用して 2 カラムのレスポンシブレイアウトを実現する例です。コピペしてそのまま使えますので、よかったら使ってみてください。

CSS

.header{
    background: lightpink;
    height: 40px;
    width: 100%;
}
.parent{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90vh;
}
.main{
    background: lightblue;
    height: 50%;
 }
.sidebar{
    background: lightseagreen;
    height: 50%;
}
@media screen and (min-width : 768px) { /* デスクトップ用 CSS */
    .parent{
        flex-direction: row;
    }
    .main{
        flex: 1;
        height: 100%;
    }
    .sidebar{
        width: 250px;
        height: 100%;
    }
}

HTML

<div class="header">header</div>
<div class="parent">
    <div class="main">item 1</div>
    <div class="sidebar">item 2</div>
</div>

2018年9月15日土曜日

Flexbox を使って要素を並べる

Flexbox を利用して、要素を横並び、縦並びにする方法です。

横並び

リストの親要素(div class="list") の display に flex を指定します。そして、リストの子要素に flex を指定します。ここでは flex: 1 1 としています。

.list {
    display: flex;
}
.list-item {
    flex: 1 1;
    border: solid cadetblue 1px;
}

<div class="list">
    <div class="list-item">item 1</div>
    <div class="list-item">item 2</div>
    <div class="list-item">item 3</div>
</div>

縦並び

縦並びは、リストの親要素(div class="list") の display-direction に column を指定します。

.list {
    display: flex;
    flex-direction: column;
}
.list-item {
    flex: 1 1;
    border: solid cadetblue 1px;
}

<div class="list">
    <div class="list-item">item 1</div>
    <div class="list-item">item 2</div>
    <div class="list-item">item 3</div>
</div>

2018年9月7日金曜日

要素を画面の下部に表示する方法

HTML と CSS で、要素を画面の下部に表示する方法です。
CSS で position を fixed、bottom に 0px とします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .bottom {
        position: fixed;
        bottom: 0px;
        background: red;
        height: 40px;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="bottom">テキスト</div>
</body>
</html>