20201128のCSSに関する記事は14件です。

投稿日：2020-11-28T23:52:53+09:00

30代からのプログラミング勉強　4日目【HTML/CSS入門編】

はじめに…

編集リクエストやご指摘のコメントをいただきありがとうございます。
正直「誰も見ていないっしょ！」というノリで自分用復習メモ兼学習意欲継続の為のルーティンとして始めた事だったので驚きました。

そもそも書き方があまり分かっていないのでお見苦しくなってしまう事も多々あるかとは思いますが、気になる点があればご指導頂けると幸いです。

学習内容

引き続きUdemy講座です。もっと時間が欲しい…

HTML/CSS
領域
<div></div>
タグ自体は意味を持たない。領域を区別（division）するためのタグ…らしい。
クラス
<div class="クラス名"></div>
グローバル属性。上記の様に書く事で区別するためのグループ名をつける事が出来る。
余白の一括指定
div {
  margin: 長さ;
}
上記の様にすると、上下左右の余白を任意の絶対値や相対値で一括指定できる。autoと入力するとウィンドウサイズに合わせて自動で調整される設定になる。
余白の個別指定
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
この様に入力する事で上下左右それぞれ個別に余白を指定する事も可能。
余白のショートハンドプロパティ
div {
  margin: 10px 20px 30px 40px;
  /*
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    と同じ
  */
}
上 右 下 左 の順でショートハンドプロパティでも書ける。
また、上 下、左 右において同値の場合は後半の記述を省略できる。
余白（内側）
div {
  padding: 長さ;
}
内側の余白が設定出来る。幅の指定の仕方はmarginと共通。
背景色
div {
  background-color: カラーコード;
}
RGB（rgb(0, 0, 0)）やHEX（#000000）など指定出来る他、whiteやblackなどの色の名前も使える。
枠線
div {
  border: 長さ;
}
線のタイプ、線の色も指定が可能。

所感

少しづつ覚えることが増えてきたがまだまだ初歩の段階なので復習しつつ身に付けよう。
CSSの記述真っ赤だし見やすい書き方を調べようと思います。

追記：taiy様より編集リクエストいただき格段に見やすくなりました。ありがとうございます。自分だけでも見やすく書ける様にならなくては…

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T23:52:21+09:00

【Sass】SCSSの基本的な書き方、変数・関数まとめ

SCSSの基本的な書き方、変数、よく使いそうな関数の使い方などをまとめた記事です。

Sassとは

Sassは、入れ子記述（ネスト）や変数・関数などのCSSにはない機能を使って、CSSを便利に使えるように拡張した言語です。
CSSとは別ファイルで書き、実際はCSSにコンパイル（変換）して読み込まれます。

※Sassの書き方にはSASSとSCSSの2通りありますが、SCSSの方が主流らしいので、この記事ではSCSSについて書きます。

SCSSの基本的な書き方

ネストして（入れ子で）記述すると親要素と子要素の関係を表すことができ、CSSよりシンプルに短く書くことができます。

セレクタに「&」を使うと、ネストしている親セレクタを参照することができます。

書き方の例。
style.scss
a {
    font-size: 16px;
    &:hover: opacity: 0.5;
    span {
        color: red;
        }
}
↓コンパイル（変換）後のCSSはこうなります。
style.css
a {
    font-size: 16px;
}
a:hover {
    opacity: 0.5;
}
a span {
    color: red;
}
コメントは以下のように記述します。
.scss
/* このように記述します */
//1行ならこれでもコメントにできます（※この書き方だと、SCSSからCSSに変換する時に消える）
変数の使い方

変数とはデータにつけるラベルのことです。
変数使うと、同じ値を繰り返し使ったり、後から全ての値を一括で変更したりすることができます。

基本的な変数の使い方

繰り返し使いたい値に名前をつけて、以下の形で代入します。
$変数名: 値;
書き方の例。$baceFontSize;に16pxを代入して、pのフォントサイズに使っています。
.scss
$baceFontSize: 16px;

p {
    font-size: $baceFontSize;
}
数値の計算

変数が数値なら、代入して計算が可能です。（+, -, *, /, %など）
$変数名 + 2px;
文字列の結合

変数と文字列を結合する場合は、このように記述します。
$変数名 + "文字列";
文字列の中で変数を展開する場合は、#{}を使って文字列の中に入れることができます。
"#{$変数名}文字列";
スタイルを継承する（extend）

Sassでは、1度定義したクラスを他のクラスにも継承して使い、コードを短くすることができます。
手軽に使えて、スタイルがグルーピングされてコードが短くなるというメリットがあります。

extendの基本的な使い方

このように、再利用したいスタイルを定義します。
.クラス名 {
    プロパティ: 値;
}
@extendを使って、利用したい位置で呼び出します。
@extend .クラス名;
書き方の例。.base-borderを別の場所で呼び出して利用しています。
style.scss
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  @extend .base-border;
  width: 100%;
}
↓コンパイル（変換）後のCSSはこうなります。
.css
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
プレースホルダーを使ったextendの書き方

上記の書き方だと、スタイルのグループを定義するための.base-borderというクラスが無駄に存在することになってしまうので、そのクラスを"%"を使いプレースホルダーとして記述し、コンパイル（変換）後のCSSファイルでは残らないようにします。

プレースホルダーを使った書き方の例。
style.scss
%base-border {
  border: 1px solid #000;
  border-radius: 16px;
}
.box1 {
  @extend .base-border;
  width: 100%;
}
↓コンパイル（変換）後のCSSはこうなります。%base-borderが消えます。
.css
.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
スタイルを使い回す（mixin）

mixinを使うと、CSSのスタイルをまとめて定義しておき、何回でも使い回すことができます。
extendと似ていますが、引数が使えることが1番のメリットです。
ただ、引数を使わない場合はmixinではなく、短いコードで済むextendを使った方がよさそうです。（状況によるかもですが）

mixinの基本的な使い方

使い回したいスタイルを、以下の形で定義します。
@mixin mixin名 {
    プロパティ: 値;
}
@includeを使って、利用したい位置で呼び出します。
@include mixin名;
引数を使ったmixinの使い方

引数（ひきすう）とは、「引き渡す値」のことです。
これを使うと、先ほどと同じくスタイルを使いまわせると同時に、スタイルの中の変数を入れた箇所に指定した引数を入れることができます。

使い回したいスタイルを、以下の形で定義します。
※引数は、”,”で区切ることで複数入れることができます。
※引数の初期値を設定する場合は、mixinを定義する時に($引数名: 値)の形で入れることができます。
@mixin mixin名($引数名1, $引数名2) {
    プロパティ: $引数名1;
    プロパティ: $引数名2;
}
@includeを使って、利用したい位置で呼び出します。
@include mixin名($引数1,$引数2);
書き方の例。
style.scss
@mixin baseBox($width, $height) {
  padding: 16px;
  width: $width;
  height: $height;
}

.box1 {
  @include baseBox(300px, 200px);
}
↓コンパイル（変換）後のCSSはこうなります。
style.css
.box1 {
  padding: 16px;
  width: 300px;
  height: 200px;
}
条件分岐 / 繰り返し処理

Sassでは関数の条件分岐や繰り返し処理を使うことができ、コンパイルされたCSSには実行された結果の内容が出力されます。

条件分岐（if）

指定した条件に当てはまる場合に適用するプロパティを指定します。
@if 条件{
  適用したいプロパティ: 値
}
複数の条件を指定する時はこのように書きます。
@if 条件１ {
  条件１の場合に適用したいプロパティ: 値;
} @else if 条件２ {
  条件２の場合に適用したいプロパティ: 値;
} @else {
  上記以外の場合に適用したいプロパティ: 値;
}
書き方の例。$debugModeがtrueの時は文字色を青、そうでない時は赤にする場合は、このように書きます。
style.scss
$debugMode = true

@if $debugMode == true {
        color: blue;
    } @else {
        color: red;
    }

//この場合の結果は文字色が青になります
繰り返し処理（for）

開始値から1つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、終了値の値まで来たら、繰り返しを終了します。
@for $変数名 from 開始値 through 終了値 {
  処理（スタイルなど）
}
書き方の例。12から14までの数字を変数として代入し、文字サイズを指定するクラスを作成する時は、このように書きます。
style.scss
@for $i from 12 through 14 {
    .fs#{$i} {font-size: #{$i}px;}
}
↓コンパイル（変換）後のCSSはこうなります。
style.css
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}
繰り返し処理（while）

繰り返しを継続する条件を超えるまで、（繰り返しの継続を終了する為の）処理を何度か繰り返します。
@while 繰り返しを継続する条件式 {
  処理（スタイルなど）
  繰り返しの継続を終了する為の処理
}
書き方の例。先ほどの@for文と同じ内容を@while文で書くとこのようになります。
style.scss
@while $i <=14 {
    .fs#{$i} {font-size: #{$i}px;}
    $i: $i + 1;
}
繰り返し処理（each）

1つの変数の中に複数の値を入れたものを「配列」といい、この配列の個数分、処理を繰り返します。
@each $変数名 in 値1, 値2... {
  処理（スタイルなど）
}
もしくは、このような書き方でも同じ結果になります。
$リスト名: 値1, 値2... ;

@each $変数名 in $リスト名{
  処理（スタイルなど）
}
書き方の例。cat, dog, rabbitという3つの配列を使って、背景画像を指定する3つのクラスを作る場合、このように書きます。
style.scss
@each $animal in cat, dog, rabbit {
    .#{$animal}-icon { background-color: url("#{$animal}.png");}
}
↓コンパイル（変換）後のCSSはこうなります。
style.css
.cat-icon {
  background-color: url("cat.png");
}
.dog-icon {
  background-color: url("dog.png");
}
.rabbit-icon {
  background-color: url("rabbit.png");
}
使えるいろいろな関数

色関連の関数

Sassでは、変数に設定した色を、関数を使って以下のように調整することができます。

lighten($baceColor, 20%); ：明度を上げる

darken($baceColor, 20%); ：明度を下げる

saturate($baseColor, 20%); ：彩度を上げる

desaturate($baceColor, 20%); ：彩度を下げる

adjust-hue($baceColor, 50deg); ：色相を変える

invert($baceColor); ：色を反転する

grayscale($baceColor); ：グレースケールにする

complement($baceColor); ：補色に変える

