Python matplotlibを使って学ぶ統計処理正規分布のソースを表示新しいページはコチラ

[[Python]]の記事へ戻る
<yjavascript>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: {autoNumber: "AMS"} }
});
</script>
</yjavascript>

== '''<span style= "background: #3f17ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 10px; width: 100%; display: inline-block;">正規分布の公式</span>''' ==
===<big><big><span style= "background: #3178ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 5px; width: 98%; display: inline-block;">■正規分布の確率密度を算出する式の作り方</span></big></big>===
==== 作りたい関数の方針〜求めるべき係数 ====
　確率密度の関数は以下のようなグラフになるような関数であるべきで、

[[ファイル:Diagram-normal distribution.png||||作りたい関数のグラフ]] 

　１．<ymath>$ f( x) = -x^{2} $</ymath>のような上に凸になるようにする。

　２．両端で限りなく0に近づくようにすること。

　３．<ymath>$ \int ^{\infty }_{-\infty } f( x) $</ymath>で積分すると1<span>(</span>グラフで言うと関数の描く曲線がy=0の線と囲まれているところの面積が1ということ<span>)</span>になる。


　上記のようなことをみたす関数を考えると<ymath>$ a^{-x^{2}} $</ymath>のような関数であれば急激に0に近づく関数として適切であることが、予想できます。例えば<ymath>$ a = 2 $</ymath>と固定してみた場合<ymath>$ x $</tmath>が<ymath>$ -4, -3, -2, -1, 0, 1, 2, 3, 4, $</ymath>…のように変化すると、<ymath>$ 2^{-(16=(-4)*(-4))}=\frac{1}{2^{16}}, 2^{-9}=\frac{1}{2^{9}}, 2^{-4}=\frac{1}{2^{4}}, 2^{-1}=\frac{1}{2^{1}}, 2^{0}=1, 2^{-1}=\frac{1}{2^{1}}, 2^{-4}=\frac{1}{2^{4}}, 2^{-9}=\frac{1}{2^{9}}, 2^{-16}=\frac{1}{2^{16}} $</ymath>となることから予想は概ね正しいと言えることが分かってもらえると思います。


　簡単な予想で形だけは近いグラフになる関数になりましたが、まだ積分が1になるようなグラフにはなっていないかもしれないです。グラフの山の高さと広がり方を調整しないと積分して1になる正規分布の確率密度を表すようなグラフを描いたことにはならないです。もう少し工夫が必要です。


　というわけで、さらに積分して1にする必要があるため、積分が簡単なように冪乗の底となる<ymath>$ a $</ymath>を積分しやすいように考えられたネイピア数<ymath>$ e $</ymath>を底とするために、<ymath>$ a = e^{\log_e a} $</ymath>のような式を使うことを考えるようにしてみます。これは<ymath>$  e $</ymath>を<ymath>$  a $</ymath>乗したら<ymath>$  a $</ymath>になるような関係を示しているだけです。対数の<ymath>$  A = \log_e a $</ymath>は<ymath>$  e^{A} = a $</ymath>を<ymath>$  \log $</ymath>という表記方法にしたものです。対数は積の計算を和に還元するためにあります。<ymath>$  x^{a}x^{b} = x^{a+b} $</ymath>といったような指数法則を利用するものです。この時の<ymath>$ x $</ymath>を底と呼んでいて、対数的な考え方においては底という数字はなんでもいいのです。対数表のようなものから計算ができれば、巨大な積を和に還元できるからです。なので<ymath>$  \log_e $</ymath>のような複雑そうな底を使うことが基本になっています。<ymath>$  \log_{e} $</ymath>の<ymath>$ e $</ymath>を省略した<ymath>$  \log $</ymath>も<ymath>$  \log_{e} $</ymath>と同じものを表すことになっています。ネイピア数<ymath>$ e $</ymath>を対数の底にするのは実は複雑そうで意外と綺麗にまとまる値だからです。ちまちました計算で頭で理解しながら対数の仕組み確かめたい場合は常用対数のような<ymath>$  \log_{10} $</ymath>とかを使うのでしょう。でもそれは対数の仕組みを理解することが主な利用用途であることが多いです。一部常用対数で桁数を求めたりする用途もありますが、本来は<ymath>$  \log_{e} $</ymath>のような自然対数を使うことの方が、微分積分を多様する自然科学においての主な使い方になります。


　<ymath>$ a^{-x^{2}} = e^{-\log_ea x^{2}} $</ymath>の<ymath>$ A = \log_ea $</ymath>とおくと<ymath>$ a^{-x^{2}} = e^{-A x^{2}} $</ymath>


　上記のような表現をした時の<ymath>$  A  $</ymath>を究明することが確率密度関数を見つけることになります。


　ところで、


{| style = "width: 100%;"  
| style= "font-weight: bold; background-color: #f2f6ff; white-space:nowrap; padding:10px; border: dotted 1px black;  border-radius: 10px;" | <big> <ymath>$$  \int e^{-x^2} \cdot dx = \sqrt{\pi}$$</ymath> </big>
|}
　

　ということが分かっていて、


{| style = "width: 100%;"  
| style= "font-weight: bold; background-color: #f2f6ff; white-space:nowrap; padding:10px; border: dotted 1px black;  border-radius: 10px;" | <big> <ymath>$$   \int e^{-Ax^2} \cdot dx = \sqrt{\frac{\pi}{A}} \tag{1} $$</ymath> </big>
|}

 
　となります。と言っても本当にそうなのかということもありますので、
　

　[[ネイピア数のマイナスx乗の2乗の積分]]の記事にて、その証明を記載します。


　証明を理解したとして、<ymath>$ (1) $</ymath>の式の両辺に<ymath>$ \sqrt{\frac{A}{\pi}} $</ymath>を掛けて

<big> <ymath>$$   \int \sqrt{\frac{A}{\pi}} e^{-Ax^2} \cdot dx = \sqrt{\frac{\pi}{A}} \sqrt{\frac{A}{\pi}} = 1  $$</ymath> </big>


　<ymath>$ x $</ymath>のデータから平均値<ymath>$ \mu $</ymath>分を引いて<ymath>$ x $</ymath>軸の0を中心にデータが分散するような式に変換するため<ymath>$ x $</ymath>を<ymath>$ x - \mu $</ymath>に置き換えて置きます。 


<big> <ymath>$$   \int \sqrt{\frac{A}{\pi}} e^{-A(x-\mu)^2} \cdot dx = 1  $$</ymath> </big>

==== 求めるべき係数の算出の前に〜確率密度関数から考える期待値・平均値と分散値について ====

　ここで、確率密度の関数の積分と確率密度関数と平均値、分散の関係を纏めておきます。


{| style = "width: 100%;"  
| style= "font-weight: bold; background-color: #f2f6ff; white-space:nowrap; padding:10px; border: dotted 1px black;  border-radius: 10px;" | <big> <ymath> <span>累積確率密度 </span> $$ 1 = \int f(x) \cdot dx $$ <span>平均値</span> $$\mu = \int x \cdot  f(x) \cdot dx $$ <span>分散</span> $$\sigma^{2} = \int (x-\mu)^{2} \cdot f(x) \cdot dx $$ </ymath> </big>
|}


　確率密度関数の積分で表現する平均値は以下のようなグラフになります。


[[ファイル: Diagram-Average from NormalDist2.png |650px|||平均値を確率密度関数で表す]] 


