現在、就職して1週間。ありがたいことに、すでに実務でWebサイトの制作に関わらせていただいています。
今は先輩に教わりながらScssを使ってWordPressでコーディングをしているのですが、ちょくちょくわからない所が出てきてまして、調べたり教えていただいたりしています。
学んだことを頭に定着させるため、コーディングで自分が躓いたところとその解決法をまとめていきたいと思います。
Scssの使い方
Twitterでもメモ程度に呟いていました。メリットと何ができるか、通っていたスクールの動画と参考サイトの内容を見てまとめました。

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(); ?>画像までのディレクトリ>を記入します。
; ?>/images/icon_tel.png” alt=”電話アイコン”>
<h3>高さの異なるアイコンと文字を揃える</h3>
<p>『アイコン+文字』としたいとき、たとえば下の画像のように、高さの異なる電話のアイコン(長い)とメールのアイコン(低い)を真ん中の線で揃えたいねん、となる場合、どうするか。</p>
<figure class=)

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

▼HTMLのタグ
ご予約はこちらから
; ?>/images/icon_tel.png” alt=”電話アイコン”>
<a href=)
電話受付 9:00~18:00
メールでのお問い合わせはこちらから
; ?>/images/icon_mail.png” alt=”メールアイコン”>
<a href=)
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!
}
}
こんな感じで、来週も学んだことを(メモレベルですが)、まとめて行きたいと思います。
コメント