投稿日：2019-02-15T20:41:16+09:00

下線にpaddingを指定したい text-decoration : underline

text-decoration : underlineにpaddingを指定されたようなデザインがある場合…、CSSのデフォルトでは対応ができません?

そんな場合の対応法です。
border-bottomと display:inlineを使って対応できます。

CSS
h2{
  border-bottom:2px solid #f00;
  padding-bottom:5px;
  display:inline;
  line-height:2;
}
デモ

See the Pen 下線が2行でpadding-bottomを指定したい by harumi-sato (@harumi-sato) on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-15T20:36:21+09:00

Vue.jsで扱うBootstrap4

Vue.jsでBootstarap4をいじってみよう！

タイトルの通りVue.jsのプロジェクトにBootstrapを導入しよう、使ってみよう！という記事です。昨今のVue界隈ではみなElementUIを使うっぽいですが自分は普通にVueでもいつも通りBootstrapを使いたかったので導入してみることにしました。

　非常にわかりやすい公式ドキュメントが存在するのですが英語で初心者にはとっつきにくいかなと思ったので公式ドキュメントの和訳もかねています。

以下の点に注意してください。
※今回はNuxt.jsについては触れていません
※VueやJavaScript, node.js, npm, yarn, webpack, bootstrapなどをそもそも知らないよ！という方向けの記事ではないです。その辺は他のめちゃくちゃわかりやすい記事や公式ドキュメントが存在するのでそちらを参考にしてください。

1. 導入編

導入方法としては二つ存在します。すでに作成したプロジェクト(webpack)に導入する方法と、vue-cliを用いてすでに導入済みのプロジェクトのテンプレートを作成する方法です。適宜使う方を参考にしてください。

Webpack

もしプロジェクトでwebpackを用いているならこの方法で導入できます(他のモジュールバンドラでは未検証)

①npmかyarnを用いてbootstrap-vueをインストールします。
以下のコマンドを入力してください。
bashなどのCLI
npm install bootstrap-vue

yarn add bootstrap-vue
②インストールが完了したらBootstrapVue プラグインを読み込みます。
src/index.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
ちなみに、自分はESlintのStandardを使っているのでセミコロンは勝手に消しちゃいました。

③webpackの設定をします。以下の二つをインストールしてください。
webpack公式の解説はこちらを見て下さい。
bash
npm install --save-dev style-loader css-loader
④最後にwebpackの設定に以下を追記してください。
webpack.config.js
  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
// ここから
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        }
      ]
    }
// ここまで
  };
vue-cli

！注意！
公式ドキュメントにはvue-cliと書いてありますが、最新版は@vue/cliと名称を変更しています。また、vue init コマンドを実行するには@vue/cli-initをインストールする必要があるます。こちらも別途公式ドキュメントを参照して下さい。

vue initが実行できる環境であればあとはコマンドを実行するだけです。
eslintの設定などはお好みで選択してください。
bash
vue init bootstrap-vue/webpack-simple my-project
# Change into the directory
cd my-project
# Install dependencies
npm i
# Fire up the dev server with HMR
npm run dev
このときもちろんwebpack-simpleだけでなくwebpackテンプレートも使えます。
bash
vue init bootstrap-vue/webpack my-project
導入編は以上になります。npm run devできちんと機能してるか確認しておきましょう。
App.vue
<template>
  <div id="app">
    <h1>Home</h1>
    <a href="#">bootstrap導入成功</a>
    <b-alert show>Default Alert</b-alert>
    <b-alert variant="danger"
             dismissible
             :show="showDismissibleAlert"
             @dismissed="showDismissibleAlert=false">
      Dismissible Alert!
    </b-alert>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
html, body {
  width: 100vw;
  margin: 0;
}
</style>
成功時

失敗時

無事導入できましたでしょうか？
続いてサンプルを紹介して実際にコンポーネントを使ってみよう、と言いたいところですがかなり長くなってしまいそうなので公式ドキュメントの和訳は以下の記事にまとめまることにします！必要に応じて見てみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-15T17:50:48+09:00

CSS animation で遊び倒す - Particle 3D-

CSS animation day25 となりました。
本日は、3D表現を用いた、Particle をやります。

なお、2D版も作りましたので、よろしければ前回の記事をご参照ください。

1. 完成版

See the Pen Particle Sphere by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. なぜか？

codrops によると、3D Particle の表現は、ページをローディングする待ち時間のアニメーションに使うと、効果的です。

確かに3D Particleは綺麗ですし、ランダムに動くのを見てても飽きないですし、楽しいですよね。いくらでも待てそうな気がします。

UX を向上させるために、こうした技術は、役に立ちそうですね！

3. 参考文献

Particle Orb CSS
CSS 3D Particles

4. 分解してみる

❶.
まずは、マークアップをします。
前回と同様のコードを書きます。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <div class="container">
      <div class="particle-wrap"></div>
      <div class="particle"></div>
      <div class="particle"></div>
                ・
　　　　　　　　　 ・
　　　　　　　　　 ・
　　　　　　　　　×　100 
   </div>
  </body>
</html>
styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: #000;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
}


.particle {
  background: #fff;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;

  @for $i from 1 through 100 {
    &:nth-child(#{$i}) {
      transform: translate(random(100) * 1vw, random(100) * 1vh);
    }
  }
}
❷.
ここから、3D 表現をつけていきたいところですが、知識の復習をしましょう。

CSS で3D 表現をする時に、以下の3つが大事です。　

1: transform-style: preserve 3d
2: perspective
3: rotate

transform-style: preserve-3d

