CSSとは

HTMLを飾り付けしてくれる。（文字の色を変えてみたり、大きさを変えるなど）
HTMLとは別のファイルに記述する。
要素名に対してどういった飾り付けをするのかを指定していく
HTMLでは要素名と呼ばれていたがCSSではセレクタと呼ばれる

書き方の説明

セレクタ {
  プロパティ: 値;
}

書き方.css

h1 {
  color: red;
}

セレクタ・・・h1
プロパティ・・・color
値・・・red

セレクタにはHTMLの飾り付けしたい要素を入力。
→ h1を飾り付けてください！宣言
プロパティにはセレクタにどんな飾り付けを注文したいですか？
→ colorを指定するので h1 の文字の色を変えてください！
値にはプロパティの注文に対してどうしたいのかを答える
→ 文字の色は red でおねがいします！

NGな記入方法.css

h1 {color: red;}

上記のような書き方はNGです

もし h1 に飾り付けたい注文が文字の色と文字の大きさと・・・と複数の注文になってしまうと冗長になってしまいコードが見づらくなります。
なのでセレクタのあとの { で必ず改行すること。

あとは・・・
プロパティの前は字下げする。
プロパティの末尾に : を記入する。
値の末尾に ; を記入する。

color

文字の色を変える
16進数のカラーコードで色を指定（#ff0000,#008000など）
主要な色であれば直接色名を指定しても表示される（red,greenなど）

ちなみにカラーコードは原色大辞典がおすすめ

例.html

<h1>16進数で指定した赤色の文字だよ</h1>
<p>直接redと色を指定した赤色の文字だよ</p>

例.css

h1 {
  color: #ff0000;
}

p {
  color: red;
}

Web
↓

どちらも赤色の文字が指定されました

font-size

文字の大きさを変える
単位はピクセル（px）や％指定（ブラウザの文字基準の何％）などがある

例.html

<h1>文字の大きさを10pxにしてみました</h1>
<p>文字の大きさを20pxにしてみました</p>

CSSを指定しないと通常ではこのようにWebでは表示されます
↓

CSSで文字の大きさを指定すると・・・

例.css

h1 {
  font-size: 10px;
}

p {
  font-size: 20px;
}

Web
↓

文字の大きさが変わりました！

font-family

文字の種類を指定できる
font-family: フォント名;　と記入
フォント名にスペースがある場合は、 " " で囲む

例.css

h1 {
  font-family: serif;
}

p {
  font-family: "Avenir Next";
}

Web
↓

background-color

背景色を指定

例.css

h1 {
  background-color: #ff0000;
}

p {
  background-color: #ffff00;
}

Web
↓

width,height

width は横幅を指定する
height は高さを指定する
単位はピクセル（px）や％指定（ブラウザの文字基準の何％）などがある

例.css

img {
  width: 500px;
  height: 100px;
}

Web
↓

へちゃげたひよこちゃんになりました
ちなみに元のサイズはこちら
↓

class

例.html

<ul>
  <li>りんご</li>
  <li>いちご</li>
  <li>メロン</li>
</ul>

例.css

li {
  color: red;
}

上記のように設定するとWeb上では
↓

と表示される。
でもわかりやすいようにメロンだけ緑で表示したい。
この一部の要素にのみCSSで飾り付けたいときは class を使用する。

まずはHTMLを・・・

例.html

<ul>
  <li>りんご</li>
  <li>いちご</li>
  <li class="green-fruits">メロン</li>
</ul>

このように記入。
属性名を class とし、属性値を green-fruits とする（属性値に " " をつけ忘れないこと！）
class を使用すると属性値がクラス名になります。
クラス名は好きに決めれますが、わかりやすい名前をつけるほうがいいです。

例.css

li {
  color: red;
}

.green-fruits {
  color: green;
}

Webを確認すると・・・
↓

メロンだけ緑になりました！

cssの書き方は

.クラス名 {
　プロパティ: 値;
}

となります。
冒頭に . をつけて続けてクラス名を記入したら後の書き方はセレクタのときと同じです。

1. rails6でanimsitionを使う

ビューにアニメーションを付けようと思い、試しにanimsitionというjqueryライブラリを使った．いくつか、躓いて勉強になったことをまとめる．

2. まずはダウンロード

ライブラリを下記のサイトからダウンロード（ZIP形式）
https://github.com/blivesta/animsition

3. webpacker経由だと動かない．．．

★解凍後、以下の2ファイルををapp/javascript/srcにコピー．
①dist/js/animsition.js
②dist/js/animsition.css
★app/javascript/packs/application.jsに追記

application.js

import "../src/animsition.js";
import "../src/animsition.css";

★app/views/layouts/application.html.erbのheadタグ内に追記
➡jqueryを読み込む
➡application.jsを読み込む
これでビューでanimsition.jsとanimsition.cssを読み込めたはず．．．
readmeでanimsition.jsより先にjqueryを読み込むと書いてあったので、順番もいいはず．．．

application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

★ビューで動作確認のため、以下追記

show.html.erb

<div class="animsition">
  <a href="https://www.google.com/" class="animsition-link">animsition link 1</a> 
  <a href="https://www.google.com/" class="animsition-link">animsition link 2</a>
</div>
<script>
$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'rotate-in',
    outClass: 'rotate-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});
</script>

ページをリロードして確認．．．動かず．．．エラー出てる
animsition is not a functionみたいなよくあるエラー
animsition .jsファイルが読み込めてるか確認のため、jsファイルにalert文を仕込んだが、問題なく実行されていた.animsition .cssも一応確認したが、問題なし.

4. assets内にライブラリを配置して、読み込むと動いた！

webpacker経由で読み込むのはやめて、assets内からライブラリを読み込むようにしてみた.
★app/assets/の中にanimsition.jsとanimsition.cssをコピー
★application.html.erbに下記を追記
javascript_include_tag で個別に読み込んでみた.

application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<%= javascript_include_tag 'animsition.js' %>

★app/config/initializers/assets.rbに下記を追記
これを書かないとjavascript_include_tag が動かないらしい．．．

assets.rb

Rails.application.config.assets.precompile += %w( animsition.js )

★ページをリロードして確認．．．動いた！

5. redirect_to以外の方法で遷移したページのアニメーションが動かない．．．

アニメーションが無事動いたが、問題が発覚.
redirect_toで遷移するページに記載したアニメーションは動作するが、redirect_toを使用しないで、遷移したページに記載したアニメーションは動作しないことがわかった.

6. data-turbolinkのせい！

どうやら、data-turbolinkの仕業でした．
data-turbolinkはheadタグを最初の1回しか読まずに、ページの表示を高速化するgemで、rails4からデフォルトで導入されている模様．．．
そして、data-turbolinkが働いて遷移したページではreadyイベントが発火しない事があるらしい．

★data-turbolinkをオフにする
遷移元のリンクタグにdata属性を追加

<%= link_to "マイページ", current_user, data: {"turbolinks" => false} %>

この設定を付けて、ページ遷移すれば、遷移先のアニメーションは無事動作した.

参考にしたページ
★Rails 4のturbolinksについて最低でも知っておきたい事
https://kray.jp/blog/must-know-about-turbolinks/
★Rails 5.0でlink_toでturbolinkを無効にする法
https://qiita.com/hodosan/items/ee84482d18d6dccd9488

QuiCSSとは

どのタグにクラスをつけるか、クラス名はどうするか、どこにスタイルを記述するか...
コーディングには迷う要素がたくさんあり、迷いこそが制作スピードのボトルネックになっています。

QuiCSS（クイックス）は、迷う時間を最小化し高速でコーディングをするために設計された、BEMベースのコーディング規約です。

背景

FLOCSS、SMACSSなどいくつかのコーディング規約を試してみたのですが、規約が緩すぎて結局自分で考えなければならない箇所が多かったり、逆に構成が複雑すぎたり、小~中規模案件では必要が無いほどディレクトリが細分化されていたりして、どれもしっくりきませんでした。

QuiCSSはシンプルな構成かつ厳格なルールを採用し、少ない学習コストでコーディングスピードを上げることができるように設計されています。

必要な前提知識

・HTML、CSSの基本文法
・Sassの文法及びパーシャルによるファイル分割
・命名規則「BEM」の概要

メリット

・どのタグにクラスをつけるかが明確
・HTMLとCSSを行ったり来たりする必要がなくなる
・クラス名がすぐに決まる
・クラス名が重複する可能性がほとんど無い
・CSSをどのファイルに書くべきかが明確

デメリット

・使っている人が少ない
・HTML内の記述量が多くなりがち（Emmetを使っていてある程度のタイピングスピードがあれば、文字を入力する時間は迷う時間と比べるとずっと少ないので、記述量の増加はスピード的には問題になりません。）

内容

ディレクトリ構成

ディレクトリ構成

- index.html
- img/
- js/
- css/
- scss
  └── style.scss
  └── bases
      └── _reset.scss
      └── _config.scss
      └── _base.scss
      └── _mixin.scss
      └── _responsive.scss
      └── _utility.scss
  └── components
      └── _btn.scss
      └── _title.scss
      └── _form.scss
      └── _paging.scss
  └── layouts
      └── _header.scss
      └── _gnav.scss
      └── _main.scss
      └── _fnav.scss
      └── _footer.scss
  └── pages
      └── _idx.scss
      └── _abt.scss
      └── _ctt.scss
  └── pulgins
      └── _swiper.scss

basesディレクトリ
_reset.scss：ブラウザのデフォルトのスタイルをリセットするCSSを保存します。
_config.scss：カラーコード、ブレイクポイントなどを保存します。
_base.scss：タグに対して直接指定するスタイルを保存します。
_mixin.scss：メディアクエリなど、mixinを保存します。
_responsive.scss：レスポンシブ対応の際に使うクラスを保存します。(display: none;のつけ外しなど）
_utilities.scss：汎用クラスを使う場合には、このファイルに保存します。

その他、bootstrapなどのcssフレームワークの書き換えを行いたい場合には、適宜このディレクトリにファイルを追加してください。

componentsディレクトリ
ボタンやフォームなど、繰り返し使うパーツを1パーツ1ファイルで保存します。

作成したパーツを随時自分のテンプレートに追加して他の案件で流用することで、コーディングスピードをどんどんと上げていくことができます。

また他の案件でも(カスタマイズして)再利用できそうなパーツ以外は、無理に共通化せずにpagesディレクトリ内に繰り返し書いていくスタイルにした方が、結果として迷う時間が減ってコーディングスピードが上がります。

DRY(Don't Repeat Yourself)の原則は、ことCSSに関してはあまりストイックにならない方が良いと思っている派です。3、4回登場するくらいのスタイルの共通化で期待できる保守性の向上なんて、それによって必要になる思考量の増加と比べればたかが知れてます。

layoutsディレクトリ
ヘッダーやフッターなど、ほとんどのページで繰り返し使うエリアに関する記述を、1Block1ファイルで保存します。

pagesディレクトリ
各ページ固有のスタイルを1ページ1ファイルで保存します。
ファイル名は必ずアルファベット3文字にしてください。（後述するクラスの命名規則に関係します。）

pluginsディレクトリ
プラグイン固有のCSSがある場合、このディレクトリに保存します。

クラスの命名規則

クラスの命名はBEMがベースです。
Block：block
Element：block__element
Modifier：-modifier
が基本形となります。。Modifierはマルチクラス方式を採用しました。

その他、詳細なルールを以下に記載します。

layoutsディレクトリに保存するスタイルのBlock名は固定
layoutsディレクトリに保存するBlockは、どの案件も大体同じものになります。
以下のようにBlock名を固定しましょう。
もし以下にないlayoutが必要になった場合には、その都度Block名を考えます。

layoutsディレクトリに保存するブロック名

<header class="header"> <!-- ヘッダー -->
<nav class="gnav"> <!-- グローバルナビ -->
<main class="main"> <!-- メインコンテンツ -->
<footer class="footer"> <!-- フッター -->
<nav class="fnav"> <!-- フッターナビ -->

pagesディレクトリ内のBlock名はファイル名の3文字 + その箇所を表す3文字
例えばindex.htmlに対するスタイルをscss/pages/_idx.scssに保存した場合、ブロック名はidxtopやidxcttなどになります。
同じ名前のファイルを複数保存することはできないため、このルールによりクラス名が衝突する可能性はほぼ無くなります。
なお、ページごとにファイルを分割しているので、その箇所を表す3文字はある程度適当でOKです。（適当な名前でもどのスタイルを指しているかすぐに分かる）

element名はタグごとに固定する
div、p以外のタグ
完全に1つに固定します。同じブロック内に複数の同一タグがあった場合には、modifierを使いましょう。

div,p以外のElement名

<h1〜h6 class="block__ttl">
<form class="block__form">
<table class="block__table">
<ul class="block__list">
<ol class="block__list">
<dl class="block__def">

div、p
用途が多すぎで1つに固定するのは難しいですが、以下のいずれかが使えるケースが多いです。
それっぽければなんでも良いのですが、よく使うものを固定化して、悩む時間を少なくすることが大切です。

div,pのElement名

<p class="block__txt"> <!-- テキスト系 -->
<p class="block__ttl"> <!-- タイトル系 -->
<p class="block__btn"> <!-- ボタン系 -->
<p class="block__logo"> <!-- ロゴ系 -->
<div class="block__group"> <!-- フォーム要素系 -->
<div class="block__inner">
<div class="block__outer">
<div class="block__wrap">
<div class="block__box">
<div class="block__container">

クラスをつけるタグ、つけないタグ

クラスをつけるタグとつけないタグをあらかじめ決めておくことで、クラスをつけるかどうか迷う時間を無くします。またHTMLを一気に書き上げてからCSSを当てていくことができるようになるという意味でもスピードアップに貢献します。

クラスをつけるタグ
・大半のブロックレベルのタグ
header, footer, main, section, article, aside, nav, div, h1~h6, p, table, dl, ul, ol, ,iframe, form...

スタイルを当てる必要があるかどうかに関わらず、上記のタグには必ずクラスを指定します。

クラスをつけないタグ
・インラインレベルのタグ
a, span, img, em, strong, label, input, time...
・親要素が(ほぼ)決まっているタグ
li, thead, tbody, tr, th, td, dt, dd

上記のタグにはクラスをつけず、Sassのネストでスタイルを指定します。

Blockにするタグ、Elementにするタグ

BlockにするかElementにするかも、タグレベルで固定します。

Blockにするタグ
header, footer, main, article, section, aside

BlockにもElementにもなり得るタグ
div

Elementにするタグ
クラス付け対象の、その他全てのタグ
h1~6, p, ul, ol, dl, form, table, iframe...

componentsを利用する場合のクラスの付け方

上記のルールで付与した各クラスの前にcomponents用のクラスを追加します。

titleというcomponentsを使う場合

<div class="idxtop">
  <h2 class="title idxtop__ttl">ページタイトル</h2>
</div>

サンプル

サンプルをGitHubおよびGitHub Pagesに公開しました。
不明点等ございましたらお気軽にご質問ください。

• GitHub
• GitHub Pages

inputとlabelでアコーディオンつくった

inputとlabelを使って、CSSだけでアコーディオンを作ったので備忘録として書くぞ。

See the Pen CSSでアコーディオン作る by mame_hashbill (@mayu-mameuda) on CodePen.

ちなみに領域外クリックでアコーディオン閉じるようにしたぞい。

これからCSSでアコーディオン作ろうとしてる人、なるべくコピペでなんとかなるようなシンプルな記述にしたので、べろっとコピって使ってもらえたら嬉しいぞい。

inputとlabelの関係性

（以前の記事に書いたやつとだいたい同じこと書く。
以前の記事→[HTML/CSS]チェックボックスの仕組みを使ってえだまめ無限プチプチをつくるぞ）

さて、今回使うinputとlabelは、よくお問い合わせフォームとかで
チェックボックスとかラジオボタンとかを作るときに使うやつだよな。

このinputとlabelは、idとforで関連づけることができて、
関連付けをするとlabelをクリックしても選択ができる（input部分にチェックがつけられる）ぞ。
こんな感じに。↓

See the Pen
rNamJmo by mame_hashbill (@mayu-mameuda)
on CodePen.

<input type="checkbox" name="choice" id="choice-1" checked>
<label for="choice-1">選択肢1</label>
<input type="checkbox" name="choice" id="choice-2">
<label for="choice-2">選択肢2</label>
<input type="checkbox" name="choice" id="choice-3">
<label for="choice-3">選択肢3</label>

で、CSSでアコーディオンを作る上で重要なポイントは、
inputまたはlabelをクリックしたとき、checkedっていう状態が付与される点だな。

つまり、
checkedがついてる時はアコーディオンが開いていて、
ついてない時は閉じてる、っつう指定をしていくのだ。

HTML

使うHTMLはこんな感じ。

<body>
  <input type="checkbox" name="accordion" id="accordion">
  <label class="overlay" for="accordion"></label>
  <div class="accordion">
    <label class="accordion__heading" for="accordion"><span class="accordion__icon"></span>title</label>
    <div class="accordion__item-wrap">
      <div class="accordion__item">hogehoge</div>
      <div class="accordion__item">fugafuga</div>
      <div class="accordion__item">hogehoge</div>
      <div class="accordion__item">fugafuga</div>
    </div>
  </div>
</body>

inputが1つとlabelが2つ、上の方にいるな。

.overlayは領域外クリックの時に使うlabel、
.accordion__headingはアコーディオン開閉に使うlabel。

ほんで、inputはこの2つのlabelとid="accordion"で結びついてるぞ。

titleクリックで矢印アイコンの向きを変える

矢印アイコンは、アコーディオンが開いた時にぐるっと上下が反転するようになってるよな。
この仕組みもアコーディオン開閉と仕組みは一緒なので、先にこっちを説明していく。

  <input type="checkbox" name="accordion" id="accordion">
  <div class="accordion">
    <label class="accordion__heading" for="accordion"><span class="accordion__icon"></span>title</label>
  </div>

アイコンを動作させるのに必要なHTMLはこれだけ。
で、Scss。

$purple: #3B3955;

%accordion,.accordion{
  &__heading{ 
    position: relative;
  }
  &__icon{
    &:before{
      //アコーディオンの矢印をCSSで作成
      content: " ";
      position: absolute;
      left: 20px;
      top: 16px;
      width: 5px;
      height: 5px;
      border: 3px solid;
      border-color: transparent $purple $purple transparent;
      transform: rotate(45deg);
    }
  }
}

input[name="accordion"] {
  display: none; //ラジオボタンを消す
}

#accordion:checked~ {
    .accordion .accordion__icon{
      &:before{
        //check入ったときにアイコンを回転
        transform: rotate(-135deg);
        top:23px
      }
    }
}

アイコン自体をCSSで作成してしまっている関係で:beforeの中にたくさん書いてあるのだけど、その辺の説明はこのサイトを参考にしたので、何してるか知りたい人は見てほしい。
→【CSS】CSSのみで三角と矢印を作る方法

さてさて、
.accordion__iconでは、
とりあえず閉じている状態の下矢印アイコンを作成しているぞ。

で、そのあとの記述でinputをdisplay:none;してるんだけど、
これは、今回はlabelクリックでcheckedが付与される仕組みを使いたいだけで、
input自体は画面に存在している必要がないためだぞ。

チェック入ったときの指定方法

ほんで、inputを消したあとの記述で、labelをクリックしたとき（checked付与状態、つまりアコーディオン開いてる状態）の時のアイコンの指定をしているよ。
checked状態の指定は、checked ~に続けて書くのがお約束。

~は、間接セレクタっていうやつで、
兄弟関係にあれば間に別の要素が入っても指定ができる便利なセレクタだぞ。

【参考】間接セレクタ (E ~ F)


このセレクタの注意点としては、
~の後に指定するのは、必ず同階層にある要素にしないといけない決まりなので
アイコンをぐるっと回転させるには、
#accordion:checked ~ .accordion__iconという指定にせず、
#accordion:checked~ .accordion .accordion__icon
という指定にしないときかないんだなぁ。

ちなみにlabelがinputの上にあったりしてもきかないので注意である。

アコーディオンを開閉させる

上と同じ仕組みを使って、いよいよアコーディオン開閉を作る。
HTMLは上に貼ったもの。

で、Scssはこんな感じ（アコーディオン開閉部分のみ抜き出してます）

%accordion,.accordion{
  &__heading,&__item{
    padding: 0 20px 0 40px;
    line-height: 50px;
    letter-spacing: 0.05em;
  }
  &__heading{
    background: white;
    color: $purple;
    font-weight: bold;    
    position: relative;
    display: block;
    cursor: pointer;
    font-size: 18px;
  }
  &__item-wrap{
    overflow:hidden; //これをやらないと中身が表示されちゃうので入れる
  }
  &__item{
    height: 0; //閉じてるときは高さを0にしておく
    background: $purple;
    color: white;
  }
}

#accordion:checked~ {
    .accordion .accordion__item{
        height: 50px;
        transition: height .5s;
    }
}

ポイントとしては2点で、
1. .accordion__item-wrapにoverflow:hidden;して、はみ出た部分の表示（.accordion__item）を隠す。
2. .accordion__itemをheight:0;にして、checkedが付与された時にheight:50px;にアニメーションさせる。

これでアコーディオンが開閉するようになるぞ。
この作り方だと、.accordion__itemにアニメーションの秒数指定をしているから、
項目がいくつ増えても指定した秒数で開閉できるのだ。

領域外クリックでアコーディオンを閉じる

最後に領域外クリックでアコーディオンを閉じる指定の仕方。

.overlayを領域いっぱいにかけてから、
pointer-events: none;で、ポインタの動作を全て無効化する。
この指定を入れることで、要素自体はあるけどクリックはできないようにできるぞ。

で、inputにcheckedが付与されたあと、pointer-events: auto;でポインタの動作をデフォルトに戻して、.overlayを押せるようにするぞい。

  <input type="checkbox" name="accordion" id="accordion">
  <label class="overlay" for="accordion"></label>

.overlay{
    pointer-events: none; //ポインタの動作全部無効化
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index:-1;
}

#accordion:checked~ {
    .overlay{
      pointer-events: auto; //ポインタの動作デフォルトに戻す
    }
}