mix(#fff, #000, 50%); ：2つのカラーコードの中間色にする

rgba($baceColor, 0.5); ：透明度を変える

数値関連の関数

round($number) ：四捨五入

ceil($number) ：小数点以下を切り上げ

floor($number) ：小数点以下を切捨て

abs($number) ：絶対値（正の値）を返す

percentage($number) ：パーセント形式に変換

min($numbers…) ：引数で渡した値の中から最も小さい値を返す

max($numbers…) ：引数で渡した値の中から最も大きい値を返す

その他

random() ：0〜1までのランダムな数値を返す（値に数値を入れると、1〜入れた数値の間でランダムな数値を返す）

nth(n) ：配列からn番目の値を返す

quote() ：入れた値をダブルクオーテーションで囲って出力する

自作関数（function）

Sassの関数は自作することもできます。
以下の形で記述します。
@function カスタム関数名($引数名){
    @return 引数を使った返り値;
}
書き方の例。引数に入れた文字列の値を連結する関数を作る場合、このようになります。
style.scss
@function hello($key){
  @return $key + ",world";
}
.sample{
  content: hello("hello");  
}
↓コンパイル（変換）後のCSSはこうなります。
style.css
.sample {
  content: "hello,world";
}
設定情報などを別ファイルで管理

開発を進めていく中で、上記で紹介したような自作関数や設定情報がたくさん作られると膨大な行数になってしまうため、ファイルを分けて管理することが多いです。

そのように分離したSassファイルはパーシャルと呼ばれ、アンダーバー（_）から始まるファイル名をつけます。

パーシャルファイルはCSSファイルには変換されないため、CSSファイルとして変換されるメインのSCSSファイルから読み込まれます。

使い方の例。
_settings.scss
...
_function.scss
...
読み込む時は、@importをつけて読み込みます。
style.scss
@import "settings";
@import "function";
もしくは、まとめて書くすることもできます。
style.scss
@import "settings", "function";
これで、"style.scss"の中で2つのパーシャルファイルが読み込まれるようになります。

Saasを初めて使う時の設定方法

初回の設定方法についても簡単に載せておきます。
※チートシートとして記事を見る時にこの章が冒頭にあると邪魔なので、最後に動かしました（自己都合）。

Sassのインストール

1.Rubyがインストールされているか確認（されていなければインストール）
$  ruby -v
2.gemを最新版にアップデート
$ gem update --system
3.Sassをインストール
$ gem install sass
自動コンパイルの設定（VScodeの場合）

やり方は他にもあると思いますが、今回はこの方法で設定しました。

VScodeから、拡張機能「Live Sass Compiler」をインストール。

CSSフォルダにstyle.scssファイルを作成。

SCSS記述方式でコードを書いて保存。

画面下部の「Watch Sass」をクリックしてアクティブにする。

→以後、セーブする度に自動でコンパイル（CSSファイルに変換）されます。

*コンパイルされたCSSファイルの出力先を変えるには、設定からjsonファイルを編集します。
詳しく：VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

最後に

今までひたすら地道にCSSを打ちこんでいましたが、今さらながらSCSSを使いはじめたので、勉強がてらまとめてみました。
思っていた10倍くらい奥が深くて、思っていた10倍くらいの長さになってしまった...。
これからCSS（SCSS）を書くのがもっと楽しくなりそうなので、休日半日潰して勉強してよかったです。
（もし間違いなどあれば、教えていただけるとありがたいです。）

参考にさせていただいた記事など

ドットインストール「Sass/SCSS入門」

Sass公式サイト

Web Design Leaves/SASS

VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

Sassの教科書/第8章全機能Sassリファレンス/8-7 関数一覧

Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

@extendを使うべき時、@mixinを使うべき時

Sassの「@mixinと@extendの違い」と使い分け

Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T23:52:21+09:00

もっと早く知っておきたかった、CSSを便利に書けるSassの書き方まとめてみた（設定方法も）

今までひたすら地道にCSSを打ちこんでいましたが、今さらながらSCSSを使いはじめたので、勉強がてらまとめてみました。
Sass（SCSS）を使うために必要な設定の方法と、SCSSの基本的な書き方、変数、よく使いそうな関数などの使い方をまとめています。

（思っていた10倍くらい奥が深くて、思っていた10倍くらい長くなってしまった...。）

Sassとは

Sassは、入れ子記述（ネスト）や変数・関数などのCSSにはない機能を使って、CSSを便利に使えるように拡張した言語です。
さらに条件分岐や繰り返し処理のなどの関数も使うことができます。
CSSとは別ファイルで書き、実際はCSSにコンパイル（変換）して読み込まれます。

※Sassの書き方にはSASSとSCSSの2通りありますが、SCSSの方が主流なので、この記事ではSCSSについて書きます。

設定方法

Sassのインストール

1.Rubyがインストールされているか確認（されていなければインストール）
$  ruby -v
2.gemを最新版にアップデート
$ gem update --system
3.Sassをインストール
$ gem install sass
自動コンパイルの設定（VScodeの場合）

VScodeから、拡張機能「Live Sass Compiler」をインストール。

CSSフォルダにstyle.scssファイルを作成。

SCSS記述方式でコードを書いて保存。

画面下部の「Watch Sass」をクリックしてアクティブにする。

　↓
以後、セーブする度に自動でコンパイル（CSSファイルに変換）される。

*コンパイルされたCSSファイルの出力先を変えるには、設定からjsonファイルを編集する。
詳しく：VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

これでSCSSが書けるようになった！！

SCSSの基本的な書き方

SCSSでは、ネストして（入れ子で）記述すると親要素と子要素の関係を表すことができ、CSSよりシンプルに短く書くことができます。

セレクタに「&」を使うと、ネストしている親セレクタを参照することができます。

（書き方の例）
main.scss
a {
    font-size: 16px;
    &:hover: opacity: 0.5;
    span {
        color: red;
        }
}
コンパイル（変換）後のCSSはこうなります。
main.css
a {
    font-size: 16px;
}
a:hover {
    opacity: 0.5;
}
a span {
    color: red;
}
ちなみに、コメントは以下のように記述します。
main.scss
/* このように記述します */
//1行ならこれでもコメントにできます（※この書き方だと、SCSSからCSSに変換する時に消える）
変数の使い方

変数とは、データにつけるラベルのことです。
変数使うと、同じ値を繰り返し使ったり、後から全ての値を一括で変更したりすることができます。

基本的な変数の使い方

繰り返し使いたい値に名前をつけて、以下の形で代入
$変数名: 値;
（書き方の例）
main.scss
$baceFontSize: 16px;

p {
    font-size: $baceFontSize;
}
数値の計算

変数が数値なら、代入して計算が可能
$変数名 + 2px;
文字列の結合

変数と文字列を結合する場合
$変数名 + ”文字列”;
文字列の中で変数を展開する場合は、#{}で代入
”#{$変数名}文字列”;
スタイルを継承する（extend）

Sassでは、1度定義したクラスを他のクラスにも継承して使い、コードを短くすることができます。
手軽に使えて、スタイルがグルーピングされてコードが短くなるというメリットがあります。

extendの基本的な使い方

再利用するスタイルを定義
.クラス名 {
    プロパティ: 値;
}
利用したい位置で呼び出す
@extend .クラス名;
（書き方の例）
main.scss
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  @extend .base-border;
  width: 100%;
}
コンパイル（変換）後のCSSはこうなります。
main.css
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
プレースホルダーを使ったextendの書き方

上記の書き方だと、スタイルのグループを定義するための.base-borderというクラスが無駄に存在することになってしまうので、そのクラスを"%"を使いプレースホルダーとして記述し、コンパイル（変換）後のCSSファイルでは残らないようにします。

（プレースホルダーを使った書き方の例）
main.scss
%base-border {
  border: 1px solid #000;
  border-radius: 16px;
}
.box1 {
  @extend .base-border;
  width: 100%;
}
コンパイル（変換）後のCSSはこうなります。（%base-borderが消えた）
main.css
.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
スタイルを使い回す（mixin）

mixinを使うと、CSSのスタイルをまとめて定義しておき、何回でも使い回すことができます。
extendと似ていますが、引数が使えることが1番のメリットです。
ただ、引数を使わない場合はmixinではなく、短いコードで済むextendを使った方がよさそうです。（状況によるかもだが）

mixinの基本的な使い方

使い回したいスタイルを定義
@mixin mixin名 {
    プロパティ: 値;
}
利用したい位置で呼び出す
@include mixin名;
引数を使ったmixinの使い方

引数（ひきすう）とは、「引き渡す値」のことです。
これを使うと、先ほどと同じくスタイルを使いまわせると同時に、スタイルの中の変数を入れた箇所に指定した引数を入れることができます。

使い回したいスタイルを定義
※引数は、”,”で区切ることで複数入れられる
※引数の初期値を設定する場合は、mixinを定義する時に($引数名: 値)の形で入れる
@mixin mixin名($引数名1, $引数名2) {
    プロパティ: $引数名1;
    プロパティ: $引数名2;
}
利用したい位置で呼び出す
@include mixin名($引数1,$引数2);
（書き方の例）
main.scss
@mixin baseBox($width, $height) {
  padding: 16px;
  width: $width;
  height: $height;
}

.box1 {
  @include baseBox(300px, 200px);
}
コンパイル（変換）後のCSSはこうなります。
main.css
.box1 {
  padding: 16px;
  width: 300px;
  height: 200px;
}
いろいろな関数

色関連の関数

Sassでは、変数に設定した色を、関数を使って以下のように調整することができます。

lighten($baceColor, 20%); ：明度を上げる

darken($baceColor, 20%); ：明度を下げる

saturate($baseColor, 20%); ：彩度を上げる

