Sass（SCSS）でコーディングを効率化

「@mixin」とは

「@mixin（ミックスイン）」とは、CSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せる機能。
引数（cssの値）が利用できるのも特徴です。

「@mixin」の基本

「@mixin」の基本について解説します。

「@mixin」の設定（記述）

下記のように「@mixin hogehoge」のように設定を行います。
「hogehoge」は自分で自由に決めることができます。

@mixin hogehoge {
width: 100px;
height: 100px;
border-radius: 100%;
}

「@mixin」を利用する（呼び出し）

「@include」＋先ほど決めた名前を記述することで、使いたいところで呼び出すことができます。

.sample {
@include hogehoge;
background: red;
}

出力結果

.sample {
width: 100px;
height: 100px;
border-radius: 100%;
background: red;
}

引数を使用する方法

引数を使用することで、色々なサイズの対応や状況に合わせて使用できるようになるので、使いやすさがアップします！

引数を使用した「@mixin」の設定（記述）

下記だと「$haba」に数値がか入ります。
ここの名前も自分で自由に決めることができます。

@mixin circle($haba) {
width: $haba;
height: $haba;
border-radius: 100%;
}

引数を使用した「@mixin」を利用する（呼び出し）

先程の「$haba」に数値を入れます。

.sample {
@include circle(250px);
background: red;
}

出力結果

.sample {
width: 250px;
height: 250px;
border-radius: 100%;
background: red;
}

おすすめmixinスニペット集

ウィンドウ幅に合わせてフォントサイズを自動変更

vwでフォントサイズ指定。
ウィンドウ幅に合わせて、デザイン通りのフォントサイズにすることができる。

@mixin fontsize($fsize){
$windowW : 750;
font-size: ($fsize / $windowW) * 100 + vw;
}

//呼び出し
@include fontsize(24);

positionで要素をセンター寄せ

引数「$direction」に「xy（上下左右中央）」、「x（左右中央）」、「y（上下中央）」のいずれかを入れることで、容易に中央寄せできます。
親要素に「position:relative;」忘れに注意！

@mixin center($direction) {
position: absolute;
@if $direction==xy {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@else if $direction==x {
left: 50%;
transform: translateX(-50%);
}
@else if $direction==y {
top: 50%;
transform: translateY(-50%);
}
}

//呼び出し
.sample{
@include center(xy);
}

フォントサイズと行間指定

@mixin l_height($pixels , $height) {
font-size: $pixels * 1px;
line-height: $height / $pixels;
}

//呼び出し
.sample {
@include l_height(14 , 26);
}

文字感調整

@mixin l_spacing($spacing) {
letter-spacing: ($spacing / 1000 ) + em;
}

// 呼び出し
.class {
@include l_spacing(100);
}

他にも自分が使いやすいように「@mixin」を追加してみてください。

印刷専用のCSSを書く

では早速書いていきます。
今回使用するのは「@media print」です。

使用方法は簡単で、CSSの中に「@media print」で囲ってCSSを書くだけです。

@media print{
color: #000;
}

こんな感じです。
「@media print」内に書いたコードはwebサイトには反映されません。
webサイト上に表示されないので、印刷用にフォントサイズを10ptで「px → pt」に変えて読みやすいサイズに変更すると印刷しても字がでかすぎたり、小さすぎたりを避けることができると思います。

また、「display:none」を使用すれば印刷時に入らない要素も消すことができます。
webサイトを印刷しても使いたいという需要にマッチし、覚えておくと便利に使えます。

ズームアウトしながら画像表示させるアニメーションをCSSで実装する

要素が見えた瞬間に、classを追加するJSの説明は省きます。
「inview」を使用しています。

HTML

<p><img class="img" src="https://ninjinmilk.com/wp-content/uploads/2022/01/5oZJuItF_400x400-1.jpg" alt=""></p>

CSS

.img{
    transition: 3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1.2);
}
p{
    width: 400px;
    overflow: hidden;
}
p.active .img{
    transform: none;
    opacity: 1;
}

実装デモ

実際に動かしてみるとこんな感じです。

デモページ

今回は、CSSで自動で折り返してしまう文章を折り返させない方法を紹介します。

CSSで文章を折り返えさせず一行にする方法

長いとどうしても折り合えして開業されてしまう文章をどうしても一行に収めたいときは、囲っている要素に

white-space: nowrap;

こいつを入れるだけ！
簡単ですね(^o^)

