この記事の内容 知人のホームページを作る仕事を引き受けました。 作業簡略化のため、諸々のsassを駆使してコードの記述量を減らしました。 その中で、次回HPを作るときのために保存したい！ と思うぐらい便利だったものを、まとめて紹介します。 なお、アルゴリズム的なことは大の苦手なので、 もう少し効率の良い書き方もあるかもしれません。 また、WEBデザイナーの方から見ると 「何コレ」「当たり前」的なものもあるかもしれません。 なお、scssではなくsassを使って書いていますので、scssを使われる方は適宜読みかえてください。 8px, 16px ... などで margin, paddingを割り振ってくれるクラスをまとめて作成する では、紹介していきます。 「ちょこっとここにスペースが欲しい...」というときに、全てにおいて意味のあるクラス名を作るのは難しいことがあります。 そんな時bootstrapの.mt-1, .pb-2のようなクラスが欲しいと思っていました。 そこで作ったのがこちら。 .u- $contexts: (m: margin, p: padding) @each $c-key, $context in $contexts &#{$c-key} $directions: (t: top, b: bottom, l: left, r: right) @each $d-key, $direction in $directions $amounts: 0, 8, 16, 24, 32, 40, 48 @each $amount in $amounts &#{$d-key}-#{$amount} #{$context}-#{$direction}: $amount + px !important // => .u-mb-0, .u-mt-8, .u-pl-16 etc... これで、 .u-mb-0 ... margin-bottom: 0px .u-mt-8 ... margin-top: 8px ...のようなUtilityクラスが一気に生成できます。 ただし、あまり作りすぎると大量のCSSが生成されることになるので、作りすぎに注意しましょう。 今見ると $amountの部分もループで回せそうですが、 何を生成しているのかわからなくなりそうなので、今回はここまでにします。 ブレイクポイントを@mixinにまとめる コレは多くの方が記事等に書かれている有名なコードになりますが、こんなコードです。 $breakpoints: (sm: 'all and (min-width: 576px)', md: 'all and (min-width: 768px)', lg: 'all and (min-width: 992px)', xl: 'all and (min-width: 1200px)', xxl: 'all and (min-width: 1400px)') @mixin breakpoint-up($breakpoint) @media #{map-get($breakpoints, $breakpoint)} @content コレによって、こんなsassを書くことが可能になります。 example .hoge // 基本は赤色 color: red @include breakpoint-up(sm) //576px以上で緑 color: green breakpointがHP内で揃いやすくなる上に、min-widthなのかmax-widthなのかも揃い、非常に便利でした。 発想は、bootstrapのmedia-breakpoint-up()というmixinで、これが欲しいな〜と思って自作しました。 displayプロパティの値をブレイクポイントごとに変えるクラスを作成する また、上記のbreakpointのmixinを利用して作ったのがこちらです。 .u-d $values: none, block, flex, inline, inline-block @each $key, $breakpoint in $breakpoints &-#{$key} @include breakpoint-up($key) @each $value in $values &-#{$value} display: #{$value} !important // => .u-d-md-none, .u-d-lg-flex etc... これもBootstrapのdisplayユーティリティを真似て作りました。 ブレイクポイントごとに、 display: noneやdisplay: flexなどを使い分けることができるクラスを生成します。 金属比（黄金比、白金比など）を計算 画像は全て白金比(1:1.732)か、ブロンズ比(1:3.303)にしていたのですが、途中から計算が面倒になってきてしまいました...。 そこで、横幅入れたら縦の大きさも自動計算してくれないかなーと思い、作ったのがこちらです。 @function m-raito($horizonal, $type) $m-raitos: (silver: 1.414, gold: 1.618, pl: 1.732, bronze: 3.303) @return $horizonal / map-get($m-raitos, $type) * 1px こんな風に変数に横幅を入れたら縦幅を計算してくれます。 img $hr: 400 width: $hr height: m-raito($hr, pl) // => height: 231px 金属比の比率そのものについては、こちらのサイト利用させていただきました。 ピクセルの値からremの値を出す 上記を思いついたきっかけになったのが、こちらの関数です。 こちらも本などにも載っている有名なものですが、、、、。 ピクセル数からremの値を計算してくれます。 $base-font-size: 16 @function rem($pixels, $context: $base-font-size) @return $pixels / $context * 1rem 使い方はこちらの通り。 span font-size: rem(12) // => font-size: 0.75rem rem(ピクセル数)という形で、フォントサイズのピクセル数を()の中に入れると、該当する値をremで出力してくれます。 z-indexを管理 コレも有名なやつですね...。 z-indexに適当な値をつけていると、サイトが複雑になってきたときに、意図した順番にならないこともしばしば...。 そこで、こんな風にmixinを作成し、管理しやすくします。 $z-index: (modal: 100, nav: 30, btn: 5, layout: 1) @mixin z-index($context) z-index: map-get($z-index, $context) 使い方はこちら。 .floating-btn @include z-index($btn) // => z-index: 5 になる ホバーするとZoomするイメージの動きまとめ 特に何も凝った関数は使っていないですが、、、。大量に出てくる効果だったので、まとめたら大変コードがシンプルになりました。 @mixin img-zoom overflow: hidden img transform: scale(1) transition: .5s ease-in-out width: 100% &:hover transform: scale(1.1, 1.1) このCSSでなぜzoomするイメージが出来上がるのかは、下記の記事が詳しいです。（タイトルは、原文ママ） 画像をhoverして時にズームさせるcssを書こう 追記：@mixinではなくユーティリティクラスにするのが便利だった こちらですが、「クリック可能な画像のみ、ホバーでzoomする」というルールで使っていたので、@mixinにするのではなく、下記のようにユーティリティクラスとして使用する方が汎用性が高く便利でした。 // リンクの中にある画像はズーム a .u-img-zoom overflow: hidden img transform: scale(1) transition: .5s ease-in-out width: 100% &:hover transform: scale(1.1, 1.1) @mixinだと、押せない画像にもzoomを適用してしまったり、あるいはコンポーネントの中身@mixinを埋め込んでしまったために後で打ち消したりと不便だったため、結局上記の@mixinは削除しました。 改善の余地ありだけどそこそこ使ったもの ここからは、まだ改善の余地ありだとは思うけれども、そこそこに利用したものを列挙します。 次回WEB制作の仕事をするときの備忘録と、リファクタリング用のメモとして...。 ページ全体に広がる要素のパディングを一定にする ページ全体に100%で使用する要素は、footer, headerなど、いろいろありますよね。それらののpaddingを一定に揃えられないかと思い、次のようなmixinを作成しました。 @mixin page-px($size: sm) @if $size == sm padding: right: 16px left: 16px @else if $size == md padding: right: 40px left: 30px @else if $size == xxl padding: right: 48px left: 48px $sizeの記述を$breakpointsの値と合わせるのがミソです。 こんな風に使うことで、要素の左右幅を一定に保つことができます。 .main-content @include page-px(sm) @include breakpoint-up(md) @include page-px(md) 改善の余地がある点 途中、もう少し便利にできないかなと思い、 このようなmapを作成したものの...、あまり活用できませんでした...。 $page-paddings: (sm: (top: 14px, right: 16px, bottom: 40px, left: 16px), md: (top: 30px, right: 30px, bottom: 64px, left: 40px)) 値を一つ取り出すにも、コレだけの記述量が必要でした。 map-get(map-get($page-paddings, sm), right) もう少し上手くならないかなーと思います。 コンテンツの下余白を一定に揃える コンテンツ下部の余白は、見出し１、見出し２、セクション etc... で一定に揃えて、さらに画面幅に応じてそれらが２パターンあったのですが、それらを下記のようにまとめてみました。 $mb-maps: (sm: (pr: 8, h2: 8, h1: 16, section: 14, article: 32, content: 40), md: (pr: 8, h2: 16, h1: 32, section: 48, article: 80, content: 64)) %mb- @each $context, $mb-map in $mb-maps @each $element, $pixcel in $mb-map &#{$element} @if $context == sm or $context == false margin-bottom: $pixcel + px @else @include breakpoint-up(#{$context}) margin-bottom: $pixcel + px こちらの記述によって、このようなsassが利用できるようになるイメージです。 sample %u-mb-h1 { margin-bottom: 16px !important; } @media all and (min-width: 768px) { %u-mb-h1 { margin-bottom: 32px !important; } } %はextend専用セレクタですので、実際には出力されません。ただ、こちらはこのように使用することができます。 .c-header1 @extend %u-mb-h1 こうすることによって、実際に出力されるCSSは下記の通りです。 sample .c-header1 { margin-bottom: 16px !important; } @media all and (min-width: 768px) { .c-header1 { margin-bottom: 32px !important; } } コレによって、大変記述量は減りました。よかったです。 改善の余地がある点 何よりわかりにくい点です。最初のmapが複雑なのと、%という見慣れないセレクタも出てくるので、他の人と同時には使いにくいかな、と思います。。。 また、基本的に「見出し１」「見出し２」などのコンポーネントごとに１回しか使わないので、使用回数の割に作成の労力が大きかった気がします。。。 フォントサイズで使ってもなかなか便利でした font-sizeプロパティも画面サイズによってさまざまに使い分けるので、同じように作成しましたが、なかなか便利でした。 $font-sizes: (sm: (caption: rem(12), small: rem(14), body: rem(16), h3: rem(18), h2: rem(18), h1: rem(22), page-title: rem(16)), md: (caption: rem(12), small: rem(14), body: rem(16), h3: rem(20), h2: rem(22), h1: rem(28), page-title: rem(28))) %font-size- @each $context, $size-map in $font-sizes @each $element, $rem in $size-map &#{$element} @if $context == sm or $context == false font-size: $rem !important @else @include breakpoint-up(#{$context}) font-size: $rem !important 使う時はこんな感じ。 .c-header1 @extend %font-size-h1 感想 楽したい！の一心から、色々な関数を作ってしまいましたが、コレらのコードを書くのにむしろ時間がかかってしまったかもしれません 本業はエンジニアなのですが、次回WEBサイト制作を頼まれることがあったら、コレらのコードをコピペして、テキパキとサイトを作っていきたいです。 参考図書： Web制作者のためのSassの教科書 改訂2版 参考サイト： Sass: Syntactically Awesome Style Sheets

どうも7noteです。大量にあるCSSプロパティに、覚えておきたい優先順位を付けてみました。 ↓関連記事↓ 前回HTMLのタグを覚えて置きたい順で勝手に重要度を振ってみたのですが思いのほか需要があったようなので、CSSもやってみました。 そして気になるCSSのプロパティの数ですが、なんと＼ 249個 ／。 ※https://weblan3.com/css/css_property#css_property_purpose より算出。 いや多すぎでしょ。今度こそどう頑張っても覚えられんわ。 ということで、今回も個人的に重要だなと思う順で、覚える優先順位をつけてみました。 ※あくまで主観です。ご了承ください。 ※CSS3のタグも交えて解説しています。 重要度★★★「絶対に覚えておいたほうがいいCSS」 「フォント・文字色」 color・・・ 文字の色を指定する font・・・ 文字フォントに関する指定をまとめて行う font-family・・・ 文字フォントファミリー（フォントの種類）を指定する font-size・・・ 文字フォントのサイズ（大きさ）を指定する font-style・・・ 文字フォントを斜体で表示する font-weight・・・ 文字フォントの太さを指定する 「テキスト関連」 text-align・・・ 内包する要素に対して横位置の揃え方を指定する text-decoration・・・ 文字列に装飾線や点滅を指定する text-indent・・・ 文章のインデント幅を指定する 「文字揃え・段落の振る舞い」 letter-spacing・・・ 文字の間隔を指定する line-height・・・ 行の高さを指定する 「要素の横幅や高さ」 height・・・ 要素の高さを指定する width・・・ ボックス領域の幅を指定する max-height・・・ 要素の高さの最大値を指定する max-width・・・ 要素の幅の最大値を指定する min-height・・・ 要素の高さの最小値を指定する min-width・・・ 要素の幅の最小値を指定する 「余白の指定」 margin・・・ 要素の外側の余白（マージン）を指定する margin-bottom・・・ 要素の底辺に当たる外側の余白（マージン）を指定する margin-left・・・ 要素の左辺に当たる外側の余白（マージン）を指定する margin-right・・・ 要素の右辺に当たる外側の余白（マージン）を指定する margin-top・・・ 要素の上辺に当たる外側の余白（マージン）を指定する padding・・・ 要素の内側の余白を指定する padding-bottom・・・ 要素の内側の底辺側に当たる余白を指定する padding-left・・・ 要素の内側の左辺側に当たる余白を指定する padding-right・・・ 要素の内側の右辺側に当たる余白を指定する padding-top・・・ 要素の内側の上辺側に当たる余白を指定する 「要素の表示や配置方法」 bottom・・・ positionに従って要素を配置する際に、底辺からの距離を指定する clear・・・ 要素の回り込み（float）を解除する display・・・ 要素の表示形式を指定する float・・・ 要素を右または左へ寄せて配置する left・・・ positionに従って要素を配置する際に、左辺からの距離を指定する overflow・・・ 要素からはみ出した内容の表示方法をまとめて指定する overflow-x・・・ 要素からはみ出した内容の水平方向の表示方法を指定する overflow-y・・・ 要素からはみ出した内容の垂直方向の表示方法を指定する position・・・ 要素の配置方法について相対的か絶対的にするかを指定する right・・・ positionに従って要素を配置する際に、右辺からの距離を指定する vertical-align・・・ ボックス内のインライン要素に縦位置を揃える基準を指定する visibility・・・ 要素の領域を残したまま表示・非表示を指定する z-index・・・ 要素の重なり順序を指定する 「背景（バックグラウンド）」 background・・・ 背景に関する指定をまとめて行う background-color・・・ 背景色を指定する background-image・・・ 背景画像を指定する background-position・・・ 背景画像の表示開始位置を指定する background-repeat・・・ 背景画像の繰り返しを指定する background-size・・・ 背景画像を表示するサイズ（大きさ）を指定する 「外枠（ボーダー・アウトライン）」 border・・・ 要素の周囲にボーダー（枠線）を付ける border-bottom・・・ 要素の底辺にボーダー（枠線）を付ける border-left・・・ 要素の左辺にボーダー（枠線）を付ける border-radius・・・ 要素の角丸についてまとめて指定する border-right・・・ 要素の右辺にボーダー（枠線）を付ける border-style・・・ ボーダー（枠線）の種類を指定する border-top・・・ 要素の上辺にボーダー（枠線）を付ける 「カラム・レイアウト関連」 align-items・・・ flexコンテナ内に含まれる全てのflexアイテムに対して揃える位置を指定する flex・・・ flexbox内のアイテムの伸縮に関する指定をまとめて行う flex-direction・・・ flexbox内のアイテムの並び順を指定する flex-wrap・・・ flexboxに入り切らないアイテムの折り返し方法について指定する justify-content・・・ flexboxコンテナ内でのボックスの詰め方を指定する 「リスト（list）関連」 list-style・・・ リストマーカーに関する指定をまとめて行う 「内容の挿入・置換」 content・・・ 内容（コンテンツ）を挿入する 「アニメーション」 animation・・・ アニメーションに関する指定をまとめて行う 「トランジション」 transition・・・ 時間によって変化するトランジション効果の遷移についてまとめて指定する 「影（シャドウ）の指定」 box-shadow・・・ ボックスに影をつける text-shadow・・・ 文字に影（ドロップシャドウ）を付ける 「変形・トランスフォーム」 transform・・・ 要素を変形させる 重要度★★「使う機会のあるCSS」 「テキスト関連」 text-overflow・・・ 要素からはみ出した文字を省略する 「文字揃え・段落の振る舞い」 white-space・・・ テキスト内の空白、タブ、改行の表示の仕方を指定する word-break・・・ 文章の改行の仕方について指定する writing-mode・・・ 文字表記の方向（縦横）を指定する 「背景（バックグラウンド）」 background-attachment・・・ 背景画像の固定・移動を指定する 「外枠（ボーダー・アウトライン）」 border-bottom-color・・・ 要素の底辺に設定したボーダー（枠線）の色を指定する border-bottom-left-radius・・・ 要素の左下の角丸を指定する border-bottom-right-radius・・・ 要素の右下の角丸を指定する border-bottom-style・・・ 要素の底辺に設定したボーダー（枠線）のスタイル（種類）を指定する border-bottom-width・・・ 要素の底辺に設定したボーダー（枠線）の太さを指定する border-color・・・ 要素のボーダー（枠線）の色を指定する border-image・・・ 要素のボーダー（枠線）に画像を指定する border-left-color・・・ 要素の左辺に設定したボーダー（枠線）の色を指定する border-left-style・・・ 要素の左辺に設定したボーダー（枠線）のスタイル（種類）を指定する border-left-width・・・ 要素の左辺に設定したボーダー（枠線）の太さを指定する border-right-color・・・ 要素の右辺に設定したボーダー（枠線）の色を指定する border-right-style・・・ 要素の右辺に設定したボーダー（枠線）のスタイル（種類）を指定する border-right-width・・・ 要素の右辺に設定したボーダー（枠線）の太さを指定する border-top-color・・・ 要素の上辺に設定したボーダー（枠線）の色を指定する border-top-left-radius・・・ 要素の左上の角丸を指定する border-top-right-radius・・・ 要素の右上の角丸を指定する border-top-style・・・ 要素の上辺に設定したボーダー（枠線）のスタイル（種類）を指定する border-top-width・・・ 要素の上辺に設定したボーダー（枠線）の太さを指定する border-width・・・ ボーダー（枠線）の太さを指定する outline・・・ アウトラインの表示方法をまとめて指定する 「カラム・レイアウト関連」 align-content・・・ flexコンテナ内の縦に余白がある場合にflexアイテムの並べ方を指定する columns・・・ カラム幅とカラム数を指定する flex-basis・・・ flexbox内のアイテムの固定幅を指定する flex-flow・・・ flexbox内のアイテムの並び順と折り返しの指定をまとめて行う flex-grow・・・ flexbox内のアイテムの伸びる倍率を指定する flex-shrink・・・ flexbox内のアイテムの縮む倍率を指定する order・・・ flexbox内のボックスの配置順序を指定する 「内容の挿入・置換」 counter-increment・・・ contentで挿入されたカウンタの値を進める counter-reset・・・ contentで挿入されたカウンタの値をリセットする 「アニメーション」 animation-delay・・・ アニメーションが開始するタイミングを指定する animation-direction・・・ アニメーションの再生方向を指定する animation-duration・・・ アニメーションの再生一回分の時間の長さを指定する animation-fill-mode・・・ アニメーションが再生されていない時にどのような状態で待機するかを指定する animation-iteration-count・・・ アニメーションの繰り返し回数を指定する animation-name・・・ アニメーションの名前を定義する animation-play-state・・・ アニメーションを再生させるか一時停止させるか指定する animation-timing-function・・・ アニメーションの再生タイミングに変化を付ける 「トランジション」 transition-delay・・・ 時間によって変化するトランジション効果の要求が発生してから実際に開始するまでの時間を指定する transition-duration・・・ 時間によって変化するトランジション効果が開始してから終了するまでの時間を指定する transition-property・・・ 時間によって変化するトランジション効果の対象となるプロパティを指定する transition-timing-function・・・ 時間によって変化するトランジション効果の変化に緩急を指定する 「変形・トランスフォーム」 transform-origin・・・ 要素を変形させる際の基準点を指定する transform-style・・・ 要素を変形させる際の基準点を指定する 重要度★「使うかもしれないレベルのCSS」 ※IE非対応のものも含まれています。 「フォント・文字色」 font-feature-settings・・・ OpenTypeフォント機能の利用について、有効/無効を指定する font-kerning・・・ 欧文フォントにカーニングを適用する font-stretch・・・ 文字フォントの横幅の広さを指定する font-variant・・・ 文字フォントの表示に関するサブプロパティの値をまとめて指定する font-variant-caps・・・ スモールキャップス（small caps）などの、文字フォントのグリフ（字形）を指定する font-variant-ligatures・・・ 隣り合った文字フォントの合字（リガチャ）を指定する font-variant-numeric・・・ 数字の表示形式を指定する 「テキスト関連」 text-decoration-color・・・ 文字の装飾線の色を指定する text-decoration-line・・・ 文字の装飾線の位置を指定する text-decoration-style・・・ 文字の装飾線の種類を指定する text-emphasis・・・ 要素内のテキストに付与する強調マークに関する指定を行う text-emphasis-color・・・ 要素内のテキストに付与する強調マークの色を指定する text-emphasis-position・・・ 要素内のテキストに付与する強調マークの位置を指定する text-emphasis-style・・・ 要素内のテキストに強調マークを付与する text-transform・・・ テキストの大文字表示・小文字表示を指定する 「文字揃え・段落の振る舞い」 direction・・・ 文字表記の方向（左右）を指定する line-break・・・ 要素内での行末や行頭の禁則処理の厳密さを指定する unicode-bidi・・・ 文字表記の方向（左右）を指定する word-spacing・・・ 単語の間隔を指定する 「ルビ関連」 ruby-position・・・ ルビの位置を指定する 「要素の表示や配置方法」 clip・・・ ボックスを切り抜き表示（クリッピング）する overflow-wrap・・・ 長い単語の折り返し方法について指定する 「背景（バックグラウンド）」 background-clip・・・ 背景の描画範囲を指定する background-origin・・・ 背景の描画する際の基準となるボックスを指定する 「外枠（ボーダー・アウトライン）」 border-image-outset・・・ ボーダーイメージエリアを広げる border-image-repeat・・・ ボーダー（枠線）に指定された画像の繰り返し方法を指定する border-image-slice・・・ ボーダー（枠線）に指定された画像の使用範囲を指定する border-image-source・・・ ボーダー（枠線）に使用する画像ファイルを指定する border-image-width・・・ 画像ボーダーの太さを指定する outline-color・・・ アウトラインの色を指定する outline-offset・・・ アウトラインのオフセット値を指定する outline-style・・・ アウトラインのスタイルを指定する outline-width・・・ アウトラインの太さを指定する 「カラム・レイアウト関連」 align-self・・・ flexコンテナ内にあるflexアイテムの位置揃えを個別に指定する column-count・・・ カラム数を指定する column-fill・・・ カラム同士の高さ（長さ）を揃えるかどうかを指定する column-rule・・・ カラムの区切り線のスタイル・幅・色を指定する column-rule-color・・・ カラムの区切り線の色を指定する column-rule-style・・・ カラムの区切り線のスタイルを指定する column-rule-width・・・ カラムの区切り線の幅を指定する column-width・・・ カラム幅を指定する 「リスト（list）関連」 list-style-image・・・ リストマーカーに画像を指定する list-style-position・・・ リストマーカーの表示位置を指定する list-style-type・・・ リストマーカーの種類を指定する 「テーブル（table）関連」 border-collapse・・・ テーブルセルのボーダーの表示の仕方を指定する border-spacing・・・ テーブルセルのボーダーの間隔を指定する caption-side・・・ テーブル（表）のキャプションの位置を指定する empty-cells・・・ 空白セルのボーダーの表示・非表示を指定する table-layout・・・ テーブルを描画する際のレンダリングアルゴリズムを指定する 「内容の挿入・置換」 quotes・・・ contentプロパティで挿入する引用符の表示方法を設定する 「変形・トランスフォーム」 backface-visibility・・・ 要素の裏面を見られるようにするかどうかを指定する perspective・・・ 子要素に対して遠近効果を指定する perspective-origin・・・ perspectiveで指定した遠近投影の基点となる位置を指定する 重要度ゼロ「非対応ブラウザがあるなど、実用的でない」 「フォント・文字色」 font-language-override・・・ 表示する文字フォントの言語を部分的に変更する font-size-adjust・・・ 文字フォントの種類の違いによるサイズのバラつきを調整する font-synthesis・・・ 太字や斜体を持たないフォントファミリーの場合に、太字や斜体で表示するかどうかを指定する font-variant-alternates・・・ 文字フォントの代替グリフ（字形）の選定を制御する font-variant-east-asian・・・ 表示する文字フォントのグリフ（字形）の指定を行う font-variant-position・・・ 上付き文字、下付き文字を指定する 「テキスト関連」 text-align-last・・・ 内包する要素の最終行に対して横位置の揃え方を指定する text-autospace・・・ アルファベット等との間隔を指定 text-combine-horizontal・・・ 文字を縦書き表示にした際に縦中横のレイアウトにする text-combine-mode・・・ 縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する text-decoration-skip・・・ 文字の装飾線について除外する対象を指定する text-height・・・ テキストの高さを指定する text-justify・・・ 行の両端揃えの方法を指定する text-orientation・・・ 縦書き文章の文字の表示方向に関して指定する text-underline-position・・・ テキストのアンダーラインの位置を指定する 「文字揃え・段落の振る舞い」 baseline-shift・・・ 優先するベースラインを指定し直す drop-initial-after-adjust・・・ 頭文字の第一接続点の揃え位置を指定する drop-initial-after-align・・・ 頭文字の第一接続点の揃えラインを指定する drop-initial-before-adjust・・・ 頭文字の第二接続点の揃え位置を指定する drop-initial-before-align・・・ 頭文字の第二接続点の揃えラインを指定する drop-initial-size・・・ 頭文字のサイズを指定する drop-initial-value・・・ 頭文字を何行分にするかを指定する line-stacking・・・ 行ボックスに関する指定をまとめて行う line-stacking-ruby・・・ 行ボックスを重ねる際のルビの扱いを指定する line-stacking-shift・・・ 文字のベースラインを考慮するかどうかを指定する word-wrap・・・ 単語の途中における改行処理の仕方を指定する 「リンク・ブックマーク」 bookmark-label・・・ ブックマークのラベル（名前）を指定する bookmark-level・・・ ブックマークのレベル（度合い）を指定する bookmark-target・・・ ブックマークのターゲット（対象）を指定する target・・・ リンクターゲットに関するプロパティをまとめて指定する target-name・・・ リンク先を開いたときに表示する場所を指定する target-new・・・ リンク先を新規ウィンドウ、または新規タブで開く target-position・・・ リンク先を開く新規ウィンドウ、または新規タブの位置を指定する 「ルビ関連」 ruby-align・・・ ルビまたは本体の揃え方を指定する ruby-overhang・・・ ルビが長い時に、対象文字に含まれない前後の文字の配置方法を指定する ruby-span・・・ ルビがかかる本体の要素数を指定する 「要素の表示や配置方法」 alignment-adjust・・・ 要素の水平位置を揃える基準を指定する alignment-baseline・・・ 要素の水平位置を揃える際に親要素との相対関係に基いて指定する overflow-style・・・ 要素からはみ出した内容の表示スタイルを指定する zoom・・・ 要素の表示倍率（拡大・縮小）を指定する 「背景（バックグラウンド）」 background-break・・・ インライン要素の背景画像の繰り返し方法を指定する 「外枠（ボーダー・アウトライン）」 border-break・・・ ボックスが分割された場合のボーダーの表示方法を指定する border-length・・・ 脚注の区切り線の長さを指定する 「カラム・レイアウト関連」 box-align・・・ 親要素内に含まれる子要素を揃える水平位置の基準を指定する box-decoration-break・・・ ボックスがページ区切りや折り返しになった場合に断片の表示方法を指定する box-direction・・・ 親ボックス内に配置する子要素の表示方向を指定する box-flex・・・ flexboxコンテナの伸縮比率を指定する box-flex-group・・・ flexboxコンテナにグループを割り当てて伸縮の優先順位を指定する column-gap・・・ カラムの間隔を指定する column-span・・・ 要素がまたがる（横切る）カラム数を指定する 「リスト（list）関連」 marker-offset・・・ リストマーカーとの間隔を指定する 「内容の挿入・置換」 crop・・・ 置換要素の表示範囲を指定する page-policy・・・ ページごとの章や節、セクション等の番号のカウント方法や名前の割り当て方を指定する 「マーキー（marquee）」 marquee-direction・・・ マーキーのスクロール方向を指定する marquee-play-count・・・ マーキーのスクロール再生回数を指定する marquee-speed・・・ マーキーのスクロールスピードを指定する move-to・・・ 要素をフローから削除し、ドキュメントの後の時点で再挿入する 「音声読み上げ」 cue・・・ 要素の前後の合図音を指定する cue-after・・・ 要素の後の合図音を指定する cue-before・・・ 要素の前の合図音を指定する pause・・・ 要素の前後で音声を一時停止する pause-after・・・ 要素の後ろで音声を一時停止する pause-before・・・ 要素の前で音声を一時停止する rest・・・ 音声読み上げの要素の間を指定する rest-after・・・ 音声読み上げの要素の前の間を指定する rest-before・・・ 音声読み上げの要素の後の間を指定する speak・・・ 音声出力の読上げ有無について指定する speak-as・・・ 音声出力の読上げ方法について指定する voice-balance・・・ 音声の左右の出力バランスを指定する voice-duration・・・ 音声読み上げシステムが要素の内容を読み上げるまでにかける時間を指定する voice-family・・・ 音声読み上げシステムで出力される音声の種類を指定する voice-pitch・・・ 音声読み上げシステムで出力される音声の高さ（ピッチ）を指定する voice-range・・・ 音声読み上げシステムで出力される音声の高さ（ピッチ）の範囲を指定する voice-rate・・・ 音声読み上げシステムで出力される音声の速度を指定する voice-stress・・・ 音声読み上げシステムで出力される音声の強調を指定する voice-volume・・・ 音声読み上げシステムで出力される音声の音量を指定する 「スクロールバー」 scrollbar-base-color・・・ スクロールバーのベースになる色を指定する scrollbar-arrow-color・・・ スクロールバーの矢印にあたる色を指定する scrollbar-face-color・・・ スクロールバーの表面にあたる色を指定する scrollbar-3dlight-color・・・ スクロールバーの左端と上端にあたる色を指定する scrollbar-highlight-color・・・ スクロールバーのハイライトにあたる色を指定する scrollbar-shadow-color・・・ スクロールバーの影にあたる色を指定する scrollbar-darkshadow-color・・・ スクロールバーの右端と下端にあたる色を指定する まとめ CSSは作成するwebサイトによって必要になるプロパティも大きく変わってきます。 ただ★★★のものは使用する場面が多いので覚えておくと便利です。 重要度★や重要度ゼロは私自身も使ったことのないものが多くあるので、「これ便利だよ」「こういうときに使うよ」などがあればぜひコメントで共有してもらえると嬉しいです。 解説テキストの引用元：https://weblan3.com/css/css_property#css_property_purpose 【フロントエンド強化月間に参加中↓↓】 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

