【コーディング学習記録】その１ Scssの使い方

2020 11/15

2020.11.15 2020.11.15

現在、就職して1週間。ありがたいことに、すでに実務でWebサイトの制作に関わらせていただいています。

今は先輩に教わりながらScssを使ってWordPressでコーディングをしているのですが、ちょくちょくわからない所が出てきてまして、調べたり教えていただいたりしています。

学んだことを頭に定着させるため、コーディングで自分が躓いたところとその解決法をまとめていきたいと思います。

Scssの使い方

Twitterでもメモ程度に呟いていました。メリットと何ができるか、通っていたスクールの動画と参考サイトの内容を見てまとめました。

朝からSCSSについて調べたのでメモ📝

☑︎メリット
効率よい、修正しやすい

☑︎できることの基本
・ネスト（入れ子）
・変数で書く（例：$color-main:#333;）
・アンパサンド（例：header_title→&_title）
・継承（mixin、メディアクエリを@include-desctopで呼び出す）
・ファイル分割
— まいきー@WEBデザイナー研修中 (@Mikey87826191) November 11, 2020

Sass（SCSS）とは？使い方からメリットまで初心者向けに解説 | HikoPro Blog

Scssの入れ子で躓く

コーディング中Scssが効かなくなり、あれっ？なんでや！？！？となってしまったのですが、原因は私のscssの書き方にあったのでした。

NGパターン

Scssの入れ子にしたつもりだったのですが、cssが効いてませんでした。

OKパターン

入れ子にするために、htmlのクラス名を『__』で繋げました。ちゃんとわかってなくてお恥ずかしい…。先輩に教えていただきましたm(_ _)m

htmlのクラス名が長くなりすぎるのがどうなん？ということで賛否両論あるそうなのですが、どこのcssなのかわかりやすくていいよね、とのこと。ただ、入れ子にしすぎるのもわかりづらくなるので、まあ3つか4つくらいで止めとこかということになりました。

OKパターンその2

こちらは、htmlをいじらずにscssの入れ子にせずにcssを書きました。これでも反映はできる。。。

Scssを使うときのフォルダ構成について

scssフォルダ→style.scss(@import “layout/header”;)
                      →layoutフォルダ →_header.scss
                                                     →_footer.scs
                                                    　…
☟☟☟☟☟☟☟☟☟
赤線のcssに呼び出し
cssフォルダ→style.cssに『_header.scss』、『_footer.scss』、…の内容がまとめて反映される

▼header.scssの中身がこんな感じだとして…

▼style.scssでheaderとfooterのscssを呼び出すときのstyle.scssの書き方

mixinを使ってみる（次回）

mixinの使い方がいまいちわかっていなかったのですが、スクールの動画を見て理解しました。と思って作った画像。

CTAボタンの作り方

scssというか、こんなん作りたいときこうしたらよいのよ、と教えてもらった話。

たとえば、以下の画像のようにアイコンを使用してボタンを作りたい場合（以前作った自分のポートフォリオにいい例があった）。

WPでPHPを使った画像の呼び出し方

以下のように、imgタグのsrc=”〇〇”の部分に、<?php echo get_template_directory_uri(); ?>画像までのディレクトリ>を記入します。

要するに、真ん中の赤い線のように中央に揃えればいいということで。

▼HTMLのタグ

ご予約はこちらから

09-1234-5678

電話受付 9:00~18:00

メールでのお問い合わせはこちらから

お問い合わせフォームへ

WEB受付　24時間受付中！

▼CSSのタグ（Scssを使って書いておる）

&__inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  &__item {
    display: flex;
    width: 48%;
    background-color: $color-white;
    margin: 0 1em;
    padding: 1em;
    align-items: center; ←★これ！
    img {
      margin-right: 1em;
      width: 70px;
      height: auto;　←★よって、高さはautoでOK！
    }
  }

こんな感じで、来週も学んだことを（メモレベルですが）、まとめて行きたいと思います。