2f:[] 2d:{"title":"練習問題1","cells":[{"id":0,"value":"# 練習問題1\n\nこのノートブックをフォークして回答してください。","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"**第1問**　d3の`append(), text(), node()`メソッドを使って、次のようなHTMLを生成してください。\n\n```html\n

新しいパラグラフ！　その1

新しいパラグラフ！　その2

新しいパラグラフ！　その3

新しいパラグラフ！　その4

新しいパラグラフ！　その5

\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"{\n const div = d3.create(\"div\")\n for(let i=0; i<5; i++){\n div.append(\"p\").text(`新しいパラグラフ！　その${i+1}`);\n }\n return div.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"**第2問**　できたら、次のようなHTMLを生成してください。\n\n```html\n

新しいパラグラフ！　その1

新しいパラグラフ！　その2

新しいパラグラフ！　その3

新しいパラグラフ！　その4

新しいパラグラフ！　その5

\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"{\n const div = d3.create(\"div\")\n for(let i=0; i<5; i++){\n div.append(\"section\").append(\"p\").text(`新しいパラグラフ！　その${i+1}`)\n }\n return div.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"**第3問** attrメソッドを使って、次のようなHTMLを生成してください。\n\nfirst と last には個別のスタイルを適用しましょう。\n\nattrメソッドはセレクションの属性を設定します。\n第1引数に属性名、第2引数には属性の値を指定します。\n\nattrメソッドの例\n```js\np.attr(\"class\", \"my-class\") // p要素のclass属性の値をmy-classに設定します\n```\n\nHTML\n```html\n

新しいパラグラフ！　その1

新しいパラグラフ！　その2

新しいパラグラフ！　その3

新しいパラグラフ！　その4

新しいパラグラフ！　その5

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"{\n const div = d3.create(\"div\")\n for(let i=0; i<5; i++){\n const p = div.append(\"section\").append(\"p\")\n .text(`新しいパラグラフ！　その${i+1}`)\n if(i==0){\n p.attr(\"class\", \"first\")\n }\n if(i==4){\n p.attr(\"class\",\"last\")\n }\n }\n return div.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"**第4問**　上のHTMLを次の見た目になるようにスタイルを指定してください。\n\n[![Image from Gyazo](https://i.gyazo.com/cfdc634548665f86f542c087351cf04a.png)](https://gyazo.com/cfdc634548665f86f542c087351cf04a)","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"{\n const div = d3.create(\"div\")\n .style('display','flex')\n .style('justify-content', 'space-between')\n .style('padding', '0 12px')\n for(let i=0; i<5; i++){\n const section = div.append(\"section\")\n .style('background-color','#EEEEEE')\n .style('border', '1px solid #888888')\n .style('border-radius', '8px')\n .style('height', '58px')\n .style('padding', '6px 12px')\n .style('display', 'flex')\n .style('justify-content', 'center')\n .style('align-items', 'center') \n const p = section.append(\"p\")\n .text(`新しいパラグラフ！その${i+1}`)\n .style('font-size','15px')\n if(i==0){\n p.attr(\"class\", \"first\")\n .style('color','#E8392C')\n .style('font-weight','800')\n }\n if(i==4){\n p.attr(\"class\",\"last\")\n .style('color','#377E22')\n .style('font-weight','800')\n }\n }\n return div.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}