毎日通知を受け取り学習習慣を作ろう!
通知設定をすると毎日夜8時に通知を受け取れます。

※PCとAndroid環境におけるChromeとFirefoxにのみ対応

Shopify アドバンスコース 新カリキュラム:基礎編

コード編集の基礎を学習しよう

DAY 26

【追加】オリジナルセクションを作ろう -基礎編-

ここでは、今まで学んできたLiquidの基礎知識を用いて「オリジナルセクション」を実装していきます。

今回実装していただくセクションは

  • NEWS(お知らせ)セクション

になります。

DAY26〜29 基礎から応用まで4日間かけて学んでいきます。

  1. DAY26 オリジナルセクションの基礎
  2. DAY27 セクションの作り方
  3. DAY28 セクションブロックの作り方
  4. DAY29 テーマブロックの作り方

セクションは、Shopifyのテーマの構造でとても重要な部分になります。

ですので、オリジナルデザインのセクションを作成することができれば、基本的にどんな案件にも対応できるようになります。

ただ単純にデザインを再現できるだけではなく、Shopifyの仕様・運用・保守を考えた設計が大事になってきます。

設計から考えることができるようになると、単価もどんどんアップできますので、ぜひ習得してくださいね👍

DAY26で学んでいく項目としては、5つです。

  • オリジナルセクションの基礎
  • 動的セクションと静的セクションの違い
  • セクションのベースの作り方
  • CSS設計
  • セクションIDの使い方 (上下の余白)

TIPS

01. セクションの基礎

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

02. 開発環境を準備しよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

03. オリジナルセクションのベースを作成しよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

04. オリジナルセクションのCSS設計を学ぼう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

05. スペーサーを作ってみよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

06. 上下の余白を設定しよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

07. 本番環境へ反映させよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる