投稿日：2021-01-21T23:09:16+09:00

PurgeCSS のシンプルな使い方

PurgeCSS はプロジェクトで使っていない CSS を削除してくれる便利ツールです。

本来は PostCSS や Gulp などのプラグインとして使うのでしょうが、コマンドラインで都度動かすこともできます。

とりあえず使っていないCSSを削除したいときや、簡単に試してみたい時にはこんな方法でいいかもしれません。

環境

node v10.14.1

purgecss v4.0.0

デモンストレーション

ディレクトリ構造
index.html
style.css
下記、style.css と index.html を見ていただければわかるのですが、
index.html で使っている css は .mt-50 のみです。

style.css
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-70 {
  margin-top: 70px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-90 {
  margin-top: 90px;
}
index.html
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <p class="mt-50">test</p>
  </body>

</html>
デモではわかりやすく30行程度の CSS ファイルですが、
ユーティリティ系のスタイルをたくさん準備しておくと実際の作業では数千〜数万行になることもあるのではないでしょうか。

おそらく全てのスタイルは使いません。

そこで PurgeCSS です。

インストール
npm i -g purgecss
実行
purgecss --css style.css --content index.html --output style.purged.css
オプションの --css は元のCSSファイル、--content は参照先のファイル、--output は書き出しファイルです。
ファイル名、ファイルパスは作業環境に合わせてください。

書き出された CSS ファイル
.mt-50 {
  margin-top: 50px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T22:39:51+09:00

slickを用いた画像スライド

[概要]

1.結論
2.なぜslickを使うのか
3.完成形
4.どのように使うのか
5.ここから学んだこと

1.結論

slickの公式サイトからダウンロードして実装する

2.なぜslickを使うのか

簡単に実装できるからです。具体的にいうと公式サイトからファイルをダウンロードをして、必要なものを自分のフォルダの中に挿入して、あとは公式のところから載っているものから自分が使用たいデザインを選んで、実装していくだけだからです。

3.完成形

4.どのように使うのか
1)まず表示させたいビューファイルに画像をいくつか記述します。
index.html.erb
    <div class="slider"> 
      <div><%= image_tag 'S__19701764.jpg' %></div>
      <div><%= image_tag 'S__19701765.jpg' %></div>
      <div><%= image_tag 'S__19701762.jpg' %></div>
    </div>
2)次にslickの公式サイトに飛び（https://kenwheeler.github.io/slick/）get it nowのボタンを押してDownload Nowのボタンを押してダウンロードする。

3)ダウンロードしたファイルを解凍し、ファイルを自分のフォルダに追加する。
ダウンロードして解凍したファイルを開きslickのファイルを開く。
その中のファイルのajax-loader.gif, fonts, slick-theme.css, slick.css を自分のアプリのCSSファイルに挿入

4)jsフォルダに上記の画像のslick.jsを追加

5)application.html.erbに追加したファイルを記述
一番上にあるajax.googleapis.comはJQueryの読み込みをしている。
application.html.erb
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
    </head>
6)最後に最初のビューファイルに記述した画像の記述の下にjavaScritを記述
この記述は自分がデザインしたい記述をそのままコピーして記述する。私はこのデザインをしたかったのでこの記述をコピーしました！！
index.html.erb
    <div class="slider"> 
      <div><%= image_tag 'S__19701764.jpg' %></div>
      <div><%= image_tag 'S__19701765.jpg' %></div>
      <div><%= image_tag 'S__19701762.jpg' %></div>
    </div>
     <script>
      $('.slider').slick({
      autoplay:true,
      autoplaySpeed:3000,
      dots:true,
    });
7)完成！！
これだけで3のような完成形が作られます！！
私はindex.html.erbに記述しましたが、application.html.erbや他のhtmlファイルに記述することもできます。

5.ここから学んだこと

最初はうまく写真が反映されなかったりjsが動いてなかったりして苦労しましたが、しっかりと検証ツールを使いどこが間違っているのかを確認することができました！！slick自体の導入はシンプルで簡単なので是非試してみてください！！
　このほかにもたくさんのデザインと自分の記述次第で好きなようにアレンジできるので試してみてください！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T20:59:10+09:00

CSSの設計ルールFLOCSSとは？各ファイルの意味や適用順序（強度）を理解する。

CSSの設計ルールの一つであるFLOCSSの構造と使い方について。

目次

FLOCSSとは？

レイヤー（ディレクトリ構造）

foundationレイヤー

layoutレイヤー

objectレイヤー

componentレイヤー

projectレイヤー

utilityレイヤー

統合用ファイル

レイヤーの適用優先度（強度）

CSSのカスケーディング（適用優先度の規則）

カスケーディングとは？

ファイル内の記述順序

セレクタの種類

命名規則

レイヤー毎の命名規則

BEMの命名規則

FLOCSS使用時の注意点

FLOCSSとは？

「Foundation Layout Object CSS」の略。

OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れたCSSの構成案。

要は、CSSの作り方のルール。

意味を持たせたディレクトリを作り、その配下に関連するCSSを保存していく。

CSSの適用名についてもルール化（BEMを使用）。

・詳細はFLOCSS公式ページ githubにて。

レイヤー（ディレクトリ構造）

３つの主レイヤーと３つの子レイヤーと、すべてのレイヤーを統合する１ファイルで構成される。

▼Flocssの構造（Sassの場合）
FLOCSSのディレクトリ構造例
SCSSなど
│
├── foundation
│   ├── _base.scss
│   └── _reset.scss
├── layout
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _main.scss
│   └── _sidebar.scss
└── object
│    ├── component
│    │   ├── _button.scss
│    │   ├── _dialog.scss
│    │   ├── _grid.scss
│    │   └── _media.scss
│    ├── project
│    │   ├── _articles.scss
│    │   ├── _comments.scss
│    │   ├── _gallery.scss
│    │   └── _profile.scss
│    └── utility
│        ├── _align.scss
│        ├── _clearfix.scss
│        ├── _margin.scss
│        ├── _position.scss
│        ├── _size.scss
│        └── _text.scss
│
└── app.scss        
ファイル名に冒頭に_がついているのは、コンパイルしないようにするため。コンパイルするファイルは統合ファイル（app.scss）のみ。

▼３つの主レイヤー

foundation

layout

object

▼３つの子レイヤー

component

project

utility

▼統合用ファイル
app.scss

1. foundationレイヤー

プロジェクトのデフォルトスタイルや基本的なスタイルを定義する。

メディアクエリやリセットCSSを置く。

2. layoutレイヤー

プロジェクト共通のコンテナーブロックのスタイルを定義する。

ヘッダーやメインのコンテンツエリア、サイドバーやフッターなどを置く。

3. objectレイヤー

繰り返し利用されるスタイルを保存するレイヤー。
(1)Component, (2)Project, (3)Utilityの３つの子レイヤーを置く。

4. componentレイヤー

再利用する小さな単位のモジュールを定義する。

buttonや、テーブル、フォームのUI、見出しのパターンなど。

5. projectレイヤー

複数のcomponentやその他の要素の組み合わせや、ページ固有のコンテンツを定義する。

記事一覧や、ユーザープロフィール、画像ギャラリーなどコンテンツを構成する要素など。

6. utilityレイヤー

ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい、あるいは適切では無い、わずかなスタイルの調整など。

文字色や太さのオプション、スペースのオプションなど。

7. 統合用ファイル

FLOCSSではレイヤー毎の優先度（強度）が決まっている。これを正しく反映するために統合用ファイルを作成する。

最終的にコンパイルするのはこのファイルのみ。

レイヤーの適用優先度（強度）

レイヤーの順に強度が強くなる。
▼弱い▼
F: Fundation
L: Layout
O-C: ObjectのComponent
O-P: ObjectのProject
O-U: ObjectのUtility
▲強い▲
統合用ファイルの記述例

上記強度に沿うように統合用ファイルを記述する。
app.scss
// ==========================================================================
// Foundation
// ==========================================================================

@import "foundation/_reset";
@import "foundation/_base";

// ==========================================================================
// Layout
// ==========================================================================

@import "layout/_footer";
@import "layout/_header";
@import "layout/_main";
@import "layout/_sidebar";

// ==========================================================================
// Object
// ==========================================================================

// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------

@import "object/component/_button";
@import "object/component/_dialog";
@import "object/component/_grid";
@import "object/component/_media";

// -----------------------------------------------------------------
// Project
// -----------------------------------------------------------------

@import "object/project/_articles";
@import "object/project/_comments";
@import "object/project/_gallery";
@import "object/project/_profile";

// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------

@import "object/utility/_align";
@import "object/utility/_clearfix";
@import "object/utility/_margin";
@import "object/utility/_position";
@import "object/utility/_size";
@import "object/utility/_text";
@importの記述方法

