クリックで伸縮するカードレイアウト CSS/JavaScript

どうも上かるびです。

転職してからハードスケジュールでやってきて、最近やっと落ち着いてきました。

アウトプットも兼ねてできるだけ技術的な記事を書いていこうと思います。

クリックで伸縮するカードコンテンツ

See the Pen
JavaScript Usage [ foreach ] by Hayato Kamiyama (@kami8ma8810)
on CodePen.

学びと解説

際立って取り上げることはないのですが。。。(;^ω^)

flexの初期値

CSSを学び始めた頃はこれが中々覚えられませんでした。。。

flex: 1 1 auto　と書いてある場合、初期値は

flex-grow flex-shrink flex-basisとなります。

flex - CSS: カスケーディングスタイルシート | MDN

flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

developer.mozilla.org

何かよい覚え方はないものかと考えてみました。

どうでしょうか。３回復唱すればバッチリかと思います。

アロー関数

引数がない場合は省略できるのですが、エディター側で設定しているPrettierのせいで自動的にカッコがついてしまってます。

Sassもそうですが、JavaScriptでもできるだけ簡略化して分かりやすい＆低用量のコードを書くことを意識し続けたいものです。

JavaScript アロー関数を説明するよ - Qiita

なんとなく使っていたアロー関数を言語化してみました。さっそくアロー関数の説明に入ろうと思うのですが、その前提である関数リテラルについて説明します。##関数リテラルとはリテラルとはソースコードに…

qiita.com