前提 Next.jsのバージョン10.2.0 スタイリングにsassを使用。 問題 以下のようにケバブケースで書こうとするとエラーが出てしまう。 className={styles.company-logo} 解決策 以下のように書くと上手く動作します。 className={styles['company-logo']} 参考 https://stackoverflow.com/questions/61794899/using-kebab-case-css-classnames-in-css-sass-modules-when-using-next-js

概要 CSS単位でよく見かけるpx, em, rem, %, vh, vwを明確に理解し使い分けられるよう、それぞれの違いと使い分け方(筆者が目安にする基準・個人の意見)に関してまとめました。 同様な記事は既にネット上に多く存在しますが、自分の理解もかねて改めてまとめてみました。 CSS単位の分類 CSS単位は大きく下記の2つに分類する事が可能です。 他要素や画面サイズに影響を受けず常に固定値を持つ絶対値の単位(Absolute Units) 他要素の単位・大きさや画面サイズに応じて可変的な値となる相対値の単位(Relative Units) 絶対値の単位(Absolute Units) px ピクセル(pixel)の略で上記で記しました通り、他要素や画面サイズに影響を受けず常に固定値を持つ絶対値の単位(Absolute Unit)です。 相対値の単位(Relative Units) em 親要素のfont-sizeを1とした倍率を指定します。 例としまして、下記ですと.parentのfont-sizeが10px、.childのfont-sizeが0.5emで指定されています。 この場合の.childのfont-sizeをpxで表すと、親要素の10pxを1としての表すので、10 * 0.5 = 5 px となります。 .parent { font-size: 10px; } .child { font-size: 0.5em; /* 10 * 0.5 = 5 px */ } 直属の親要素にfont-sizeが指定されていない場合、さらに上位へと遡っていきます。どの親要素にも明示的に指定されていない場合、最終的にbodyのデフォルトのfont-sizeである16pxを基準とします。 rem rootのfont-sizeを1とした倍率を指定します。 例としまして、下記ですと:rootのfont-sizeが10px、.textのfont-sizeが1.2remで指定されています。 この場合の.textのfont-sizeをpxで表すと、rootの10pxを1としての表すので、10 * 1.2 = 12 px となります。 :root { font-size: 10px; } .text { font-size: 1.2rem; /* 10 * 1.2 = 12 px */ } % emと似ていますが、%ではプロパティによって基準値が変わります。 例えば、height やmargin等で%が使用された場合は親要素のheightやmargin の値を基準値にとります。 font-sizeであれば親要素のfont-sizeを基準値にするのでemと同じとなります。 vh(Viewport Height)・vw(Viewport Width) vhとvwはそれぞれ、ビューポートの高さとビューポートの横幅を表します。 ビューポートとはブラウザ等で現在表示されている領域を表します。(※ビューポートに関してより詳しくはこちら) vh・vwではビューポートの高さ・横幅を100として表します。その為、1vhであればビューポートの高さの1%、1vwであればビューポートの横幅の1%となります。 それぞれのCSS単位使い分け 下記はあくまでも筆者が目安にする基準であり、個人的な意見である事を前提とさせて頂きます。 CSS単位 用途 px borderやboxshadowやoutline等の他要素に関わらず常にサイズが一定のもの % htmlタグでのフォントサイズの指定 heightやwidthなど rem margin/padding/font-sizeなど em メディアクリ remと同じ用途で親要素を基準にしたい場合(頻度は少ない) vh・vw 全体的なレイアウトで%の代わりに使用する場合もある その他の単位 絶対値の単位には他にもcm・mm・in・pt・pc等が存在します。 相対値の単位には他にもch・ex・vmin・vmax等が存在します。 参考 Should I use px or rem value units in my CSS? When to use which units in CSS CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained The difference between CSS units (px, pt, rem, em, vh, vw, ch, ex and the rest) ?ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い｜たかもそ／Web Creator.｜note What's The Difference Between PX, EM, REM, %, VW, and VH? | Elementor CSSの単位のpx・em・rem・vh・vwの違いと使い方 Guide: EM vs REM vs PX. Which should you use? CSS Units Best Practices