inflearn logo
知識共有
inflearn logo

SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma

SCSS(SASS)とFLEX Layoutを実戦で完璧に活用します!Figmaでウェブサイト全体のメインページおよび主要なサブページのUIをデザインし、一貫性のあるクラス名とともにHTMLワイヤーフレーム構造を作成してパブリッシングまで完了させる、体系的なレスポンシブウェブサイトプロジェクト制作過程です。合計41時間以上のカリキュラムの中で、核心理論および実務活用能力を十分に習得し、PC・モバイル・タブレット対応のレスポンシブレイアウトを設計・制作しながら、レスポンシブウェブプロジェクトに関する経験とノウハウはもちろん、jQueryの核心理論および実務活用能力まで大幅に向上させることができます。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Sass
Sass
scss
scss
JavaScript
JavaScript
jQuery
jQuery
HTML/CSS
HTML/CSS
Sass
Sass
scss
scss
JavaScript
JavaScript
jQuery
jQuery

お知らせ

7 件

  • codingworks님의 프로필 이미지

    [講義オープン]モバイルWebパブリッシングポートフォリオ with CSS Nesting

    19ページ、合計22種類のモバイルレイアウトを制作しながら、パブリッシャー就職とパブリッシャー実務で最も競争力のあるモバイルWeb制作能力を向上させることができます。パブリッシャーとして、モバイルウェブを制作するためのほとんどすべての制作方法とノウハウを堪能できます。

    モバイルWebパブリッシングクラスで最も強みのある部分であるHTMLワイヤフレームの詳細な書き方をすべてのページ一つ一つ詳細に説明します。講義により、HTMLワイヤフレームの制作能力が大幅に向上します。特にCSSネスト方法を十分に学ぶことができます。 Flexレイアウトを中心に中上級CSS実戦能力を充分備えています。

    講義紹介ショートカット:https: //inf.run/yfNHF

    css-nesting-content-01.png

    0
  • codingworks님의 프로필 이미지

    CodingWorks-Main-Cover

    Tailwind CSS本番ポートフォリオパブリッシングオープン

    実戦例制作だけでTailwind CSS実務能力向上!

    Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。

    Webパブリッシュと開発者にとって、就職と転職のために大きな助けになると思います。

    tailwind-logo

     

    講義紹介を見に行く: https ://inf.run/tHwCD

    0
  • codingworks님의 프로필 이미지

    こんにちは。コーディングワークスです。

    今回、コーディングワークスがHTML+CSS+JSポートフォリオ実戦パブリッシング(シーズン3)講義がオープンしました。

    HTML+CSS+JS 実績ポートフォリオ シーズン3は、中上級パブリッシングのためのパブリッシング最新理論例30個と45種類以上の様々な種類の実戦例制作過程で構成されています。合計29時間程度の講義時間と同じくらい忠実な内容と体系的な理解を助ける説明で制作されたパブリッシングポートフォリオ実戦制作映像を学習できるようになります。

    🚩HTML +CSS+JSポートフォリオ本番パブリッシング(シーズン3)講義紹介を見る:https: //inf.run/WwtUv

    season3-cover.png

     

    0
  • codingworks님의 프로필 이미지

    こんにちは。コーディングワークスです。

    今回、コーディングワークスが心血を傾けて作ったTailwind CSS講義がオープンしました。
    コーディングワークスが作成したTailwind CSSレッスンは、「Tailwind CSSで開発者が作るクールなUIスタイリング」というタイトルで作成したように、開発者がパブリッシングをするときにパブリッシャーに劣らずきれいなUIスタイリングができる部分に最も焦点を当てました。

    [Tailwind CSSで開発者が作るクールなUIスタイリング]講義は現在、最もホットなフレームワークであるTailwind CSSを理論から本番反応型ウェブサイトまで19時間以上の授業時間で忠実に扱っています。しかしその講義は時間も長く、講義も良いと自負します。 30分間の詳細な取り扱いにより、CSS理論が不足している人にCSS理論を忠実に学習することができます。

    image Tailwind CSSはCSS Frameworks Rankingで現在まで着実に人気を享受しており、満足度1位をしているTailwind CSSは最近世界で最もホットなCSSフレームワークです。ホットな理由の中で最も代表的なのがまさにユーティリティクラスを使った創造的なスタイリングができ、また、良いクオリティのデザインを作るための作業時間がかなり早いという点だと考えられます。

    理論の授業だけでなく、Tailwind CSSで作る実践例開発者のキャリア履歴書&ポートフォリオの紹介

    講義紹介と無料講義見に行くhttps ://inf.run/pjqKk


    image

    0
  • codingworks님의 프로필 이미지

    こんにちは。コーディングワークスです。
    シームレスなSCSS(SASS)+ FLEX本番レスポンシブWebプロジェクトの公開作業のために、SCSSのコア理論(Essential Theory)を更新しました。 SCSSコア理論(Essential Theory)映像は5時間9分にわたってSCSSのほぼすべての理論を扱っているので、SCSSコア理論を十分に深く深めることができます。

    ▼追加されたセクションと映像内容(2023.07.06)

    セクション 4. SCSS コア理論 (Essential Theory)

    1. SCSSコア理論(01) - セレクタのネスト(Nesting)

    2. SCSSコア理論(02) - 親セレクタ参照(&)と注釈処理

    3. SCSSコア理論(03) - 親セレクタリファレンス(&)アプリケーション

    4. SCSSコア理論(04) – 代表的なCSSセレクタSCSSで作成

    5. SCSSコア理論(05) - 親セレクタリファレンス(&)仮想クラス

    6. SCSSコア理論(06) - 親セレクタ参照(&)属性選択子

    7. SCSSコア理論(07) - 親セレクタの入れ子になる@at-root

    8. SCSSコア理論(08) – プレフィックスを使用してCSS属性を自動生成する

    9. SCSSコア理論(09) – 仮想クラス:isでセレクタの重複を減らす

    10. SCSSコア理論(10-1) - 変数(Variables) 01

    11. SCSSコア理論(10-2) - 変数(Variables) 02

    12. SCSSコア理論(10-3) - 変数(Variables)有効範囲とCSS変数宣言

    13. SCSSコア理論(11-1) - 外部ファイルのインポート@import

    14. SCSSコア理論(11-2) - @importに分割されたファイルを読み込む

    15. SCSSコア理論(12) - 演算子(Operations), 出力ウィンドウを取り除く

    16. SCSSコア理論(13-1) - グループを宣言する@mixin、グループを使う@include

    17. SCSSコア理論(13-2) - @mixinと@includeを適用する

    18. SCSSコア理論(13-3) - @mixinと@includeを活用したボタンデザイン

    19. SCSSコア理論(13-4) - @mixinのパラメータ(引数)を@includeとして使用する

    20. SCSSコア理論(14) - セレクタ属性を取得する@extend

    21. SCSSコア理論(15) - @extendで使用するプレースホルダーセレクタ%

    22. SCSSコア理論(16) - 多変数宣言、組み込み関数(map-get)

    0
  • codingworks님의 프로필 이미지

    受講評イベント😋

    その講義に受講評を書いてくださる方に限り、SCSS(SASS)+FLEXコア理論及び活用例ファイルを提供します。提供されるPDF教材とファイルはパブリッシング作業と今後の実務で作業する時のために良いリファレンスになります。

    受講評は受講生分が該当講義を見て感じた率直な受講評を書いてください。受講評価を作成し、作成した受講評価をキャプチャして下記のメールでお送りください。

    受講評イベントは期間限定で講義オープン割引期間4週間行われます。

    ■期間:4週間(2023年7月1日~7日28日)
    ■Eメール: webnlife@naver.com

    🚩提供ファイル

    - SCSS(SASS)コア理論教材(PDF、67ページ)および完成本活用例
    - FLEXコア理論教材(PDF、36ページ)と完成本の活用例

    ※完成本活用例は、該当教材に出てくるすべての例を作った完成本です。
    ※ SCSS(SASS)+FLEX コア理論教材及び提供ファイル詳細紹介を見る:https: //inf.run/qzdx

    0
  • codingworks님의 프로필 이미지

    こんにちは。コーディングワークスです。
    今回新しく講義がオープンしました。

    SCSS(SASS)とFLEX Layoutを実戦に完璧に活用します!ピグマでウェブサイト全体のメインページとコアサブページUIを設計し、一貫性のあるクラスネームとともにHTMLワイヤフレーム構造を作成し、パブリッシングまで完了する体系的なレスポンシブWebサイトプロジェクトの制作過程です。合計35時間以上のプロセスの中で、コア理論と実務活用能力を十分に習得し、PC - モバイル - タブレット対応のレスポンシブレイアウトを設計および製作しながら、レスポンシブWebプロジェクトの経験とノウハウはもちろん、JQueryのコア理論と実務活用能力まで大幅に向上させます。

    🚩講義紹介を見に行く: https://inf.run/TH3b

    image 「SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma講義で体系的なレスポンシブWebサイトプロジェクト制作能力完成」

    SCSS(SASS)とFLEXを実戦に完璧に活用します!

    Point 1.ピグマ(Figma)でSCSS(SASS)+FLEXウェブサイトUIデザイン製作
    Point 2. SCSS(SASS)+FLEX ウェブサイト HTML ワイヤフレーム 全てのページ 詳細な製作
    Point 3. SCSS(SASS)+FLEXを活用した多様な多数のWebページパブリッシング制作
    Point 4. PC、モバイル、タブレット対応レスポンシブレイアウト設計、製作、完璧なパブリッシング作業まで
    Point 5.レスポンシブ Web プロジェクトを作成するためのジェイクエリーのコア理論と実務活用能力

    コーディングワークスがこれまで数多くのオフライン学園と個人ポートフォリオホームページ制作過程で授業した中上級パブリッシング制作ノウハウが盛り込まれています。を最大限に引き上げることができます。
    完成後、さらに向上した中上級レスポンシブWebパブリッシング能力を持つことになると確信しています!

    image

    0

期間限定セール、あと7日日で終了

¥10,814

29%

¥15,396