What's New Qiita

20190827のCSSに関する記事は6件です。

  • 投稿日：2019-08-27T19:35:27+09:00

Vue.jsとCSSアニメーションでラーメンタイマーを作る + Firebaseで簡単公開

学びたてだけどVue.js + CSSアニメーション + 絵を組み合わせて作ってみたい！
という事でシンプルなカップラーメンのタイマーを作ってみました。

基本的なVue.jsで始めたばかりの方でも比較的読み進めやすいと思います。
話題のFirebaseで無料公開もとても簡単だったので方法をまとめました。

? ラーメンタイマー

・アプリURL
https://cupramen-timer.firebaseapp.com/
・GitHub - ソースコード
https://github.com/aocattleya/Ramen_Timer
（いいねやスター貰えるととても喜びます！）
　

アプリの内容

使用している物 説明
HTML, CSS animationプロパティを使用
Vue.js JavaScriptフレームワーク
Firebase 無料枠でアプリを公開する
--- ---
SweetAlert アラートを簡単にデザインするライブラリ
GoogleFonts フォントの変更
FireAlpaca ペイントツール（無料）

　
3分 or 5分のボタンをホバーするとキャラクターが左右に振り向きます。
時間を選びクリックするとカウントダウンタイマーが使える簡単な内容です。
レスポンシブデザイン（スマホ）にも対応しています。※左右の振り向きはしない

キャラクターデザイン

まず一番目立つキャラクター
自分は元々漫画家のアシスタントをしていた時期などがあり、
描いた物をアプリに組み合わせてみたかったので描き描き。

レイヤーといって何枚もの板が重なっているように描かれています。
なので例えば手を消すと下に隠れている髪が出てきます。
これによって一枚描いたら背景などが簡単に変更でき、左右反転させて手を描けば2枚完成。

※猫の方が万人受けする。名前募集中！

こちらに原寸サイズ画像＆レイヤーファイルを公開しています。
illustration-Original_Characters（GitHub）
　

? コードの解説

それぞれ分けて解説していきます。
コードは分かりやすいように関係ない部分を大幅に省略して書いてます。

　

・キャラクターを左右に振り向かせる

1行目、v-bind:class=""によってclassを「右顔CSS」⇔「左顔CSS」と書き替えており、
きっかけは、それぞれの3分と5分ボタンにあるv-on:mouseover=""

index.html
<!-- キャラクター -->
<img v-bind:class="{ right_face: isRight, left_face: isLeft }" />
  <div class="pick-button">
    <!-- 3分ボタン -->
    <input type="image" src="img/3min.png" v-on:mouseover="rotate_left" />
    <!-- 5分ボタン -->
    <input type="image" src="img/5min.png" v-on:mouseover="rotate_right" />
  </div>
</div>

　
JavaScript側では下記のようにボタンをホバーした時に、
「true」⇔「false」で切り替わる処理を書いています。

main.js
const vm = new Vue({
  el: "#app",
  data: {
    isLeft: false,
    isRight: true,
  },
  methods: {
    rotate_left: function() {
      this.isLeft = true;
      this.isRight = false;
    },
    rotate_right: function() {
      this.isLeft = false;
      this.isRight = true;
    }
  }
});

　
右顔のCSSアニメーション

style.css
.right_face {
  border-radius: 50%;
  background-image: url(../img/button_right.png);
  animation: anime 0.4s linear 2;
}
@keyframes anime {
  100% {
    transform: rotateY(360deg);
  }
}

・border-radius: 50%で画像を丸くする。
・そしてanimationプロパティ、長さなどを設定でき@keyframesで動きを付けます。
　上記は100%終了時までにY軸に360度回転としています。
　
　
　

・ボタン選択で画面の切り替え

ページは変わっていません。
Vue.jsで最初の画面を非表示にし、非表示になっていたタイマー画面を表示させています。

3分 or 5分ボタンを押すとv-on:click="show = !show"によって、
<div v-show="!show"> ⇔ <div v-show="show">と画面表示が切り替わります。

index.html
<!-- 3分 or 5分ボタン選択画面 -->
<div v-show="!show">
  <input type="image" src="img/3min.png" v-on:click="show = !show" />
  <input type="image" src="img/5min.png" v-on:click="show = !show" />
</div>

<!-- タイマー画面 -->
<div v-show="show">
  <span id="minutes">{{ minutes }}</span>
  <span id="middle">:</span>
  <span id="seconds">{{ seconds }}</span>
  <!-- 省略 -->
</div>

　
　

・タイマーの実装

timre3.gif

index.html
<!-- 3分 or 5分ボタン -->
<input type="image" src="img/3min.png" v-on:click="show = !show; threeMin()" />
<input type="image" src="img/5min.png" v-on:click="show = !show; fiveMin()" />

3分 or 5分ボタンをクリックした時に、
v-on:click="threeMin()"又はv-on:click="fiveMin()"が実行され、
タイマー画面でカウントする時間を3:00 or 5:00にします。
　

index.html
<!-- タイマー -->
<div class="timer">
  <span id="minutes">{{ minutes }}</span>
  <span id="middle">:</span>
  <span id="seconds">{{ seconds }}</span>
</div>
<div id="buttons">
  <!-- スタート -->
  <input type="image" src="img/start.png" v-on:click="startTimer" v-if="!timer" />
  <!-- ストップ -->
  <input type="image" src="img/stop.png" v-on:click="stopTimer" v-if="timer" />
  <!-- リセット -->
  <input type="image" src="img/reset.png" v-on:click="resetTimer" v-if="resetButton" />
</div>

タイマーのカウントは、HTMLの{{ minutes }} : {{ seconds }}
この部分がVue.jsの処理でタイマーのように変更されていきます。
　