こんな感じで、領域外をクリックしてもアコーディオンが閉じるようになる。

まとめ

アコーディオンが2つとか3つとかになると、領域外クリックで閉じるやつは無理なのかもしれない。。
その場合はやっぱりJSになっちゃうのかな〜〜〜〜〜〜〜・・・教えて詳しい人よ

はじめに

タスクランナー(gulp)でscssをコンパイルした所、cssの改行コードがLFに切り替わってしまうという事案が発生し、色々と検索をかけてもなかなかヒットしなかったので、今後同じようなことが起こった時用の備忘録です。（備忘録しか書いていない気がする）

インストールするnpm

gulp-load-plugins

gulp-からはじまるnpmパッケージを簡素化してくれます。
require()ばっかりにならなくて済みますね。
https://www.npmjs.com/package/gulp-load-plugins

gulp-line-ending-corrector

これは参考文献がなかなかに少ないのですが、改行コードを変更できるnpmパッケージという解釈です。
※いまいち良くわかってない
https://www.npmjs.com/package/gulp-line-ending-corrector

記述方法

const plugins = require('gulp-load-plugins')();

でgulp-load-pluginsを読み込みます。

あとはgulpfile.jsのscss監視下のtask配下に

.pipe(plugins.lineEndingCorrector({
  verbose: false,
  eolc: 'CRLF'
}))

