読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

Adobe Brakets

文字を入力するツール

Adobe Brakets

http://brackets.io/

ダウンロード
  • 「Download Brackets 1.7」のリンクをクリックしてダウンロード


http://brackets.io/

インストール
  • Windowsの場合「.msi」、Macの場合は「.dmg」をダブルクリックしてインストーラーを起動しインストールます
  • Bracketsを起動します
  • インストール後の画面(文字サイズは大きく変更後)


画面解説

  1. メニューバー(一般的な機能にアクセスする際や設定を行う際に使用します)
  2. サイドバー(主にプロジェクトのファイルツリーや作業中のドキュメントの表示など)
  3. ツールバー(ライブプレビュー、拡張機能マネージャー、Extractなど)
  4. ステータスバー(シンタックスの切り替え、Lint結果の表示、インデント設定など)
プロジェクトのルート化
  • Dreamweaverでの「サイト管理」に相当
  • ローカルサーバーにも対応しており、プロジェクト毎にローカルホストURLを入力、ローカルサーバー側にて設定も行うとPHPやSSIも動かす事が出来ます
  • 「Getting Started」をクリック


  • Cドライブ直下の自分の名前のフォルダーを選択します
  • 「neko」フォルダーを選択した場合


基本機能


インデントの変更
  • 授業ではインデントを使用しません
  • 「デバック→環境設定ファイルを開く」で「brackets.js」の一番上の行に「"smartIndent": false,」を追記します
  • Brackets再起動後に、インデントは設定されない状態で記述できます
プレビュー
  • 一度ライブプレビューを起動すると、Bracketsを終了するまで「Node.js」によるローカルサーバーが起動しています



試験ライブプレビュー

  • 一度ライブプレビューをしたURLを他のブラウザにコピーしてプレビューをしても「試験ライブプレビュー」にチェックが入っていると、リアルタイムに変更内容を反映させることができます(メモリの消費量が増えるため注意)
クイックエディット(Ctr+E)
  • クイックエディットは主に4種類あります
  • ショートカットは全てCtrl+Eで共通で、実行する場所によりそれぞれのクイックエディットが展開します
  • 編集後、再びCtrl+Eで閉じるか、「☓」もしくはEscキーで閉じる


HTMLのクイックエディット

  • id名/class名/HTMLタグ名上で実行すると適用されているスタイルを拾い、その場で編集出来ます
  • 選択しているセレクターに対して「新規ルール」を作成することもできます


色指定のクイックエディット

  • EX/RGB(A)/HSL(A)にて色指定されている箇所で実行するとカラーパレットが開きます
  • 16進数の値を大文字表示したい場合は、「デバック→環境設定ファイルを開く」で「brackets.js」の一番上の行に「"uppercaseColors": true,」を追記します



CSSアニメーションのクイックエディット

  • CSS/LESS/SCSSにおいて、cubic-bezier()またはsteps()にてアニメーション定義されている箇所で実行すると、ベジェ曲線による編集画面が開きます



JavaScript関数のクイックエディット

  • JavaScript関数名の箇所で実行すると、その関数の内容を展開します


ホバークイックビュー
  • 画像・色指定の2種類のクイックビューがあり、それぞれ指定の箇所にカーソルを置くとポップアップで情報を表示してくれます。
  • 特に画像はホバーだけでwidth/height値を確認できる




クイックドキュメント
  • CSSプロパティ上でCtrl+Kを押下するとドキュメントを表示
  • 内容は「Web Platform Docs」から取得しているため、すべて英文となります



複数選択
  • 複数選択→Ctrl+B
  • 1つスキップ→Ctrl+Shift+B
  • カーソルを追加→Shift+Alt+↑ or ↓
  • 任意の箇所にカーソルを追加→Ctrl+左クリック
  • 矩形選択→Alt+マウスドラッグ



2ペイン表示
  • 左右間の入れ替えは、サイドバーからドラッグで行います
  • タブ表示は、Documents Toolbarというプラグインを使います



デバッグ

  • 「"livedev.multibrowser": true」を追加



ライブプレビュー(クロスブラウザ対応)
  • プラグインを入れなくてもデフォルトでライブプレビューが出来ます(Chrome必須)
  • HTML/CSSはファイル保存の必要もなくリアルタイムに、SASS(ターミナルでwatchをかける必要有)/JSはファイル保存時に変更を反映


広告を非表示にする