main.js
const vm = new Vue({
  el: "#app",
  data: {
    timer: null,
    pickTime: null,
    totalTime: null,
    resetButton: false
  },
  methods: {
    // 3分 or 5分ボタン
    threeMin: function() {
      this.pickTime = 3 * 60;
      this.totalTime = this.pickTime;
    },
    fiveMin: function() {
      this.pickTime = 5 * 60;
      this.totalTime = this.pickTime;
    },
    // スタート
    startTimer: function() {
      this.timer = setInterval(() => this.countdown(), 1000);
      this.resetButton = true;
    },
    // ストップ
    stopTimer: function() {
      clearInterval(this.timer);
      this.timer = null;
      this.resetButton = true;
    },
    // リセット
    resetTimer: function() {
      this.totalTime = this.pickTime;
      clearInterval(this.timer);
      this.timer = null;
      this.resetButton = false;
    },
    // 秒が一桁の場合0を追加
    padTime: function(time) {
      return (time < 10 ? "0" : "") + time;
    },
    // カウントダウン
    countdown: function() {
      if (this.totalTime >= 1) {
        this.totalTime--;
      } else {
        this.totalTime = 0;
        this.resetTimer();
        swal("Complete!!", "", "success");
      }
    }
  },
  computed: {
    // タイマーの数値
    minutes: function() {
      const minutes = Math.floor(this.totalTime / 60);
      return minutes;
    },
    seconds: function() {
      const seconds = this.totalTime - this.minutes * 60;
      return this.padTime(seconds);
    }
  }
});

computed:の部分がHTMLのタイマー{{ }}に表示され、ボタンで各methods:が働き、
スタートを押すとsetInterval()により、一秒ごとにcountdownが実行されます。
　
　
　

・アラートデザイン『SweetAlert』

sweet.png

簡単にアラートがデザイン出来るライブラリ
ブラウザからCDN経由で読み込みができます。

index.html
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
main.js
swal("Complete!!", "", "success");

これだけ、凄い！
このアラートはスマホでも同じデザインで表示されます。

その他の使い方は下記のページが分かりやすいです。
- SweetAlertバージョン2を使ったデモ
　
　
　

? Firebaseで公開（無料）

Firebase - Google
　
最近とても話題のFirebaseで、作成したアプリを無料で公開。
データベースなど複雑に使う事も可能ですが、今回は簡単に無料で公開してみます。

下記はQiita用にtestプロジェクトで進めていますが、任意の名前にしてください。

１、ログイン
Firebaseのページを開いてログイン

２、プロジェクトの作成

プロジェクト名を記入します。
IDの部分はURLになりますので好みのIDに書き変えましょう。

Googleアナリティクスの設定を聞かれます。
今回は、使用しないで進めます。

３、フォルダの設定

Desktopにプロジェクト名と同じフォルダを作成します。
中にpublicという名前でフォルダを作成して公開したいコードを入れます。

４、Node.jsのインストール
まだ入ってない方はインストールしてください。
すぐ終わります。

Node.js

５、firebase-toolsをインストール

npm install -g firebase-tools

６、ログイン

firebase login

利用状況のデータを送っても良いか聞かれたら任意でY/n
次にGoogleログイン画面が表示されるので、アカウントを選び進めます。

７、デプロイ設定

cd Desktop/test

プロジェクトのフォルダに移動します。

firebase init

下記のような画面が表示されます。

◉ Hosting: Configure and deploy Firebase Hosting sites

Hostingをスペースで選択してからEnterを押します。
※スペースで選択していなとエラーとなる。

? Please select an option:

Don't set up a default projectを選択してEnter

? What do you want to use as your public directory?(public)

そのままEnter（デフォルトのpublicとなる）

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

そのままEnter（デフォルトでN）

? File public/index.html already exists. Overwrite? (y/N)

index.htmlを上書きしていいか聞いてくるのでN（そのままEnterでN）


上手くいきました。

８、公開する

firebase use --add

上記でEnter

? Which project do you want to add?
> test-71a0e

作成したプロジェクトを選択します。

? What alias do you want to use for this project? (e.g. staging)

名前は任意です。今回はstagingとしました。

firebase deploy

完了です！

９、Hosting URL:をブラウザでアクセス

こうして完成、簡単にFirebaseでの公開も出来ました。使ってね！

・ラーメンタイマー
https://cupramen-timer.firebaseapp.com/
・ソースコード - GitHub
https://github.com/aocattleya/Ramen_Timer
　
　

終わりに

Vue.jsで何か作ってみたい、CSSアニメーションと絵も組み合わせたい！

そんな考えから作ってみたアプリでシンプルに見えて苦戦もありました。
しかし言語を学習してるだけと違い、新たな発見と理解はとても多かったです。
基本的な構文でここまで作れて達成感も大きかったのでやって凄く良かったと思います。

次はさらにレベルを上げて作ってみたいですね！
最後まで読んでくれてありがとうございました。
　

参考

・【CSS3】@keyframes と animation 関連のまとめ
・SweetAlertバージョン2を使ったデモ
・Firebaseを用いて5分でセキュアなWebサイトを公開する

リンク

:octocat: GitHub
https://github.com/aocattleya
? Twitter
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-27T19:35:27+09:00

Vue.jsとCSSアニメーションでラーメンタイマーを作った + Firebaseで簡単公開

Vue.jsを学び始めてCSSアニメーションも触ってみたいという事で簡単なアプリを作ってみました。
基本的なVue.jsの機能で始めたばかりの方でも比較的に読み進めやすいかと思います。
話題のFirebaseでの無料公開もとても簡単なので方法をまとめました。

? ラーメンタイマー

timre1.gif
・アプリURL
https://cupramen-timer.firebaseapp.com/
・GitHub - ソースコード
https://github.com/aocattleya/Ramen_Timer
（いいねやスター貰えるととても喜びます！）
　

