Less ~Webデザイン効率化、一つの方法~

Less ~Webデザイン効率化、一つの方法~ -1回目-

第1回:2016年8月19日公開

60min

Less ~Webデザイン効率化、一つの方法~ -1回目-

おためし受講する(5分)

コース概要

Lessとは、Webデザイン用のCSSを出力できるツールです。
CSS単独使用に比べ早く簡潔に、デザインを指定することができます。
ここではLessの利用手順と、そのメリットについて学びます。
また、実際にWebデザインにLessを適用した場合のメリットと注意点を学びます。

1回目では、Lessとは何か、WebサイトデザインとLessとはどう関連していくのかを学びます。

編集環境としては、今回はVisual Studio Codeを使います。LessをVisual Studio Codeで編集する仕組みについても学ぶことができます。

2回目は、Lessで使用する基本的な記法や、書き方について学びます。
Lessを使った実践的テクニックについて学びますので、ここで実際にLessを使ったWebデザインが行えるようになります。

3回目は、Lessの特徴的な記法である、mix-inについて学びます。
この授業を通して、Lessをフル活用したWebデザインが行えるようになります。

最終回は、Lessをコマンドプロンプトやサーバー上など、Visual Studio Code以外で実行する方法を学びます。
それぞれの環境、エディタに合わせたLessの使い方を覚えることで、より自分の作業環境に最適なLessの使い方ができるようになります。

担当の先生

パーソナリティ

  • 徳田 葵

    徳田 葵

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

参加したい受講生 : 783

タグ

サンプルファイル

授業で使用するファイル

※授業以外での利用は禁止します。

月額980円で、4,600本以上の授業が見放題

授業リスト

Less ~Webデザイン効率化、一つの方法~ -1回目-

2016年8月19日公開

60min.

1回目では、Lessとは何か、WebサイトデザインとLessとはどう関連していくのかを学びます。

編集環境としては、今回はVisual Studio Codeを使います。LessをVisual Studio Codeで編集する仕組みについても学ぶことができます。

スライド資料

Less ~Webデザイン効率化、一つの方法~ -2回目-

2016年8月19日公開

60min.

スライド資料

Less ~Webデザイン効率化、一つの方法~ -3回目-

2016年8月27日公開

60min.

3回目は、Lessの特徴的な記法である、mix-inについて学びます。
この授業を通して、Lessをフル活用したWebデザインが行えるようになります。

 

※※サンプルファイルがあります。※※
 
「例題」フォルダは授業内の実習で使うファイルです。
「スライドで使用したLessファイル」フォルダは、今回の授業内スライドに掲載されているLessファイルです。
 
事前にご準備の上、授業をお受けください。

スライド資料

Less ~Webデザイン効率化、一つの方法~ -4回目-

2016年8月27日公開

60min.

コース最終回となる今回は、Lessをコマンドプロンプトやサーバー上など、Visual Studio Code以外で実行する方法を学びます。
それぞれの環境、エディタに合わせたLessの使い方を覚えることで、より自分の作業環境に最適なLessの使い方ができるようになります。

スライド資料

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×