HTMLやCSSをどんどん書こう! Brackets基礎講座
4.5 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
36 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTMLやCSSをどんどん書こう! Brackets基礎講座 to your Wishlist.

Add to Wishlist

HTMLやCSSをどんどん書こう! Brackets基礎講座

オープンソースのテキストエディタである「Brackets」を使って、手軽にマークアップ(コーディング)しよう!
4.5 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
36 students enrolled
Last updated 9/2016
Japanese
Learn Fest Sale
Current price: $10 Original price: $25 Discount: 60% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Web制作に特化したテキストエディタである「Brackets」を使用する環境を整えることができます。
  • Brackets の基本操作を身につけることで、手軽で効率の良い HTML・CSS のマークアップ(コーディング)が行なえるようになります。
  • 拡張機能を追加する方法を身につけることで、自分好みのツールにカスタマイズすることができるようになります。
View Curriculum
Requirements
  • あくまでも Web制作を行なうためのツールである「Brackets」の導入方法 および 基本的な操作方法を学ぶ講座となっていますので、HTML や CSS の解説などは行なっておりません。もし HTML などのスキルをお持ちでない方は 別途 各種講座や書籍などで学習されることをオススメいたします。
  • ただし、これから HTML や CSS のスキルを身につける方が、そのための学習環境準備の一環として 当講座を受講いただくことは可能です。
  • 講座内で使用をする教材( brackets_sozai_data.zip )は、最初の講義「講座概要と受講準備」でダウンロードしていただけます。
  • Bracketsでは、制作中のWebページをプレビューする機能を実行する際にWebブラウザー「Google Chrome」を使用します。当講座のビデオレクチャーと同様の操作を行ないたい場合は、Google Chromeをインストールしておきましょう。
Description

Webページを作成する際には HTML や CSS を記述する(マークアップ・コーディング)必要があります。

その作業は基本的には文字入力であることから、Windows や Mac に標準装備されている「メモ帳」や「テキストエディット」を使って行なっている方もいらっしゃるでしょう。

ただ 作業効率などを考えると、入力補助やファイル管理などの機能を併せ持った「Sublime Text」や「Dreamweaver」などのテキストエディタ・オーサリングツールなどを使用されている方も多いと思います。

そんな Webページ制作に特化したテキストエディタの1つに 近年 加わって来たのが「Brackets」というテキストエディタです。

このテキストエディタは、様々なクリエイティブツールを持つAdobe社からリリースされていながら、オープンソース製品として無料で利用出来るツールとなっています。

また、機能を絞った分 動作が軽快であったり、インストール後 すぐに日本語化された状態で使用出来るなど、様々なメリットも持っています。

この講座は、Bracketsの導入方法から基本的な操作の仕方を80分弱のビデオレクチャーを通じて 学んでいただけるものとなっています。

ぜひ みなさんのWeb制作の際のツールの1つに Brackets を加えていただき、たくさんのWebページを生み出して行っていただければと思います。

Who is the target audience?
  • 「Webデザイナー」や「Webコーダー」などのお仕事をなさっている方に、作業を効率化するツールの1つとして Brackets を加えていただければと思います。
  • 「Webデザインを勉強中の方」や「これから実務に従事する方・従事したての方」に、手軽なマークアップを行なうことで たくさんのWebページを制作してもらい、たくさんの制作経験を積んでいただければと思います。
  • 趣味でWebページ作りを行なっているが、お金をかけずに制作環境を整えたい方に受講いただければと思います。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 9 Lectures Collapse All 9 Lectures 01:17:18
+
Brackets基礎講座
9 Lectures 01:17:18
  • Bracketsとは
  • Bracketsのインストール
  • Bracketsの起動
Preview 07:42

  • 既存のフォルダを登録し、ファイルを開く
  • コードを折りたたむ
  • 開始タグと終了タグをハイライト表示する
Preview 08:17

  • テーマの設定/変更
  • フォントの拡大・縮小
  • 分割ビューの設定方法
画面表示に関する機能について
10:19

  • HTMLのクイック編集(HTMLファイル表示時)
  • CSSの色のクイック編集(CSSファイル表示時)
  • 画像ファイルのホバービュー
既存ファイルを編集する機能について
09:16

  • ライブプレビュー機能(対応 Webブラウザー「Google Chrome」)
Webブラウザーでのプレビュー機能について
06:42

  • ファイルメニューからの新規ファイルの作成
  • ファイルを保存
  • サイドバーからの新規ファイルの作成
新規ファイルの作成について
08:06

  • HTML5の基本的な記述
  • ライブプレビューしながらコードを記述
マークアップ(コーディング)の方法について(1)
09:32

  • HTML5やCSSの基本的な記述
  • ライブプレビューしながらコードを記述
マークアップ(コーディング)の方法について(2)
06:53

  • 拡張機能マネージャーについて
  • テーマのインストール
  • emmetの機能拡張のインストール
機能の追加について
10:31
About the Instructor
CCF アカデミー
4.8 Average rating
28 Reviews
85 Students
5 Courses
ウェブデザイン / IT / ソフトウェア

『 Design of CreativeWork 』
 ー クリエイティブワーク( 仕事・人・スキル・ワークフロー )の最適化 ー

クリエイティブセンター福岡(CCF)は、福岡全体で SOHO/フリーランサーや制作会社が 仕事や教育を通じて大きな有機的に繋がっている状態を構築し、クリエイティブワークの最適化を図ります。
そして、CCFアカデミーでは オンライン/オフラインの教育コンテンツにより、クリエイターやマーケター、プランナーの支援をすることで、個人の教育サポート、ひいては クリエイティブ業界全体のサポートを行います。