アプリの内容

使用している物 説明
HTML, CSS animationプロパティを使用
Vue.js JavaScriptフレームワーク
Firebase 無料枠でアプリを公開する
--- ---
SweetAlert アラートを簡単にデザインするライブラリ
GoogleFonts フォントの変更
FireAlpaca ペイントツール（無料）

　
3分 or 5分のボタンをホバーするとキャラクターが左右に振り向きます。
時間を選びクリックするとカウントダウンタイマーが使える簡単な内容です。
レスポンシブデザイン（スマホ）にも対応しています。※左右の振り向きはしない

キャラクターデザイン

まず一番目立つキャラクター
自分は元々漫画家のアシスタントをしていた時期などがあり、
描いた物をアプリに組み合わせてみたかったので描き描き。

レイヤーといって何枚もの板が重なっている感じで描かれています。
なので例えば手を消すと下に隠れている髪が出てきます。
これによって一枚描いたら背景などが簡単に変更でき、左右反転させて手を描けば2枚完成。

※猫の方が万人受けする。名前募集中！

こちらに原寸サイズ画像＆レイヤーファイルを公開しています。
illustration-Original_Characters（GitHub）
　

? コードの解説

それぞれ分けて解説していきます。
コードは分かりやすいように関係ない部分を大幅に省略して書いてます。

　

・キャラクターを左右に振り向かせる

1行目、v-bind:class=""によってclassを「右顔CSS」⇔「左顔CSS」と書き替えており、
きっかけは、それぞれの3分と5分ボタンにあるv-on:mouseover=""

index.html
<!-- キャラクター -->
<img v-bind:class="{ right_face: isRight, left_face: isLeft }" />
  <div class="pick-button">
    <!-- 3分ボタン -->
    <input type="image" src="img/3min.png" v-on:mouseover="rotate_left" />
    <!-- 5分ボタン -->
    <input type="image" src="img/5min.png" v-on:mouseover="rotate_right" />
  </div>
</div>

　
JavaScript側では下記のようにボタンをホバーした時に、
「true」⇔「false」で切り替わる処理を書いています。

main.js
const vm = new Vue({
  el: "#app",
  data: {
    isLeft: false,
    isRight: true,
  },
  methods: {
    rotate_left: function() {
      this.isLeft = true;
      this.isRight = false;
    },
    rotate_right: function() {
      this.isLeft = false;
      this.isRight = true;
    }
  }
});

　
右顔のCSSアニメーション

style.css
.right_face {
  border-radius: 50%;
  background-image: url(../img/button_right.png);
  animation: anime 0.4s linear 2;
}
@keyframes anime {
  100% {
    transform: rotateY(360deg);
  }
}

・border-radius: 50%で画像を丸くする。
・そしてanimationプロパティ、長さなどを設定でき@keyframesで動きを付けます。
　上記は100%終了時までにY軸に360度回転としています。
　
　
　

・ボタン選択で画面の切り替え

ページは変わっていません。
Vue.jsで最初の画面を非表示にし、非表示になっていたタイマー画面を表示させています。

3分 or 5分ボタンを押すとv-on:click="show = !show"によって、
<div v-show="!show"> ⇔ <div v-show="show">と画面表示が切り替わります。

index.html
<!-- 3分 or 5分ボタン選択画面 -->
<div v-show="!show">
  <input type="image" src="img/3min.png" v-on:click="show = !show" />
  <input type="image" src="img/5min.png" v-on:click="show = !show" />
</div>

<!-- タイマー画面 -->
<div v-show="show">
  <span id="minutes">{{ minutes }}</span>
  <span id="middle">:</span>
  <span id="seconds">{{ seconds }}</span>
  <!-- 省略 -->
</div>

　
　

・タイマーの実装

timre3.gif

index.html
<!-- 3分 or 5分ボタン -->
<input type="image" src="img/3min.png" v-on:click="show = !show; threeMin()" />
<input type="image" src="img/5min.png" v-on:click="show = !show; fiveMin()" />

3分 or 5分ボタンをクリックした時に、
v-on:click="threeMin()"又はv-on:click="fiveMin()"が実行され、
タイマー画面でカウントする時間を3:00 or 5:00にします。
　

index.html
<!-- タイマー -->
<div class="timer">
  <span id="minutes">{{ minutes }}</span>
  <span id="middle">:</span>
  <span id="seconds">{{ seconds }}</span>
</div>
<div id="buttons">
  <!-- スタート -->
  <input type="image" src="img/start.png" v-on:click="startTimer" v-if="!timer" />
  <!-- ストップ -->
  <input type="image" src="img/stop.png" v-on:click="stopTimer" v-if="timer" />
  <!-- リセット -->
  <input type="image" src="img/reset.png" v-on:click="resetTimer" v-if="resetButton" />
</div>

タイマーのカウントは、HTMLの{{ minutes }} : {{ seconds }}
この部分がVue.jsの処理でタイマーのように変更されていきます。
　

