![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
WEBエンジニアにとって必須となってくる知識のHTML、CSS。
学習コストも少なく、1日触ってみるだけで誰でも簡単にWebサイトが作れてしまう言語。
しかし、学習コストが少ないと言っても奥はかなり深い言語となり、表面だけを理解してもなかなかクオリティや作業効率が上がりません。
そこで、今回は知っておくとサイトの保守性や作業スピードが爆上がりするSCSS(SASS)についてご紹介いたします。
まずはCSSとSCSSの記述の違いから見ていきましょう
このようなHTML記述があったとします。
<body>
<div>
<p class="text1"><span>Hello</span> World!</p>
</div>
<p class="text2">Hello World!</p>
</body>
div要素に白の背景色、text1要素に黒文字、16px、span要素に赤文字、text2要素に赤文字を設定する場合次のようなCSSになります。
div {
background-color: white;
}
div .text1 {
color: black;
font-size: 16px;
}
div .text1 span {
color: red;
}
.text2 {
color: red;
}
これをSCSSに直すと・・・
div {
background-color: white;
.text1 {
color: black;
font-size: 16px;
span {
color: red;
}
}
}
.text2 {
color: red;
}
これを出力すると最初に書いたCSSと同じ効果が反映されます。
CSSを記載する時に他に影響を与えない保守性を上げるコーディングをしようとすると、同じクラス名を何度も書く事になる上、要素の指定の記述が非常に長くなります。
また行も非常に長くなる為、コードが長くなると目的のコードを探すためにひたすらスクロールをしなければなりません。これが地味に疲れます・・・
SCSSで記述することにより
・同じスタイルを繰り返さなくていいので記述量が明らかに減る。
・ネスト構造を利用できるのでコードが見やすい
・モジュール化ができるので管理がしやすい
・ユーマンエラーやバグが減る
このようなメリットがあります。
逆にデメリットもあります。
・学習するまでに時間がかかる
・コンパイルが必要となる
・ファイル数が多くなりがち
・ネスト構造が深くなりすぎる
これらのデメリットを加味してもメリットの方が高いので是非SCSSを習得しましょう!
SCSSと似たものにSASSというものがあります。
SCSSと検索をするとこのSASSが引っかかる事が多いのですが私はSCSSの記述の方が分かりやすくて好きです。
具体的な違いは・・・
div {
background-color: white;
.text1 {
color: black;
font-size: 16px;
span {
color: red;
}
}
}
.text2 {
color: red;
}
先ほどのSCSSのコードをSASSに直すと
div
background-color: white
.text1
color: black
font-size: 16px
span
color: red
.text2
color: red
の形になります。
波括弧やセミコロンを付けなくて良くなるので更に記述量が減るのですが
私はスタイルを付けるときはコロンとセミコロンを付けるのはセットになってますのであまりメリットには感じないかな?と思います。
更に波括弧が無くなることによって少し見にくくなる感じがして私はSASSは使用しません。
コーディングには様々な記述方法があり、正解は無いと思います。
好みはそれぞれあると思いますので、作業スピード、クオリティを担保できる手法で作業をするのが一番でございます。
但し、チームで開発をする時はコーディングルールもあると思いますのでしっかりルールに則ってより良い制作活動をしていきましょう!
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?