　確率密度関数で積分して1となる面積にデータである<ymath>$ x $</ymath>を掛ければ面積が平均値と一致します。確率密度の関数のパラメータの<ymath>$ \sigma $</ymath>を<ymath>$ 1 $</ymath>に固定すれば、上記のグラフのように<ymath>$ \mu $</ymath>がプラスの時は上側にコブが出来るグラフでマイナスのときは下側にコブが出来るグラフになります。もちろん面積は<ymath>$ \mu $</ymath>と同じ値になります。<ymath>$ \mu $</ymath>が大きいほど大きいコブになって面積が大きくなっていきます。マイナス側も同じで小さくなるほど、コブが下向きで大きくなってマイナスの面積が大きくなります。<ymath>$ \mu $</ymath>が<ymath>$ 0 $</ymath>のときだけ、<ymath>$ f(x)=-x $</ymath>のグラフで対称となる小さなコブができた状態でプラス側では上向きにマイナス側では下向きにコブができます。面積合計は打ち消しあって0になります。なんで、正規分布の積分をする前の<ymath>$ f(x) $</ymath>に対して<ymath>$ x $</ymath>をかけてから積分すると、これほど都合よく平均値と一致させることができるのか？確かめる必要があります。では少し確認してみることにしましょう。
<big><ymath>$$ \int^{\infty}_{-\infty} f(x)\cdot dx = \int^{\infty}_{-\infty} \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{1}{2\sigma^{2}}(x-\mu)^{2}}\cdot dx $$</ymath></big>
のような形式が正規分布の関数で、一番最初に示した求めるべき結果でした。まだ証明していないのに利用するのはずるいですが、これに<ymath>$ x $</ymath>をかけると
<big><ymath>$$  \int^{\infty}_{-\infty} x \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{1}{2\sigma^{2}}(x-\mu)^{2}}\cdot dx $$</ymath></big>
上記の式が平均値を求める式で、それってあってるの？という探究の始まりした。ここで、<ymath>$ z = \frac{x -\mu}{\sigma} $</ymath>…<span>(</span>2<span>)</span>という<ymath>$ z $</ymath>に置き換える式と、この式の両辺に<ymath>$ \sigma $</ymath>をかけて<ymath>$ z \cdot \sigma= \frac{x -\mu}{\sigma} \cdot \sigma $</ymath>、なので右辺の分母分子の<ymath>$ \sigma $</ymath>を約分できて1になるから<ymath>$ z \cdot \sigma= x -\mu $</ymath>となり、両辺に<ymath>$ \mu $</ymath>を足して<ymath>$ z \cdot \sigma + \mu = x  $</ymath>つまり<ymath>$ x = z \cdot \sigma + \mu  $</ymath>… <span>(</span>3<span>)</span>で、 <span>(</span>2<span>)</span>および<span>(</span>3<span>)</span>の式を当てはめると
<big><ymath>$$  \int^{\infty}_{-\infty}x(←(3)式) \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{1}{2\sigma^{2}}(x-\mu)^{2}(←(2)式)}\cdot dx $$</ymath></big>
を上記のように適用すると
<big><ymath>$$  \int^{\infty}_{-\infty} (z \cdot \sigma + \mu) \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz $$</ymath></big>
となります。<span>(</span>2<span>)</span>式は<ymath>$ \frac{1}{\sigma^{2}}(x-\mu)^{2} $</ymath>を<ymath>$ z^{2} $</ymath>と置き換えてます。そして上記の式を分配法則<ymath>$ (a + b)x = ax + bx $</ymath>のような計算と同じ要領を適用して
<big><ymath>$$  \int^{\infty}_{-\infty} z \cdot \sigma \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz + \int^{\infty}_{-\infty}\mu \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz $$</ymath></big>
上記のようになり、2つの積分の和の構造の最初の積分の部分はちょっと確かめれば原点を通過する奇関数と呼ばれる形式になっています。要するに積分をすると0になるということです。グラフをプロットして確かめてみると以下の通りです。
<big><ymath>$$  0 + \int^{\infty}_{-\infty}\mu \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz $$</ymath></big>
となります。そうすると上記の式から<ymath>$ \mu $</ymath>を除いた部分
<big><ymath>$$ \int^{\infty}_{-\infty}  \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz $$</ymath></big>
は確率密度関数で積分<span>(</span>グラフのプロットとy=0に囲まれた部分面積を求める操作でマイナス領域とプラス領域の差し引きをする<span>)</span>をすると1になるものですから、最終的には
<big><ymath>$$ \int^{\infty}_{-\infty} \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz = 1 $$</ymath></big>
で、<ymath>$ \int^{\infty}_{-\infty}\mu \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{z^{2}}{2}}\cdot dz $</ymath>は
<big><ymath>$$  \mu \cdot 1 $$</ymath></big>
となりますから、元々の式の計算結果は平均値を意味する<ymath>$ \mu $</ymath>であると言えます。確率密度関数<ymath>$ f(x) $</ymath>を<ymath>$ x $</ymath>倍したものの積分は<ymath>$ \mu $</ymath>になることが確認でき、
<big><ymath>$$ \mu =  \int^{\infty}_{-\infty} x \cdot \frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{1}{2\sigma^{2}}(x-\mu)^{2}}\cdot dx $$</ymath></big>
であると言えます。