main.js
const vm = new Vue({
  el: "#app",
  data: {
    timer: null,
    pickTime: null,
    totalTime: null,
    resetButton: false
  },
  methods: {
    // 3分 or 5分ボタン
    threeMin: function() {
      this.pickTime = 3 * 60;
      this.totalTime = this.pickTime;
    },
    fiveMin: function() {
      this.pickTime = 5 * 60;
      this.totalTime = this.pickTime;
    },
    // スタート
    startTimer: function() {
      this.timer = setInterval(() => this.countdown(), 1000);
      this.resetButton = true;
    },
    // ストップ
    stopTimer: function() {
      clearInterval(this.timer);
      this.timer = null;
      this.resetButton = true;
    },
    // リセット
    resetTimer: function() {
      this.totalTime = this.pickTime;
      clearInterval(this.timer);
      this.timer = null;
      this.resetButton = false;
    },
    // 秒が一桁の場合0を追加
    padTime: function(time) {
      return (time < 10 ? "0" : "") + time;
    },
    // カウントダウン
    countdown: function() {
      if (this.totalTime >= 1) {
        this.totalTime--;
      } else {
        this.totalTime = 0;
        this.resetTimer();
        swal("Complete!!", "", "success");
      }
    }
  },
  computed: {
    // タイマーの数値
    minutes: function() {
      const minutes = Math.floor(this.totalTime / 60);
      return minutes;
    },
    seconds: function() {
      const seconds = this.totalTime - this.minutes * 60;
      return this.padTime(seconds);
    }
  }
});

computed:の部分がHTMLのタイマー{{ }}に表示され、ボタンで各methods:が働き、
スタートを押すとsetInterval()により、一秒ごとにcountdownが実行されます。
　
　
　

・アラートデザイン『SweetAlert』

sweet.png

簡単にアラートがデザイン出来るライブラリ
ブラウザからCDN経由で読み込みができます。

index.html
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
main.js
swal("Complete!!", "", "success");

これだけ、凄い！
このアラートはスマホでも同じデザインで表示されます。

その他の使い方は下記のページが分かりやすいです。
- SweetAlertバージョン2を使ったデモ
　
　
　

? Firebaseで公開（無料）

Firebase - Google
　
最近とても話題のFirebaseで、作成したアプリを無料で公開。
データベースなど複雑に使う事も可能ですが、今回は簡単に無料で公開してみます。

下記はQiita用にtestプロジェクトで進めていますが、任意の名前にしてください。

１、ログイン
Firebaseのページを開いてログイン

２、プロジェクトの作成

プロジェクト名を記入します。
IDの部分はURLになりますので好みのIDに書き変えましょう。

Googleアナリティクスの設定を聞かれます。
今回は、使用しないで進めます。

３、フォルダの設定

Desktopにプロジェクト名と同じフォルダを作成します。
中にpublicという名前でフォルダを作成して公開したいコードを入れます。

４、Node.jsのインストール
まだ入ってない方はインストールしてください。
すぐ終わります。

Node.js

５、firebase-toolsをインストール

npm install -g firebase-tools

６、ログイン

firebase login

利用状況のデータを送っても良いか聞かれたら任意でY/n
次にGoogleログイン画面が表示されるので、アカウントを選び進めます。

６、デプロイ設定

cd Desktop/test

プロジェクトのフォルダに移動します。

firebase init

下記のような画面が表示されます。

◉ Hosting: Configure and deploy Firebase Hosting sites

Hostingをスペースで選択してからEnterを押します。
※スペースで選択していなとエラーとなる。

? Please select an option:

Don't set up a default projectを選択してEnter

? What do you want to use as your public directory?(public)

そのままEnter（デフォルトのpublicとなる）

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

そのままEnter（デフォルトでN）

? File public/index.html already exists. Overwrite? (y/N)

index.htmlを上書きしていいか聞いてくるのでN（そのままEnterでN）


上手くいきました。

・公開する

firebase use --add

上記でEnter

? Which project do you want to add?
> test-71a0e

作成したプロジェクトを選択します。

? What alias do you want to use for this project? (e.g. staging)

名前は任意です。今回はstagingとしました。

firebase deploy

完了です！

Hosting URL:をブラウザでアクセス

こうして完成、簡単にFirebaseでの公開も出来ました。使ってね！

・ラーメンタイマー
https://cupramen-timer.firebaseapp.com/
・ソースコード - GitHub
https://github.com/aocattleya/Ramen_Timer
　
　

終わりに

まだVue.js学びたてだけど何か作ってみたい
CSSアニメーションも使って絵も描いて組み合わせたい！

そんな考えから簡単に作ってみたアプリでシンプルに見えて苦戦もありました。
しかし言語を学習してるだけと違い、新たな発見と理解はとても多かったです。
基本的な構文でここまで作れて達成感も大きかったので凄くやって良かったと思います。

次はさらにレベルを上げて作ってみたいですね！
最後まで読んでくれてありがとうございました。
　

参考

・【CSS3】@keyframes と animation 関連のまとめ
・SweetAlertバージョン2を使ったデモ
・Firebaseを用いて5分でセキュアなWebサイトを公開する

リンク

:octocat: GitHub
https://github.com/aocattleya
? Twitter
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-27T17:51:22+09:00

CSSフレームワークのブレイクポイントを比べてみた(Bulma, Vuetify, Element, Bootstrap, etc..)

いま開発している積読用の読書管理アプリでは、CSSフレームワークにBulmaを使ってる。
昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀)

ブレイクポイントのまとめ

xs sm md lg xl
Bulma < 769 < 1024 < 1216 < 1408 1408 <=
Bootstrap < 576 < 767 < 992 < 1200 1200 <=
Material
Design		 < 600 < 1024 < 1440 < 1920 1920 <=
Vuetify < 600 < 960 < 1264 < 1904 1904 <=
Material-UI < 600 < 960 < 1280 < 1920 1920 <=
Element < 768 < 992 < 1200 < 1920 1920 <=
Taillwind
CSS		 < 640 < 768 < 1024 < 1280 1280 <=

だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀)
ちなみに単位はpx。収まらなかったので省略...

調べたのはこの7つ

  1. Bulma ... Responsiveness | Bulma
  2. Bootstrap ... Overview · Bootstrap
  3. Material Design ... Responsive layout grid - Material Design
  4. Vuetify ... Breakpoints — Vuetify.js
  5. Material-UI ... Breakpoints - Material-UI
  6. Element ... Component | Element
  7. Tailwind CSS ... Breakpoints - Tailwind CSS