sassで@import "ファイル名"とすれば、指定したファイルを読み込むことができる。

ディレクトリ単位で読み込むことはできない（ファイル名を指定する）

.scssは省略可能（.cssは必要）

_がついたファイル名は、_なしで記述する。

＜例＞
sass > object > utility > _align.scss
↓
@import(object/utility/align)

CSSのカスケーディング（適用優先度の規則）

カスケーディングとは？

一つの要素に複数の宣言がされた場合に適用される強さの関係をカスケーディングと呼ぶ。

・強度や優先度 = カスケーディング

CSSの適用優先度

CSSのカスケーディングの基準は大きく２つある。

(1)ファイル内の記述順序

cssではファイルの下側にいくほど優先度が高くなる。
各cssファイルを読み込む場合は、後に読み込んだファイルほど優先度が上がる。
適用例
// 以下のHTMLにCSSを適用する場合
<button class=”red-button blue-button >クリック</button>
cssの例
/* CSS */
.blue-button {
  display: inline-block;
  background-color: blue; 
}

.red-button {
  display: inline-block;   
  background-color: red;   /* こちらが優先 */
}
(2)セレクタの種類

セレクタの種類により適用強度が変わる。
FLOCSSではLayoutレイヤーのみidセレクタ（#セレクタ名）の使用が許可されている。

その他のレイヤーではクラスセレクタを使用する。

セレクタ例優先度

!important宣言 color: red !important; 6

インライン（style属性） style="color: red;" 5

IDセレクタ #hoge 4

クラスセレクタ .hoge 3

属性セレクタ a[href="https://example.org"]{color: red;} 3

擬似クラス button:hover {color: red;} 3

疑似要素 p::first-line　{color: red;} 2

要素セレクタ p {color: red;} 2

ユニバーサルセレクタ * {color: red;} 1

優先度は最弱を１として＋１ずつで表示。

!importantはセレクタではないが、すべてのルールを無視して適用されるため最上位の優先度として記載。

・htmq.com セレクタの種類一覧

命名規則

FLOCSS特有のレイヤー毎の命名規則と、BEM（MindBEMding）の概念を使っている。

レイヤー名はプレフィックス（接頭語）で指定。BEMはサフィックス（接尾語）で指定。

レイヤー毎の命名規則

Layout, Component, Project, Utilityはプレフィックスをつける。

レイヤープレフィックス例

fundation なし body { margin: 0 }

layout .l or #l .l-footer

component .c .c-label

project .p .p-profile

utility .u .u-black

状態（Modifier） .is .is-selected

layoutのみidセレクタも許容。

状態を表すmodifierはレイヤーではないがプレフィックスの命名ルールのため記載。

BEMとは？

「Block Element Modifier」の略。

CSS設計の考え方、(1)Block, (2)Element, (3)Modifierの３つの要素で設計する。

この命名規則がMindBEMding。命名規則も合わせてBEMと呼ばれることが多い。

BEMの命名規則

項目内容命名規則例

Block 独立して再利用できる要素 FLOCSSの規則に沿う c-button

Element Blockの中にのみ存在できる要素 __ (アンダーバー２つ) c-button__icon

Modifier BlockやElementを修飾する -- (ハイフン２つ) c-button--delete

Blockは大きな一つ塊。ElementはBlockの構成要素。

色やサイズを変えるなどの微調整はModifier

▼実例
scss
.c-key-visual {
  background-repeat:  no-repeat;
  background-position: center;
  background-size: cover;
  height: 340px;
  &__title{
    font-size: 36px;
    font-weight: bold;
  }
  &__lead{
    font-size: 24px;
  }
  &__title--black,
  &__lead--black {
    color: #333;
  }
}
Block: c-key-visual

Element: __title, __lead

Modifier: --black

タグに適用する場合は以下のようになる。

<div class="c-key-visual">
<div class="c-key-visual__title--black">

FLOCSS使用時の注意点

複数のモジュールをセレクタに使用しない

意図しないCSSの適用を避けるため。独立性を高める。
NG事例
// Component
.c-button {
  ...
}
.c-dialog .c-button {
  ...
}
.c-buttonにCSSが複数回適用されている。

モジュール内で完結しない@extendを使用しない

レイヤーやモジュールを超えてExtendによる継承をおこなった場合、FLOCSSの構成・設計は破綻し、カスケーディングルールも複雑にしてしまう可能性があるため。