　確率密度関数の積分で表現する分散値は以下のようなグラフになります。


[[ファイル: Diagram-SigmafromNormalDist.jpg |650px|||分散値を確率密度関数で表す]] 


確率密度関数で積分して1だった面積に分散値である<ymath>$ (x - \mu)^2 $</ymath>を掛ければ面積が分散値と一致します。そのようになるようにした関数のグラフは平均値<ymath>$ \mu $</ymath>を<ymath>$ 0 $</ymath>とすると上記のように<ymath>$ x = 0 $</ymath>の軸で鏡になったようなコブが二つプラス側で並びます。分散値は個別のデータ<ymath>$ x $</ymath>を平均値<ymath>$ \mu $</ymath>との差をとって2乗した値なので必ずプラスになるためです。分散値が大きいほどコブは大きくなり面積が多くなることもグラフから確認できます。確率密度関数から表現できる積分して分散値になるような関数とは上記のような形であることをイメージして置くと理解しやすい関数に思えるでしょう。このように要所要所で関数をグラフ化してイメージできるようにすることが理解を深めますので、コンピュータで関数のグラフを描いたり、積分値の近似できるプログラムから算出できるような技術力を持っていると学習の助けになるので、是非、少しづつ習得していって欲しいです。コンピュータに演算させれば、このグラフのそれぞれの関数の曲線と<ymath>$ y = 0 $</ymath>の軸とで囲われた部分の面積は分散値になることも確認できます。関数の<ymath>$ \mu $</ymath>を変化させるとコブのグラフ全体が<ymath>$ \mu $</ymath>分だけ横にシフトします。面積が丁度半分になるところが平均値ですので、二つのコブの真ん中が<ymath>$ y = 0 $</ymath>の点と接する部分の<ymath>$ x $</ymath>の値が平均値に相当することになります。



<span style= "background: linear-gradient(transparent 70%, #c1e0ff 70%);">確率密度関数</span>は以下のように定義されます。


{| style = "width: 100%;"  
| style= "background-color: #f2f6ff; white-space:nowrap; padding:5px; border: dotted 1px black;  border-radius: 10px;" | <big><ymath>$$  f( x) \ =\ \frac{1}{\sqrt{2\pi } \sigma }\exp^{-\frac{1}{2\sigma } (x-\mu )^{2}}  $$ </ymath> </big>
|}

この項目ではこの確率密度関数をpythonを使いつつ理解しようとすることを目指します。
しばらくは工事中で、この説明に必要な数式を試す場所として利用します)。

　

== '''<span style= "background: #3f17ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 10px; width: 100%; display: inline-block;">アンダーラインCSSのサンプル<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important"></span> <span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">[蛍光ペンを模した形式]</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important"></span></span>''' ==
=== 赤色系統 ===
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffadad 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffadad 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ff9393 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ff9393 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ff7f7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">正規分布</span>

　

=== 水色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #c1e0ff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #c1e0ff 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #9eceff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #9eceff 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #7fbfff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #7fbfff 75%); font-weight:bold; ">正規分布</span>

　
=== 黄色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #fff799 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #fff799 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #edde7b 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #edde7b 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffdc00 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffdc00 75%); font-weight:bold; ">正規分布</span>

　
=== 緑色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #b2ffb2 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #b2ffb2 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #7fff7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #7fff7f 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #bfff7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #bfff7f 75%); font-weight:bold; ">正規分布</span>

　
=== 桃色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffc1e0 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffc1e0 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffc0cb 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffc0cb 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ff9ece 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ff9ece 75%); font-weight:bold; ">正規分布</span>

　
=== 淡水色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #c1ffff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #c1ffff 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #bce2e8 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #bce2e8 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #afeeee 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #afeeee 75%); font-weight:bold; ">正規分布</span>

　
=== 橙色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffe0c1 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffe0c1 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffce9e 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffce9e 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ffbf7f 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ffbf7f 75%); font-weight:bold; ">正規分布</span>

　
=== 紫色系統 === 
<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #cab8d9 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #cab8d9 75%); font-weight:bold; ">正規分布</span>