Material DesingはCSSフレームワークではないけど参考として。

Bulma

参照元: Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox

まずは使っているBulma。
Bulma独特なのが、コードがxsなどではなく、デバイスの種類になっている点。
classに書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。

コード 説明 範囲
mobile Mobile < 769px
tablet Tablet < 1024px
desktop Desktop < 1216px
widescreen Widescreen < 1408px
fullhd FullHD 1408px <= 
// Extra Small (phones)

// Small devices (tabletS)
@media (min-width: 770px) { ... }

// Medium devices (desktops)
@media (min-width: 1024px) { ... }

// Large devices (widescreen desktops)
@media (min-width: 1216px) { ... }

// Extra large devices (fullhd desktops)
@media (min-width: 1408px) { ... }

Bootstrap

参照元: Overview · Bootstrap

xsのブレイクポイントが一番小さいのが印象的。

コード 説明 範囲
xs portrait phones < 576px
sm landscape phones < 767px
md tablets < 992px
lg desktops < 1200px
xl large desktops 1200px <= 
// Extra Small (portrait phones)

// Small devices (landscape phones)
@media (min-width: 576px) { ... }

// Medium devices (tablets)
@media (min-width: 768px) { ... }

// Large devices (desktops)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }

Material Design

参照元: Responsive layout grid - Material Design

ホントの分類はこんな感じ。
縦向き・横向きでそれぞれ決められているので、かなり細かい。

コード 説明 範囲
xsmall Portrait: small handset < 360px
xsmall Portrait: medium handset < 400px
xsmall Portrait: large handset < 480px
xsmall Portrait: large handset
Landscape: small handset		 < 600px
small Portrait: small tablet
Landscape: medium handset		 < 720px
small Portrait: large tablet
Landscape: large handset		 < 840px
small Portrait: large tablet
Landscape: large handset		 < 960px
small Landscape: small tablet < 1024px
medium Landscape: large tablet < 1280px
medium Landscape: large tablet < 1440px
large < 1600px
large < 1920px
xlarge 1920px <= 
// Extra Small (phones)


// Small devices (portrait tablets)
@media (min-width: 600px) { ... }

// Medium devices (landscape tablets)
@media (min-width: 1024px) { ... }

// Large devices (laptops)
@media (min-width: 1440px) { ... }

// Extra large devices (desktops)
@media (min-width: 1920px) { ... }

Vuetify

参照元: Breakpoints — Vuetify.js

Material Designを実現するためのCSSフレームワークなので、
Material Designと区分けが近いが、少し異なるので注意が必要かも?

コード 説明 範囲
xs small to large handset < 600px
sm small to medium tablet < 960px
md large tablet to laptop < 1264px
lg desktop < 1904px
xl 4k and ultra-wides 1904px <= 
// Extra Small (small to large handset)


// Small devices (small to medium tablet)
@media (min-width: 600px) { ... }

// Medium devices (large tablet to laptop)
@media (min-width: 960px) { ... }

// Large devices (desktop)
@media (min-width: 1264px) { ... }

// Extra large devices (4k and ultra-wides)
@media (min-width: 1904px) { ... }

Material-UI

参照元: Breakpoints - Material-UI

こちらもMaterial Designを実現するためのCSSフレームワーク。

ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。

コード 説明 範囲
xs extra-small < 600px
sm small < 960px
md medium < 1280px
lg large < 1920px
xl extra-large 1920px <= 
// Extra Small


// Small devices
@media (min-width: 600px) { ... }

// Medium devices
@media (min-width: 960px) { ... }

// Large devices
@media (min-width: 1280px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Element UI

参照元: Component | Element

こちらもMaterial-UIと同様に、あまり説明はない。
smやmdの値が少し独自な感じ。

コード 説明 範囲
xs extra small viewports < 768px
sm small viewports < 992px
md medium viewports < 1200px
lg large viewports < 1920px
xl extra large viewports 1920px <= 
// Extra Small


// Small devices
@media (min-width: 768px) { ... }

// Medium devices
@media (min-width: 992px) { ... }

// Large devices
@media (min-width: 1200px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Tailwind CSS

参照元: Breakpoints - Tailwind CSS

他と比べ、全体的に低めな値が印象的。

コード 説明 範囲
xs phones < 640px
sm tablet < 768px
md < 1024px
lg laptop < 1280px
xl desktop 1280px <= 
// Extra Small


// Small devices
@media (min-width: 640px) { ... }

// Medium devices
@media (min-width: 768px) { ... }

// Large devices
@media (min-width: 1024px) { ... }

// Extra large devices
@media (min-width: 1280px) { ... }

おわりに

いろんなフレームワークを横串で見ていくといろいろおもしろい。
個別の対応をどこまで考えないといけないかなども見えてくるかも。
実際にBulmaを使ってるけど、xs以下のサイズは、個別でブレイクポイントを設定したりなども。

新しいものを使うときはいろいろ見ないといけない(´ω｀)

こんなのつくってます。

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
CSSフレームワークにBulmaを使ってます(´ω｀)

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-27T17:51:22+09:00

CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..)

いま開発している積読用の読書管理アプリでは、CSSフレームワークにBlumaを使ってる。
昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀)

ブレイクポイントのまとめ

xs sm md lg xl
Bluma < 769 < 1024 < 1216 < 1408 1408 <=
Bootstrap < 576 < 767 < 992 < 1200 1200 <=
Material
Design		 < 600 < 1024 < 1440 < 1920 1920 <=
Vuetify < 600 < 960 < 1264 < 1904 1904 <=
Material-UI < 600 < 960 < 1280 < 1920 1920 <=
Element < 768 < 992 < 1200 < 1920 1920 <=
Twilwind
CSS		 < 640 < 768 < 1024 < 1280 1280 <=

だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀)
ちなみに単位はpx。収まらなかったので省略...

調べたのはこの7つ

  1. Bluma ... Responsiveness | Bulma
  2. Bootstrap ... Overview · Bootstrap
  3. Material Design ... Responsive layout grid - Material Design
  4. Vuetify ... Breakpoints — Vuetify.js
  5. Material-UI ... Breakpoints - Material-UI
  6. Element ... Component | Element
  7. Twilwind CSS ... Breakpoints - Tailwind CSS

Material DesingはCSSフレームワークではないけど参考として。

Bluma

参照元: Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox

まずは使っているBluma。
Bluma独特なのが、コードがxsなどではなく、デバイスの種類になっている点。
classに書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。

コード 説明 範囲
mobile Mobile < 769px
tablet Tablet < 1024px
desktop Desktop < 1216px
widescreen Widescreen < 1408px
fullhd FullHD 1408px <= 
// Extra Small (phones)

// Small devices (tabletS)
@media (min-width: 770px) { ... }

// Medium devices (desktops)
@media (min-width: 1024px) { ... }

// Large devices (widescreen desktops)
@media (min-width: 1216px) { ... }

// Extra large devices (fullhd desktops)
@media (min-width: 1408px) { ... }

Bootstrap

参照元: Overview · Bootstrap

xsのブレイクポイントが一番小さいのが印象的。

コード 説明 範囲
xs portrait phones < 576px
sm landscape phones < 767px
md tablets < 992px
lg desktops < 1200px
xl large desktops 1200px <= 
// Extra Small (portrait phones)

// Small devices (landscape phones)
@media (min-width: 576px) { ... }

// Medium devices (tablets)
@media (min-width: 768px) { ... }

// Large devices (desktops)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }

Material Design

参照元: Responsive layout grid - Material Design

ホントの分類はこんな感じ。
縦向き・横向きでそれぞれ決められているので、かなり細かい。

コード 説明 範囲
xsmall Portrait: small handset < 360px
xsmall Portrait: medium handset < 400px
xsmall Portrait: large handset < 480px
xsmall Portrait: large handset
Landscape: small handset		 < 600px
small Portrait: small tablet
Landscape: medium handset		 < 720px
small Portrait: large tablet
Landscape: large handset		 < 840px
small Portrait: large tablet
Landscape: large handset		 < 960px
small Landscape: small tablet < 1024px
medium Landscape: large tablet < 1280px
medium Landscape: large tablet < 1440px
large < 1600px
large < 1920px
xlarge 1920px <= 
// Extra Small (phones)


// Small devices (portrait tablets)
@media (min-width: 600px) { ... }

// Medium devices (landscape tablets)
@media (min-width: 1024px) { ... }

// Large devices (laptops)
@media (min-width: 1440px) { ... }

// Extra large devices (desktops)
@media (min-width: 1920px) { ... }

Vuetify

参照元: Breakpoints — Vuetify.js

Material Designを実現するためのCSSフレームワークなので、
Material Designと区分けが近いが、少し異なるので注意が必要かも?

コード 説明 範囲
xs small to large handset < 600px
sm small to medium tablet < 960px
md large tablet to laptop < 1264px
lg desktop < 1904px
xl 4k and ultra-wides 1904px <= 
// Extra Small (small to large handset)


// Small devices (small to medium tablet)
@media (min-width: 600px) { ... }

// Medium devices (large tablet to laptop)
@media (min-width: 960px) { ... }

// Large devices (desktop)
@media (min-width: 1264px) { ... }

// Extra large devices (4k and ultra-wides)
@media (min-width: 1904px) { ... }

Material-UI

参照元: Breakpoints - Material-UI

こちらもMaterial Designを実現するためのCSSフレームワーク。

ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。

コード 説明 範囲
xs extra-small < 600px
sm small < 960px
md medium < 1280px
lg large < 1920px
xl extra-large 1920px <= 
// Extra Small


// Small devices
@media (min-width: 600px) { ... }

// Medium devices
@media (min-width: 960px) { ... }

