どうも7noteです。transformを複数書く時は書き順に注意！！！

要素を回転、拡大縮小、傾斜、移動することできるtransformですが、複数指定することができます。

まずtransformで使える指定の種類は以下の通り。

	書き方	指定方法例
移動	translate	transform: translate(100px, 100px);
回転	rotate	transform: rotate(-45deg);
伸縮	scale	transform: scale(2, 2);
傾斜	skew	transform: skew(30deg, 30deg);

○ transformの正しい複数指定の方法

/* 正しいtransformの複数指定の方法 */
img {
  transform: translate(100px, 100px) rotate(-45deg);
}

transformを複数指定する場合は間を半角スペース空けます。
これが正しい複数指定の方法です。

× 間違った複数指定の方法

/* 間違った複数指定の方法 */
img {
  transform: translate(100px, 100px);
  transform: rotate(-45deg);
}
/* もしくは */
img {
  transform: translate(100px, 100px) , rotate(-45deg);
}

どちらも間違った書き方です。
もしこれを書いても前者の書き方ではtransformが上書きされrotate(-45deg)しか効きません。後者の場合はエラー扱いになり、cssが効きません

複数指定する場合は、順番に注意！！！

実際に見ていただきましょう。

/* パターン１ */
img {
  transform: translate(100px, 100px) rotate(45deg);
}

/* パターン２ */
img {
  transform: rotate(45deg) translate(100px, 100px);
}

どうでしょうか？
書き順によって、結果が変わってしまいます。

解説

これはcssの処理順が影響しているためです。
パターン１では先に100pxずつの移動をしてから要素を回転します。
逆にパターン２では先に回転した位置から100pxずつの移動をするので違う結果となります。

---

「パターン１の処理順」

translate(100px, 100px)からのrotate(45deg)。

「パターン２の処理順」

rotate(45deg)からのtranslate(100px, 100px)。

（画像が45度回転しているので、右下に移動後、左下に移動することで、結果下方向に移動したことになっている。）

まとめ

・複数指定す際は半角スペースを空けて繋げる。
・また指定する順番には注意！左から順番に処理される。

おそまつ！

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

calc( ) とは？

CSSのcalc( )関数は、プロパティの値を計算式で実行することができます。
単位を揃える必要はなく、px, %, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できます。
レスポンシブ対応のWebサイトなどを制作するのに便利です。

calcは calculation = 計算 の略です

使い方

ルール

1, 計算式内では四則演算（加算、減算、乗算、除算）が使用できます。
2, 常に演算子（+, -, *, /）をスペースで区切らなければいけません。
3, 入れ子が使用できます。

calc( )の使用例

ある要素の幅を親要素の1/3にしたい時

calc()関数を使わないと、 width: 33.33333% などと指定すると思います。
calc()関数を使用すると以下のように指定することができます。

css

.item {
    width: calc(100% / 3);
}

カラムのデザインで、一方の幅が固定、もう一方が可変の時

.box 内の ボックスitem1 を150pxで固定、 ボックスitem2 は可変で横並びが崩れない状態で配置したい時に、calc()関数を使用すると以下のように指定することができます。

css

.box{
  width:100%;
}

.item1{
  width:150px;
}

.item2{
  width:calc(100% - 150px);
}

入れ子を使う書き方

css

.item {
    width: calc(100% / calc(100px / 2));
}

上記以外にも工夫すれば色々使うことができます。

結論

app/assets/config/manifest.jsファイルにコードを一行追加したら解決しました。

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css

#以下を追記
//= link application.css

環境

• macOS Catalina
• Ruby 2.7.2
• Rails 6.0.3

実際には下記の記事通りに環境構築をしています

[Docker] Ruby2.7.2 / Rails6.0.3 / MySQL8.0の開発環境構築できたメモ

参考

このサイトで「rails 6」でページ検索して出てきた解決案のひとつがうまくいきました！

【Stack Overflow】Rails: Sprockets::Rails::Helper::AssetNotPrecompiled in development

他に試したこと

• config/initializers/assets.rbファイルに追記

  1. Rails.application.config.assets.precompile += %w( application.css )この一行を追記
  2. rails assets:precompile コマンド実行後サーバー再起動

• 画像を再取り込み？（SVGリンク切れ？）

いくつか試しましたが、Railsのバージョン違いなのか、これではエラー解消できませんでした。
（前提としては、タイトルのエラー文が出て、画像表示がうまく動作していなかったようです）

さいごに

Railsガイド - アセットパイプライン

原因はこれかな？
このあたりを読めば、仮説と検証を考えながら解決できそう。

結論

app/assets/config/manifest.jsファイルにコードを一行追加したら解決しました。

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css

#以下を追記
//= link application.css

環境

• macOS Catalina
• Ruby 2.7.2
• Rails 6.0.3

実際には下記の記事通りに環境構築をしています

[Docker] Ruby2.7.2 / Rails6.0.3 / MySQL8.0の開発環境構築できたメモ

参考

このサイトで「rails 6」でページ検索して出てきた解決案のひとつがうまくいきました！

【Stack Overflow】Rails: Sprockets::Rails::Helper::AssetNotPrecompiled in development

他に試したこと

• config/initializers/assets.rbファイルに追記

  1. Rails.application.config.assets.precompile += %w( application.css )この一行を追記
  2. rails assets:precompile コマンド実行後サーバー再起動