desaturate($baceColor, 20%); ：彩度を下げる

adjust-hue($baceColor, 50deg); ：色相を変える

invert($baceColor); ：色を反転する

grayscale($baceColor); ：グレースケールにする

complement($baceColor); ：補色に変える

mix(#fff, #000, 50%); ：2つのカラーコードの中間色にする

rgba($baceColor, 0.5); ：透明度を変える

数値関連の関数

round($number) ：四捨五入

ceil($number) ：小数点以下を切り上げ

floor($number) ：小数点以下を切捨て

abs($number) ：絶対値（正の値）を返す

percentage($number) ：パーセント形式に変換

min($numbers…) ：引数で渡した値の中から最も小さい値を返す

max($numbers…) ：引数で渡した値の中から最も大きい値を返す

その他

random() ：0〜1までのランダムな数値を返す（値に数値を入れると、1〜入れた数値の間でランダムな数値を返す）

nth(n) ：配列からn番目の値を返す

quote() ：入れた値をダブルクオーテーションで囲って出力する

自作関数（function）

Sassの関数は自作することもできます。以下のように記述します。
@function カスタム関数名($引数名){
    @return 引数を使った返り値;
}
（書き方の例）引数に入れた値を連結する関数
main.scss
@function hello($key){
  @return $key + ",world";
}
.sample{
  content: hello("hello");  
}
コンパイル（変換）後のCSSはこうなります。
main.css
.sample {
  content: "hello,world";
}
条件分岐 / 繰り返し処理

Sassでは関数の条件分岐や繰り返し処理を使うことができ、コンパイルされたCSSには実行された結果の内容が出力されます。

条件分岐（if）

指定した条件に当てはまる場合に適用するプロパティを指定します。
@if 条件{
  適用したいプロパティ: 値
}
複数の条件を指定する時はこのように書きます。
@if 条件１ {
  条件１の場合に適用したいプロパティ: 値;
} @else if 条件２ {
  条件２の場合に適用したいプロパティ: 値;
} @else {
  上記以外の場合に適用したいプロパティ: 値;
}
繰り返し処理（for）

開始値から1つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、終了値の値まで来たら、繰り返しを終了します。
@for $変数名 from 開始値 through 終了値 {
  処理（スタイルなど）
}
繰り返し処理（while）

繰り返しを継続する条件を超えるまで、（繰り返しの継続を終了する為の）処理を何度か繰り返します。
@while 繰り返しを継続する条件式 {
  処理（スタイルなど）
  繰り返しの継続を終了する為の処理
}
最後に

Saasとはめちゃくちゃ便利なものだったのですね。なぜ今までCSSで書いていたのか謎です。
思ったより長くなってしまったけれど、勉強になったのでよかったです。
（もし間違いなどあれば、教えていただけるとありがたいです。）

参考

ドットインストール「Sass/SCSS入門」

Sass公式サイト

Web Design Leaves/SASS

VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

Sassの教科書/第8章全機能Sassリファレンス/8-7 関数一覧

Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

@extendを使うべき時、@mixinを使うべき時

Sassの「@mixinと@extendの違い」と使い分け

Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T23:52:21+09:00

もっと早く知っておきたかったCSSを便利に書けるSassのことまとめてみた

Sass（SCSS）を使うために必要な設定の方法と、SCSSの基本的な書き方、変数、よく使いそうな関数などの使い方をまとめています。

Sassとは

Sassは、入れ子記述（ネスト）や変数・関数などのCSSにはない機能を使って、CSSを便利に使えるように拡張した言語です。
さらに条件分岐や繰り返し処理のなどの関数も使うことができます。
CSSとは別ファイルで書き、実際はCSSにコンパイル（変換）して読み込まれます。

※Sassの書き方にはSASSとSCSSの2通りありますが、SCSSの方が主流なので、この記事ではSCSSについて書きます。

設定方法

Sassのインストール

1.Rubyがインストールされているか確認（されていなければインストール）
$  ruby -v
2.gemを最新版にアップデート
$ gem update --system
3.Sassをインストール
$ gem install sass
自動コンパイルの設定（VScodeの場合）

VScodeから、拡張機能「Live Sass Compiler」をインストール。

CSSフォルダにstyle.scssファイルを作成。

SCSS記述方式でコードを書いて保存。

画面下部の「Watch Sass」をクリックしてアクティブにする。

　↓
以後、セーブする度に自動でコンパイル（CSSファイルに変換）される。

*コンパイルされたCSSファイルの出力先を変えるには、設定からjsonファイルを編集する。
詳しく：VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

これでSCSSが書けるようになった！！

SCSSの基本的な書き方

SCSSでは、ネストして（入れ子で）記述すると親要素と子要素の関係を表すことができ、CSSよりシンプルに短く書くことができます。

セレクタに「&」を使うと、ネストしている親セレクタを参照することができます。

（書き方の例）
main.scss
a {
    font-size: 16px;
    &:hover: opacity: 0.5;
    span {
        color: red;
        }
}
コンパイル（変換）後のCSSはこうなります。
main.css
a {
    font-size: 16px;
}
a:hover {
    opacity: 0.5;
}
a span {
    color: red;
}
ちなみに、コメントは以下のように記述します。
main.scss
/* このように記述します */
//1行ならこれでもコメントにできます（※この書き方だと、SCSSからCSSに変換する時に消える）
変数の使い方

変数とは、データにつけるラベルのことです。
変数使うと、同じ値を繰り返し使ったり、後から全ての値を一括で変更したりすることができます。

基本的な変数の使い方

繰り返し使いたい値に名前をつけて、以下の形で代入
$変数名: 値;
（書き方の例）
main.scss
$baceFontSize: 16px;

p {
    font-size: $baceFontSize;
}
数値の計算

変数が数値なら、代入して計算が可能
$変数名 + 2px;
文字列の結合

変数と文字列を結合する場合
$変数名 + ”文字列”;
文字列の中で変数を展開する場合は、#{}で代入
”#{$変数名}文字列”;
スタイルを継承する（extend）

Sassでは、1度定義したクラスを他のクラスにも継承して使い、コードを短くすることができます。
手軽に使えて、スタイルがグルーピングされてコードが短くなるというメリットがあります。

extendの基本的な使い方

再利用するスタイルを定義
.クラス名 {
    プロパティ: 値;
}
利用したい位置で呼び出す
@extend .クラス名;
（書き方の例）
main.scss
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  @extend .base-border;
  width: 100%;
}
コンパイル（変換）後のCSSはこうなります。
main.css
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
プレースホルダーを使ったextendの書き方

上記の書き方だと、スタイルのグループを定義するための.base-borderというクラスが無駄に存在することになってしまうので、そのクラスを"%"を使いプレースホルダーとして記述し、コンパイル（変換）後のCSSファイルでは残らないようにします。