// Large devices
@media (min-width: 1280px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Element UI

参照元: Component | Element

こちらもMaterial-UIと同様に、あまり説明はない。
smやmdの値が少し独自な感じ。

コード 説明 範囲
xs extra small viewports < 768px
sm small viewports < 992px
md medium viewports < 1200px
lg large viewports < 1920px
xl extra large viewports 1920px <= 
// Extra Small


// Small devices
@media (min-width: 768px) { ... }

// Medium devices
@media (min-width: 992px) { ... }

// Large devices
@media (min-width: 1200px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Tailwind CSS

参照元: Breakpoints - Tailwind CSS

他と比べ、全体的に低めな値が印象的。

コード 説明 範囲
xs phones < 640px
sm tablet < 768px
md < 1024px
lg laptop < 1280px
xl desktop 1280px <= 
// Extra Small


// Small devices
@media (min-width: 640px) { ... }

// Medium devices
@media (min-width: 768px) { ... }

// Large devices
@media (min-width: 1024px) { ... }

// Extra large devices
@media (min-width: 1280px) { ... }

おわりに

いろんなフレームワークを横串で見ていくといろいろおもしろい。
個別の対応をどこまで考えないといけないかなども見えてくるかも。
実際にBlumaを使ってるけど、xs以下のサイズは、個別でブレイクポイントを設定したりなども。

新しいものを使うときはいろいろ見ないといけない(´ω｀)

こんなのつくってます。

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
CSSフレームワークにBlumaを使ってます(´ω｀)

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-27T10:39:06+09:00

[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●

この記事について

CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。

タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`)

See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen.

カップとかストローとかもCSSで作ってみた。
せっかくなのでカップとかのところも解説するぞ。
(アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜)

全国のタピオカ好きのみんなに見てほしい・・・・

カップのCSS

カップを構成している要素は大きく全部で5つ。
・カップ
・カップの蓋
・カップの中身
・ストロー
・タピオカ

こんな感じにパーツを分けて作ったよ。

パーツごとに作ってただただposition:absolute;で乗せていったんだぜ！
そんな難しいことしてないけどせっかく作ったから一個ずつ見ていくぞ！

その前にabsoluteのmixinつくる

今回はめちゃくちゃposition:absolute;するので、
記述を少なくするために@mixinをぶち込もう！！！

@mixin absolute($top:null, $right:null, $bottom:null, $left:null){
  position: absolute;
  @if $top != null{
    top: $top;
  }
  @if $right != null{
    right: $right;
  }
  @if $bottom != null{
    bottom: $bottom;
  }
  @if $left != null{
    left: $left;
  }
}

このmixinを入れることで、例えば
@include absolute($top:0,$right:0);
と書くと、

position:absolute;
top:0;
right:0;

ってコンパイルされるようになるよ！便利だね！！

カップ作るぞい

まずはカップの真ん中の部分を作るぞ〜〜〜！！
なぜかというとこいつを基準に他のパーツを乗っけていくからだよ！

<div class="cup">
  <div class="cup__bottom"></div>
</div>

HTMLはこれだけ。
SCSSはこんな感じだ！

%cup,.cup{
  //カップの台形
  position: relative;
  width: 120px;
  height: 200px;
  background: #fff;
  &:before{
    content: ' ';
    border-right: 20px solid #fff;
    border-bottom: 200px solid transparent;
    border-radius: 6px 0 0 0 ;
    @include absolute($top:0,$left:-20px);
  }
  &:after{
    content: ' ';
    border-left: 20px solid #fff;
    border-bottom: 200px solid transparent;
    border-radius:0 6px 0 0 ;
    @include absolute($top:0,$right:-20px);
  }
  //カップの底
  &__bottom{
    width: 120px;
    height: 40px;
    border-radius: 60px / 20px;
    background:#fff;
    @include absolute($bottom:-20px,$left:0);
  }
}

カップの台形

白い台形部分は、.cupクラスに:beforeと:afterで
横のほっそい三角の部分をつけて台形にしている感じ。

「なんでborder-bottomとborder-leftでこんな風に三角になるの・・・？」って思う人、

私もよくわからない・・。すまん・・・・・・。

誰か親切な方、教えてください（切実）。

とりあえず私はこのサイトを参考に作ったぞ・・
html – 台形を逆にするにはどうすればいいですか？

border-bottomで三角形の高さが指定できて、
border-rightとborder-leftで三角の細さを指定できるってことはわかった。うん。

カップの底

カップの底は横に長い楕円だぞ。
楕円は、widthとheightに対してborder-radiusを半分にしてあげればできるぞい。

今回だとここの部分。

  width: 120px;
  height: 40px;
  border-radius: 60px / 20px;

これでバキッと楕円ができるよ。

で、こいつをカップの台形の下につければカップの真ん中部分は完成だぞ。

カップの中身だぞ


カップとおんなじような感じなので、つぎはカップの中身のHTMLとCSSを作ろう。

  <!-- カップの中身 -->
  <div class="cup__inner-wrap">
    <div class="cup__inner-top"></div><!-- カップの中身の上の楕円 -->
    <div class="cup__inner"></div><!-- カップの中身の台形 -->
    <div class="cup__inner-bottom"></div><!-- カップの中身の下の楕円 -->
  </div>

このHTMLを.cupの中に入れるぞ。

ちなみに.cup__inner-wrapでわざわざ囲ってるのは、
.cup__innerはカップの中身の基準となるパーツなのでposition:relative;だけど、
最終的にカップの中身はposition:absolute;させてカップの中に入れたいからだよ！

で、SCSSはこうだぞ！

%cup,.cup{
  //本当はここにさっき書いたSCSSが入るけど長くなるので省略
  //カップの中身を囲うラップ
  &__inner-wrap{
    @include absolute($bottom:0,$left:-40px);
  }
  //カップの中身の台形
  &__inner{
    width: 110px;
    height: 150px;
    background: #c49a6a;
    margin-left: 45px;
    position: relative;
    z-index:2;
    &:before{
      content: ' ';
      border-right: 15px solid #c49a6a;
      border-bottom: 150px solid transparent;
      border-radius: 3px 0 0 0 ;
      @include absolute($top:0,$left:-15px);
    }
    &:after{
      content: ' ';
      border-left: 15px solid #c49a6a;
      border-bottom: 150px solid transparent;
      border-radius:0 3px 0 0 ;
      @include absolute($top:0,$right:-15px);
    }
  }
  //カップの中身の上の楕円
  &__inner-top{
    width: 140px;
    height: 30px;
    background-color: #deb887;
    border-radius: 70px / 15px;
    z-index:3;
    @include absolute($top:-12px,$left:30px);
  }
  //カップの中身の下の楕円
  &__inner-bottom{
    width: 110px;
    height: 30px;
    border-radius: 55px / 15px;
    background-color: #c49a6a;
    z-index:1;
    @include absolute($top:134px,$left:45px);
  }
}

さっきと同じような感じで、.cup__innerで台形を作って、
上と下に楕円をposition:absolute;で重ねてるよ。

カップの蓋だぞ


カップの上の部分は、二つの楕円と細い四角で構成してるぞ。
例のごとくposition:absolute;して.cupに乗せてくぞ。

  <!-- カップの蓋 -->
  <div class="cup__top"></div>

HTMLはこれだけだぞ！
で、SCSSはこんな感じ。

  //カップの蓋
  &__top{
    width: 170px;
    height: 30px;
    border-radius: 85px / 15px;
    background:#f5f5f5;
    z-index:3;
    @include absolute($top:5px,$left:-24px);
    &:before{
     width:170px;
     height:13px;
     background:#f5f5f5;
     content:' ';
     @include absolute;
    }
    &:after{
     @extend %cup__top;
     background:#fff;
     z-index:1;
     top:-15px;
     left:0;
     content:' ';
    }
  }

灰色の楕円を先に作って、:beforeで細い灰色の四角の部分を、
:afterで上の白い楕円を乗っけてるぞ。

ストロー！


ストローは2本の棒みたいな四角とちっこい楕円で構成してるぞ。
もうだいたいやり方わかってると思うからHTMLとSCSSだけ下に載せとくぞい。

  <!-- ストロー -->
  <div class="straw"></div>
  <div class="straw--bottom"></div>

// ストロー
%straw,.straw{
  background:#ea5550;
  width:20px;
  height:70px;
  z-index:5;
  @include absolute($top:-70px,$left:50px);
  &:before{
    content:' ';
    width: 20px;
    height: 4px;
    background-color: #ea5550;
    border-radius: 10px / 2px;
    @include absolute($bottom:-2px);
  }
  &:after{
    @extend %straw:before;
    background-color: #a73836;
    top:-2px;
  }
  &--bottom{
    @extend %straw;
    height:30px;
    top:30px;
    left:50px;
    z-index:4;
  }
}

ついにタピオカ

タピオカは.tapiokaで黒丸を作ってから、ただ.cup__innerの部分に
一粒ずつ例のごとくposition:absolute;してるだけだな。

    <div class="cup__inner">
      <div class="tapioka tsubu-1"></div>
      <div class="tapioka tsubu-2"></div>
      <div class="tapioka tsubu-3"></div>
      <div class="tapioka tsubu-4"></div>
      <div class="tapioka tsubu-5"></div>
      <div class="tapioka tsubu-6"></div>
      <div class="tapioka tsubu-7"></div>
      <div class="tapioka tsubu-8"></div>
    </div>

.tapioka{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:20px;
  background:#000;
}
//それぞれの位置はtsubu-の方に書く

で、アニメーションは、一個の@keyframesでアニメーションを作ってから、
それを実行する時間をひと粒ずつ変えてるって感じだぞ！！

@keyframes tsubu {
  0% { transform:translateY( 0px); }
100% { transform:translateY( 3px); }
}

今回は、開始値が0px、終了値が縦軸で3pxとした。
つまり、開始位置からアニメーションを終えると3px分下がってる位置にタピオカがあるってこと。

【参考】
【CSS3】@keyframes と animation 関連のまとめ

この@keyframesを、.tsubu-1,2,3…のクラスに入れていくぞ。
animation:で以下のような記述を書いていこう！

今回は、この「1s」の部分をタピオカごとに変えていくぞ。
つまりこんな感じで0.1sくらいずつ時間をずらすんや！！！

.tsubu{
  &-1{
    bottom:4px;
    left:5px;
    animation: tsubu 1.2s ease-in-out infinite alternate;
  }
  &-2{
    bottom:-5px;
    left:28px;
    animation: tsubu 0.5s ease-in-out infinite alternate;
  }
  &-3{
    bottom:2px;
    left:55px;
    animation: tsubu 1s ease-in-out infinite alternate;
  }
  &-4{
    bottom:-2px;
    left:81px;
    animation: tsubu 0.6s ease-in-out infinite alternate;
  }
  &-5{
    bottom:34px;
    left:2px;
    animation: tsubu 0.8s ease-in-out infinite alternate;
  }
  &-6{
    bottom:25px;
    left:30px;
    animation: tsubu 0.7s ease-in-out infinite alternate;
  }
  &-7{
    bottom: 32px;
    left: 61px;
    animation: tsubu 0.9s ease-in-out infinite alternate;
  }
  &-8{
    bottom: 24px;
    left: 86px;
    animation: tsubu 1.1s ease-in-out infinite alternate;
  }
}

これで、一粒ずつちょっと違う動きをするふわふわタピオカが完成するぞい！

やった〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜✌︎('ω'✌︎ )

ただ、もろもろもっといいやり方がある気がするので、
もし親切な方がいたらもろもろ色々教えてくださ〜〜〜〜い！！！！！！

追記

隣に座ってる同僚がCSSでにゃんこつくって動かす記事を書いたよ！！！！！！
[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす　〜作る編〜

めっちゃ癒されるし勉強になるのでこっちもよろしくな！！！！！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-27T01:28:20+09:00

bootstrapを使う準備

未来電子テクノロジーでインターンをしているkota7175です。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
今回は便利なHTML/CSSフレームワークであるBootstrapについて書きます。

Bootstrapとは

Bootstrapとは、HTMLやCSSのフレームワークであり、これを使うことで普通に書くより簡単にWebページをデザインすることができます。
また、グリッドシステムにより、スマホなどの小さな画面にも対応できるレスポンシブなWebページを作ることができます。

Bootstrapの使い方

Bootstrapを使うには、まずはこちらからダウンロードします。
現在はBootstrap4が最新です。
ダウンロードできたら展開し、css、jsフォルダがある場所にindex.htmlを作って、以下をコピペします。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SamplePage</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body></body>
</html>

ここで重要なのは、Bootstrapを読み込む前にjQueryをWeb上のソースから読み込むことです。
Bootstrapの一部のjsは、jQueryがないと動きません。

以上でBootstrapを使う準備は完了です。
具体的な使い方はグリッドシステムなどと一緒に後程またまとめたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