やりたかったこと

親コンポーネントで定義したスタイルを子コンポーネントへ反映させたかった。

parent-compomemt.html

<parent-compomemt>
  <child-compomemt class="double-border">
</parent-compomemt>

child-compomemt.html

<input type="text" class="input">

下記のような定義ではスタイルは反映されない。
そもそも親から子のスタイルを変えるのはお作法的にも悪いとのこと。

parent-compomemt.scss

.double-border {
  .input {
    border: double;
  }
}

解決策

:hostを使用して、子コンポーネント側で定義すれば良い。

child-compomemt.scss

:host.double-border {
  .input {
    border: double;
  }
}

はじめに

アドベントカレンダーといえばクリスマス。
クリスマスといえばツリー。
ということで、とってもありきたりですがクリスマスツリーをCSSで作ってみることにしました。

用意するもの

• もみの木
• 電飾
• てっぺんの星
• オーナメント

作ってゆく

もみの木

まずはもみの木から。これがないと始まりませんからね。
何となくもみの木は3段のイメージでいたんですが、画像検索してみるとそんなことないんですね。
いいんです。気にしません。borderを使っていい感じの三角形を作って、よしなに重ねていきます。
幹の部分もborderを使って台形を作り背面に置きます。

See the Pen tree by sasakiy (@sasakiy0819) on CodePen.

