HTMLとCSSさえ知っていれば
ウェブページ制作OK！
UI.UXデザイナー、あるいはフロントエンドエンジニアとしての就職を希望される方なら、最近のトレンドに合わせたウェブページを具現化したポートフォリオが最低でも5〜6個は必須です。
本講義は、ウェブサイト制作シリーズ講義である「実践！ウェブサイト制作 Step By Step」のBasic Courseとして、ハンファソリューション/ケミカルサイトのメインページをそのまま制作してみる講義です。
「実践！ウェブサイト制作 Step By Step」講義シリーズは、現在商用化されているウェブサイトの中から、最新のトレンドに合い、審美的な要素に優れ、ポートフォリオ制作に適したウェブサイトを選定してそのまま制作してみる講義で構成されていますので、学習の参考にしてください。, so please keep this in mind for your studies.
>> CSS Animation 制作
>> マウスホバー時にscaleが大きくなる - CSS Animation制作
>> 疑似要素を利用してマウスホバー時にスライドする Animation 制作
>> PCモードのレイアウトからタブレット(1024px, 768px)、モバイル解像度(414px, 320px)制作
>> PCモードのレイアウトからタブレット(1024px, 768px)、モバイル解像度(320px)のスクロール画面
.gif?w=960)
講義はHTMLとCSSに関する基礎はあるものの、レイアウトに関する感覚が全くない方を対象に、実際のウェブページをそのまま実装しながら進められます。ハンファソリューション/ケミカルサイトのメインページを直接制作する過程を通じて、HTML5とCSS3を活用してレイアウト制作への理解を深め、どのようなレイアウトを制作する場合でも自信を持って応用・制作できるようにお手伝いします。
レスポンシブページの制作に関する完璧な理解と制作能力の強化はもちろん、素晴らしいクオリティのポートフォリオも手に入れられるよう、一歩ずつ一緒に学習していきましょう。
Step By Step!
今すぐ始めましょう。
講義が終わった後に
得られるもの :D
ウェブページ制作のためには、HTMLとCSSに基づいた、正確なレイアウト作成が最も重要です。HTMLとCSSの基礎はあるものの、Layout Designについて全く見当がつかないという方も、基礎から丁寧に教える本講義に真面目についてきていただければ、いつの間にかレイアウト制作のしっかりとした基本が身についていることを実感できるはずです！
業務生産性を高めるためには、ライブラリやプラグインを利用して、短時間でインタラクティブなウェブサイトを構築できなければなりません。本講義では、ウェブページのレイアウト制作からレスポンシブページの制作までを確実に学ぶことができ、実務で必要とされるスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞きながら地道に実習を重ねれば、いつの間にか業務スキルがUP! UP!しているはずです。
業務スキルをアピールし、新たなチャンスを掴むための効果的な準備の一つが、まさにハイクオリティなポートフォリオです。講義を聞きながら実習を進めていくうちに、自分だけのポートフォリオが積み上がっていくでしょう。本講義だけでなく、その後に続くウェブサイト制作実習の講義を通じてコツコツとウェブページを具現化していけば、就職において最大の武器となるポートフォリオを完成させることができるはずです。
よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ（イケてるウェブデザイナー）」オープンチャットに参加すると、
Figma、UI.UX、コーディング、ポートフォリオ制作に関する役立つヒントや無料ウェビナーのリンクなどを共有いたします。
- オープンチャットルーム名：잘난웹디
- コード：jyoung
1.ウェブアクセシビリティをhtml MarkUp-文書構造の定義
2.様々なCSS3の属性を理解し、Layout Designを適用
3.positionに対する理解と適用
4.BlockとInline属性に対する理解と適用
5.Animationの理解と適用
6.擬似選択子の理解と適用(:before, :after)
7.様々なhover、focus効果
8.z-indexに対する理解と適用
9.skip_navの制作
10.FontAwesomeの使用方法と適用
11.Googleフォントの使用
12.開発者ツールの活用法
Q1. 就職に役立ちますか？
A1. 長文の文章よりも、一枚の画像の方がより強烈に伝わります。講義を聞きながらウェブページを制作しておけば、採用担当者の目に留まる華やかなポートフォリオを作ることができ、就職に大きな助けとなるはずです。
この講義の後、デザインの雰囲気やスタイルが異なる
9つのウェブサイト制作講義が順次公開されます。
ポートフォリオを準備している受講生の方々は、こちらを参考にして
ハイクオリティなウェブページ制作を一緒に進めていきましょう。
html, css, html/css, website, ウェブサイト, コーディング, coding, jquery, ジェイクエリ, レイアウト, インタラクティブウェブ, interactive web, web design, ウェブデザイン, ポートフォリオ, パブリッシング
AdobeでBracketが初めて出たときに歓声を上げた1人でした^^ エディターはさまざまですが、講師がブラケットで講義してくれて印象的でした。 レスポンシブページを作成しながら、基本的な部分を慎重に教えてくれてありがとう。 タグ理解から開発者ツール活用法まで本当にお得な講座よく聞きました。 周りの知人に強力推薦したい講座、これからもたくさん開設してください。 暑さに疲れないで健康に気をつけてください^^
本当に満足な講義でした。 講義で使用するhtmlタグやcss属性はほとんどすべて知っているものです。 コードを打ち、保存し、F5を押すたびに画面が変わることは驚くほど不思議でした。 次の講義も期待され、良い講義を頂きありがとうございます。
現在個人事業をしている40代前半の仮装です。今後の第4次産業革命時代に備えて、IT関連技術の核心であるコーディングに関心があり、基礎から身につけ、会社のホームページも直接製作するつもりで検索し、講師の講義を受講することになりました。 HTMLとCSSの基礎だけを知っている状態でしたが、講師様の講義を聞いて実際のウェブページを制作してみると理解が上手くなり、実際の活用法も多く学びました。この講義をきっかけにウェブページ制作に対する自信を得たとても役に立つ講義でした。講師の大方産業講義もまもなく受講予定です。講師の講義で学んだことを基に、素敵な会社のホームページも作り、関連するJavaScript言語も学習し続け、フロントエンターテインメントの開発までしてみようと思います。ありがとうございます。
集中してやっていると、あっという間に時間が過ぎていく... 退屈する暇がありませんね^^ 実戦投入前にcloneコーディング式で学習するのを強くお勧めします。
html、cssを学んだが、混乱が多かったのですが、ウェブ制作しながらどこでどのように使用するかよく知っていただき、簡単に復習できました！
![Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプ講義サムネイル](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)講義サムネイル](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?w=420)
