Sassを使って便利にレスポンシブ対応!メディアクエリの指定方法。

Sass(サス)を使って、便利にレスポンシブ対応する方法について紹介しています😆❗️
🎥 この動画の構成 🎥
00:00 Sassを使ったレスポンシブ方法
00:32 基本ファイルの作成
01:39 プラグイン紹介
02:06 Sassのコンパイル
02:51 Sassのファイル構成
05:50 レスポンシブの指定方法
✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
kzread.info?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 🎧
------------------------------
Happy and Joyful Children by Free Music • Happy Children Backgro...
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/2PV1WMi
Music promoted by Audio Library • Happy and Joyful Child...
------------------------------
#sass #htmlcss #css #コーディング #programming #プログラミング

Пікірлер: 8

  • @razbliut0
    @razbliut06 ай бұрын

    大学時代ぶりにサイト制作をしようと思い、こちらの動画を見つけました。 レスポンシブが苦手なので、このような方法があったことに驚きです...! 素晴らしい動画をありがとうございました。

  • @hirocode

    @hirocode

    5 ай бұрын

    参考にしていただけて幸いです☺️♪ こちらこそ嬉しいコメントいただきありがとうございます🙇‼️

  • @catpolice2000
    @catpolice20008 ай бұрын

    僕にはだいぶ難しい内容でしたが、次の制作からsass導入して挑戦してみます!

  • @hirocode

    @hirocode

    8 ай бұрын

    sass使うとかなり楽になるのでぜひ使ってみてください😆❗️

  • @ttkk3248
    @ttkk32483 ай бұрын

    😮勉強なります。ありがとうございます。

  • @hirocode

    @hirocode

    2 ай бұрын

    嬉しいコメントいただきありがとうございます🙇❗️

  • @user-qn9gi3of2g
    @user-qn9gi3of2g8 ай бұрын

    実際の現場でのdartsassのコンパイルはnpm使うことが多いのかな?

  • @hirocode

    @hirocode

    8 ай бұрын

    環境揃えるためにnpmが多いと思います😆❗️