（プレースホルダーを使った書き方の例）
main.scss
%base-border {
  border: 1px solid #000;
  border-radius: 16px;
}
.box1 {
  @extend .base-border;
  width: 100%;
}
コンパイル（変換）後のCSSはこうなります。（%base-borderが消えた）
main.css
.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
スタイルを使い回す（mixin）

mixinを使うと、CSSのスタイルをまとめて定義しておき、何回でも使い回すことができます。
extendと似ていますが、引数が使えることが1番のメリットです。
ただ、引数を使わない場合はmixinではなく、短いコードで済むextendを使った方がよさそうです。（状況によるかもだが）

mixinの基本的な使い方

使い回したいスタイルを定義
@mixin mixin名 {
    プロパティ: 値;
}
利用したい位置で呼び出す
@include mixin名;
引数を使ったmixinの使い方

引数（ひきすう）とは、「引き渡す値」のことです。
これを使うと、先ほどと同じくスタイルを使いまわせると同時に、スタイルの中の変数を入れた箇所に指定した引数を入れることができます。

使い回したいスタイルを定義
※引数は、”,”で区切ることで複数入れられる
※引数の初期値を設定する場合は、mixinを定義する時に($引数名: 値)の形で入れる
@mixin mixin名($引数名1, $引数名2) {
    プロパティ: $引数名1;
    プロパティ: $引数名2;
}
利用したい位置で呼び出す
@include mixin名($引数1,$引数2);
（書き方の例）
main.scss
@mixin baseBox($width, $height) {
  padding: 16px;
  width: $width;
  height: $height;
}

.box1 {
  @include baseBox(300px, 200px);
}
コンパイル（変換）後のCSSはこうなります。
main.css
.box1 {
  padding: 16px;
  width: 300px;
  height: 200px;
}
いろいろな関数

色関連の関数

Sassでは、変数に設定した色を、関数を使って以下のように調整することができます。

lighten($baceColor, 20%); ：明度を上げる

darken($baceColor, 20%); ：明度を下げる

saturate($baseColor, 20%); ：彩度を上げる

desaturate($baceColor, 20%); ：彩度を下げる

adjust-hue($baceColor, 50deg); ：色相を変える

invert($baceColor); ：色を反転する

grayscale($baceColor); ：グレースケールにする

complement($baceColor); ：補色に変える

mix(#fff, #000, 50%); ：2つのカラーコードの中間色にする

rgba($baceColor, 0.5); ：透明度を変える

数値関連の関数

round($number) ：四捨五入

ceil($number) ：小数点以下を切り上げ

floor($number) ：小数点以下を切捨て

abs($number) ：絶対値（正の値）を返す

percentage($number) ：パーセント形式に変換

min($numbers…) ：引数で渡した値の中から最も小さい値を返す

max($numbers…) ：引数で渡した値の中から最も大きい値を返す

その他

random() ：0〜1までのランダムな数値を返す（値に数値を入れると、1〜入れた数値の間でランダムな数値を返す）

nth(n) ：配列からn番目の値を返す

quote() ：入れた値をダブルクオーテーションで囲って出力する

自作関数（function）

Sassの関数は自作することもできます。以下のように記述します。
@function カスタム関数名($引数名){
    @return 引数を使った返り値;
}
（書き方の例）引数に入れた値を連結する関数
main.scss
@function hello($key){
  @return $key + ",world";
}
.sample{
  content: hello("hello");  
}
コンパイル（変換）後のCSSはこうなります。
main.css
.sample {
  content: "hello,world";
}
条件分岐 / 繰り返し処理

Sassでは関数の条件分岐や繰り返し処理を使うことができ、コンパイルされたCSSには実行された結果の内容が出力されます。

条件分岐（if）

指定した条件に当てはまる場合に適用するプロパティを指定します。
@if 条件{
  適用したいプロパティ: 値
}
複数の条件を指定する時はこのように書きます。
@if 条件１ {
  条件１の場合に適用したいプロパティ: 値;
} @else if 条件２ {
  条件２の場合に適用したいプロパティ: 値;
} @else {
  上記以外の場合に適用したいプロパティ: 値;
}
繰り返し処理（for）

開始値から1つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、終了値の値まで来たら、繰り返しを終了します。
@for $変数名 from 開始値 through 終了値 {
  処理（スタイルなど）
}
繰り返し処理（while）

繰り返しを継続する条件を超えるまで、（繰り返しの継続を終了する為の）処理を何度か繰り返します。
@while 繰り返しを継続する条件式 {
  処理（スタイルなど）
  繰り返しの継続を終了する為の処理
}
最後に

今までひたすら地道にCSSを打ちこんでいましたが、今さらながらSCSSを使いはじめたので、勉強がてらまとめてみました。
思っていた10倍くらい奥が深くて、思っていた10倍くらいの長さになってしまった...。
便利すぎて、なぜ今までCSSで書いていたのか謎です。
これからCSS（SCSS）を書くのがもっと楽しくなりそうなので、休日半日潰してよかったです。
（もし間違いなどあれば、教えていただけるとありがたいです。）

参考

ドットインストール「Sass/SCSS入門」

Sass公式サイト

Web Design Leaves/SASS

VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

Sassの教科書/第8章全機能Sassリファレンス/8-7 関数一覧

Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

@extendを使うべき時、@mixinを使うべき時

Sassの「@mixinと@extendの違い」と使い分け

Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T23:52:21+09:00

【Sass初心者向け】SCSSの基本的な書き方まとめ

Sass（SCSS）を使うために必要な設定の方法と、SCSSの基本的な書き方、変数、よく使いそうな関数の使い方をまとめています。

Sassとは

Sassは、入れ子記述（ネスト）や変数・関数などのCSSにはない機能を使って、CSSを便利に使えるように拡張した言語です。
CSSとは別ファイルで書き、実際はCSSにコンパイル（変換）して読み込まれます。

※Sassの書き方にはSASSとSCSSの2通りありますが、SCSSの方が主流らしいので、この記事ではSCSSについて書きます。

SCSSの基本的な書き方

ネストして（入れ子で）記述すると親要素と子要素の関係を表すことができ、CSSよりシンプルに短く書くことができます。

セレクタに「&」を使うと、ネストしている親セレクタを参照することができます。

書き方の例。
main.scss
a {
    font-size: 16px;
    &:hover: opacity: 0.5;
    span {
        color: red;
        }
}
コンパイル（変換）後のCSSはこうなります。
main.css
a {
    font-size: 16px;
}
a:hover {
    opacity: 0.5;
}
a span {
    color: red;
}
コメントは以下のように記述します。
main.scss
/* このように記述します */
//1行ならこれでもコメントにできます（※この書き方だと、SCSSからCSSに変換する時に消える）
変数の使い方

変数とはデータにつけるラベルのことです。
変数使うと、同じ値を繰り返し使ったり、後から全ての値を一括で変更したりすることができます。

基本的な変数の使い方

繰り返し使いたい値に名前をつけて、以下の形で代入します。
$変数名: 値;
書き方の例。$baceFontSize;に16pxを代入して、pのフォントサイズに使っています。
main.scss
$baceFontSize: 16px;

p {
    font-size: $baceFontSize;
}
数値の計算

変数が数値なら、代入して計算が可能です。（+, -, *, /, %など）
$変数名 + 2px;
文字列の結合

変数と文字列を結合する場合は、このように記述します。
$変数名 + ”文字列”;
文字列の中で変数を展開する場合は、#{}を使って文字列の中に入れることができます。
”#{$変数名}文字列”;
スタイルを継承する（extend）

Sassでは、1度定義したクラスを他のクラスにも継承して使い、コードを短くすることができます。
手軽に使えて、スタイルがグルーピングされてコードが短くなるというメリットがあります。

extendの基本的な使い方

このように、再利用したいスタイルを定義します。
.クラス名 {
    プロパティ: 値;
}
@extendを使って、利用したい位置で呼び出します。
@extend .クラス名;
書き方の例。.base-borderを別の場所で呼び出して利用しています。
main.scss
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  @extend .base-border;
  width: 100%;
}
コンパイル（変換）後のCSSはこうなります。
main.css
.base-border {
  border: 1px solid #000;
  border-radius: 16px;
}