▼モジュール内なら使用OK
OK事例
.button {
  display: inline-block;
  padding: 0.5em 1em;
  cursor: pointer;
}
.button--primary {
  @extend .button
  background-color: #CCAA00;
  color: #FFFFFF;
}
.button--secondary {
  @extend .button
  background-color: #FFCC00;
}
ファイル名の冒頭に_をつける

統合ファイル(app.scss)を除いて、コンパイルしないようにするためファイル名の冒頭に_をつける。

統括ファイルの@import順序を変えない

FLOCSSのカスケーディングを壊さないようにするため。

CSSプロパティの記述順序

FLOCSS限定ではないが、プロジェクト毎に決めておいた方がコードが読みやすくなる。

例：
上に記述

display

position

width,height

margin,padding

background

border

font

animation

…etc

modifierかutilityか？

既存のモジュールに追加でCSSを適用したい場合、moifierでつなげるか、utilityを使う方法が考えられる。

例：見出しタイトル（モジュール）に、margin top（追加CSS）をつけるなど）

そのCSSを他のタグでも使う可能性がある場合は、moifierとして新たに登録する。

１度きりの処理（使い回ししない）の時は、モジュールにutilityを適用する。

セレクタ	例	優先度
!important宣言	`color: red !important;`	6
インライン（style属性）	`style="color: red;"`	5
IDセレクタ	#hoge	4
クラスセレクタ	.hoge	3
属性セレクタ	`a[href="https://example.org"]{color: red;}`	3
擬似クラス	`button:hover {color: red;}`	3
疑似要素	`p::first-line　{color: red;}`	2
要素セレクタ	`p {color: red;}`	2
ユニバーサルセレクタ	`* {color: red;}`	1

レイヤー	プレフィックス	例
fundation	なし	body { margin: 0 }
layout	.l or #l	.l-footer
component	.c	.c-label
project	.p	.p-profile
utility	.u	.u-black
状態（Modifier）	.is	.is-selected

項目	内容	命名規則	例
Block	独立して再利用できる要素	FLOCSSの規則に沿う	c-button
Element	Blockの中にのみ存在できる要素	__ (アンダーバー２つ)	c-button__icon
Modifier	BlockやElementを修飾する	-- (ハイフン２つ)	c-button--delete

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T20:48:35+09:00

【初心者でもわかる】CSSだけでステップフローを作る

どうも7noteです。シンプルなステップフローの作り方

申し込みフォームなどではEFO（フォームの最適化）の観点からステップフローをつけるのが一般的です。
ステップフローは「入力 > 確認 > 完了」とステップが分かれていて現在がどのステップかを表すやつのことです。

CSSだけで作ってきます。

ステップフローの作り方

入力、確認、完了でそれぞれ別ページを想定しています。
それぞれのページにあった<li>にクラスcurrentをつけます。
index.html
<ul class="flow">
  <li class="current">入力</li>
  <li>確認</li>
  <li>完了</li>
</ul>
style.css
.flow {
  width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */
  display: flex;            /* flexboxで横並びにする */
  justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
}

.flow li {

  color: #333;        /* 文字色を黒に指定 */
  font-size: 11px;    /* 文字サイズを指定 */
  width: calc(100% / 3); /* 横幅を三等分した1つの大きさに指定 */
  background: #eee;   /* 背景色をグレーに指定 */
  line-height: 50px;  /* 行間(高さの代わり)を指定 */
  text-align: center; /* 文字を中央寄せにする */
  position: relative; /* 基準位置とする */
}

.flow li:not(:first-child):not(:last-child) { 
  padding: 0 0 0 10px;  /* 最初と最後以外には左に適度な余白を指定 */
}

