32:[] 31:{"title":"D3 チュートリアル 02 : 基礎編","cells":[{"id":0,"value":"md`# D3 チュートリアル 02 : 基礎編\n\nこれはスコット・マレイのD3チュートリアルをもとに編集しています。\nD3の最新バージョン（v5）とObservableに対応するように大幅に加筆修正しています。\n\n- [D3 Tutorials](http://alignedleft.com/tutorials/d3) by Scott Murray\n- ベースの日本語訳：h.sakai \n- 編集：[@sugi2000](https://twitter.com/sugi2000)\n\nD3 を使うためには以下の概念を理解しておく必要があります。\n\n- HTML\n- CSS\n- JavaScript\n- デベロッパー・ツール\n- SVG\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## HTML\nHTMLは、Webページのコンテンツを作成するマークアップ言語です。\n文書を構造化するために要素をあらわすタグで囲んで表記します。\nつぎのHTMLは基本的なHTMLの例です。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`\n\\`\\`\\`html\n\n \n \n ページのタイトル\n \n \n

ページの見出し

とても面白い内容

\n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`Observableの場合、HTMLは

html\\`\\`

のバッククォートの内側に直接記述します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"html_example = html`\n

ページの見出し

HTMLの例です。

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`----\n### DOM \n\nDOM（ドキュメント・オブジェクト・モデル）は HTMLの階層構造を表します。\nそれぞれの要素は、<タグ>に囲まれています。\n要素間の相対的な関係は、人間関係のように、親（ parent ）、子（ child ）、兄弟( sibling ）、先祖（ ancestor ）、子孫（ descendant ）などと表します。\n上の HTML の例では、 body は、子である h1 と p（両者は互いに兄弟）の両方の親要素となります。\nまた、ページ上内のすべての要素は html の子孫になります。\n\nウェブブラウザは、DOMを解析してページコンテンツを理解しています。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`----\n### CSS\nCSS（カスケーディング・スタイル・シート）は、HTML ページの見た目のスタイルを設定するために使います。次のコードは簡単な CSS スタイルシートの例です。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`\n\\`\\`\\`css\nbody {\n background-color: white;\n color: black;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`CSS のスタイルは**セレクタ**と**規則**の組み合わせです。セレクタはスタイルを適用するための要素を指定します。 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`\n\\`\\`\\`css\nh1 /* レベル１の見出しを選択 */\np /* パラグラフを選択 */\n.caption /* classがcaptionの要素を選択 */\n#subnav /* IDがsubnavの要素を選択 */\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`ルールでは要素の属性を指定します。属性を列挙してスタイルを構成します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`\n\\`\\`\\`css\ncolor: pink;\nbackground-color: yellow;\nmargin: 10px;\npadding: 25px;\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`セレクタとルールを、波かっこでつないで記述します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`\n\\`\\`\\`css\np {\n font-size: 12px;\n line-height: 14px;\n color: black;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`D3 は操作する要素を指定するために CSS スタイルのセレクタを使います。そのためセレクタの使い方を理解しておくことが大切です。\n\nCSS は、次のようにドキュメントの head 要素に直接記述することができます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`\n\\`\\`\\`html\n\n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`または拡張子「.css」の外部ファイルに記述し、ドキュメントの head 要素でそのファイルを参照することもできます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`\n\\`\\`\\`html\n\n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`Observableの場合、CSSは、\\`\\`\\`html\\`\\` \\`\\`\\`の中に直接記述すると適用されます。\n\n下の例では、ページ全体のフォントと文字色、pre要素の背景色を指定しています。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"style = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`----\n### JavaScript\n\nJavaScript は動的なスクリプト言語です。ブラウザがページを読み込んだ後にページを変更することができます。\n\nスクリプトは、次のように script タグで囲んで HTML 内に直接記述することができます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`\n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`または独立したファイルに記述し、HTML のどこかで（一般的には head 内で）ファイルを参照することもできます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`\n\\`\\`\\`html\n\n ページタイトル\n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`----\n### デベロッパー・ツール\n\nブラウザに付属しているデベロッパー・ツールを使いこなしましょう。\nWebkit ブラウザ（ Safari や Chrome ）であれば、次のような WEB インスペクタを表示できます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`ブラウザメニューの「ソースを表示」が単に元の HTML ソースを表示するだけなのに対し、WEB インスペクタは**現在の DOM の状態**を表示します。\n\nDOM 要素は動的にプログラムによって変更されるためこの機能は有益です。要素の変化を WEB インスペクタで監視でき、JavaScript コンソールを使ってデバグも可能です。詳しくは debugging HTML, CSS, and JavaScript with the web inspector and console をご覧ください。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`----\n### SVG\n\nD3 が本領を発揮するのは、レンダリング表示に SVG（スケーラブル・ベクター・グラフィックス）を使うときです。SVG はテキストベースの画像フォーマットです。つまり、SVG 画像がどう表示されるかを、HTML タグによく似た、簡単なマークアップコードの記述だけで指定できます。実際、SVG コードを直接 HTML ドキュメント内に記述することもできます。ウェブブラウザは、以前から SVG フォーマットをサポートしてきましたが（Internet Explorer は除く）、最近まであまり利用されてきませんでした。\n\nここで、小さな青い円を表示する SVG コードを書いてみましょう。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`円の上で右クリックしてみてください。画像ではありませんね？　ブラウザをズームしてみましょう。ベクターグラフィックらしく、ズームにあわせて円がスムーズに拡大・縮小するのがわかるでしょう。\n\nD3 に SVG が必須というわけではありませんが、 SVGを使うと通常の HTML 要素では不可能な様々な視覚表現が可能になります。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`つぎはセットアップ`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}