ただスマホとかデバイスの端からはみ出ちゃう場合でも改行されるず一行になって見えなくなってしまいます＼(^o^)／
使い所が難しいですが…
１文字だけ落ちるからどうにかしてくれ！！とかには使えると思います。

CSSだけでストライプ（ボーダー）を実装する方法

では早速、じっそうしていきまっしょい！

まずは、HTML。

<div class="bg bg-border"></div>

コンテンツの中身が、ないので「bg」というclassで横幅と高さを指定します。
普段使用する際には、「bg」は必要ないと思います。

続いて、CSS.

.bg{
    width: 100%;
    height: 300px;
}

.bg-border{
    background-color: #fc693b;
    background-image: repeating-linear-gradient(-45deg,#fff, #fff 7px,transparent 0, transparent 14px);
}

「repeating-linear-gradient」のグラデーションを使ってストライプ（ボーダー）の形を作ります。
間に入っている「px」指定している部分で、ボーダーの幅スペースを指定しています。

CSSだけでストライプ（ボーダー）を実装するデモ

そんな感じ！

CSSだけでテキストにグリッチエフェクトを付ける

では早速テキストにグリッチエフェクトをtけるための準備をしていきます。

グリッチエフェクトを付けるテキストを用意

テキストを用意する際に、「data-text」で同じテキストを入力しておきます。

<div class="glitch-effect" data-text="340.29m/s">340.29m/s</div> 

グリッチエフェクトを付けるSCSSを用意

CSSアニメーションを使用し、書いていきます。
SCSSを使用していない方は、下のCSSをご確認ください。

// アニメーション設定
@keyframes glitch {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
    }
  }
}

@keyframes glitch-2 {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
    }
  }
}

.glitch-effect {
  color: white;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.glitch-effect:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: glitch 2s infinite linear alternate-reverse;
}

.glitch-effect:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: glitch-2 3s infinite linear alternate-reverse;
}

＜CSSの場合＞

body {
  background: black;
}