.flow li::before,
.flow li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;　　/* 高さを0に指定 */
  display: block;  /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow li::before {
  border: solid 32px transparent;     /* 32pxのborderを指定 */
  border-right: solid 13px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 13px #FFF;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: -7px;  /* 重ねる位置(縦軸)を調整 */
  left: 0;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow li::after {
  border: solid 25px transparent;  /* 25pxのborderを指定 */
  border-left: solid 10px #EDEDED; /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 10px transparent; /* 幅を合わせるために右線は10pxにする */
  top: 0;       /* 重ねる位置(縦軸)を調整 */
  right: -20px; /* 重ねる位置(横軸)を調整 */
  z-index: 2;   /* 重なり順の優先度を他よりも上げる */
}

.flow li:first-child::before,
.flow li:last-child::after {
  content: none;  /* 最初のliの左と最後のliの右は作らない */
}

/* 以下.currentだけ色を変えるCSS */

.flow li.current {
  color: #FFF;
  background: #FCC;
}

.flow li.current::after {
  border-left: solid 10px #FCC;
}
解説

手順としては以下のようなイメージで作って行きます。

①　liの箱を3つ作成して、flexboxで横並びにする
②　わかりやすいように文字色や背景色を入れて、大きさを整える。
③　before、afterの疑似要素両方を作成
④　beforeでborderを使い右向きの白い三角形▷を作って配置。
⑤　afterでborderを使い右向きの背景色と同じ三角形▶を作る。
⑥　currentがついている場合、背景色とafterの三角形▶の色を変える

このような手順で作っていくと作りやすいと思います。

私的ポイントは、.flow li:not(:first-child):not(:last-child)でpaddingを左に10pxとっているところです。
これがないと、左の白三角形で削られている分文字が左に寄っているように見えてしまうので微調整を入れています。

まとめ

1から作成すると結構時間がかかってしまうので、コピペで作れるよう用意しておいたり、よく使うサイトをブックマークするなどしておくと時短になっていいですね！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T17:14:59+09:00

React Bootstrapで右に出る余白なんやねん

ご無沙汰してます、おおのんです。
今日はBootstrapに関すること。（あんまりReact関係ない）

右に余白がいてはる

とある日、Bootstrapを使って画面を作っていました。
レスポンシブ対応でスマホ画面サイズで見てみると、右に余白が！！！

どこが悪さしてるのか見てみると・・・

ここだった。

本来指定した領域をはみ出して表示しちゃってますので、overflow: hiddenしてみる。
index.js
..省略..
  return (
    <div className="overflow-hidden">
      <Carousel />
      <Row className="justify-content-center" md={10}>
..省略..
すると・・・！

余白を消し去ることに成功しました。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T15:59:34+09:00

Progate HTML & CSS 初級編〜上級編　Flexbox編

１．初級編
見出し以外の文には＜ｐ＞要素

＜ｉｍｇ＞要素はテキストを囲むことが無いため、終了タグは不要

＜ｌｉ＞要素は囲む要素によって種類が変わる
＜ｕｌ＞は黒点
＜ｏｌ＞は数字が連番
list-style: none;で黒点無し

「 font-family: フォント名; 」
フォント名にスペースがある場合はダブルクォーテーションで囲む

タグにはドットは不要　classはドットが必要

レイアウトは＜ｄｉｖ＞要素によって構成していく
「div」は「division」の略で、要素をグループ化するために使用される

２．中級編

containerクラスを中央寄せにする
中央に寄せるためにはmarginの左右にautoを指定する
marginにautoを指定するときは、必ずwidthを併せて指定する

containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにする

セレクタ:hoverではスペースを挟まない

opacityには要素の中身全てを透明にするという性質がある。色のみを透明にするには、rgbaというものを使う必要がある

クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになる。
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる

z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意する。

３．上級編
メディアクエリ　＠ｍｅｄｉａ(max-width: 1000px) {
cssを記述
}
1000pxの後にセミコロン付けない

box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになる
box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されている
*はすべての要素に対してCSSを適用したい場合に用いる
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなる

レスポンシブデザインを適用する準備として、＜ｈｅａｄ＞タグ内にviewportを設定する
viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しない

responsive.cssを読み込む際には、必ずviewportよりも下の行に記述するようにする

float解除にclear: left;

メニューアイコンはデフォルトでは非表示にし、画面幅が670px以下（スマートフォンサイズ）の時にのみ表示されるようにする↓
要素を非表示にするにはdisplay: none;を用いる
非表示にした要素を表示させる時は、display: block;を用いて表示する

4.Flexbox編
リストを横並びにするにはdisplay: flex;
横並びにしたリストを画面幅いっぱいにするにはflex: auto;

折り返したい要素の親要素にflex-wrap: wrapを指定する
折り返したい要素自身には列数に応じたwidthを指定
2列にしたい場合はwidth: 50%を指定

縦に並べたいときは親要素にflex-direction: column
margin: 0 auto;とwidthで中央寄せ

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T13:06:15+09:00

クラス名から高さをとってcss変数に入れる　メモ

高さを取得

html部分

app.vue

<template>
　//高さを取ってきたいとこ
  <v-app ref="app">
    <v-main>
      <nuxt />
　　　　//使うとこ
      <div class="aaa"/>
    </v-main>
    <the-footer />
  </v-app>
</template>

クラス名から要素の高さをとる時

app.vue

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {}
  },
  mounted () {
    //appがクラス名
　　//変数appHeightに取得した高さを代入
    const appHeight = this.$refs.app.$el.clientHeight
   //css変数(--height)に代入
    document.documentElement.style.setProperty('--height', `${appHeight}px`)
  }
})
</script>