電飾

とにかくもう何が何でもキラキラ光らせたかったので、オーナメントの前にこれを作ります。
作り方は簡単。適当なサイズの円を作り、アニメーションを使ってbox-shadowで光彩を加えていきます。

See the Pen light by sasakiy (@sasakiy0819) on CodePen.

てっぺんの星

まず、五角形の星型の内角の和は180°になるということを思い出すところから始めます。
正五角形の星型にするには頂点の角度は36°にしたいところなので、36°-36°-108°の三角形を３つ用意して、それらを重ねて正五角形を作ります。
これに黒丸背景を重ねればサッポロビールのロゴの完成ですね。

See the Pen star by sasakiy (@sasakiy0819) on CodePen.

オーナメント

本当は杖とかヒイラギの葉とか作りたかったんですが、断念しました。
プレゼントの箱を用意することにします。

See the Pen ornament by sasakiy (@sasakiy0819) on CodePen.

組み立てる

用意したパーツたちをひたすら並べて組み上げていきます。
アクセントにアニメーションで雪を降らせてみたりします。

See the Pen merged by sasakiy (@sasakiy0819) on CodePen.

まとめ

CSSってなんでもできますねー。
普段の業務ではなかなか機会のなさそうな使い方ですが、きっとどこかで約には立つのではないかと思います。