<span style = "font-style: normal">&lt;span style = "background:linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">(</span>transparent 75%, #ce9eff 75%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'ＭＳ Ｐゴシック', ' Osaka',  sans-serif; font-style: normal; !important">)</span>; font-weight:bold; "&gt;正規分布&lt;/span&gt;</span>

<span style = " background:linear-gradient(transparent 75%, #ce9eff 75%); font-weight:bold; ">正規分布</span>


== '''<span style= "background: #3f17ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 10px; width: 100%; display: inline-block;">アニメーションマーカー</span>''' ==

<yjavascript> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
  $(".marker-animation6").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
});
</script>
<style type= "text/css">
.marker-animation6.active{
  background-size: 100% 100%;
  background-position: 0px 100%;
}

.marker-animation6 {
  background-image: 
    linear-gradient(to bottom, transparent 45%, #ff7f7f 77%  90%, #ff9f9f 95%),
    linear-gradient(to right, transparent 45%, #ff7f7f 77%  90%, #ff9f9f 95%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0px 100%;
  transition: all 5s ease;
  font-weight: bold;
}
</style>
</yjavascript>

<!--
<span class="marker-animation6">
ここにマーカーをつける文章をいれる
</span>
-->
　蛍光ペンのようなアンダーラインをつけたい文字が画面に表示されてからアニメーションを伴って、左から右にアンダーラインが引かれていくように見せる方法です。HTMLに以下のようなスクリプトを同じファイル内にまとめて記述することで実現出来ます。javascriptとcssと利用部分の3つのセクションから構成されます。同一のファイルにまとめて記載したくない場合はjavascript部分とcss部分を別ファイルにして、HTML内で読み込むようにして利用して下さい。


*<span style="font-weight: bold;">横幅200%に拡大して、linear-gradientで左をアンダーライン右を透明にする方式</span>
<span style="color: #ffffff; background-color: #555555; padding: 0px 5px 0px 5px; display: inline-block;">javascript</span><!-- padding 上 右 下 左--> 
<syntaxhighlight lang="javascript">
<script>
$(window).scroll(function (){
  $(".marker-animation").each(function(){
    var position = $(this).offset().top;             //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop();           //現在表示している画面の上部部分についてページ位置情報を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){       //アニメーションマーカーを行う文字の位置から
                                                                 //画面の高さを引いた部分よりスクロール位置が大きくなったら
      $(this).addClass('active');                     //.marker-animationのactiveというスタイル要素状態を設定する
    }
  });
});
</script>
</syntaxhighlight>
<span style="color: #ffffff; background-color: #555555; padding: 0px 5px 0px 5px; display: inline-block;">css</span>
<syntaxhighlight lang="css">
<style type= "text/css">
.marker-animation.active{                 /*mraker-animation.activeというスタイルになると*/
 background-position: -100% .5em; /*背景200%の大きさの領域の右から100％の部分が左下隅に*/
                                                         /*なるように位置に背景領域を設定する。*/
                                                     　/*更に背景高さ位置を上から0.5em(1emは文字1文字分の幅に相当なので、*/
 　                                                 　/*文字半分くらい)に設定、背景領域の下側が押し出される感じ */
}

.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: linear-gradient(to left, transparent 50%, rgb(255,250,153) 50%);
                                                          /*全てlinear-gradientだけど上4つはブラウザ毎の設定 */
　                                                       /*200%の横幅に対して右から半分は透明に残りは指定色に*/
                                                           /* ブラウザ毎の分けられたcssの記載はベンダープレフィックス */
                                                           /* と呼びます。linear-gradientはcss3の技術で2018年に勧告済み */
                                                           /* 新しいブラウザだけ閲覧できればいいのであれば、 */
                                                           /* ベンダープレフィックスの定義は不要です。 */
  background-repeat: repeat-x;          /*100%を超える領域も使うのでその部分はx方向に繰り返す*/
  background-size: 200% .8em;        /*領域の大きさは横は2倍に　高さマーカー高さ幅は0.8emに*/
  background-position: 0 .5em;        /*背景の横位置は0に、上は0.5emに。この位置に戻そうとするような動きになる*/
  transition: all 2s ease;                   /*動かす指定で違うところのpositionになっていると2秒かけて最後に指定した*/
                                                       /*positionにする。*/
  font-weight: bold;
}
</style>
</syntaxhighlight>
<span style="color: #ffffff; background-color: #555555; padding: 0px 5px 0px 5px; display: inline-block;">cssスタイル利用部分</span>
<syntaxhighlight lang="XML">
<span class="marker-animation">
ここにマーカーをつける文章をいれる
</span>
</syntaxhighlight>


