デイトラWeb制作コース中級編DAY8 デイトラ簡易版サイトのCSSをSassで書き直してみよう

2022年4月15日2023年2月18日

※デイトラWeb制作コース生へ:VS Codeのプラグイン『DartJS Sass Compiler and Sass Watcher』をインストールする前にpracticeのcssフォルダのバックアップを取っておきましょう。デイトラの説明通りに進めるとSassがCSSを上書きしてしまい、これまでせっせと書いたCSSが消えます。私は消えました。もう消えちゃって検索から来た人は下記のコードをご参考に。

『DartJS Sass Compiler and Sass Watcher』インストール後にベンダープレフィックスがつかなかった方へ。以下の設定を試してみて下さい。私も効かなかったです。 ※F1キーを押してAutoprefixer:Runを押すのを忘れていた可能性もあります。
teratail.com

Sassファイルの分割(パーシャル)については悩みましたが、こちらの方法を真似しました。

blanche-toile.com

今回は以下の3つのファイルは使いませんでした。

_settings.scss…特に書くことがなかったため
_fonts.scss…Webフォントを使わなかったため
_responsive.scss…ミックスインを使って同ファイル内に書いたため

以下、それぞれのファイルの記述内容と、どう考えてこうしたのかについての解説です。見様見真似で書いたため適切でない部分も多いかと思います。改善点などアドバイスいただけると助かります。

style.scss

＠useを使ってファイルを読み込みます。ここで呼び出したファイルの内容がコンパイルされcss/style.cssに出力されます。

@use "reset";
@use "config/variables";
@use "mixin";
@use "base";
@use "main";

_reset.scss

初級編DAY5で配布されたreset.cssの内容そのままです。

/*--------------------------------------------------------------
  Reset CSS
--------------------------------------------------------------*/
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
}
header,
footer,
nav,
section,
article,
aside,
figure,
figcaption {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
list-style-type: none;
}

config/_variables.scss

こちらにはサイト全体で使う値をセットしておきました。

///////////////* Layout *///////////////
// Content Width
$content_width: 980px;
///////////////* Fonts *///////////////
// Base Font
$base_font: Verdana,
Geneva,
Tahoma,
sans-serif;
// Base Font Size
$base_font_size: 16px;
///////////////* Color *///////////////
// Color
$navy: #082b48;
$gray: #d8d8d8;
$green: #e3fcf4;
$white: #fff;
$orange: #ec6d64;
// Base Color
$base_color: $white;
// Base Font Color
$base_font_color: $navy;
// Base Button Color
$base_btn_color: $navy;

_mixin.scss

ここにはメディアクエリの設定と、1回しか出てきませんがボタンの設定も書いておきました。

@use "config/variables"as v;
///////////////* Break Point *///////////////
$breakpoints: ( //キー　　値
'sp': 'screen and (max-width: 767px)', //767px以下（スマホ）用の表示
'pc': 'screen and (min-width: 768px)' //768px以上（タブレット・PC）用の表示
) !default;
//メディアクエリ用のmixinを定義。デフォ値はsp
@mixin mq($breakpoint: sp) {
  //map-get(マップ型変数, キー)で値を取得
@media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
@content;
}
}
///////////////* Button *///////////////
// Base btn
@mixin Btn {
padding: 20px 60px;
display: inline-block;
background-color: v.$base_btn_color;
color: v.$white;
font-size: v.$base_font_size + 8;
font-weight: bold;
border-radius: 4px;
border-style: none;
&-register {
background-color: v.$orange;
display: block;
margin: auto;
}
& a:hover {
opacity: 0.7;
cursor: pointer;
}
}

_base.scss

こちらにはCSSの、headerより上の部分を写しました。まず＠useを使って呼び出したいファイルを設定しておきます。このファイル名の部分を名前空間(namespace)というそうです。as節を使って短い名前に変更しておくと記述が楽になります。

@use "config/variables"as v;
@use "mixin"as m;
/*--------------------------------------------------------------
  Base Style
--------------------------------------------------------------*/
body {
color: v.$base_font_color;
line-height: 1.5;
font-family: v.$base_font;
}
img {
width: 100%;
height: auto;
}
a {
text-decoration: none;
color: v.$navy;
}
a:hover {
opacity: 0.7;
}
.container {
width: 90%;
max-width: v.$content_width;
margin: auto;
}
.clear::after {
content: "";
clear: both;
display: block;
@include m.mq(sp) {
content: none;
}
}