.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
プレースホルダーを使ったextendの書き方

上記の書き方だと、スタイルのグループを定義するための.base-borderというクラスが無駄に存在することになってしまうので、そのクラスを"%"を使いプレースホルダーとして記述し、コンパイル（変換）後のCSSファイルでは残らないようにします。

プレースホルダーを使った書き方の例。
main.scss
%base-border {
  border: 1px solid #000;
  border-radius: 16px;
}
.box1 {
  @extend .base-border;
  width: 100%;
}
コンパイル（変換）後のCSSはこうなります。%base-borderが消えます。
main.css
.box1 {
  border: 1px solid #000;
  border-radius: 16px;
  width: 100%;
}
スタイルを使い回す（mixin）

mixinを使うと、CSSのスタイルをまとめて定義しておき、何回でも使い回すことができます。
extendと似ていますが、引数が使えることが1番のメリットです。
ただ、引数を使わない場合はmixinではなく、短いコードで済むextendを使った方がよさそうです。（状況によるかもですが）

mixinの基本的な使い方

使い回したいスタイルを、以下の形で定義します。
@mixin mixin名 {
    プロパティ: 値;
}
@includeを使って、利用したい位置で呼び出します。
@include mixin名;
引数を使ったmixinの使い方

引数（ひきすう）とは、「引き渡す値」のことです。
これを使うと、先ほどと同じくスタイルを使いまわせると同時に、スタイルの中の変数を入れた箇所に指定した引数を入れることができます。

使い回したいスタイルを、以下の形で定義します。
※引数は、”,”で区切ることで複数入れることができます。
※引数の初期値を設定する場合は、mixinを定義する時に($引数名: 値)の形で入れることができます。
@mixin mixin名($引数名1, $引数名2) {
    プロパティ: $引数名1;
    プロパティ: $引数名2;
}
@includeを使って、利用したい位置で呼び出します。
@include mixin名($引数1,$引数2);
書き方の例。
main.scss
@mixin baseBox($width, $height) {
  padding: 16px;
  width: $width;
  height: $height;
}

.box1 {
  @include baseBox(300px, 200px);
}
コンパイル（変換）後のCSSはこうなります。
main.css
.box1 {
  padding: 16px;
  width: 300px;
  height: 200px;
}
使えるいろいろな関数

色関連の関数

Sassでは、変数に設定した色を、関数を使って以下のように調整することができます。

lighten($baceColor, 20%); ：明度を上げる

darken($baceColor, 20%); ：明度を下げる

saturate($baseColor, 20%); ：彩度を上げる

desaturate($baceColor, 20%); ：彩度を下げる

adjust-hue($baceColor, 50deg); ：色相を変える

invert($baceColor); ：色を反転する

grayscale($baceColor); ：グレースケールにする

complement($baceColor); ：補色に変える