<yjavascript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
  $(".marker-animation").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
  $(".marker-animation2").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
  $(".marker-animation3").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
  $(".marker-animation4").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
});
</script>
<style type= "text/css">
.marker-animation.active{
 background-position: -100% 100%;
}

.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-repeat: repeat-x;
  background-size: 200% 20%;
  background-position: 0px 100%;
  transition: all 2s ease;
  font-weight: bold;
}
.marker-animation2.active{
 background-position: -100% 0.5em;
}

.marker-animation2 {
  background-image: -webkit-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-repeat: repeat-x;
  background-size: 200% 0.8em;
  background-position: 0 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}

.marker-animation3.active{
 background-position: -100% 0.5em;
}

.marker-animation3 {
  background-image: -webkit-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(left, transparent 50%, #7fbfff 50%);
  background-repeat: repeat-x;
  background-size: 200% 0.1em;
  background-position: 0 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}

.marker-animation4.active{
  background-size: 100% 100%;
  background-position: 0px 100%;
}

.marker-animation4 {
  background-image: -webkit-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(bottom, transparent 50%, #7fbff 50%);
  background-image: -o-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(to bottom, transparent 50%, #7fbfff 50%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0px 100%; 
  transition: all 5s ease;
  font-weight: bold;
}
</style>
</yjavascript>

background-size: 200% 20%

background-position: 0px 100% ← -100% 100%

<span class="marker-animation">
ここにマーカーをつける文章をいれる
</span>



background-size: 200% 0.8em

background-position: 0px 0.5em ← -100% 0.5em

<span class="marker-animation2">
ここにマーカーをつける文章をいれる

</span>

background-size: 200% 0.1em

background-position: 0px 0.5em ← -100% 0.5em

<span class="marker-animation3">
ここにマーカーをつける文章をいれる
</span>


*<span style="font-weight: bold;">マーカーを縦にグラデーションする方式のスクリプト</span>
<span style="color: #ffffff; background-color: #555555; padding: 0px 5px 0px 5px; display: inline-block;">javascript</span>
<syntaxhighlight lang="javascript">
<script>
$(window).scroll(function (){
  $(".marker-animation").each(function(){
    var position = $(this).offset().top;             //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop();           //現在表示している画面の上部部分についてページ位置情報を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){       //アニメーションマーカーを行う文字の位置から
                                                                 //画面の高さを引いた部分よりスクロール位置が大きくなったら
      $(this).addClass('active');                     //.marker-animationのactiveというスタイル要素状態を設定する
    }
  });
});
</script>
</syntaxhighlight>
<span style="color: #ffffff; background-color: #555555; padding: 0px 5px 0px 5px; display: inline-block;">css</span>
<syntaxhighlight lang="css">
<style type= "text/css">
.marker-animation.active{
  background-size: 100% 100%;
  background-position: 0px 100%;
}

.marker-animation {
  background-image: -webkit-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -moz-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -ms-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: -o-linear-gradient(bottom, transparent 50%, #7fbfff 50%);
  background-image: linear-gradient(to bottom, transparent 50%, #7fbfff 50%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0px 100%;
  transition: all 5s ease;
  font-weight: bold;
}
</style>
</syntaxhighlight>


lineargradient(to bottom,…  -webkit-llineargradient(bottom その他のブラウザ向けもwebkitと同じ

background-repeat: no-repeat:

background-size: 100% 100%; ← 0% 100%;

background-position: 0 100%; ← 0% 100%;

<span class="marker-animation4">
ここにマーカーをつける文章をいれる
</span>


<yjavascript> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
  $(".marker-animation5").each(function(){
    var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
    var scroll = $(window).scrollTop(); //スクロールの位置を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
      $(this).addClass('active'); //クラス「active」を与える
    }
  });
});
</script>
<style type= "text/css">
.marker-animation5.active{
  background-size: 100% 100%;
  background-position: 0px 100%;
}

.marker-animation5 {
  background-image: -webkit-linear-gradient(bottom, transparent 45%, #ff7f7f 75% 90%, #ff9f9f 95%);
  background-image: -moz-linear-gradient(bottom, transparent 45%, #ff7f7f 75%  90%, #ff9f9f 95%);
  background-image: -ms-linear-gradient(bottom, transparent 45%, #ff7f7f 75%  90%, #ff9f9f 95%);
  background-image: -o-linear-gradient(bottom, transparent 45%, #ff7f7f 75%  90%, #ff9f9f 95%);
  background-image: linear-gradient(to bottom, transparent 45%, #ff7f7f 77%  90%, #ff9f9f 95%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0px 100%;
  transition: all 5s ease;
  font-weight: bold;
}
</style>
</yjavascript>
縦のグラデーションを活用する例

background-image: linear-gradient<span>(</span>to bottom, transparent 45%, #ff7f7f 77%  90%, #ff9f9f 95%<span>)</span>;

<span class="marker-animation5">
ここにマーカーをつける文章をいれる
</span>


　縦横に透明になるグラデーションがかかったアンダーラインを作るには背景画像を別で準備して、その画像サイズをアニメーションさせるしかないでしょう。そのような縦横に透明をうまくかけるには不透明マスク機能とグループ化やクリップ機能をもったラスタ<span>(</span>ペイント<span>)</span>系あるいはベクター<span>(</span>ドロー<span>)</span>系画像編集アプリケーションが必要になるでしょう。

　

== '''<span style= "background: #3f17ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 10px; width: 100%; display: inline-block;"> Sass<span>[</span>Syntactically Awesome StyleSheet<span>]</span></span>''' ==
　アニメーションマーカーのような規模のcssになるとちょっとした色変更だけでも大変な量の修正が必要になってきます。そこで考えられたのがcssをプログラムのような記述から自動的に吐き出す方式です。それがSassです。色や各種の値を変数化したり、要素複数を関数のように一纏めにして引数を与えるような構造が利用できるものをSassと呼び、cssによるデザインを繰り返し扱う人には重要なシステムとなっています。SassはコンパイラのようにPCに環境を構築する必要があります。ウェブサービスとして、左ViewにSassを記述すると右Viewに対応するcssを書き出してくれるsassmeisterというsiteがありますが関数のような利用の@mixin構文が動かないという重要な機能の不足やiOSのブラウザでは文字の位置が見た目の位置とカーソルの位置がずれてどの文字部分を編集しようとしているかわからないという欠点があったので使うのをやめました。自分だけの問題かも知れませんが、使いたい人は使ってみると良いでしょう。環境の構築方法はここではあまり説明しませんが、ここで<span style = "background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">Sassの基本について触れたい</span>と思います。


　<span style = "background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">Sass</span>には、<span style = "background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">css表記方法を簡略化し、括弧やセミコロンの記述が不要なsass表記方法</span>と、<span style = "background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; "> cssの記述方法と似ている scss<span>(</span>正式名称は分かりません<span>)</span>という表記方法</span>があります。自分は従来の記述方式を踏襲しているscss方式のSassを使います。いざと言う時にSassの一部からコピペするだけでcssとして利用できるのは便利です。Sassからcssにするのにはコンパイルや変換が必要で、ワンクッション置かなければならないことを考えれば再利用や簡単な確認を素早く行うには同じ表記方法になっている方が良いと考えるからです。


[[Python]]の記事へ戻る