MENU

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

2020 11/15
【コーディング学習記録】その1 Scssの使い方

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

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

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

目次

Scssの使い方

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

あわせて読みたい
No Image
Sass(SCSS)とは?使い方からメリットまで初心者向けに解説 | HikoPro BlogHikoPro こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の...

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!
    }
  } 

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

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる