SASSの超便利な使い方【HTML/CSSコーディング】
Vložit
- čas přidán 11. 05. 2021
- SASS（CSS）の便利な使い方について説明しています！
動画で使用したコードはこちらです😊❗️
www.craft.do/s/8iy1PtcQJRkHDj
📕【目次】
0:17 「7つ」の説明
2:17 1. ネスト式の書き方
3:54 2. &(アンパサンド)の使い方
4:48 3. 変数を使う
6:11 4. SCSSファイルを分割管理
8:13 5. コードを複数箇所で使用
9:28 6. メディアクエリを簡単に書く
11:12 7. カラーコードを便利に管理
🎥【SASS導入篇（sass環境準備）はこちら】
• 【超便利】SASSを導入せよ【HTML/CS...
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします🙇♂️❗️
その他のSNSもフォローいただけたら嬉しいです❗️
◆ チャンネル登録
czcams.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
わかりやすいです、ありがとうございます☺️！
そう言っていただけて嬉しいです😆こちらこそありがとうございます🙇♂️❗️
たいへんわかりやすい動画でした。最近では、常にSassを使って記述する練習をしているので、とても助かります。また、コードをNotionでまとめていただいて、とてもありがたいです。
Sass使った方が絶対良いですよね😆❗️嬉しいコメントありがとうございます😊❗️
sassは本当に便利ですよね。
3の変数を使った便利な記述方法を知りたいです！
自分はセクションのmarginとfont-sizeのみで使用してます。
eachやforは複数人が関わるプロジェクトで分かりやすい記述方法が難しく、結局使わなくなりました。
使えば使うほど便利だなぁーって思いますよね😊♪
複数人で作業するケースだとあらかじめルール決めしておかないと難しくなってしまいますよね💦
ループ文だと、パターンを設ける際に使いやすいと思います。アイコンの表示を複数種類用意したい場合など、icon--○○て感じで○○のところを配列で回してパターン作るようなイメージです❗️
あとは複数人で作業する場合はどうしても技術に差が出てきてしまうので、ここはこう言った記述をしているよーみたいなコメントを残すことも多いです😆❗️
動画で勉強させていただいております。
レスポンシブの実践動画も載せていただけると嬉しいです(^ ^)
ご視聴ありがとうございます😆❗️
レスポンシブの動画出せてないので出したいと思います❗️
わ、分かりやすい…
メンターお願いしたい…
一人だと心が折れそうです笑
嬉しいコメントありがとうございます😊♪
レスポンシブでスマホの画面幅コードのを書いた後、タブレットをコードを書くとスマホの画面幅になった時もタブレット方のコードが使われてしまいます。なぜなのでしょうか？
コメントいただきありがとうございます😊♪
@media only screen and (max-width 479px) {○○○}
↑この中に書いたものはスマホサイズ（例として480px以下）のみスタイルがあたります。
@media only screen and (min-width 480px) {○○○}
↑この中に書いたものは、480px以上のサイズでスタイルが適用されます。
こちらの内容で解決されそうでしょうか？🙇♂️
返信ありがとうございます。
ただ、僕の説明が悪くてわかりずらかったと思いましたので、インスタの方にdmさせていただきました。返信してもらえるととても嬉しいです。
SCSS Live Sass Compilerでコンパイルすると front_flex_20230213074653.css みたいなファイルがたくさんできるのは何かの設定ミスでしょうか？よろしくお願いします。
コメントいただきありがとうございます🙇
ちょっと原因不明ですが、setting.jsのliveSassCompile.settings.formatsで設定書かれてるので、その辺確認したら原因わかるかも知れません💡
@@hirocode ありがとうございました。私もその辺を色々観ているのですが、引き続き試してみます。今後とも配信楽しみにしております。