What's New Qiita

20190305のCSSに関する記事は7件です。

  • 投稿日：2019-03-05T22:05:57+09:00

CSSのTips

背景

CSS書いていると「あれはどうやってやるんだっけ」とかよくある。

目的

やりたいことをすぐ引き出せるように。
「何をしたいか？実現したいか？」という目的志向で書いていこうと思う。

Q. 文字と文字の間隔を詰めたい

A. letter-spacingでマイナス値を指定する

span {
    letter-spacing: -1px;
}

Q. テキストをブロック要素内の上下中央に配置したい

A. line-heightをブロック（インラインブロック）要素のheightに合わせる

div {
    height: 100px;
}
div span {
    line-height: 100px;
}

もちろん、インライン要素をdisplay:inline-blockで等でブロック化して、同一要素にheightとline-heightの両方を指定してもいい。

Q. table要素のボーダーをなくしたい（セル同士を密着させたい）

A. table要素に対してborder-collapse: collapseをあてる

table {
    border-collapse: collapse;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-05T20:39:28+09:00

Sass　map eachを使って色を指定する

以外と知らない人が多そうなので出力します。
各要素に応じて色を定義している場合があると思います。
例えば信号の状態を表現する以下のようなcssがあります。

.signal-stop {
  color: #dd0000;
}

.signal-caution {
  color: #f4e542;
}

.signal-go {
  color: #5ce053;
}

これをmapを使うと以下のように記述することができます。

$map: (stop: #dd0000, caution: #f4e542, go: #5ce053);

@each $state, $color in $map {
    signal-#{$state} {
        color: $color;
    }
}

例えば、これに信号が停電するような場合を追加する場合は

$map: (stop: #dd0000, caution: #f4e542, go: #5ce053, blackout: #000000 );

とすれば済みそうです。実際のコードでは状態が８つあったので大分スッキリさせることができました。

https://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign
https://sass-lang.com/documentation/file.SASS_REFERENCE.html#lists
https://www.sassmeister.com/

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

Nuxt.jsでグローバルSass変数を使いたいんじゃ

概要

Nuxt.js使ってるときにsassのグローバル変数を使う方法を紹介します。

@nuxtjs/style-resourcesを使う

@nuxtjs/style-resourcesを使うと簡単です。

npm
npm i @nuxtjs/style-resources

yarn
yarn add @nuxtjs/style-resources

nuxt.config.jsを編集します。今回はsassなのでこんな感じ

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
    scss: ['@/assets/style/_variables.scss']
  }
}

scssファイル内にグローバル変数を書いていきます。

assets/style/_variables.scss
$primary: #3f51b5;
$secondary: #b0bec5;
$accent: #8c9eff;
$error: #b71c1c;

コンポーネント内で使います

<style lang="scss" scoped>
.button {
  color: $primary;
}
</style>

いいゾ～これ

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

Nuxt.jsでグローバルSass変数を使いたい

概要

Nuxt.jsでUIフレームワークを使ってるときにフレームワークの標準のカラーテーマを上書きして、上書きした値をSass変数にしてコンポーネント内で使いたい、なんてことありませんか？

今回はbootstrap-vueとbuefyを例にその方法を紹介したいと思います。

bootstrap-vue

bootstrap-vueが既にインストールされている前提で話します。
まだインストールしていない人はcreate-nuxt-appでbootstrap-vueを選ぶか、公式ドキュメントでインストール方法を調べましょう。

まずSassが使えるようにします。

npm i node-sass sass-loader

次にassets内にbootstrap-vue内の変数上書き用のSassファイルを作ります。上書きするためにここでbootstrapとbootstrap-vueのscssファイルをインポートします。

assets/style/_override.scss
$primary: red;

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

次にNuxt.jsを以下のように

nuxt.config.js
export default {
  css: ['@/assets/style/_override.scss'],

  modules: [
    'bootstrap-vue/nuxt',
  ],

  // _override.scssで既に読み込んでいるのでここはfalseにする
  bootstrapVue: {
    bootstrapCSS: false, // or `css`
    bootstrapVueCSS: false // or `bvCSS`
  },
}

これでbootstrap-vue内の$primaryがredになります。
variantプロップスでprimaryを選んだ場合も赤になります。

しかしこれではコンポーネント内のstyleブロックで$primaryを呼んだらエラーになります。

$primaryをグローバルにするためにもうひと工夫します。
先日書いたNuxt.jsでグローバルSass変数を使いたいんじゃを使うとうまくいきます。

とりあえず@nuxtjs/style-resourcesをインストールします。

npm
npm i @nuxtjs/style-resources

次にグローバルにしたいSass変数を記入します

