[ { "id": "fc-block-7-lkmnp1sel", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#121212", "paddingTop": "60", "paddingBottom": 10, "labelText": "トレーラー", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-1-bfgaf331q", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-14-cc5fdxy78", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

;\">\n

\n <% if (video) { %>\n <% if (videoPlatformType === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": 980, "video": "링크" }, "uniqueId": "fc-block-2-zbw5eji0y", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-2-kb6geypqw", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "60", "paddingBottom": "24", "backgroundColor": "#121212", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#fff", "text": "\n | \n\n\n初心者でもできる、
\nCalude code x Web開発マスターコース\n" }, "uniqueId": "fc-block-3-i8xvp8cs7", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-4epvzpy3o", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n <% if (imageUrl || mobileImageUrl) { %>\n <% if(link) { %>\n \" class=\"container__link\" <% if(useNewTab) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n \n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/202939-2136/reason-reason-webprogrammer-taniguchi-jp.webp", "mobileImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/202946-2136/reason-reason-m-webprogrammer-taniguchi-jp.webp", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-5-xtusw38w0", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-33-uj90236xz", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "60", "backgroundColor": "#121212", "useTextCenter": false, "textSize1": "fc-content-text", "textColor1": "#fff", "text1": "IT教育メディアを運営して数万人の受講生を導き、プロダクト志向の開発スタイルと優れた言語化能力で高い評価を集めるWebプログラマーのたにぐちまこと。\n

\nこの講座では、機能要件からサーバーへのデプロイまで、一つのサービスを完結させる全手順を伝授。論理的なプロンプト技術を駆使し、AIと対話しながらプロダクトを創造する手法を解説します。", "textSize2": "fc-content-text", "textColor2": "#fff", "text2": "まず、Claude Codeの操作環境を整え、ポートフォリオサイトの構築に着手します。コンテキスト共有を通じて、AIの誤回答を防ぎ意図通りのコードを導く技術を実践します。\n

\n次に、Gitを活用した安全な履歴管理と公開手順を確認。Next.jsとTailwind CSSを導入し、モダンなデザインを取り入れたタスク管理ツールを開発します。\n

\n最後に、Reactのコンポーネント設計やデータ保管の仕組みを理解します。完成したシステムをCloudflareへデプロイし、Webサービスとして全世界に公開します。\n

\nAIと共に実用的なWebアプリを構築する圧倒的な生産性を、Fast Campusで体験してください。" }, "uniqueId": "fc-block-6-attctotk7", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-50-zels75v7q", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "60", "paddingBottom": 10, "labelText": "お試し動画", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-1-fppvves46", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-11-w4hn43j8a", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

;\">\n

\n <% if (video) { %>\n <% if (videoPlatformType === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "#fff", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": "980", "video": "링크" }, "uniqueId": "fc-block-3-y6cju5y12", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-8-swrgxrv1h", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "0", "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#000000", "text1": "\n | \nNN. 강의 섹션명", "textSize2": "fc-content-text", "textColor2": "#000000", "text2": "\n- 디테일1
\n- 디테일2\n" }, "uniqueId": "fc-block-4-px8aoz5be", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-9-8jpqeerhj", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#ffffff", "paddingTop": "60", "paddingBottom": "0", "borderColor": "#ccc", "borderSize": "1" }, "uniqueId": "fc-block-5-u92orlm63", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-52-kz2tyinps", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "60", "paddingBottom": 10, "labelText": "Special Benefit", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-2-qkbkzpogi", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-53-uldp8g2kk", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#000", "text": "\nたにぐちまことの講座だけの特典\n\n" }, "uniqueId": "fc-block-3-z5jbj8mma", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-mj406al1x", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/105404-1977/benefit-webprogrammer-taniguchi-jp-01.webp", "text1": "", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173524-879/benefit-webprogrammer-taniguchi-jp-02.webp", "text1": "", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173527-879/benefit-webprogrammer-taniguchi-jp-03.webp", "text1": "", "text2": "" } ] }, "uniqueId": "fc-block-9-0jr1gm0h2", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-21-7mpotmo6j", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#000", "text": "\n | \n\n講義資料の詳細" }, "uniqueId": "fc-block-10-w9yysxwc6", "isChecked": false, "hidden": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-1kxo6x2p7", "layout": { "id": "405", "description": "1~4단 컬러카드", "icon": "\n", "params": [ { "name": "spacingTop", "type": "number", "description": "spacing-top" }, { "name": "spacingBottom", "type": "number", "description": "spacing-bottom" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useColumnInMobile", "type": "checkbox", "description": "모바일에서 2단 컬럼을 생성합니다" }, { "name": "cardGapInUseColumn", "type": "number", "description": "모바일 2단 컬럼에서 카드 간격 (rem단위) (default 3rem)" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "buttonColor", "type": "text", "description": "button color" }, { "name": "buttonTextColor", "type": "text", "description": "button text color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "mainTextSize", "type": "select", "description": "main text size", "options": [ "fc-h4-text", "fc-h5-text", "fc-h6-text" ] }, { "name": "subTextSize", "type": "select", "description": "sub text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "cardColor1", "type": "text", "description": "card color" }, { "name": "title1", "type": "text", "description": "title text" }, { "name": "main1", "type": "textarea", "description": "main text" }, { "name": "sub1", "type": "textarea", "description": "sub text" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "link1", "type": "text", "description": "link" }, { "name": "buttonLabel1", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "cardColor2", "type": "text", "description": "card color" }, { "name": "title2", "type": "text", "description": "title text" }, { "name": "main2", "type": "textarea", "description": "main text" }, { "name": "sub2", "type": "textarea", "description": "sub text" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "link2", "type": "text", "description": "link" }, { "name": "buttonLabel2", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "cardColor3", "type": "text", "description": "card color" }, { "name": "title3", "type": "text", "description": "title text" }, { "name": "main3", "type": "textarea", "description": "main text" }, { "name": "sub3", "type": "textarea", "description": "sub text" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "link3", "type": "text", "description": "link" }, { "name": "buttonLabel3", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "cardColor4", "type": "text", "description": "card color" }, { "name": "title4", "type": "text", "description": "title text" }, { "name": "main4", "type": "textarea", "description": "main text" }, { "name": "sub4", "type": "textarea", "description": "sub text" }, { "name": "useNewTab4", "type": "checkbox", "description": "" }, { "name": "link4", "type": "text", "description": "link" }, { "name": "buttonLabel4", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" } ], "values": { "spacingTop": 0, "spacingBottom": 0, "useTextCenter": false, "backgroundColor": "#ffffff", "useColumnInMobile": false, "cardGapInUseColumn": 2, "textColor": "#000000", "buttonColor": "#E4FF18", "buttonTextColor": "#000000", "titleSize": "fc-h5-text", "mainTextSize": "fc-h4-text", "subTextSize": "fc-h6-text", "cardColor1": "#ff947a", "title1": "", "main1": "", "sub1": "", "useNewTab1": true, "link1": "", "buttonLabel1": "", "cardColor2": "#88abff", "title2": "", "main2": "", "sub2": "", "useNewTab2": true, "link2": "", "buttonLabel2": "", "cardColor3": "#c88dff", "title3": "", "main3": "", "sub3": "", "useNewTab3": true, "link3": "", "buttonLabel3": "", "cardColor4": "#91eaa2", "title4": "", "main4": "", "sub4": "", "useNewTab4": true, "link4": "", "buttonLabel4": "" }, "template": "

rem; padding-bottom: <%= spacingBottom/10 || 0 %>rem; background-color: <%= backgroundColor || 'transparent' %>\">\n

; <% if(useTextCenter) { %> text-align: center;<% } %>\">\n
\n <% if (title1) { %>\n
\"><%= title1 %>
\n <% } %>\n <% if(main1) { %>\n
\"><%= main1 %>
\n <% } %>\n <% if(sub1) { %>\n
\"><%= sub1 %>
\n <% } %>\n
\n <% if(link1) { %>\n
\n class=\"fc-link\"<% } %> href=\"<%= link1 %>\" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#E4FF18'%>; color: <%= buttonTextColor || '#000000' %>;\"><%= buttonLabel1 %>\n
\n <% } %>\n
background-color: <%= cardColor2 %>;<% } %> <% if(useTextCenter) { %> text-align: center;<% } %>\">\n
\n <% if (title2) { %>\n
\"><%= title2 %>
\n <% } %>\n <% if(main2) { %>\n
\"><%= main2 %>
\n <% } %>\n <% if(sub2) { %>\n
\"><%= sub2 %>
\n <% } %>\n
\n <% if(link2) { %>\n
\n class=\"fc-link\"<% } %> href=\"<%= link2 %>\" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#E4FF18'%>; color: <%= buttonTextColor || '#000000' %>;\"><%= buttonLabel2 %>\n
\n <% } %>\n
background-color: <%= cardColor3 %>;<% } %> <% if(useTextCenter) { %> text-align: center;<% } %>\">\n
\n <% if (title3) { %>\n
\"><%= title3 %>
\n <% } %>\n <% if(main3) { %>\n
\"><%= main3 %>
\n <% } %>\n <% if(sub3) { %>\n
\"><%= sub3 %>
\n <% } %>\n
\n <% if(link3) { %>\n
\n class=\"fc-link\"<% } %> href=\"<%= link3 %>\" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#E4FF18'%>; color: <%= buttonTextColor || '#000000' %>;\"><%= buttonLabel3 %>\n
\n <% } %>\n
background-color: <%= cardColor4 %>;<% } %> <% if(useTextCenter) { %> text-align: center;<% } %>\">\n
\n <% if (title4) { %>\n
\"><%= title4 %>
\n <% } %>\n <% if(main4) { %>\n
\"><%= main4 %>
\n <% } %>\n <% if(sub4) { %>\n
\"><%= sub4 %>
\n <% } %>\n
\n <% if(link4) { %>\n
\n class=\"fc-link\"<% } %> href=\"<%= link4 %>\" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#E4FF18'%>; color: <%= buttonTextColor || '#000000' %>;\"><%= buttonLabel4 %>\n
\n <% } %>\n

\n" }, "values": { "spacingTop": 0, "spacingBottom": "60", "useTextCenter": false, "backgroundColor": "#ffffff", "useColumnInMobile": false, "cardGapInUseColumn": 2, "textColor": "#000", "buttonColor": "#E4FF18", "buttonTextColor": "#000000", "titleSize": "fc-h6-text", "mainTextSize": "fc-h6-text", "subTextSize": "fc-content-text", "cardColor1": "#f5f5f5", "title1": "", "main1": "\nポートフォリオサイト\n", "sub1": "- GitHub Pagesで実際に公開可能なポートフォリオページ\n", "useNewTab1": true, "link1": "", "buttonLabel1": "", "cardColor2": "#f5f5f5", "title2": "", "main2": "\nタスク管理ツール\n", "sub2": "- Next.jsで拡張可能なタスク管理ツール", "useNewTab2": true, "link2": "", "buttonLabel2": "", "cardColor3": "#c88dff", "title3": "", "main3": "", "sub3": "", "useNewTab3": true, "link3": "", "buttonLabel3": "", "cardColor4": "#91eaa2", "title4": "", "main4": "", "sub4": "", "useNewTab4": true, "link4": "", "buttonLabel4": "" }, "uniqueId": "fc-block-1-gklc7tad1", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-49-unqs4gjt2", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#121212", "paddingTop": "60", "paddingBottom": 10, "labelText": "Portfolio", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-4-kh7vxwjo2", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-32-zh17vohkw", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#121212", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#fff", "text": "\n\nたにぐちまことのポートフォリオ" }, "uniqueId": "fc-block-13-pk0wcqbtc", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-5g6ndb6bo", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "columnCount": "3", "backgroundColor": "#121212", "colorTheme": "theme-dark-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173232-879/portfolio-webprogrammer-taniguchi-jp-01.webp", "text1": "AI開発で開発したパスワード生成ツール\n", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173236-879/portfolio-webprogrammer-taniguchi-jp-02.webp", "text1": "時計・タイマー・ストップウォッチ\n", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173240-879/portfolio-webprogrammer-taniguchi-jp-03.webp", "text1": "QRコード生成ツール\n", "text2": "" } ] }, "uniqueId": "fc-block-1-yjp2qx2j9", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-cube5temr", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "60", "paddingBottom": 10, "labelText": "講座の例題", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-3-rwt1svqgz", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-wn249r696", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "0", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#000", "text": "Claude codeでWeb開発から\n自作ツール、アプリの公開まで" }, "uniqueId": "fc-block-4-3c2b8qg3x", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-sm6tjpdsl", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "24", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#000", "text": "\n | \n\n講義資料の詳細" }, "uniqueId": "fc-block-18-ytb1djrvh", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-11-q96z3qi56", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "40", "columnCount": "3", "backgroundColor": "#fff", "colorTheme": "theme-light-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173539-879/example-webprogrammer-taniguchi-jp-01.webp", "text1": "\nポートフォリオの作成\n\n\n", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173543-879/example-webprogrammer-taniguchi-jp-02.webp", "text1": "\nタスク管理ツール\n", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173547-879/example-webprogrammer-taniguchi-jp-03.webp", "text1": "\nGitを利用したバージョン管理\n", "text2": "" } ] }, "uniqueId": "fc-block-1-wwyxclzhu", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-75qsjvank", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "40", "columnCount": "3", "backgroundColor": "#fff", "colorTheme": "theme-light-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/182843-2136/example-webprogrammer-taniguchi-jp-04.webp", "text1": "\nターミナルからClaude Codeの利用\n\n", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173559-879/example-webprogrammer-taniguchi-jp-05.webp", "text1": "\nVSCodeとClaude Codeを組み合わせた開発\n\n", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173604-879/example-webprogrammer-taniguchi-jp-06.webp", "text1": "\n GitHub Pagesを利用したポートフォリオの公開\n", "text2": "" } ] }, "uniqueId": "fc-block-1-khwix2tm8", "isChecked": false }, { "id": "fc-block-2-kpa4liiml", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "60", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n\n※上記の画像は講座に対する理解を深めるためのイメージです。\n" }, "uniqueId": "fc-block-22-mit2ldhp6", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-pjkmyl31h", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#121212", "paddingTop": "60", "paddingBottom": 10, "labelText": "この講座のポイント", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-1-a2ssq38mm", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-4aosp6l5l", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#121212", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#fff", "text": "\n「ちゃんとしたプログラミング」を次世代へ。\nWebプログラマーたにぐちまことが紐解く、\nAIプログラミングのノウハウ\n\n" }, "uniqueId": "fc-block-8-oscx9px9z", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-wkz84yqbh", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/184407-2136/sellingpoint-webprogrammer-taniguchi-jp-01.webp", "title1": "\n生成AIコーディングエージェントを活用したプログラミング手法", "content1": "\nClaude Codeを活用し、自然言語で仕様を伝えながらコードを生成・改善していく次世代の開発ワークフローを体系的に整理します。単なるコード自動生成に留まらず、AIが提案したコードのレビューやエラー解決、設計改善までを効率的に進めることで、「AIを右腕として活用する」実践的な開発手法を解説します。\n", "imageUrl2": "", "title2": "", "content2": "" }, "uniqueId": "fc-block-1-4j9e6tjvl", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-qoucmfttq", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "24", "backgroundColor": "#121212" }, "uniqueId": "fc-block-2-cf44wcai3", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-n9o8ahwro", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/175225-879/sellingpoint-webprogrammer-taniguchi-jp-02.webp", "title1": "\nプロンプトエンジニアリング、コンテキストエンジニアリングとハーネスエンジニアリング", "content1": "\nAIへの指示（プロンプト）、プロジェクトの背景情報（コンテキスト）、動作検証の仕組み（ハーネス）という3つの要素を論理的に解説します。AIの誤回答や認識ズレを防ぎ、実務レベルで通用する精度の高いコードを引き出すために欠かせない、AI時代のエンジニアリング理論をお伝えします。", "imageUrl2": "", "title2": "", "content2": "" }, "uniqueId": "fc-block-3-4keiak7l0", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-kgt30zgtj", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "24", "backgroundColor": "#121212" }, "uniqueId": "fc-block-4-u7ucbgttv", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-27-yfyp7ejka", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/175232-879/sellingpoint-webprogrammer-taniguchi-jp-03.webp", "title1": "\nWebアプリの開発からデプロイ（公開）までの流れ", "content1": "\nフロントエンドからバックエンド、データベース構築、そしてサーバーへの公開（デプロイ）まで、一連の開発工程を実演形式で解説します。点在しがちな知識を体系的に繋ぎ合わせ、実際にURLで共有できる一つのプロダクトとして完成させるまでの全体像をお教えします。", "imageUrl2": "", "title2": "", "content2": "" }, "uniqueId": "fc-block-24-dqog5mw9p", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-gys4iqym8", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "60", "backgroundColor": "#121212" }, "uniqueId": "fc-block-5-afroyiypk", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-7-7pc6evqfc", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "60", "paddingBottom": 10, "labelText": "About", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-2-7vyap8ydu", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-37-l7oybh9cy", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "16", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#000", "text": "\nWebプログラマーたにぐちまこと\n" }, "uniqueId": "fc-block-27-qvbodlr3w", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-7-8cz4ih2a4", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "40", "backgroundColor": "#fff", "useTextCenter": false, "textSize1": "fc-h6-text", "textColor1": "#0a0a0a", "text1": "こんにちは、Webプログラマーのたにぐちまことです。富士ゼロックス等でWebエンジニアとして実務を重ね、現在は株式会社エイチツーオー・スペースの代表を務めています。20年以上にわたる開発経験を活かし、これまで数万人規模の方々へITスキル習得を支援してきました。\n", "textSize2": "fc-h6-text", "textColor2": "#0a0a0a", "text2": "生成AIを活用した開発は、いまや実務に欠かせない選択肢となりました。この講座では、Claude Codeへの指示設計から、実用的なWebアプリ開発、さらにVercelを用いた全世界へのデプロイまで、一連の実践的なワークフローを体系的に解説します。AIのアウトプットに振り回されず、自らの意図で開発を進めるための考え方と実践力をお伝えします。" }, "uniqueId": "fc-block-28-weiefmkyx", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-13-w6o8q96z4", "layout": { "id": "802", "description": "강사소개 + 링크버튼", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "imageUrl", "type": "image", "description": "60 x 60" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "url", "description": "link url" }, { "name": "linkLabel", "type": "text", "description": "link label" } ], "values": { "paddingTop": 0, "paddingBottom": 0, "backgroundColor": "", "imageUrl": "", "titleSize": "fc-h5-text", "title1": "", "title2": "강사님 한마디", "contentSize": "fc-content-text", "content1": "", "content2": "", "useNewTab": true, "link": "", "linkLabel": "강사님 인터뷰 보기" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n <% if (imageUrl || title1 || title2 || content1 || content2) { %>\n

\n <% if (imageUrl) { %>\n

\" loading=\"lazy\">

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\"><%= title2 %>

\"><%= content2 %>

\n <% if (link) { %>\n target=\"_blank\" rel=\"noopener noreferrer\" <% } %> href=\"<%=link%>\"><%= linkLabel %>\n <% } %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "0", "backgroundColor": "#fff", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173623-879/profile-webprogrammer-taniguchi-jp.webp", "titleSize": "fc-h5-text", "title1": "Web Programmer", "title2": "Projects & Awards", "contentSize": "fc-content-text", "content1": "現) Webプログラマー", "content2": "【経歴】
\n2022年　WizMu合同会社設立
\n2018年　ともすた合同会社設立（後に、エイチツーオー・スペースに吸収合併）
\n2002年　株式会社エイチツーオー・スペース設立\n
2000年　ソニーコミュニケーションネットワーク株式会社（現ソニーネットワークコミュニケーションズ）Webプログラマー、ディレクター
\n1998年　富士ゼロックス株式会社（現富士フイルムビジネスイノベーション）　Webプログラマー\n", "useNewTab": true, "link": "https://x.com/seltzer", "linkLabel": "X(Twitter)" }, "uniqueId": "fc-block-1-wwcdqus4f", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-4mwj42qe8", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "60", "paddingBottom": 10, "labelText": "Interview", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-3-1ucs0ah70", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-kg94qecg8", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "10", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#000", "text": "\nたにぐちまことがお話ししたいこと\n\n" }, "uniqueId": "fc-block-30-u9vf3coge", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-c3k12e9pj", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "0", "paddingBottom": "24", "borderColor": "#333", "borderSize": "2" }, "uniqueId": "fc-block-4-eyi41bexi", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-11-6u9y73jav", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "0", "backgroundColor": "#fff", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#000", "text1": "\n\n1. AIに興味を持った経緯、またはお仕事として携わったきっかけを教えてください。\t\t\t\t\n\n", "textSize2": "fc-content-text", "textColor2": "#000", "text2": "私は20年以上にわたりWeb開発に携わってきました。ChatGPTをはじめとする生成AIの登場をきっかけに関心を持ち、自社やクライアントの業務にどのように活かせるかを検討してきました。特に、プログラミング開発における活用には早くから注目し、試行錯誤と情報収集を重ねています。" }, "uniqueId": "fc-block-3-oeafzbeic", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-qwftkbmoo", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "24", "paddingBottom": "24", "borderColor": "#a0a0a0", "borderSize": "1" }, "uniqueId": "fc-block-6-9ai5yuxza", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-7-36prhbf00", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "0", "backgroundColor": "#fff", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#000", "text1": "\n2. AIを活用した業務効率化において、大切なポイントは何になりますか？(アウトプット中心に)\n\n", "textSize2": "fc-content-text", "textColor2": "#000", "text2": "生成AIに頼り切らない姿勢が重要です。生成AIがどのようなアウトプットをしているのか、そして自分が何を依頼しようとしているのかを正しく理解したうえで活用しなければ、かえって振り回されてしまいます。生成AIとともにプログラミングを行うためには、その前提となる基礎知識をしっかりと身につけておくことが不可欠です。" }, "uniqueId": "fc-block-7-35huz5tvl", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-pyx1oxphw", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "24", "paddingBottom": "24", "borderColor": "#a0a0a0", "borderSize": "1" }, "uniqueId": "fc-block-1-f7kwkgqgh", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-ahcczue7e", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "0", "backgroundColor": "#fff", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#000", "text1": "\n3. 講師さまご自身は、AIツールを使いこなしてきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか？ \n\n", "textSize2": "fc-content-text", "textColor2": "#000", "text2": "生成AIの進化は非常に速く、どのAIをどのように活用すべきかを見極めるのは簡単ではありません。しかし、その一方で、どの生成AIであっても「活用の基本」は大きく変わらないことも見えてきました。そのため、特定のモデルに依存しすぎないよう、汎用性の高いプロンプト設計や活用方法を模索しています。" }, "uniqueId": "fc-block-2-6k8spvdip", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-9iuvvinse", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "24", "paddingBottom": "24", "borderColor": "#a0a0a0", "borderSize": "1" }, "uniqueId": "fc-block-3-k2hh47qxn", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-x9plyqcjq", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "0", "backgroundColor": "#fff", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#000", "text1": "\n4. 該当の分野を勉強している方、この講座を受講しようか悩んでいる方は、どういう部分を一番難しいと思っているでしょうか？本講義を通じて、そのような部分をどういう風に解決できるでしょうか？\n\n", "textSize2": "fc-content-text", "textColor2": "#000", "text2": "生成AIに「○○のシステムを作って」といったプロンプトで依頼する、いわゆる「バイブコーディング」は、最初の一歩としては有効です。しかし、実用に耐えるシステムの構築や、その後の拡張・メンテナンスを継続していくうえでは、難しさが伴う場合もあります。この講座では、「AI駆動開発」と呼ばれる、生成AIを活用した本格的なプログラミング開発手法についてご紹介します。" }, "uniqueId": "fc-block-5-u1hze3djm", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-dx9mgxe1c", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#fff", "paddingTop": "24", "paddingBottom": "60", "borderColor": "#a0a0a0", "borderSize": "1" }, "uniqueId": "fc-block-4-bcun4bw6u", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-48-q2ykjt4od", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "paddingTop": "60", "paddingBottom": 10, "labelText": "講座内容", "layoutType": "fc-label-type2", "labelColor": "#FC1C49" }, "uniqueId": "fc-block-7-e4uxj4376", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-54-50mk5wrrf", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#000", "text": "下記のような内容を学べます。" }, "uniqueId": "fc-block-32-ppenudmpf", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-oaxaio8f4", "layout": { "id": "203", "description": "1~4단 이미지와 텍스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "buttonColor", "type": "text", "description": "button color" }, { "name": "buttonTextColor", "type": "text", "description": "button text color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "useColumnInMobile", "type": "checkbox", "description": "모바일에서 2단 컬럼을 생성합니다" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "230 x 152" }, { "name": "title1", "type": "textarea", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "buttonLabel1", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink1", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl2", "type": "image", "description": "230 x 152" }, { "name": "title2", "type": "textarea", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "buttonLabel2", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink2", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl3", "type": "image", "description": "230 x 152" }, { "name": "title3", "type": "textarea", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content text" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "buttonLabel3", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink3", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl4", "type": "image", "description": "230 x 152" }, { "name": "title4", "type": "textarea", "description": "title4 text" }, { "name": "content4", "type": "textarea", "description": "content text" }, { "name": "useNewTab4", "type": "checkbox", "description": "" }, { "name": "buttonLabel4", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink4", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." } ], "values": { "backgroundColor": "#ffffff", "textColor": "", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": false, "useColumnInMobile": false, "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "", "title2": "", "content2": "", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "", "title3": "", "content3": "", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "template": "

;\">\n

\">\n

\" style=\"color: <%= textColor || '#000000' %>\">\n <% if (imageUrl1 || title1 || content1 || buttonLabel1) { %>\n

\n <% if (imageUrl1 && buttonLink1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if (title1) { %>\n

\"><%= title1 %>

\n <% } %>\n <% if (content1) { %>\n

\"><%= content1 %>

\n <% } %>\n <% if(buttonLabel1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel1 %>\n <% } %>\n

\n <% } %>\n <% if (imageUrl2 || title2 || content2 || buttonLabel2) { %>\n

\n <% if (imageUrl2 && buttonLink2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title2) { %>\n

\"><%= title2 %>

\n <% } %>\n <% if(content2) { %>\n

\"><%= content2 %>

\n <% } %>\n <% if(buttonLabel2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel2 %>\n <% } %>\n

\n <% } %>\n <% if (imageUrl3 || title3 || content3 || buttonLabel3) { %>\n

\n <% if (imageUrl3 && buttonLink3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl3) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title3) { %>\n

\"><%= title3 %>

\n <% } %>\n <% if(content3) { %>\n

\"><%= content3 %>

\n <% } %>\n <% if(buttonLabel3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel3 %>\n <% } %>\n

\n <% } %>\n <% if (imageUrl4 || title4 || content4 || buttonLabel4) { %>\n

\n <% if (imageUrl4 && buttonLink4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl4) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title4) { %>\n

\"><%= title4 %>

\n <% } %>\n <% if (content4) { %>\n

\"><%= content4 %>

\n <% } %>\n <% if(buttonLabel4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel4 %>\n <% } %>\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "textColor": "#000", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": false, "useColumnInMobile": false, "titleSize": "fc-h6-text", "contentSize": "fc-content-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173633-879/detail-webprogrammer-taniguchi-jp-01.webp", "title1": "\n\nVisual Studio CodeとClaude Codeの活用方法\n", "content1": "VS CodeにClaude Codeを組み込み、コーディングとAI対話をシームレスに統合します。エディタ内のコードをAIが直接読み書きできる環境を整え、手動でのコピペを排除した「思考の速度で開発する」ための操作術を解説します。", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173636-879/detail-webprogrammer-taniguchi-jp-02.webp", "title2": "\nプロンプトの活用による、生成AIプログラミング\n", "content2": "単なる命令ではなく、役割、制約、出力形式を定義する論理的なプロンプト技術を学びます。AIに「何を、どのように」書かせるべきかを明確に指示し、修正回数を最小限に抑えながら、意図通りのロジックを1回で導き出す手法を身につけます。\t\t", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/183537-2136/detail-webprogrammer-taniguchi-jp-03.webp", "title3": "\nCLAUD.md、Skills等を利用したエージェントの活用\n", "content3": "CLAUDE.mdによるプロジェクト情報の共有や、特定のタスク（Skills）への適応方法を理解します。AIにプロジェクト固有のルールを学習させ、コンテキスト（背景）を深く理解させることで、精度の高い提案を自動化する仕組みを構築します。", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "uniqueId": "fc-block-2-gxguu8l97", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-41-ew5rkojce", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-34-nc44d0mqw", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-40-k1jtmj2qm", "layout": { "id": "203", "description": "1~4단 이미지와 텍스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "buttonColor", "type": "text", "description": "button color" }, { "name": "buttonTextColor", "type": "text", "description": "button text color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "useColumnInMobile", "type": "checkbox", "description": "모바일에서 2단 컬럼을 생성합니다" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "230 x 152" }, { "name": "title1", "type": "textarea", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "buttonLabel1", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink1", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl2", "type": "image", "description": "230 x 152" }, { "name": "title2", "type": "textarea", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "buttonLabel2", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink2", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl3", "type": "image", "description": "230 x 152" }, { "name": "title3", "type": "textarea", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content text" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "buttonLabel3", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink3", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl4", "type": "image", "description": "230 x 152" }, { "name": "title4", "type": "textarea", "description": "title4 text" }, { "name": "content4", "type": "textarea", "description": "content text" }, { "name": "useNewTab4", "type": "checkbox", "description": "" }, { "name": "buttonLabel4", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink4", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." } ], "values": { "backgroundColor": "#ffffff", "textColor": "", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": false, "useColumnInMobile": false, "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "", "title2": "", "content2": "", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "", "title3": "", "content3": "", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "template": "

;\">\n

\">\n

\" style=\"color: <%= textColor || '#000000' %>\">\n <% if (imageUrl1 || title1 || content1 || buttonLabel1) { %>\n

\n <% if (imageUrl1 && buttonLink1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if (title1) { %>\n

\"><%= title1 %>

\n <% } %>\n <% if (content1) { %>\n

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2 || buttonLabel2) { %>\n

\n <% if (imageUrl2 && buttonLink2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title2) { %>\n

\"><%= title2 %>

\n <% } %>\n <% if(content2) { %>\n

\"><%= content2 %>

\n <% } %>\n <% if (imageUrl3 || title3 || content3 || buttonLabel3) { %>\n

\n <% if (imageUrl3 && buttonLink3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl3) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title3) { %>\n

\"><%= title3 %>

\n <% } %>\n <% if(content3) { %>\n

\"><%= content3 %>

\n <% } %>\n <% if (imageUrl4 || title4 || content4 || buttonLabel4) { %>\n

\n <% if (imageUrl4 && buttonLink4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl4) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title4) { %>\n

\"><%= title4 %>

\n <% } %>\n <% if (content4) { %>\n

\"><%= content4 %>

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "textColor": "#000", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": false, "useColumnInMobile": false, "titleSize": "fc-h6-text", "contentSize": "fc-content-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173656-879/detail-webprogrammer-taniguchi-jp-04.webp", "title1": "\n\nGitを利用したバージョン管理\n", "content1": "コードの変更を「いつ、なぜ」行ったかを記録するGitの仕組みを学びます。AIが生成した大規模な変更も安全に管理し、ミスが発生した際にいつでも過去の状態へ戻せる、プロの開発現場で必須となる安全策と運用フローをお伝えします。", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173701-879/detail-webprogrammer-taniguchi-jp-05.webp", "title2": "\nTypeScript、Next.jsを利用したモダンな開発環境\n", "content2": "TypeScriptによるエラーの事前検知と、Next.jsによる効率的な画面遷移の仕組みを習得します。モダンなフレームワークの論理的な構造を理解することで、メンテナンス性が高く、ユーザーにとって高速なWebアプリを構築するための土台を固めます。", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202605/173706-879/detail-webprogrammer-taniguchi-jp-06.webp", "title3": "\nクラウドへのデプロイによるWebアプリの公開\n\n", "content3": "Gitと連携し、開発したコードをワンクリックで全世界に公開（デプロイ）する手順を実演します。ドメイン設定や公開後の更新フローまでをカバーし、自分の作品を「Web上のサービス」として完成させるまでの全プロセスを完結させます。", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "uniqueId": "fc-block-33-0ntnn3i7q", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-x9bd51vun", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "60", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#999", "text": "※上記の画像は講座に対する理解を深めるためのイメージです。" }, "uniqueId": "fc-block-4-yt50989dc", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-ofaumh5cb", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#000000", "text": "\n | \n\nカリキュラム" }, "uniqueId": "fc-block-8-b8fu91vc6", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-s5y9w2v1g", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#a0a0a0", "text": "-1次映像公開日：2026年6月26日（1講～12講）
\n-2次映像公開日：2026年7月17日（13講～24講）
\n※講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。" }, "uniqueId": "fc-block-1-nofir1ogo", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-105r52991", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

container__content--border-size-<%= borderSize %>\" style=\"width: <%= cardWidth/10 %>rem; <% if(borderColor) { %>border-color: <%= borderColor %>;<% } %> <% if(cardBackgroundColor) { %> background-color: <%= cardBackgroundColor %><% } %>\">\n <% if (imageUrl) { %>\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 01 ｜ \n\nイントロダクションと講座準備\t\n" }, "uniqueId": "fc-block-5-hf3nv3y6i", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-8jj8kspn8", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n01. 講座の概要\n\n
\n- 講師の自己紹介
\n- この講座の全体の流れ
\n- この講座で作れるようになるもの
\n- この講座で学べる内容
\n- 講座の受講に必要な費用\n\n

\n\n\n02. AIプログラミングツールとは\n
\n- AIプログラミングツールの種類
\n- エディタ型とコマンド型
\n- 補完とプロンプトプログラミング
\n- チャット・Coworkとの違い" }, "uniqueId": "fc-block-1-p9mflf170", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-8k400a7mz", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 02 ｜ \n\nAIプログラミングを体験しよう\t\n" }, "uniqueId": "fc-block-2-whoqepmfz", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-seh0ql5fh", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n03. Claude Codeを起動しよう\n\n
\n- プロジェクトフォルダを開こう
\n- コードを修正してもらおう
\n- コンテキストウィンドウとは
\n- トークンとは
\n- コンテキストウィンドウの状態を確認しよう
\n- 新しいチャットを立ち上げよう\n\n\n" }, "uniqueId": "fc-block-3-s20yhs4hk", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-sbmq2jfwp", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 03 ｜ \n\nHTMLとCSSでポートフォリオサイトを作ろう\t" }, "uniqueId": "fc-block-4-4z4ka41o0", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-2ghkjd4wx", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n04. 開発環境を整えよう\n\n
\n- VSCodeを利用しよう
\n- 拡張機能をインストールしよう\n\n
\n
\n\n05. HTMLとは\n\n
\n- HTMLを作ってみよう
\n- 確認しよう\n
\n
\n\n06. HTMLを理解しよう\n\n
\n- HTMLを理解しよう
\n 開始タグと終了タグ
\n 終了タグのない空要素
\n タグの入れ子
\n入れ子の時の注意点
\n属性
\n- HTMLの決まり文句
\n文字コードとは
\nビューポートとは
\n- 画像を貼り付けよう
\n
\n\n07. コンテキストとは\n\n
\n- Claude Codeに教えてもらおう
\n - エディターを分割しよう
\n - グループをロックしよう
\n- 音声入力を利用しよう
\n - 行を指定しよう
\n - コンテキストとは\n
\n
\n\n08. CSSとは\n\n
\n- CSSを知ろう
\n- CSSを書いてみよう
\n- インラインCSSと内部参照、外部参照
\n- class属性とクラスセレクタ
\n- 外部参照
\n- CSSで理解しておきたいポイント
\n - CSSの単位
\n - カラーコード
\n - 2進数と16進数
\n - カラーパレットを使おう
\n\n
\n\n09. マークダウンとは\n\n
\n- ポートフォリオの原稿を書こう
\n - マークダウンをプレビューしよう
\n - マークダウンを知ろう
\n- ポートフォリオを作成しよう
\n - モデルを選ぼう
\n - エフォートを選ぼう
\n - プロンプトを投げよう\n\n\n" }, "uniqueId": "fc-block-10-hxg5f1p4w", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-3tkunhn27", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 04 ｜ \n\nGitHub Pagesで公開しよう\t" }, "uniqueId": "fc-block-1-q548f1rei", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-q0d784fn5", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n10. Gitを利用しよう\n\n
\n- Gitでバージョン管理しよう
\n- Gitを初期化しよう
\n- コミットしよう
\n- ファイルを変更しよう
\n- 変更を破棄しよう
\n- 間違えた内容をコミットしよう
\n- コミットを取り消そう
\n- Claude CodeでGitを操作しよう\n\n

\n\n\n11. GitHubを利用しよう\n
\n- GitHubにファイルをプッシュしよう
\n - GitHubのアカウントを作成しよう
\n- リモートリポジトリを作成しよう
\n- リモートリポジトリを確認しよう
\n- ファイルを変更しよう
\n- リモートリポジトリから復元しよう\n\n

\n\n\n12. GitHub Pagesで公開しよう\n
\n- GitHub PagesでWebページを公開しよう
\n- リポジトリを公開状態にしよう" }, "uniqueId": "fc-block-2-29zfrw1co", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-7d5ba4j94", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 05 ｜ \n\nNext.jsでタスク管理ツールを作ろう\t\t" }, "uniqueId": "fc-block-7-lclpiz60u", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-b4jf5b2a3", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n13. Next.jsをセットアップしよう\n\n
\n- Node.jsをインストールしよう
\n- Next.jsをセットアップしよう
\n- 開発サーバーを起動しよう
\n- Claude Codeを初期化しよう
\n - スラッシュコマンドとは
\n - CLAUD.mdとは
\n- ページ内容を書き換えよう
\n- ファイルの内容を確認しよう\n\n

\n\n\n14. ルーティングとJSX\n
\n- ページを増やそう
\n- Next.jsのルーティングとは
\n- JSXとは\n\n

\n\n\n15. Tailwind CSSを利用しよう\n
\n- Tailwind CSSとは
\n- Tailwind CSSを使ってみよう
\n- 入力画面を作成しよう
\n - 余白を調整する、mとp
\n - 枠線を調整する、borderとrounded
\n - 疑似要素\n\n

\n\n\n16. CSSのレイアウト手法\n
\n- レイアウトを調整する「grid」
\n- スマホ時のスタイルを調整しよう
\n - レスポンシブデザイン接頭辞Flex\n

\n\n\n17. DESIGN.mdを使ったデザインの調整\n
\n- デザインを調整しよう
\n- [DESIGN.md](http://DESIGN.md)をダウンロードしよう
\n- Notion風デザインに変えてもらおう
\n- 画面の続きを作成しよう" }, "uniqueId": "fc-block-3-dzv19vcmv", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-mqdf87hea", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 06 ｜ \n\nReactを知ろう\t" }, "uniqueId": "fc-block-4-tebdo2nuy", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-r0hmcp29m", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n18. イベント\n\n
\n- イベントに反応しよう\n\n

\n\n\n19. コンポーネント\n
\n- コンポーネントに分けよう\n

\n\n\n20. useState\n
\n- データを保管しよう\n

\n\n21. useEffect\n
\n- 実行タイミングを制御しよう" }, "uniqueId": "fc-block-9-bty5tdv9f", "isChecked": false, "hasSyntaxErrorTags": true }, { "id": "fc-block-7-lj90obecq", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#ffff", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#ffff", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "Section 07 ｜ \n\n作ったプログラムをデプロイしよう\t" }, "uniqueId": "fc-block-5-29zxdqrof", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-n3ytuvtt2", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n22. Cloudflareのアカウントを作ろう\n\n
\n- Cloudflareのアカウントを作ろう\n\n

\n\n\n23. GitHubを連携しよう\n
\n- GitHubを連携しよう

\n\n\n24. デプロイしよう\n
\n- デプロイしよう\n\n" }, "uniqueId": "fc-block-6-1qehohgur", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-50-3xl7fgde5", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "36", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-40-8asujd9o4", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-fdtosgxcp", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

" }, "uniqueId": "fc-block-9-4czbdq1db", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-48-phagvbtd8", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "60", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-37-jr14jqa2g", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-35-66ghuqwg1", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "60", "paddingBottom": "24", "backgroundColor": "#fff", "useTextCenter": false, "textSize": "fc-h3-text", "textColor": "#000", "text": "この講座を見た方は
\nこちらもチェック！" }, "uniqueId": "fc-block-46-f6vjuy85c", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-55-q516dg98n", "layout": { "id": "215", "description": "캐러셀형 코스카드", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "colorTheme", "type": "select", "description": "컬러 테마를 설정할 수 있습니다.
-라이트 모드 (default)
-다크 모드", "options": [ "theme--light", "theme--dark" ] }, { "name": "mobileColumnCount", "type": "select", "description": "모바일 카드 배열: 1단/2단", "options": [ 1, 2 ] }, { "name": "useNewTab", "type": "checkbox", "description": "use new tab" }, { "name": "title", "type": "text", "description": "레이아웃 제목" }, { "name": "reverseOrder", "type": "checkbox", "description": "체크하면 목록이 역순으로 나열됩니다.\n페이지 > 미리보기에서 확인해주세요" }, { "name": "courseList", "type": "list", "description": "이 레이아웃은 컴포저의 실시간 미리보기 지원이 불가합니다.\n페이지의 미리보기 기능을 활용해주세요.", "maxLength": 100, "params": [ { "name": "courseId", "type": "text", "description": "course id", "isRequired": true }, { "name": "imageBadge", "type": "text", "description": "공백 없이 최대 4글자까지 입력이 가능합니다.", "isRequired": true }, { "name": "imageBadgeBackgroundColor", "type": "text", "description": "기본 값은 #ff7450입니다.", "isRequired": true, "defaultValue": "#ff7450" }, { "name": "imageBadgeTextColor", "type": "text", "description": "기본 값은 #ffffff입니다.", "defaultValue": "#ffffff" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "colorTheme": "theme--light", "mobileColumnCount": 2, "useNewTab": false, "title": "", "reverseOrder": false, "courseList": [ { "courseId": "", "imageBadge": "", "imageBadgeBackgroundColor": "#ff7450", "imageBadgeTextColor": "#ffffff" } ] }, "template": "

\"\n data-color-theme=\"<%= colorTheme %>\"\n data-use-new-tab=\"<%= useNewTab %>\"\n data-mobile-column-count=\"<%= mobileColumnCount %>\"\n data-title=\"<%= title %>\"\n data-padding-top=\"<%= paddingTop %>\"\n data-padding-bottom=\"<%= paddingBottom %>\"\n data-reverse-order=\"<%= reverseOrder %>\"\n style=\"padding-top: <%= paddingTop / 10 %>rem; padding-bottom: <%= paddingBottom / 10 %>rem;\"\n>\n

\n <% if (title) { %>\n

<%= title %>

\n <% } %>\n

\">\n

\"\n data-course-id=\"<%= course.courseId %>\"\n data-image-badge=\"<%= course.imageBadge %>\"\n data-badge-background-color=\"<%= course.imageBadgeBackgroundColor || '#ff7450' %>\"\n data-badge-text-color=\"<%= course.imageBadgeTextColor || '#ffffff' %>\"\n data-id=\"<%= (course.id ) ? course.id : ( reverseOrder ? (course.id = course.length-idx) : (course.id = idx+1) ) %>\"\n >\n <% if (course.courseId) { %>\n \">\n <% if (course.imageBadge) { %>\n
; color: <%= course.imageBadgeTextColor || '#ffffff' %>\">\n
);\">\n <%= course.imageBadge %>\n
\n
\n <% } %>\n
\n
\n
\n
\n \n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "60", "colorTheme": "theme--light", "mobileColumnCount": 2, "useNewTab": false, "title": "", "reverseOrder": false, "courseList": [ { "courseId": "263254", "imageBadge": "", "imageBadgeBackgroundColor": "#ff7450", "imageBadgeTextColor": "#ffffff", "id": 1 }, { "courseId": "261247", "imageBadge": "", "imageBadgeBackgroundColor": "#ff7450", "imageBadgeTextColor": "#ffffff", "id": 2 }, { "courseId": "261348", "imageBadge": "", "imageBadgeBackgroundColor": "#ff7450", "imageBadgeTextColor": "#ffffff", "id": 3 }, { "courseId": "259531", "imageBadge": "", "imageBadgeBackgroundColor": "#ff7450", "imageBadgeTextColor": "#ffffff", "id": 4 }, { "courseId": "257360", "imageBadge": "", "imageBadgeBackgroundColor": "#ff7450", "imageBadgeTextColor": "#ffffff", "id": 5 } ] }, "uniqueId": "fc-block-47-mfjfucjod", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-t6y2onszs", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "60", "backgroundColor": "#121212", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#a0a0a0", "text": "返金規定
\n
\n\n \nオンライン講座商品の規定

\n\n\n* 詳細ページ内の一部画像は講座に対する理解を深めるためのイメージです。
\n* 本商品はVOD動画形式の講座を提供するオンライン講座です。
\n* 割引は状況により事前の告知なく終了、延長されることがございます。
\n* 事前予約講座の場合、講義映像は公開日程に応じて順次製作および公開され、1次映像公開日が受講開始日となります。
\n* 決済が完了されますと、マイ講義室を通じてご受講いただけます。

\n\n総学習期間:
\n– 最初の10日間は正常受講期間(有料受講期間と同様)で、無料受講期間は11日から以降無制限であり、有料受講期間と無料受講期間とも同様にご視聴いただけます。
\n– 受講開始日: 受講開始日は決済日から期間が算定され、決済を完了するとマイ講義室からご受講いただけます。（事前予約講座は1次映像公開日が受講開始日となります）
\n– 弊社の都合で受講開始が遅れた場合は、その日程分の受講開始日が延期されます。

\n\n\n

\n \n機器台数制限及びその他のご注意事項

\n\n[Fastcampus ID共有禁止ポリシー］
\nFastcampusのすべてのオンライン講座では、1つのIDで複数の人が共有する形を禁止しています。\n同時接続の記録は内部システムを通じて自動的に累積され、その後のサービス利用が制限される場合があります。\n

\n[著作権ポリシー］
\nFastcampusのすべての講座は、無断で配布・加工する行為、キャプチャと録画して共有する行為、無断で販売する行為など、一切の著作権侵害行為を禁止します。
\n不正使用が見つかった場合、著作権法違反による法的な制裁を受ける可能性があります。
\n

\n \n講座商品のご注意事項

\n\n*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
\n*講座の返金規定はFastcampusの返金ポリシーに準じます。
\n ▶ 返金ポリシーはこちら" }, "uniqueId": "fc-block-1-cr7o1wh1n", "isChecked": false, "hasSyntaxErrorTags": false } ]

AI時代のWeb開発講座: Claude Codeで作るアプリ開発実践コース

講座詳細

[Course]Webプログラマー, たにぐちまこと_타니구치_FC/JP Details