_main.scss

ほとんどはこのファイルに書いてしまいました。本当は_header.scss等パーツ分けした方がいいのかもしれませんが今回は1ページのサイトだったため分けませんでした。フォントサイズは四則演算を用いてみましたが必要あったのかどうか？ネストにも自信がないです…。

@use "config/variables"as v;
@use "mixin"as m;
/*--------------------------------------------------------------
  Base
--------------------------------------------------------------*/
/* header
==============================================================*/
.header {
padding: 20px 0;
&-left {
float: left;
@include m.mq(sp) {
float: none;
}
}
&-title {
font-weight: bold;
font-size:  v.$base_font_size + 8;
@include m.mq(sp) {
text-align: center;
}
}
&-right {
float: right;
@include m.mq(sp) {
float: none;
}
}
&-nav {
@include m.mq(sp) {
display: flex;
justify-content: space-between;
}
}
&-nav-item {
float: left;
margin-left: 50px;
.dropdown {
width: 100px;
display: none;
position: absolute;
margin-left: -5px;
margin-top: 5px;
padding: 0;
background: v.$green;
&-item {
font-size: v.$base_font_size - 2;
margin-left: 10px;
}
}
}
}
/* top
==============================================================*/
#top {
background-image: url(/img/main-vsual-nontitle.png);
background-size: cover;
padding: 80px 0;
}
.top-title {
font-size: v.$base_font_size + 32;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
@include m.mq(sp) {
padding: 60px 0;
font-size: v.$base_font_size + 14;
}
}
.top-subtitle {
font-size: v.$base_font_size + 2;
text-align: center;
@include m.mq(sp) {
font-size: v.$base_font_size - 2;
}
}
a {
text-decoration: none;
font-size: v.$base_font_size - 1;
font-weight: 600;
line-height: 36px;
@include m.mq(sp) {
float: none;
margin: 0;
}
}
/* section
==============================================================*/
.section {
padding: 60px 0;
@include m.mq(sp) {
padding: 80px 0;
}
&-title {
font-size: v.$base_font_size * 2;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
@include m.mq(sp) {
font-size: v.$base_font_size + 8;
font-weight: bold;
}
}
p {
@include m.mq(sp) {
font-size: v.$base_font_size - 2;
}
}
}
/* about
==============================================================*/
.about-left {
float: left;
width: 48%;
@include m.mq(sp) {
float: none;
width: 100%;
margin-bottom: 20px;
}
}
.about-right {
float: right;
width: 48%;
@include m.mq(sp) {
float: none;
width: 100%;
}
}
/* course
==============================================================*/
#course {
background-color: v.$green;
}
.course-wrapper {
display: flex;
justify-content: space-between;
@include m.mq(sp) {
flex-wrap: wrap;
}
}
.course-item {
width: 30%;
@include m.mq(sp) {
width: 100%;
}
img {
cursor: pointer;
}
}
#gray-display {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100% !important;
height: 100%;
background: rgba(0, 0, 0, 0.8);
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 90%;
max-height: 90%;
height: 90%;
object-fit: contain;
}
}
/* contact
==============================================================*/
.contact-message {
text-align: center;
margin-bottom: 20px;
}
input[type="email"] {
width: 600px;
border: 3px solid v.$gray;
font-size: v.$base_font_size + 2;
display: block;
margin: auto;
padding: 15px;
border-radius: 999px;
margin-bottom: 20px;
@include m.mq(sp) {
width: 100%;
}
}
.btn {
@include m.Btn;
}
/* page top
==============================================================*/
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: v.$base_font_size - 2;
line-height: 1;
z-index: 99;
a {
background: #72C7CA;
text-decoration: none;
color: v.$white;
width: 80px;
padding: 28px 5px;
text-align: center;
display: block;
border-radius: 90px;
opacity: 0.9;
transition: all .3s ease;
}
a:hover {
text-decoration: none;
opacity: 0.5;
}
}
/* footer
==============================================================*/
footer {
background-color: v.$navy;
color: v.$white;
padding: 20px 0;
}
.copyright {
font-size: v.$base_font_size - 4;
float: right;
@include m.mq(sp) {
font-size: v.$base_font_size - 6;
float: none;
text-align: center;
}
}