From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../ja/orphaned/mdn/editor/source_mode/index.html | 137 +++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/ja/orphaned/mdn/editor/source_mode/index.html (limited to 'files/ja/orphaned/mdn/editor/source_mode') diff --git a/files/ja/orphaned/mdn/editor/source_mode/index.html b/files/ja/orphaned/mdn/editor/source_mode/index.html new file mode 100644 index 0000000000..b78db66714 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/source_mode/index.html @@ -0,0 +1,137 @@ +--- +title: ソースモード +slug: MDN/Editor/Source_mode +tags: + - Guide + - Intermediate + - MDN Meta + - editor + - ガイド +translation_of: MDN/Editor/Source_mode +--- +
{{MDNSidebar}}
+ +

MDN のエディターには、ソース編集モードへ切り替えられる目立つボタンがあります。このモードでは、編集している本文の基礎となる HTML を見ることができます。このガイドでは MDN の wiki コンテンツのソース編集モードで何ができるか、これで何をすべきか、また最も重要なこととして何をすべきでないのかを理解するのに役立ちます。

+ +
+

ソースモードを使用することを考える前に、使用しないことを私たちが強く主張していることにご注意ください。やっていることがスタイルガイドに合わせるための単純なことでない限り (残念ながらまだソースモードでないと作成できないものが必要とされています)、ソースモードを使用する必要はないはずです。下記の{{anch("Warnings and caveats", "警告")}}をご覧ください。

+
+ +

ソースモードにアクセスする

+ +

ソースモードに移るのは簡単です。エディターツールバーの左上隅にあるソースボタンをクリックしてください。

+ +

ソースモードボタンが強調表示されたエディタツールバーの部分的なスクリーンショット

+ +

整形や画像などによって、ソースは WYSIWYG コンテンツより (縦方向に) 短く、ソースを編集ボックス内で見つけるのに上にスクロールしないといけないことがよくあります。

+ +

警告と抗議

+ +

上述の通り、ソースモードを使う必要があることは滅多にありません。ソースをいじらないとできないことは少ししかありません。最終的には編集インターフェイスがこれを扱えるように更新されるでしょう。

+ +

MDN 貢献者ガイドのどこにも記述されていないことはソースに追加してはいけません。つまり、

+ + + +

ソースモードで作業する

+ +

ソースモードでは、 Wiki ページを構成する生の HTML を編集できます。エディターでの制約を受けなくなりますが、行ったすべての作業がスタイルガイドに適合していて、安全かつ確実であることを確認してください。

+ +
+

ソースモードでの編集時間を長くするのではなく、微修正のみを行うべきです。

+
+ +

残念ながら、Tab キーは、ソースモードでは動作しません。 Tab キーを使用する場所では、半角スペースを 2 つ挿入してください。

+ +

MDN が許可しない HTML 要素や属性を使用すると、ドキュメントが保存されるときに HTML から削除されます。加えて、ドキュメントの HTML は、適度に読みやすく一貫性を保つために再整形されます。

+ +

ソースモードを正しく使用する

+ +

MDN のスタイルガイドに従う唯一の方法は、いくつかの具体的な例でソースモードの使用を頼ることです。 このセクションでは、これらのケースと、他のものを壊すことなくこれらの機能を適切に実装する方法について説明します。

+ +

サンプルコードの行を強調表示する

+ +

ツールバーのブロックグループの PRE または 構文ハイライター ボタンを使用して設定されたサンプルコードスニペットのブロック内で、特定のコード行に特別な注意を向けることができます。これを行う唯一の方法は、ソースモードを開いてコードを含む {{HTMLElement("pre")}} ブロックを探し、<pre> タグの {{HTMLAttrxRef("class")}} 属性を編集して、次のような highlight コンポーネントを組み込むことです。

+ + + +
"hightlight[" <line-number-list> "]"
+
+Where:
+<line-number-list> = [ <line-number> | <line-range> ]#
+<line-range> = <line-number> - <line-number>
+<line-number> = <number-token>
+ +

たとえば、既存のタグが <pre class="brush: js"> で、4行目と7行目にハイライトを追加する場合は、それを <pre class="brush:js; highlight:[4,7]"> に変更します。

+ +

より完全な例を見てみましょう。

+ +
+ + + + + + + + + + + + + +
ハイライト前ハイライト後
+ 
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var path1 = new Path2D();
+path1.rect(10, 10, 100, 100);
+
+var path2 = new Path2D(path1);
+path2.moveTo(220, 60);
+path2.arc(170, 60, 50, 0, 2 * Math.PI);
+
+ctx.stroke(path2);
+
+ +

ここで、 {{HTMLElement("pre")}} タグは <pre class="brush: js;">

+ 		+ 
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var path1 = new Path2D();
+path1.rect(10, 10, 100, 100);
+
+var path2 = new Path2D(path1);
+path2.moveTo(220, 60);
+path2.arc(170, 60, 50, 0, 2 * Math.PI);
+
+ctx.stroke(path2);
+ +

ここで <pre> タグは <pre class="brush: js; highlight:[4,7]">に変更されました。

+
+
+ +

ツールバーボタンにないスタイル

+ +

私たちは MDN で使用するいくつかのスタイルを持っていますが、通常のユーザーインターフェイスでは使用できません。 幸いにも、これらはあまり頻繁には使用されません。 いくつかの例があります。

+ + -- cgit v1.2.3-54-g00ecf