assets/style/_variables.scss
$primary: red;

最終的にNuxt.config.jsが以下のようになります。

nuxt.config.js
export default {
  css: ['@/assets/style/_override.scss'],

  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/style-resources'
  ],

  // _override.scssで既に読み込んでいるのでここはfalseにする
  bootstrapVue: {
    bootstrapCSS: false, // or `css`
    bootstrapVueCSS: false // or `bvCSS`
  },

  styleResources: {
    scss: ['@/assets/style/_variables.scss']
  },
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-05T14:46:43+09:00

CSS animation で遊び倒す - Glowing Loading 2 -

CSS animation day 42となりました。
本日もローディングを作っていきます。

1. 完成版

ezgif.com-optimize (12).gif

See the Pen Sun Loading by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

Glowing Loader Ring Animation - Pure CSS Animation Effects - How To Create CSS3 Spinning Preloader

3. 分解してみる

❶.
マークアップしましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="loading">
      Loading
      <span></span>
    </div>
  </body>
</html>
styles.scss
body {
  margin: 0;
  padding: 0;
  background: #000;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: transparent;
  border: 3px solid #fffccc;
  border-radius: 50%;
  text-align: center;
  line-height: 300px;
  font-size: 42px;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #fffccc;
  color: #fffccc;
}

スクリーンショット 2019-03-05 7.16.48.png

・ポイントとして、text-shadowで影をつけることによって、ネオンの光のような光を表現できます。

❷.
周りの円周にそって、アニメーションが動くようにしましょう。

styles.scss
.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #fff000;
}

スクリーンショット 2019-03-05 7.23.43.png

擬似クラスで、境界の上だけborder が出るようにしました。
では、こいつを丸くして、 .loadingの境界を背景色(黒)にしましょう。

styles.scss
.loading {

     ・・・

  border: 3px solid #000;

}

.loading:before {
　　　・・・
  border-radius: 50%;

}

スクリーンショット 2019-03-05 14.02.49.png

三日月のようで綺麗ですね。

❸.
アニメーションをつけましょう。

styles.scss
.loading:before {
　　　・・・
  border-radius: 50%;
  animation: move 2s linear infinite;
}

@keyframes move {
  100% {
    transform: rotate(360deg);
  }
}

ダウンロード (37).gif

いい感じですね！

❹.
表現力をあげます。
もう一つ、逆回転で回る円を作りましょう。

styles.scss
span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-bottom: 5px solid #ff4500;
  animation: move 2s linear infinite;
}

ダウンロード (38).gif

いい感じですね！
もうちょっと表現力をあげます。
animation-timing-function を、ease-in/ease-out でずらします。
さらに、blur をかけましょう。

styles.scss
.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-top: 3px solid #fff000;
  animation: move 2s ease-in infinite;
}

.loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-top: 5px solid #fff000;
  box-shadow: 0 0 10px #fff000;
  filter: blur(20px);
  animation: move 2s ease-in infinite;
}

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-bottom: 5px solid #ff4500;
  animation: move 2s ease-out infinite;
}

リファクタリングして、完成です！

styles.scss
@mixin pos {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 300px;
  font-size: 35px;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #fffccc;
  color: #fffccc;

  &:before {
    @include pos;
    border-top: 3px solid #fff000;
    animation: move 2s ease-in infinite;
  }

  &:after {
    @include pos;
    border-top: 5px solid #fff000;
    box-shadow: 0 0 10px #fff000;
    filter: blur(20px);
    animation: move 2s ease-in infinite;
  }
}

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;

  &:before {
    @include pos;
    border-bottom: 5px solid #ff4500;
    animation: move 2s ease-out infinite;
  }
}

@keyframes move {
  100% {
    transform: rotate(360deg);
  }
}

ezgif.com-optimize (12).gif

いい感じですね！　
それではまた明日〜

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

HTML/CSSの学習をスタート②

未来電子テクノロジーでインターンをしているtakosです。
プロゲートのHTML/CSSの中級編を完了しました。
初級編よりもたくさんプロパティが出てきて、内容が濃かった。
次は、道場コースへ進みます。
初級編、中級編はインプットの面が大きかったので、道場コースで実践をして、知識を自分のものにしていきたいと思います。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-05T02:49:44+09:00

HTML/CSSの学習をスタート

未来電子テクノロジーでインターンをしているtakosです。
プロゲートのHTML/CSSの中級編を完了しました。
初級編よりもたくさんプロパティが出てきて、内容が濃かった。
次は、道場コースへ進みます。
初級編、中級編はインプットの面が大きかったので、道場コースで実践をして、知識を自分のものにしていきたいと思います。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

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

日付別

タグ一覧