取ってきた要素の高さを使う時

app.vue

<style lang="scss">

.aaa {
  //ここで使う
  height: var(--height, 100vh);
  background-color: red;
}

</style>

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-21T11:34:12+09:00

なるほどSassという話。

はじめに

昔知り合いの方にSassが便利だの言われていました。
今回はSassをほんの少し学習したのでアウトプットします！

Sassってなんですか？CSS？？？

Sassで不思議に思っていたのは、「Sass」と「Scss」の
2種類の書き方があって少しめんどくさそうだなと思っていましたが実際はめんどくさくなくて便利でしかありませんでした！

Sass記法はセレクタやクラスの後に{ }を使わないでインデントで書いてくみたいです。

Scss記法はCSSの書き方で入れ子にしていく書き方です！progateで学習している自分はこのScssの書き方でやってきます！

Sassのメリット

-　CSSよりも記述量を減らせる
-　コードを再利用できる
特に記述量を減らせるのは何よりもありがたいですね！

Sassの書き方
qiita.scss
    .button {
     display: inline-block;
     padding: 8px 24px;
     color: white;
     opacity: 0.8;
     background-color: #f778b8;
     box-shadow: 0 5px #e04893;

      &:hover{
       opacity: 1;
       }

      &:active{
       position: relative;
       top: 7px;
       box-shadow: none;
       }
    }
こんな感じです！buttonクラスの中にhoverとactiveがネストされてます！
ポイントは「&」ですねー、&つけると「button：hover」みたいになります！

なのでボタンの上にカーソルが乗っかると透明度が変わって、ボタンをクリックするとactiveの変化が起きます！

結論

Sass学習する前はcssの学習無駄になるのかな？とか思ってたりしてましたがとんでもないですね！
これからもSass使ってきます！！

　 Tweet
Qiitaで続きを読む

20210121のCSSに関する記事は8件です。

PurgeCSS のシンプルな使い方

環境

デモンストレーション

ディレクトリ構造

style.css

index.html

インストール

実行

書き出された CSS ファイル

slickを用いた画像スライド

[概要]

1.結論

2.なぜslickを使うのか

3.完成形

5.ここから学んだこと

CSSの設計ルールFLOCSSとは？各ファイルの意味や適用順序（強度）を理解する。

目次

FLOCSSとは？

レイヤー（ディレクトリ構造）

1. foundationレイヤー

2. layoutレイヤー

3. objectレイヤー

4. componentレイヤー

5. projectレイヤー

6. utilityレイヤー

7. 統合用ファイル

レイヤーの適用優先度（強度）

統合用ファイルの記述例

@importの記述方法

CSSのカスケーディング（適用優先度の規則）

カスケーディングとは？

CSSの適用優先度

(1)ファイル内の記述順序

(2)セレクタの種類

命名規則

レイヤー毎の命名規則

BEMとは？

BEMの命名規則

FLOCSS使用時の注意点

複数のモジュールをセレクタに使用しない

モジュール内で完結しない@extendを使用しない

ファイル名の冒頭に_をつける

統括ファイルの@import順序を変えない

CSSプロパティの記述順序

modifierかutilityか？

【初心者でもわかる】CSSだけでステップフローを作る

どうも7noteです。シンプルなステップフローの作り方

ステップフローの作り方

解説

まとめ

おそまつ！

React Bootstrapで右に出る余白なんやねん

右に余白がいてはる

Progate HTML & CSS 初級編〜上級編 Flexbox編

クラス名から高さをとってcss変数に入れる メモ

高さを取得

なるほどSassという話。

はじめに

Sassってなんですか？CSS？？？

Sassのメリット

Sassの書き方

結論

日付別

タグ一覧

`@import`の記述方法

モジュール内で完結しない`@extend`を使用しない

ファイル名の冒頭に`_`をつける

統括ファイルの`@import`順序を変えない

Progate HTML & CSS 初級編〜上級編　Flexbox編

クラス名から高さをとってcss変数に入れる　メモ