• 画像を再取り込み？（SVGリンク切れ？）

いくつか試しましたが、Railsのバージョン違いなのか、これではエラー解消できませんでした。
（前提としては、タイトルのエラー文が出て、画像表示がうまく動作していなかったようです）

さいごに

Railsガイド - アセットパイプライン

原因はこれかな？
このあたりを読めば、仮説と検証を考えながら解決できそう。

1.transiton

本体に設定すること

何に対してAnimationを適用させるか

.box{
    transition-property: 適用させる全てのcss;
/*  適用させるCSSの例：transform, border-radius */
/*  初期状態はall */
}

Animationに要する時間

.box{
    transition-duration: 0.3s;

Animationに開始までの時間

.box{
    transition-delay: 時間s;

Animationする基準点

.box{
    transform-origin: top left;

一括指定

.box{
    transform: 順不同(時間sは1つ目がdurationn);

疑似クラスにつけるAnimation設定

transform

.box:hover{

　/* 移動 */
  transform: translate(50px, 20px);

　/* 回転 */
  transform: rotate(30deg);

　/* 拡大縮小 */
  transform: scale(.5, 2);

　/* 組合せ　前から順に適用 */
  transform: translateX(100px) rotate(30deg);
  transform: rotate(30deg) translateX(100px) ;

2.animation

アニメーションの基本設定

@keyframes アニメーション名{
  /* animation-duraton時間の% */
  0%{ 
    transform: none;
  }
  /* 同じ内容を複数指定可能 */
  20%,80%{
    transform: translateX(200px) rotate(360deg);
  }
  100%{
    transform: translateX(500px) rotate(360deg);
    /* ↓下に要素があると重なるので終わったら存在を消す必要ある時 */
    pointer-events: none;
  }
}

/* 回転(無限にやらせる)の時 ％ではなくfrom-toも使える */
@keyframes spin{
  from{
    transform: none;
  }
  to{
    transform: rotate(360deg);
  }
}

本体に設定すること

アニメーションの適用

.box{
    animation: アニメーション名;
}

アニメーション時間

.box{
    animation-duration: アニメーション時間s;
}

アニメーションを開始するまでの時間

.box{
    animation-delay: 開示までの時間s;
}

アニメーション名の最後で停止させる(＝初期値に戻らないようにする)

.box{
    animation-fill-mode: forwards;
}

アニメーションの繰り返し

.box{
    animation-iteration-count: infinite;
}

/* 数字で回数、無限：infinite */

アニメーションの方向(行ったり来たり)

• alternate：行ったり来たり
• reverse：ただ逆にするだけ
• alternate-reverse：逆にして行ったり来たり

.box{
    animation-direction: alternate; 
}

アニメーション一括指定

.box{
    animation: move 2s infinite 1s;
}
/* transitionと同様に順不同 */

3.動きの緩急の設定

• ease(初期状態)
• ease-in：小さいものが動く感じ
• ease-in-out：重いものが動く感じ
• liner：ずっと一定

{
 animation-timing-function: ease;
 transition-timing-function: ease;
}

やりたいこと

※私は初心者です

.blade.phpファイルでは親レイアウトに

layouts/親.blade.php

<!DOCUTYPE html>
<html lang='ja'>
<head>
  <!-- 省略 -->
</head>
  <body>
    @yield('content')
  </body>
<html>

子.blade.php

@extends('layouts.親')

@section('content')
中身
@endsection

という感じでhtmlを埋め込めた。

これのcssバージョンをやりたい。

2つのやり方があるみたい

1. 子blade内に記述するパターン
   

普通に親側のheadタグ内で
@yield('css')
と書き、

子.blade.php

@section('css')
<!-- ここにcssを記述 -->
@endsection

とするやり方。

2. cssファイルを読み込むパターン

layouts/親.blade.php

<!DOCUTYPE html>
<html lang='ja'>
<head>
  @stack('css')
</head>

子blade.php

@push('css')
    <link href="{{ asset('css/子.css') }}" rel="stylesheet">
@endpush

という感じで書く。

個人メモです。

BEMの命名ルールでは塊であるブロックは__、小変更を加えるモディファイヤーは--で表す。

連続した単語は-でつなげる。（例： quality-control)

この方法では、display: flexなどで入れ子構造の中に更に入れ子がある場合に、ブロック名が複数続いて名前が長くなってしまう。

長い名前の例

<div class="p-review__main__body__stars">

p-review　という親要素の中に、mainがあり、その中に、bodyがあり、その中のstarsに対してクラスを適用している。

このstarsの中に更に要素があれば、名前はどんどん長くなっていく、、

長っ、、、

<div class="p-review__main__body__stars_rate">

対処法

ブロック__が３個以上続いたら、新しい名前に変更する。

変更前

<div class="p-review__main__body__stars">

↓ 修正

修正後

<div class="p-review-stars">

ハイフンで繋ぎ、新しいまとまりにしてしまう。

中にブロックが続く場合は、規則通り__で繋ぐ。

<div class="p-review-stars__rate">

記述がシンプルになり、見易くなった。

• いつか整理します

1行が長いけどスクロールバーでなく折り返したい時

関連するstyle

body {
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

などを設定する.

• white-space
• overflow-wrap