mix(#fff, #000, 50%); ：2つのカラーコードの中間色にする

rgba($baceColor, 0.5); ：透明度を変える

数値関連の関数

round($number) ：四捨五入

ceil($number) ：小数点以下を切り上げ

floor($number) ：小数点以下を切捨て

abs($number) ：絶対値（正の値）を返す

percentage($number) ：パーセント形式に変換

min($numbers…) ：引数で渡した値の中から最も小さい値を返す

max($numbers…) ：引数で渡した値の中から最も大きい値を返す

その他

random() ：0〜1までのランダムな数値を返す（値に数値を入れると、1〜入れた数値の間でランダムな数値を返す）

nth(n) ：配列からn番目の値を返す

quote() ：入れた値をダブルクオーテーションで囲って出力する

自作関数（function）

Sassの関数は自作することもできます。
以下の形で記述します。
@function カスタム関数名($引数名){
    @return 引数を使った返り値;
}
書き方の例。引数に入れた文字列の値を連結する関数を作る場合、このようになります。
main.scss
@function hello($key){
  @return $key + ",world";
}
.sample{
  content: hello("hello");  
}
コンパイル（変換）後のCSSはこうなります。
main.css
.sample {
  content: "hello,world";
}
条件分岐 / 繰り返し処理

Sassでは関数の条件分岐や繰り返し処理を使うことができ、コンパイルされたCSSには実行された結果の内容が出力されます。

条件分岐（if）

指定した条件に当てはまる場合に適用するプロパティを指定します。
@if 条件{
  適用したいプロパティ: 値
}
複数の条件を指定する時はこのように書きます。
@if 条件１ {
  条件１の場合に適用したいプロパティ: 値;
} @else if 条件２ {
  条件２の場合に適用したいプロパティ: 値;
} @else {
  上記以外の場合に適用したいプロパティ: 値;
}
繰り返し処理（for）

開始値から1つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、終了値の値まで来たら、繰り返しを終了します。
@for $変数名 from 開始値 through 終了値 {
  処理（スタイルなど）
}
繰り返し処理（while）

繰り返しを継続する条件を超えるまで、（繰り返しの継続を終了する為の）処理を何度か繰り返します。
@while 繰り返しを継続する条件式 {
  処理（スタイルなど）
  繰り返しの継続を終了する為の処理
}
Saasを初めて使う時の設定方法

初回の設定方法です。
※チートシートとしてこの記事を見返す時にこの章が冒頭にあると邪魔なので下に動かしました（自己都合）

Sassのインストール

1.Rubyがインストールされているか確認（されていなければインストール）
$  ruby -v
2.gemを最新版にアップデート
$ gem update --system
3.Sassをインストール
$ gem install sass
自動コンパイルの設定（VScodeの場合）

やり方は他にもいろいろあると思いますが、今回はこの方法で設定しました。

VScodeから、拡張機能「Live Sass Compiler」をインストール。

CSSフォルダにstyle.scssファイルを作成。

SCSS記述方式でコードを書いて保存。

画面下部の「Watch Sass」をクリックしてアクティブにする。

　↓
以後、セーブする度に自動でコンパイル（CSSファイルに変換）される。

*コンパイルされたCSSファイルの出力先を変えるには、設定からjsonファイルを編集する。
詳しく：VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

最後に

今までひたすら地道にCSSを打ちこんでいましたが、今さらながらSCSSを使いはじめたので、勉強がてらまとめてみました。
思っていた10倍くらい奥が深くて、思っていた10倍くらいの長さになってしまった...。
これからCSS（SCSS）を書くのがもっと楽しくなりそうなので、休日半日潰して勉強してよかったです。
（もし間違いなどあれば、教えていただけるとありがたいです。）

参考にさせていただいた記事など

ドットインストール「Sass/SCSS入門」

Sass公式サイト

Web Design Leaves/SASS

VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法

Sassの教科書/第8章全機能Sassリファレンス/8-7 関数一覧

Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

@extendを使うべき時、@mixinを使うべき時

Sassの「@mixinと@extendの違い」と使い分け

Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T23:33:55+09:00

要素の重なりを作るCSS。

諸学者向けの話ですが、要素と要素の重なりを使ったWEBデザインを紹介したいと思います。
イメージ的には以下です。

ちょっと分かりづらいですが真ん中のボーダーと右側の青丸が重なってボーダーが突き向けているが分かるでしょうか？

こう言った、要素と要素が重なりをもつデザインは結構見かけます。

positionを使う（王道パターン）

重なりのデザインと言ったらほぼこれ一択です。
html
<article>
  <time datetime="2018-08-01">1 AUG</time>  
  <h2>海岸のデコレーション</h2>
  <p>CATEGORY: 海と海岸と空</p>
</article>
css
article {
  width: 500px;
  position: relative;
}
time {
  background: #0097d8;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}
h2 {
  border-bottom: solid 2px #aaa;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
ポイントはarticleのposition: relative;とtimeのposition: absolute;です。
大雑把ですがpositionの説明を以下に図解化しました。

今回の場合はarticle要素の位置を起点とし、top: 0; right: 0;つまり右端にtimeが設置されるようにしました。

これが例えばtimeの中のtop: 0;の値をtop: 10px;に変えたとしましょう。

結果をこんな感じです。top,bottom,left,rightの値を変更することで自由自在にポジションを変えられます。

floatを使う（変化球パターン）

ちょっと変則的な使い方をします。floatの要素の回り込みの性質を利用したやり方です。正直あんまりおすすめのしないやり方で、今回の場合はたまたま要素の重なりっぽいデザインになったような感じです。
css
article {
  width: 500px;
}
time {
  background: #0097d8;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
  float: right;
}
h2 {
  border-bottom: solid 2px #aaa;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
メリットをあげるとすればコードが非常にシンプルなところでしょうか。これはこれで良いのですが正直褒められたような使い方ではないですね?
ちなみにこれをさっきみたくボーダーの中心付近に配置したい場合は、timeにmargin-top: 10px;を追加すれば調整が可能です。

終わりに

今回は要素同士の重なりを作るCSSを紹介しました。またfloatのように通常の目的とは異なる使い方を知った時にはすごい斬新だなって思いました。皆さんも是非参考にして下さい。

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T22:38:19+09:00

どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？　を確認する方法

こんにちは、株式会社ベストティーチャーで働く元気に働くたわらです。

「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。

こんな無料会員登録画面（！）があったとします。

こんないい感じのエラーメッセージを出してくれます。
ボク「これってどのCSSが当たっているんだろう？？？」
先輩「開発者ツールを見よう！」
まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます（Chromeの場合）。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。

最後に

リポジトリにはじめてさわる際などに役立つかもしれません！

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T22:38:19+09:00

開発環境で�「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」を確認する方法

こんにちは、株式会社ベストティーチャーで元気に働くたわらです。

「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。

こんな無料会員登録画面（！）があったとします。

こんないい感じのエラーメッセージを出してくれます。
ボク「これってどのCSSが当たっているんだろう？？？」
先輩「開発者ツールを見よう！」
まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます（Chromeの場合）。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。

最後に

リポジトリにはじめてさわる際などに役立つかもしれません！

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T21:10:26+09:00

ラジオボタンの一例

See the Pen ExgaPqj by 熊瀬川直也 (@momonoki1990) on CodePen.

デフォルトのラジオボタン(input[type="radio"])は`display: noneで消す

ラベルと消したラジオボタンのinputはfor属性で繋がっているので、ラベルだけ残しても大丈夫(ラベルをクリックしてもラジオボタンがクリックされたことになる)

ラジオボタンのラベル(label.radioLabel)はpadding-leftで右に寄せて、スペースを空けておく

ラジオボタンのラベル(label.radioLabel)に:beforeを指定して、上記で空いたスペースにカスタムのラジオボタンを挿入する

input[type="radio"]:checked + .radioLabel:afterでチェックされたラジオボタンの直後にあるラジオボタンのラベルに、:afterを指定して、チェックされたマークを挿入する。

ラジオボタンのラベル(label.radioLabel)にposition: relateveを、カスタムのラジオボタンやチェックされたマークにはposition:absoluteを指定して、ラベルに対する相対位置でカスタムのラジオボタンやチェックされたマークの位置を定める。

チェックされたラジオボタンの値は、getElementByIdで取得したform要素.ラジオボタンのname.valueで取得できる

innerHTMLはメソッドではない(x 要素.innerHTML() o 要素.innerHTML = "")

参考

CSSでラジオボタン・チェックボックスをデザイン装飾する
https://web.runland.co.jp/blog_cate2/post-2650

ラジオボタンの値を取得する方法
https://lab.syncer.jp/Web/JavaScript/Snippet/30/

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T17:03:31+09:00

【初心者向け】点滅するアニメーションをCSSで作る

どうも7noteです。点滅するアニメーションの作り方

シンプルな点滅のアニメーションの作り方です。

見本

ソース
index.html
<p>ゲームを始める<span>TAP!!</span></p>
style.css
span {
  color: #f00;
  font-size: .8em;
  vertical-align: top;
  animation : blinking 1s;             /* アニメーションを1秒間隔で行う */
  animation-iteration-count: infinite; /* 繰り返し回数を無限にする */
  animation-direction: alternate;      /* アニメーションを最初から、最後から交互に再生する */
}

/* アニメーション（右から左に移動） */
@keyframes blinking{
  0% { 
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
解説

アニメーションを1秒ごとに再生します。
1秒は0%→100%に行くのが1秒なので、往復設定をしているアニメーションでは1周するのに2秒かかっています。

animation-iteration-count: infinite;を指定して、無限に繰り返しを行っています。

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T16:00:46+09:00

JavaScriptでCSSファイルを切り替える

JavaScriptを利用して、読み込むCSSファイルを切り替えます。

コード

HTMLにはlinkタグを全て記述しておきます。
<link rel="stylesheet" href="1.css" data-css="css1">
<link rel="stylesheet" href="2.css" data-css="css2" disabled>
<link rel="stylesheet" href="3.css" data-css="css3" disabled>
data-css属性に名前を付けておく。この名前で切り替えます。
最初に無効化しておきたいファイルにはdisabled属性を付けておく。
function change_css(name){
    for(const el of document.querySelectorAll('link[data-css]')){
        el.disabled = el.dataset.css !== name
    }
}
この関数に読み込みたいファイルの名前(css2等)を渡せば、ファイルが切り替わります。

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T15:19:33+09:00

hoverで子メニューが表示されるサイドバーメニュー

※ Resultを0.25xにしてご覧ください。

See the Pen hoverで子メニューがでてくるサイドバー by 熊瀬川直也 (@momonoki1990) on CodePen.

liの中に、親要素(a.parent)と子要素(ul.child)を並列させる。

子要素(ul.child)はdisplay:noneで消しておく

親要素と子要素をまとめるliに対して:hoverをかけ、子要素(ul.child)をdisplay: blockで表示させる。

親要素(a.parent)に対して:hoverをかけても、子要素(ul.child)は親要素(a.parent)に内包されていないので、子要素(ul.child)にカーソルを合わせている時に、子要素(ul.child)が消えてしまう。

親要素(a.parent)はdisplay: blockで広げておく

子要素(ul.child)は、z-index: 9999;→浮かせる、white-space: nowrap;→折り返させない、box-shadow: 0 2px 8px rgba(77, 77, 77, 0.2);→浮いているように見せる

liの高さはaタグに対して上下paddingをかけて押し広げる(リンクの選択範囲がliの高さいっぱいまで広がる)

親要素と子要素をまとめるliにposition: relativeをかけて、子要素(ul.child)やspan.chevronにposition: absolute;をかけることで、子要素(ul.child)やspan.chevronの位置を定める。

ulはlist-style: noneをかけておく。

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T13:46:43+09:00

【HTML・CSS】子要素内のコンテンツ配置をdisplay:flexで行う

プログラミング勉強日記

2020年11月28日
子要素内のコンテンツ配置をdisplay:flexで行う方法について学びました。

お疲れ様です?

?メモ

display:flexは、子要素の横並びにしか使ってなかったですが、子要素内でのコンテンツの配置にも使用できることを知りました? pic.twitter.com/mic8I1Td2k
— ミキ?@プログラミング (@mikiprogram) November 28, 2020

参考本

CSS設計完全ガイド ~詳細解説+実践的モジュール集

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-28T07:02:30+09:00

ヘッダーの一例

※ お手数ですが、Code Pen のResult欄を0.25xにしてご覧ください。

See the Pen headerサンプル by 熊瀬川直也 (@momonoki1990) on CodePen.

div.header-innerで両padding内側寄せ

ヘッダーの中に横並びにしたいdiv liはdisplay: inline-block;かけておく

全体を左と右の両端寄せにするため、header-innerにdisplay: flex; justify-content: space-between; align-items: center;

header-innerの子タグはdiv二つ(left,right)にまとめる

左に寄せた中div.leftの中で距離をとりたいので、div.genderにmargin-left

並びにするものはul liをlist-style: none; margin: 0;をかけて使う。

liに上下paddingかけて、ヘッダーの高さを押し広げる。aタグにかけた場合は、リンクの選択範囲がヘッダーの高さ分まで広がる

適宜li.currentにbackground-colorつけて選択されていることを示す

　 Tweet
Qiitaで続きを読む

20201128のCSSに関する記事は14件です。

30代からのプログラミング勉強 4日目【HTML/CSS入門編】

はじめに…

学習内容

HTML/CSS

所感

【Sass】SCSSの基本的な書き方、変数・関数まとめ

Sassとは

SCSSの基本的な書き方

変数の使い方

基本的な変数の使い方

数値の計算

文字列の結合

スタイルを継承する（extend）

extendの基本的な使い方

プレースホルダーを使ったextendの書き方

スタイルを使い回す（mixin）

mixinの基本的な使い方

引数を使ったmixinの使い方

条件分岐 / 繰り返し処理

条件分岐（if）

繰り返し処理（for）

繰り返し処理（while）

繰り返し処理（each）

使えるいろいろな関数

色関連の関数

数値関連の関数

その他

自作関数（function）

設定情報などを別ファイルで管理

Saasを初めて使う時の設定方法

Sassのインストール

自動コンパイルの設定（VScodeの場合）

最後に

参考にさせていただいた記事など

もっと早く知っておきたかった、CSSを便利に書けるSassの書き方まとめてみた（設定方法も）

Sassとは

設定方法

Sassのインストール

自動コンパイルの設定（VScodeの場合）

SCSSの基本的な書き方

変数の使い方

基本的な変数の使い方

数値の計算

文字列の結合

スタイルを継承する（extend）

extendの基本的な使い方

プレースホルダーを使ったextendの書き方

スタイルを使い回す（mixin）

mixinの基本的な使い方

引数を使ったmixinの使い方

いろいろな関数

色関連の関数

数値関連の関数

その他

自作関数（function）

条件分岐 / 繰り返し処理

条件分岐（if）

繰り返し処理（for）

繰り返し処理（while）

最後に

参考

もっと早く知っておきたかったCSSを便利に書けるSassのことまとめてみた

Sassとは

設定方法

Sassのインストール

自動コンパイルの設定（VScodeの場合）

SCSSの基本的な書き方

変数の使い方

基本的な変数の使い方

数値の計算

文字列の結合

スタイルを継承する（extend）

extendの基本的な使い方

プレースホルダーを使ったextendの書き方

スタイルを使い回す（mixin）

mixinの基本的な使い方

引数を使ったmixinの使い方

いろいろな関数

色関連の関数

30代からのプログラミング勉強　4日目【HTML/CSS入門編】

どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？　を確認する方法