@-webkit-keyframes glitch {
  0% {
    clip: rect(17px, 9999px, 62px, 0);
  }
  5% {
    clip: rect(43px, 9999px, 46px, 0);
  }
  10% {
    clip: rect(87px, 9999px, 1px, 0);
  }
  15% {
    clip: rect(11px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(9px, 9999px, 87px, 0);
  }
  25% {
    clip: rect(8px, 9999px, 66px, 0);
  }
  30% {
    clip: rect(87px, 9999px, 1px, 0);
  }
  35% {
    clip: rect(3px, 9999px, 37px, 0);
  }
  40% {
    clip: rect(54px, 9999px, 8px, 0);
  }
  45% {
    clip: rect(35px, 9999px, 49px, 0);
  }
  50% {
    clip: rect(38px, 9999px, 94px, 0);
  }
  55% {
    clip: rect(66px, 9999px, 56px, 0);
  }
  60% {
    clip: rect(10px, 9999px, 70px, 0);
  }
  65% {
    clip: rect(100px, 9999px, 46px, 0);
  }
  70% {
    clip: rect(24px, 9999px, 70px, 0);
  }
  75% {
    clip: rect(47px, 9999px, 68px, 0);
  }
  80% {
    clip: rect(67px, 9999px, 97px, 0);
  }
  85% {
    clip: rect(5px, 9999px, 13px, 0);
  }
  90% {
    clip: rect(84px, 9999px, 20px, 0);
  }
  95% {
    clip: rect(53px, 9999px, 39px, 0);
  }
  100% {
    clip: rect(57px, 9999px, 79px, 0);
  }
}

@keyframes glitch {
  0% {
    clip: rect(17px, 9999px, 62px, 0);
  }
  5% {
    clip: rect(43px, 9999px, 46px, 0);
  }
  10% {
    clip: rect(87px, 9999px, 1px, 0);
  }
  15% {
    clip: rect(11px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(9px, 9999px, 87px, 0);
  }
  25% {
    clip: rect(8px, 9999px, 66px, 0);
  }
  30% {
    clip: rect(87px, 9999px, 1px, 0);
  }
  35% {
    clip: rect(3px, 9999px, 37px, 0);
  }
  40% {
    clip: rect(54px, 9999px, 8px, 0);
  }
  45% {
    clip: rect(35px, 9999px, 49px, 0);
  }
  50% {
    clip: rect(38px, 9999px, 94px, 0);
  }
  55% {
    clip: rect(66px, 9999px, 56px, 0);
  }
  60% {
    clip: rect(10px, 9999px, 70px, 0);
  }
  65% {
    clip: rect(100px, 9999px, 46px, 0);
  }
  70% {
    clip: rect(24px, 9999px, 70px, 0);
  }
  75% {
    clip: rect(47px, 9999px, 68px, 0);
  }
  80% {
    clip: rect(67px, 9999px, 97px, 0);
  }
  85% {
    clip: rect(5px, 9999px, 13px, 0);
  }
  90% {
    clip: rect(84px, 9999px, 20px, 0);
  }
  95% {
    clip: rect(53px, 9999px, 39px, 0);
  }
  100% {
    clip: rect(57px, 9999px, 79px, 0);
  }
}

@-webkit-keyframes glitch-2 {
  0% {
    clip: rect(19px, 9999px, 94px, 0);
  }
  5% {
    clip: rect(81px, 9999px, 97px, 0);
  }
  10% {
    clip: rect(58px, 9999px, 48px, 0);
  }
  15% {
    clip: rect(16px, 9999px, 47px, 0);
  }
  20% {
    clip: rect(54px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(93px, 9999px, 1px, 0);
  }
  30% {
    clip: rect(55px, 9999px, 19px, 0);
  }
  35% {
    clip: rect(34px, 9999px, 38px, 0);
  }
  40% {
    clip: rect(82px, 9999px, 79px, 0);
  }
  45% {
    clip: rect(45px, 9999px, 44px, 0);
  }
  50% {
    clip: rect(67px, 9999px, 59px, 0);
  }
  55% {
    clip: rect(83px, 9999px, 6px, 0);
  }
  60% {
    clip: rect(95px, 9999px, 70px, 0);
  }
  65% {
    clip: rect(74px, 9999px, 12px, 0);
  }
  70% {
    clip: rect(21px, 9999px, 2px, 0);
  }
  75% {
    clip: rect(1px, 9999px, 23px, 0);
  }
  80% {
    clip: rect(11px, 9999px, 91px, 0);
  }
  85% {
    clip: rect(81px, 9999px, 10px, 0);
  }
  90% {
    clip: rect(22px, 9999px, 98px, 0);
  }
  95% {
    clip: rect(68px, 9999px, 59px, 0);
  }
  100% {
    clip: rect(79px, 9999px, 12px, 0);
  }
}

@keyframes glitch-2 {
  0% {
    clip: rect(19px, 9999px, 94px, 0);
  }
  5% {
    clip: rect(81px, 9999px, 97px, 0);
  }
  10% {
    clip: rect(58px, 9999px, 48px, 0);
  }
  15% {
    clip: rect(16px, 9999px, 47px, 0);
  }
  20% {
    clip: rect(54px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(93px, 9999px, 1px, 0);
  }
  30% {
    clip: rect(55px, 9999px, 19px, 0);
  }
  35% {
    clip: rect(34px, 9999px, 38px, 0);
  }
  40% {
    clip: rect(82px, 9999px, 79px, 0);
  }
  45% {
    clip: rect(45px, 9999px, 44px, 0);
  }
  50% {
    clip: rect(67px, 9999px, 59px, 0);
  }
  55% {
    clip: rect(83px, 9999px, 6px, 0);
  }
  60% {
    clip: rect(95px, 9999px, 70px, 0);
  }
  65% {
    clip: rect(74px, 9999px, 12px, 0);
  }
  70% {
    clip: rect(21px, 9999px, 2px, 0);
  }
  75% {
    clip: rect(1px, 9999px, 23px, 0);
  }
  80% {
    clip: rect(11px, 9999px, 91px, 0);
  }
  85% {
    clip: rect(81px, 9999px, 10px, 0);
  }
  90% {
    clip: rect(22px, 9999px, 98px, 0);
  }
  95% {
    clip: rect(68px, 9999px, 59px, 0);
  }
  100% {
    clip: rect(79px, 9999px, 12px, 0);
  }
}

.glitch-effect {
  color: white;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.glitch-effect:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: glitch 2s infinite linear alternate-reverse;
}

.glitch-effect:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: glitch-2 3s infinite linear alternate-reverse;
}
/*# sourceMappingURL=common.css.map */

こんな感じで、壊れたテレビのようなグリッチエフェクトを簡単に実装できます！
試してみてね＼(^o^)／

ちなみに、「340.29m/s」ってなんぞやって思った方はこちら。

CSSだけで画像トリミングする方法

まずは普通に画像サイズ指定してみると・・・

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

画像の対比が変わってしまうよね・・・。
今回は「object-fit:cover」を使います。

では、トリミングするコードを追加するとこんな感じ。

img {
width: 500px;
height: 500px;
object-fit: cover;
}

何も考えずとも中央で画像が幅：500px 高さ:500pxでトリミングされます。
めちゃくちゃ簡単！！

画像のトリミング位置を指定してトリミングする

トリミングできても中央だけじゃちょっと・・・という場合も安心！
「object-position」でトリミング位置も調整可能です。

「object-position: 横位置 縦位置;」で調整できます。

img {
width: 500px;
height: 500px;
object-fit: cover;
object-position: 0 100%;
}

object-fitのIE11対応について

この前ほぼほぼ主要ブラウザは対応したもののIE11のみ非対応。
IE11はまだ使っている人多いので見逃せませんよね。
早くサポート切ってほしい。
IE11のためにコードを追加するのも面倒なので、JSで実装します。
プラグインがあるのでI11対応も楽々です。

・「fitie.js」を読み込ませます。
以上！
「object-position」がこれだけでは対応できませんが、中央でいいよって方ならこれが一番楽にI11対応させる方法です。

JSでもできますが、今回はは簡単にCSSだけでheaderでコンテンツが隠れてしまう問題を解決したいと思います。
では早速やっていきましょう！！

CSSだけでheader固定時のページ内リンクの位置を調整する

さてさて、header固定して、コンテンツが裏に隠れてめんどくせー！ってなってる方必見です！
今回はCSSだけで問題を解決していきます。

まずはHTMLはこんな感じ。
headerをfixedで固定してある状態とします。
今回リンクを飛ばしたいのは「#content01」。
このままでは、headerの高さ分「#content01」が隠れてしまいます。

<header>固定してるよ</header>

<main>
<section id="content01">コンテンツだよ</section>
</main>

これをどうするのか。
解決するためのCSSを書いていきます。

header{
height: 20px;
}

#content01{
margin-top: -20px;
padding-top: 20px;
}

headerの高さが20pxだった場合になります。
headerで隠れてしまう20px分をコンテンツでとってあげて、ネガティブマージンでその分を隠してあげるとデザインを崩すことなく、ページ内リンクをさせたい位置に行くはずです！
これでギチギチで見にくい場合はpaddingを増やしてネガティブマージンでスペースを調整するとうまくいくと思います。

ただ今回の解決法の問題としては、headerの高さが変動してしまう場合です。
変動してしまうとうまく調整ができないので、JSを使って今回指定しているmarginとpaddingを自動で取得すると良いかと思います。
そこは次回サンプルコードを紹介しますね。

そんな時に、上の要素を無視して下のリンクをクリックできるようにする方法を紹介します。
じつはCSSだけで簡単にできちゃう。
では早速コードを書いていくー！

リンク上に重なっている要素を無視してリンクをクリックできるようにする方法

上に重なっている要素に下記コードを追加してあげるだけ！

pointer-events: none;

ね？簡単でしょ？
最近は、beforeとかafterでサイトのデザインを表現しないといけない場面が多数出てくるので、もし要素が重なっちゃったらこれを追加するだけで簡単に対応可能です。
リンク押せねーーーー！ってなったら使ってみてね٩( ‘ω’ )و

ガクブルをCSSで表現する

では早速CSSを使用して(((；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙを表現していきます。

まずはテキトーにHTMLを書いてと

[html]
<div class="gakuburu">
(((；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
</div>
[/html]

CSSでkeyframesを書いて、実装する

[css]
.gakuburu {
display: inline-block;
animation: gakuburu .1s infinite;
}

@keyframes gakuburu {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(2px, 2px) rotateZ(1deg)}
50% {transform: translate(0px, 2px) rotateZ(0deg)}
75% {transform: translate(2px, 0px) rotateZ(-1deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
[/css]

するとこんな感じ！

ぶるっとるな！！
最高にぶるってやがる！

これをhover時に設定しといたら、なんか面白く使えそうだよね。
例えば・・・

ホンマに押すの・・・？
ねー？
ホンマ？
まじかああああああ！

上の「(((；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ」にマウスカーソルをもっていってみてね♪
こんな感じとかさ！いや知らんけど

ということで、最近記事さぼって書いてないからガクブル記事を書きました٩( ‘ω’ )و