transform-style は、要素の子要素を、3D 空間に配置する(preserve-3d)か、平面に配置する(flat)かを決めます。立体的に見せたい要素の親要素に、transform-style を指定しましょう。

perspective

遠近感を出す手法です。値が小さいほど、広角レンズのように歪みが大きくなります。

See the Pen css transform rotate/perspective test by yoichi kobayashi (@ykob) on CodePen.

perspectiveも、立体的に見せたい要素の親要素に、指定しましょう。

rotate

StarWars の以前の記事でrotate Xの解説をしました。また、こちらのQiita 記事も大変わかりやすくまとまっております。

❸.

では、これから 3D を作りますが、ここで質問です！
3D座標空間で、中心から、ある一定距離に、点をランダムに配置すると、どんな形になるでしょうか？

・・・

そうです、球になりますね！
コードを書いて実験しましょう。
styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: #000;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.particle {
  position: absolute;
  margin: 50vh 50vw;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

@for $i from 1 through 100 {
  .particle:nth-child(#{$i}) {
    animation: rotate#{$i} 4s infinite;
  }

  @keyframes rotate#{$i} {
    100% {
      transform: rotateX((random(360) * 1deg)) rotateY((random(360) * 1deg))
                 rotateZ((random(360) * 1deg)) translateZ(200px);
    }
  }
}
球になりました！
ポイントというか、はまったところですが

animation: rotate#{$i}
keyframes rotate#{$i}というように、
for文の中でアニメーションを設定し、particle要素の一つ一つにアニメーションをつけなければなりません。いつものように、animation: rotate としてしまうと、アニメーションがうまく動かず、3時間くらいハマるので、気をつけましょう。

では、色を変え、keyframes をいじります。
styles.scss
 @for $i from 1 through 100 {
   .particle:nth-child(#{$i}) {
     animation: rotate#{$i} 4s infinite;
     background: hsl(random(360), 75%, 75%);
     width: random(15) * 1 + px;
     height: random(15) * 1 + px;
  }

  @keyframes rotate#{$i} {
    30% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(300px);
    }
    50% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(100px);
    }
    70% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(130px);
    }
    90% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(50px);
    }
    100% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(600px);
    }
  }
}
いい感じです。
translateの値をいじると、こういう動きのほか、もっと別の表現もできます。
styles.scss
  @keyframes rotate#{$i} {
    30% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(300px);
    }
    50% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translate(300px, 600px);
    }
    70% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translate(400px, 200px);
    }
    90% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(50px);
    }
    100% {
      transform: rotateY((random(360) * 1deg)) rotateZ((random(360) * 1deg))
        rotateX((random(360) * 1deg)) translateZ(600px);
    }
  }
様々な表現ができて楽しいですね。

❹.
では最後に、ちょっとおまけです。
下のGIF をご覧ください。

これは、HTMLで入れ子の構造を持った親要素にアニメーションをつけて回転させたものですが、ご覧の通り、入れ子の子要素(赤い点)にもアニメーションが適応されます。

この特性を生かして、球体が、地球のようにぐるぐる回転する表現をつけましょう。
index.html
    <div class="container">
      <div class="wrapper">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
                ・
　　　　　　　　　 ・
　　　　　　　　　 ・
　　　　　　　　　×　100 
      </div>  
    </div>
styles.scss
.wrapper {
  will-change: animation;
  animation: moveAround 4s infinite;
  transform-style: preserve-3d;
}

@keyframes moveAround {
  100% {
    transform: rotateY(360deg);
  }
}
無事、Particle が、全体的に、横に回転するようになりました。
こういう、綺麗なParticle動画が、CSS だけでできるなんて、素晴らしいですね。

では、また明日〜！

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-15T17:12:49+09:00

Bootstrap4のフォームに立体感をつける方法【備忘録】

動機

テーブルとフォームに対してBootstrapを適用させたが区別がつきにくかったので、陰をつけたら見やすいかなと思った。

変更前

変更後

書くコード
.form-control{
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px;
  -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  -o-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
  -ms-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
}
まあサイトをInspectして、コピペしただけなんですけどね。w

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-15T14:18:52+09:00

reCAPTCHAを中央寄せしたい

初期では左寄せされる

Railsで実装したので
= recaptcha_tagsをビューに記述するだけで表示されました。
しかし左寄せで表示されてしまい、不恰好なので中央寄せさせたいです。

CSSで中央寄せにする

検証してみるとクラス g-recaptchaを持ったdivタグの下に配置されていることがわかったので、そのクラスにCSSを当てる。
下記のコードで中央寄せすることが可能。
中央寄せとは関係ないがパスワードの入力フォームと近かった為、margin-topで離している。
reCAPTCHA.css
.g-recaptcha {
  margin-right:auto;
  margin-left:auto;
  text-align: center;
  width:300px;
  margin-top:20px;
}
最終的に

このように中央寄せすることができた！

　 Tweet
Qiitaで続きを読む

20190215のCSSに関する記事は5件です。

下線にpaddingを指定したい text-decoration : underline

CSS

デモ

Vue.jsで扱うBootstrap4

Vue.jsでBootstarap4をいじってみよう！

1. 導入編

Webpack

vue-cli

CSS animation で遊び倒す - Particle 3D-

1. 完成版

2. なぜか？

3. 参考文献

4. 分解してみる

Bootstrap4のフォームに立体感をつける方法【備忘録】

動機

変更前

変更後

書くコード

reCAPTCHAを中央寄せしたい

初期では左寄せされる

CSSで中央寄せにする

最終的に

日付別

タグ一覧