/
githubmirror
/
brackets
Обзор
Документация
Войти
/
githubmirror
/
brackets
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
samples/ja/Getting Started/index.html
158 строк
14 KB
ArturOledzki
fix JP translation in comment tags (#13363)
27 июн 2017, 21:21
27 июн 2017, 21:21
0cb4716
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>BRACKETS をはじめる前に</title> <meta name="description" content="An interactive getting started guide for Brackets."> <link rel="stylesheet" href="main.css"> </head> <body> <h1>BRACKETS をはじめる前に</h1> <h2>まずはこのガイドからスタート</h2> <!-- <3 と JAVASCRIPT で作成 --> <p> Web デザインを認識する最新のオープンソースエディター、Brackets をご利用いただき、ありがとうございます。軽量でありながらパワフルなコードエディターでのビジュアルツールとエディターとの融合により、必要なときに必要なだけのサポートを利用することができます。 </p> <!-- Brackets とは何ですか？ --> <p> <em>Brackets は、新しいタイプのエディターです。</em> Brackets にはクイック編集やライブプレビューなど、他のエディターにはないユニークな機能が備わっています。Brackets は JavaScript、HTML および CSS で記述されています。つまり、ほとんどの Brackets ユーザーは、習得済みのスキルを使って、このエディターそのものを変更したり拡張したりできるということになります。実際、アドビ社内の開発チームも、毎日 Brackets を使用して Brackets の構築を進めています。主要機能の使用方法について、下記で詳しくご説明します。 </p> <!-- 自分のファイルで始めましょう --> <h3>Brackets のプロジェクト</h3> <p> Brackets を使用して独自のコードを記述するには、自分のファイルを格納したフォルダーを開きます。 現時点で開いているフォルダーが Brackets によって「プロジェクト」として処理され、そのフォルダー内のファイルのみがコードヒント、ライブプレビュー、クイック編集などの機能で使用されます。 </p> <samp> このサンプルプロジェクトを終了し、コードを編集する準備ができたら、左側のサイドバーのドロップダウンを使用してフォルダーを切り替えます。この時点で、ドロップダウンには「はじめに」が表示され、現在表示されているファイルが格納されたフォルダーが選択されています。ドロップダウンで「フォルダーを開く...」を選択して、使用するフォルダーを開きます。 ドロップダウンを使用して、このサンプルプロジェクトが含まれるフォルダーなど、以前に開いたフォルダーに切り替えることもできます。 </samp> <!-- HTML、CSS と JavaScript との関係 --> <h3>CSS と JavaScript のクイック編集</h3> <p> いくつものドキュメントを行ったり来たりして、コードの文脈を見失うようなことはもうありません。HTML ファイルの編集中にショートカットの <kbd>Command+E キーまたは Ctrl+E キー</kbd>を使用すると、クイック編集用のインラインエディターが開き、関連する CSS がすべて表示されます。 ここで CSS を調整して <kbd>Esc キー</kbd>を押せば、HTML の編集に戻ることができます。また、CSS ルールを開いたままにしておけば、HTML エディターの一部として使用できます。カーソルがクイック編集用インラインエディターの外にあるときに <kbd>Esc キー</kbd>を押すと、CSS ルールはすべて折りたたまれます。また、クイック編集には、ネストされたルールなど、LESS および SCSS ファイルで定義されたルールも備わっています。 </p> <samp> この機能を実際に使用するには、上部の <!-- <samp> --> タグにカーソルを合わせた状態で <kbd>Command+E キーまたは Ctrl+E キー</kbd>を押します。すると、上部に CSS クイック編集エディターが開き、適用する CSS ルールが表示されます。クイック編集は、クラスおよび id 属性にも使用できます。また、クイック編集は LESS および SCSS ファイルでも使用できます。 新規ルールも同じように作成できます。上部の <!-- <p> --> タグのいずれかをクリックし、<kbd>Command+E キーまたは Ctrl+E キー</kbd>を押します。そのとき既存のルールがなければ、「新規ルール」ボタンをクリックして <!-- <p> --> に新規ルールを追加できます。 </samp> <a href="screenshots/quick-edit.png"> <img alt="CSS クイック編集のスクリーンショット" src="screenshots/quick-edit.png" /> </a> <p> 同じショートカットを使用して、JavaScript の関数、カラー、アニメーションタイミング機能など、他のエレメントも編集できます。アドビでは、この機能を継続して強化していきます。 </p> <p> 現時点ではインラインエディターをネストすることはできませんので、クイック編集を使用できるのは、カーソルが「フルサイズ」のエディター内にある場合に限られています。 </p> <!-- ライブプレビュー --> <h3>HTML および CSS の編集結果をブラウザーでライブプレビュー</h3> <p> 私たちはずっと、保存とリロードの繰り返し作業に煩わされてきました。エディターで編集して保存し、ブラウザーに切り替えて更新してから、ようやく結果を確認できるという、あの作業です。 Brackets では、もうあの作業を行う必要はありません。 </p> <p> Brackets では、HTML や CSS のコード編集を行いながら、ローカルブラウザーに<em>ライブ接続</em>し、編集結果をリアルタイムでプレビューできます。ブラウザーベースのツールの中には、現時点でもこれと似たことが可能なものもありますが、Brackets の場合は最終的にコードをエディターにコピー＆ペーストする必要がありません。コードが実行されるのはブラウザー上ですが、コードがある場所は最初からずっとエディター内なのです。 </p> <h3>HTML エレメントと CSS ルールのライブハイライト</h3> <p> Brackets では、HTML や CSS の編集内容がどのようにページに反映されるかを、簡単に確認することができます。Brackets で CSS ルール上にカーソルを置くと、ブラウザー上でそのルールに対応するエレメントがすべてハイライト表示されます。これと同じように、HTML ファイルを編集しているときも、ブラウザー上でそれに対応する HTML エレメントがハイライト表示されます。 </p> <samp> お使いのコンピューターに Google Chrome がインストールされていれば、これを実際にお試しいただくことができます。Brackets ウィンドウの右上にある稲妻アイコンをクリックするか、<kbd>Command+Alt+P キーまたは Ctrl+Alt+P キー</kbd>を押します。HTML ドキュメントでライブプレビューが有効になっていれば、リンクされている CSS ドキュメントはすべてリアルタイムで編集可能です。 Brackets でローカルブラウザーとの接続が確立されると、アイコンがグレーから金色に変わります。 この状態で、上部の <!-- <img> --> タグにカーソルを合わせます。すると、Chrome 上で画像の周囲が青くハイライト表示されます。次に、<kbd>Command+E キーまたは Ctrl+E キー</kbd>を押して、定義済みの CSS ルールを開きます。 枠のサイズを 10 ピクセルから 20 ピクセルに変更するか、背景色を「透明」から「ホットピンク」に変更してみてください。Brackets とブラウザーが同時に動作していれば、この変更内容が瞬時にブラウザーの表示に反映されるのを確認できます。 </samp> <p class="note"> 現時点で Brackets のライブプレビューが対応しているのは、HTML と CSS のみです。JavaScript ファイルの場合、現行バージョンでは、編集内容を保存した時点で自動的にリロードされます。現在アドビでは、JavaScript のライブプレビュー対応を進めています。また、ライブプレビューの可能なブラウザーは Google Chrome のみですが、将来的には主要なブラウザーすべてでこの機能を利用できるようにしたいと考えています。 </p> <h3>クイックビュー</h3> <p> まだ 16 進数値または RGB 値に対応するカラーコードを覚えていなくても、Brackets なら使用されているカラーを正確に、しかもすばやく簡単に確認できます。CSS でも HTML でも、カラー値またはグラデーション上にカーソルを重ねるだけで、そのカラーやグラデーションが自動的に表示されます。画像の場合も同様で、Brackets エディターで画像リンク上にカーソルを重ねると、その画像のプレビューがサムネイルで表示されます。 </p> <samp> クイックビューを実際に使ってみるには、このドキュメントの上部にある <!-- <body> --> タグにカーソルを合わせます。その状態で <kbd>Command+E キーまたは Ctrl+E キー</kbd>を押すと、CSS クイック編集エディターが開きます。あとは、CSS 内でカラー値のどれかにカーソルを重ねるだけです。また、グラデーションに対してこの機能を使ってみるには、<!-- <html> --> タグで CSS クイック編集エディターを開き、背景画像の値にカーソルを重ねます。画像のプレビューを試す場合は、このドキュメントの前半に掲載されているスクリーンショット画像にカーソルを重ねてみてください。 </samp> <h3>拡張機能でさらに補強</h3> <p> Brackets に組み込まれた優れた機能に加え、拡大を続ける大規模なコミュニティで、デベロッパーらが何百もの便利な拡張機能を構築しています。Brackets にない機能を必要としたとき、ほぼ確実に構築済みの拡張機能が見つかります。使用可能な拡張機能の一覧を参照または検索するには、<strong>ファイル／拡張機能マネージャー</strong> を選択し、「入手可能」タブをクリックします。使用する拡張機能が見つかったら、その横の「インストール」ボタンをクリックします。 </p> <!-- ご意見をお聞かせください --> <h2>Brackets プロジェクトに参加</h2> <p> Brackets はオープンソースのプロジェクトです。世界中の Web 開発者が、優れたコードエディターの構築に貢献しています。さらに多くの人々が、Brackets の拡張機能の構築に携わっています。 ぜひ、このプロジェクトについてご意見・アイデアをお寄せください。プロジェクトへの直接的なご参加もお待ちしております。 </p> <ul> <li><a href="http://brackets.io">Brackets.io</a></li> <li><a href="http://blog.brackets.io">Brackets チームのブログ</a></li> <li><a href="https://github.com/adobe/brackets">GitHub の Brackets ページ</a></li> <li><a href="https://brackets-registry.aboutweb.com">Brackets 拡張機能レジストリ</a></li> <li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li> <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets デベロッパーのメーリングリスト</a></li> <li><a href="https://twitter.com/brackets">@brackets on Twitter</a></li> <li>以下の IRC で、Brackets デベロッパーと Brackets についてチャット：<a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets on Freenode</a></li> </ul> </body> </html> <!-- [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] [:::::::::::::: ::::::::::::::] [:::::::::::::: ::::::::::::::] [::::::[[[[[[[: :]]]]]]]::::::] [:::::[ ]:::::] [:::::[ ]:::::] [:::::[ ]:::::] [:::::[ ]:::::] [:::::[ CODE THE WEB ]:::::] [:::::[ http://brackets.io ]:::::] [:::::[ ]:::::] [:::::[ ]:::::] [:::::[ ]:::::] [:::::[ ]:::::] [::::::[[[[[[[: :]]]]]]]::::::] [:::::::::::::: ::::::::::::::] [:::::::::::::: ::::::::::::::] [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] -->