XD UIデザイン+ Clone CodingインタラクティブレスポンシブWebポートフォリオ！
lizb
￥6,612
初級 / Responsive Web, Interactive Web, XD
4.7
(6)
100+
実務でやろう！スクロールに対応するレスポンシブWebポートフォリオ＃最高のエンジニアリング
初級
Responsive Web, Interactive Web, XD
HTML5 CSS3基礎＆レスポンシブWebテンプレートを作成！
Web標準入門者のための実務で必ず使用する必要なアクギスだけ集めて作られたレスポンシブWeb初級講義！
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
講座 を紹介して、成長と収益を得ましょう！
マーケティングパートナーズ
講座 を紹介して、成長と収益を得ましょう！
学習した受講者のレビュー
学習した受講者のレビュー
5.0
5.0
도림
8% 受講後に作成
パブリッシャーとして就職準備をしている 受講することになりましたが、講義を聞いて詰まった部分が生じて質問をするようになれば、親切に答えもよくしてくれ、講義内容も整理が上手くなってポートフォリオを作るのに役立ちました。
5.0
뉴스나인
100% 受講後に作成
良い講義ありがとうございます。
5.0
다랑어치킨
100% 受講後に作成
CSSとメディアクエリを使ったレスポンシブなWebを構築することを学ぶのに最適なレッスンでした！
受講後に得られること
html5
css3
Web標準
vscodeの使い方
レスポンシブウェブ
media queryを使用したレスポンシブWebの作成
レスポンシブナビゲーションの作成
html情報設計方法を知りたい人
国旗課程運営のノウハウを込めた！
実務ですぐに利用できるレスポンシブWebテンプレートの作成
HTML5 + CSS3
HTML5とCSSの基礎と
レスポンシブウェブについて学ぶ
最終的にレスポンシブWebテンプレート
作ってみる講座です！
講義を始める前に
この講義で
何を学べますか？
このレッスンは、Web標準に初めて触れる人のために作成されました。 HTML / CSSの非常に簡単な基礎から、HTMLインフォメーションデザインとCSSレイアウトを作成し、最終的にレスポンシブWebテンプレートを作成することを目指しています。
実務ですぐに活用できますが、ノウハウをベースにレスポンシブなWebテンプレートの制作過程を盛り込みたいと思います。 HTMLの基礎、CSSの使い方、実務で主に使われるCSS Layoutの作り方、Flexの使い方まで順番に習得し、Webパブリッシャーに向かって一歩ずつ近づきましょう。
この講義
特徴は何ですか？
基本的な内容から実務から必要な深化学習まで。各パートの実習問題と講義ノートを確認してみてください！
セクションの最後にはセクションごとの練習問題があります。問題を最初に解決して結果を確認した後、次のセクションの講義を聞くことをお勧めします。
学生が理解しやすく簡単に勉強できるように、講義ノートをPDFとして提供しています。オン・オフラインで授業を進め、体を感じたノウハウを盛り込んで発展させたことで、皆さんの学習に大いに役立つでしょう。
この講義は
誰に必要ですか？
コーディング一度
学ぶか？
コーディング入門を希望
コーディング生初心者
Webパブリッシャー
なりたい
コーディングは全く分からないけど
転職を希望される方
情報設計は
どうしますか？
UIデザイン用
情報設計が必要な方
ポートフォリオ用
テンプレートはありませんか？
レスポンシブウェブサイト
テンプレートが必要な方
Webコーディングに入門したい方、コーディングを全く知らない状態でWebパブリッシャーへの転職を希望される方、UIデザイン時に情報設計が必要な方、パブリッシングを学ばなければならないデザイナー… 。多様な方に役立つために体系的で不可欠な内容だけを選んで作りました。一人で勉強するのがとても難しく、膨大な量でガタガタを食べたらお手伝いします！
また、パブリッシングを習得するデザイナーやWebパブリッシャーをご希望の方は、講義を通じて作成するテンプレートをポートフォリオの作成に利用することができます。
この講義はこうして行われます
html基礎文法とvscodeを使用したドキュメントの作成タグの特性について学びます。
cssの基礎文法と使い方、様々なセレクタについて勉強します。
htmlで主によく使われるtagとsemantic /list /ユーザー入力tag / groupingのさまざまなtagと使い方について学びます。
CSSの首都クレスと段落ソート、フォント、単位について勉強します。
CSSの核心の一つとして、ディスプレイとボックスモデルについて集中的に勉強します。
cssのレイアウトに主によく使われるflexとpositionそしてtransition/animation/transformについて勉強します
part7。 css / media query /レスポンシブWeb
レスポンシブなWeb作業のためのメディアクエリについて学びます。
包括的な例を通して学ぶ
レスポンシブウェブ作成プロセス
知識共有者と作るシアンの仕事を確認してください！一汗一汗一緒に作りましょう！
このレッスンでは、シアン、つまりデザイン作業を作成するプロセスは含まれていません。参考にしてください。
包括的な例を見る
デスクトップ画面
タブレット画面
navigation
responsive
モバイル画面
予想される質問Q&A
Q. 非専攻者も学ぶのに難しくないですか？
はい、非専攻者も簡単に習得できるように説明ノートを用意しました。講義を聞いて難しい部分がある場合は、いつでも質問してください。できるだけ早く対応させていただきます。
Q. この授業を受けてパブリッシャーになれますか？
始まりは半分です。この講義をよく学習してから自分でどれほど努力して学習するかによって異なりましたが、十分にパブリッシャーになることができると思います。空白ではなく、オフライン講義で直接体を感じたバーです。
Q. 授業内容はどのレベルまで扱いますか？
HTML5/CSS3 特にlayout製作中、flexを主に活用したレスポンシブWeb製作および情報設計方法に焦点を当てました。
こんな方に
おすすめです
学習対象は
誰でしょう？
コーディングに初めて接する方
早い時間に重要な内容だけを勉強しなければならない方
レスポンシブWebポートフォリオを作成する方
UIデザインを見て、情報設計をどのようにするべきか、大変な方
前提知識、
必要でしょうか？
英語キーボードのキーボードを覚えているなら、もう少し楽です！
こんにちは
lizbです。
785
受講生
43
受講レビュー
92
回答
4.7
講座評価
7
講座
知識共有者のオフライン国費支援コースの受講レビューを見る
「レスポンシブウェブデザイン養成課程」受講レビューはこちら
(2022.03-2022.07)
3月から現在まで、長いと言えば長く、短いと言えば短い時間だったかもしれませんが、私の人生においては本当に重要で価値のある期間だったと思います。事前知識はある程度ありましたが、どうすればいいのか、どの方向へ進むべきか、何をすべきか全く分からず途方に暮れていました。しかし、先生が誠心誠意教えてくださったおかげで、技術面でも就職面でも確かな成長を遂げることができたと感じています。そのおかげで自信もつき、就職後も上手くやっていけそうだという気がしています！授業を担当してくださったパン・ミジョン先生、そして就職担当の先生方、本当にありがとうございました！:) 無事に就職して卒業します！後輩の皆さんも頑張って、良い経験を積んでくださいね！ファイト！:)
3月から7月までウェブパブリッシャー養成課程を受講しました :) デザイン以外は何も分からない状態で挑戦したのですが、先生や仲間の応援と支えのおかげで、多くのことを得られた気がします。学院で学んだことを土台に、これからも一生懸命勉強していきます~~ いつも親切に教えてくださったパン・ミジョン先生、そして就職担当の先生方、本当にありがとうございました！
「フロントエンド開発者養成課程」受講レビューはこちら
(2020.11.17-2021.05.11)
6ヶ月という時間が短く感じられるほど、訓練課程は興味深いものでした。アイデアを出しデザインをする作業は時間がかかりましたが、訓練課程を通じてコツを掴み、作業時間を大幅に短縮していく自分の姿を見て、実力がどんどん向上したようで誇らしかったです。職業の方向性をうまく定められずにいた私にとって、この訓練課程で学んだことは自分だけの知識であり、職業の方向性を示してくれる道しるべでした。そして、6ヶ月間共に学んだフロントエンド開発者養成課程3教室の仲間たちとパン・ミジョン講師は、素晴らしい縁であり心の支えでした。パン・ミジョン講師と就職支援チームの方々、行政職員の方々が熱心に助けてくださったおかげで、訓練課程を修了する前に就職が決まったのだと思い、心から感謝しています。この課程以外にも他にも良い課程がたくさんあるので、大宇職業能力開発院という学院を、私のように就職への不安があったり、職業の方向性をうまく定められなかったりする後輩や友人たちに推薦したいです。
初めて来たときは、デザインもコーディングも一度も学んだことがない私が、果たしてこの過程を受講して就職できるだろうか？と、とても心配していたように思います。ですが、通えば通うほど、そのような不安は消えていきました。イラストレーター、フォトショップ、HTML、CSS、JS、Vueなど、多くのことを学びました。新しく学ぶことが多いので、序盤は難しいかもしれませんが、情熱あふれるパン・ミジョン先生が本当に丁寧に教えてくださるので、心配しなくても大丈夫だと思います（笑）。他のスクールのレビューを見ると、毎年同じレパートリーの授業だったり、ひどい場合は先生に質問してもよく分かっていないケースもありますが、先生は常に情熱を持って新しいことも教えようとしてくださり、知識も豊富なので、たくさん助けていただきました！ウェブパブリッシャー、ウェブデザイナーを目指しているなら、超オススメです。~~
昨年2020年11月、偶然の機会に大宇職業能力開発院という素晴らしい機関を知り、ここで素晴らしい先生に出会って良い教育を受講できたことに心から感謝しています。もし私がこの教育訓練課程を受けていなかったら、おそらく今のような就職の機会を得ることは難しかったでしょう。大学卒業後、就職の分かれ道で方向性を定められず彷徨っていた時期に、他ではなかなか学べない先生の実際の教務経験とノウハウが詰まった5〜6ヶ月間の教育課程は、ウェブ開発について全く知らなかった私にとって大きな学びと成長の期間となりました。これを基盤に、多様なデザインとウェブ開発を学び、自分だけのポートフォリオも作ることができました。私にはあまりに馴染みのないコーディング言語を学ぶことは難しく、途中で諦めたくなる瞬間が何度もありましたが、諦めずに10回でも繰り返し教えてくださる先生の情熱と導きのおかげで、6ヶ月の課程をすべて修了する前（80％以上受講）に早期就職が決まり、教育課程を無事に終えることができました。このように、初めての職場を得て新たな出発ができるようにしてくださった先生と、大宇職業能力開発院という機関に深く感謝いたします。
非専門家でも理解しやすいように教えてくださり、そのおかげで無事に就職もできました。この課程を受講できて本当に嬉しいです。
デザインやコーディングツールを実務で使えるカリキュラムに合わせ、基礎から一歩ずつ丁寧に説明してくれます。自分自身で作業ができるよう、先生が最善を尽くしてサポートしてくださり、とても助かりました。国費の授業はクオリティが低いという偏見を打ち破るような教育でしたし、担任の先生も非常に進取的で、常に新しいことを教えようとしてくださったおかげで、多くのことを学ぶことができました。
非専門家でも理解しやすいように教えてくださり、そのおかげで無事に就職もできました。この課程を受講できて本当に嬉しいです。
以前から持っていた知識に加え、学院での教育を通じて様々なことを知り、学ぶことができました。資格も取得できるよう練習も重ね、私には難しかったコーディングという言葉も、大体は理解できるほどに上達しました。こちらを受講しながら就職も決まり、安心したと同時にとても嬉しく思っています。
建築学を専攻し、ウェブデザインと縁を結んでからかれこれ20年以上が経ちました。実務と講義を並行しながら、多くの喜怒哀楽を経て、現在は今の仕事をとても愛するようになり、興味と達成感を持ってさらに邁進するようになりました。私が持っている知識を共有することで、より多くの非専門家の方々が簡単に第一歩を踏み出せることを願い、あなたの望むすべてのことが叶うようお祈りいたします。
Lucete!
講義に関するお問い合わせメール： loo4love90@gmail.com
講師経歴
2018.3 - 現在。ウェブデザイン/マルチメディア/フロントエンド専門家課程 進行中
エリスアカデミー `クラスが違う HTML / CSS` オープン準備中
エリスアカデミー `クラスが違う javascript` オープン準備中
□ 現 大宇職業能力開発院 フロントエンド / マルチメディア / ウェブコンテンツ課程 講義
□ ハイメディア UI/UX ウェブパブリッシング 講義
□ イゼンコンピューター UI/UX ウェブパブリッシング講義
□ ザ・ジョウンコンピュータ学院 鍾路キャンパス ウェブデザイン講義
□ ザ・ジョウンコンピュータ学院 江南キャンパス ウェブデザイン/グラフィック講義
□ 英才職業専門学校 ウェブデザイン講義
資格証
□ ウェブデザイン技能士 資格
□ コンピューターグラフィックス運用技能士 資格
□ KPC 資格指導者(GTQ, GTQi, GTQid) 資格証
□ 職業能力開発訓練教員3級（情報技術、デザイン、文化コンテンツ、情報技術戦略・計画
情報技術運用）
□ コンピュータ活用能力1級
カリキュラム
全体
77件 ∙ (10時間 0分)
講座資料（こうぎしりょう）:
授業資料
1. htmlとは？
03:27
2. メモ帳でhtml文書を作成する
02:36
3. タグの特性
06:53
6. tag a
08:14
7. tag h
03:53
8. tag img
07:41
9. tag p
02:53
10. part1 練習問題
09:35
11. 完全な作業ファイルを取得
01:32
講座掲載日:
最終更新日:
受講レビュー
全体
9件
5.0
9件の受講レビュー
kcm9010230725受講レビュー 2
∙
平均評価 5.0
5
8% 受講後に作成パブリッシャーとして就職準備をしている 受講することになりましたが、講義を聞いて詰まった部分が生じて質問をするようになれば、親切に答えもよくしてくれ、講義内容も整理が上手くなってポートフォリオを作るのに役立ちました。
- lizb知識共有者
ああ受講評を今見ましたね。ドランありがとうございます@！一生懸命学んでキャリアに役立ててほしい！
- eldeach
受講レビュー 4
∙
平均評価 5.0
- inrina9921
受講レビュー 2
∙
平均評価 5.0
- gtgyujung4745
受講レビュー 27
∙
平均評価 4.7
- roykean19930688
受講レビュー 35
∙
平均評価 5.0
5
100% 受講後に作成レイアウトとレスポンシブの勉強に大いに役立ちました
- lizb知識共有者
役に立ったなんて、私も嬉しいですね。反応型関連の中級講義もすぐに発売するので、多くの関心をお願いします！ありがとうございます〜
lizbの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![モダン ウェブ インタラクティブ CSS3 [PART1/3]講義サムネイル](https://cdn.inflearn.com/public/courses/335744/cover/32ae213b-41d5-4c80-8408-b64b8d286b58/335744.jpg?w=420)
![モダン ウェブ インタラクティブ CSS3 [PART3/3]講義サムネイル](https://cdn.inflearn.com/public/courses/335746/cover/77dcadeb-88d7-4410-939e-265755e39733/335746.jpg?w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)講義サムネイル](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?w=420)
![[2026年出題基準] Webデザイン開発技能士実技試験完璧ガイド講義サムネイル](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?w=420)
![[幻想的な足足]デザインからコーディングまで講義サムネイル](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?w=420)
