ホームページ制作必須スキル
レスポンシブWebデザインの実装を習得できる
レスポンシブコーディング
実践講座
HTML5 CSS3 jQuery Figma対応！
実用的なHTML/CSS/jQueryを学べるオンライン講義レスポンシブコーディング講座のお申込み
レスポンシブコーディング講座
キャンペーン割引 12/30まで
22,000円13,200円（税込）
- 受講形式
- eラーニング（いつでも学習できるオンライン講義）
- 視聴期限
- 受講開始から1年間
こんな方におすすめのオンライン講義ですレスポンシブコーディング講座で学べること
-
ホームページ制作の実用スキルを習得したい方
パソコンとスマートフォンに対応したレスポンシブサイトに必要なモバイルファースト技術やJavaScriptライブラリを使った動的コンテンツの実装方法を学ぶことができます。
-
デザインカンプからWebサイトを実装できるようになりたい方
実務を想定しFigma仕様のデザインカンプを事例に、正確なデザインの再現と模写コーディングができるようになります。
-
初級レベルからステップアップを考えている方
ホームページ業務案件の受注を前提にHTML/CSSの標準規格や、Webコーディング実務の必須スキルが身につきます。
レスポンシブWebコーディング講座の特徴
- HTML/CSSを完全マスター！
- レスポンシブ化を攻略！
- 実務で使えるjQueryを習得！
レスポンシブウェブデザイン対策の決定版レスポンシブコーディング講座の学習内容
デザインカンプの内容を実装しながら
レスポンシブサイトを制作できるようになります。
Webコーディング環境の解説
- ディレクトリの説明
- Figma デザインカンプの開き方と画像の書き出し方
- 検証ツールの使い方
レスポンシブWebデザインのコーディング基礎
- レスポンシブサイトコーディングの基本
- HTMLファイルの初期コード設定
- PC・スマホ対応のHTMLとCSS実装
- ハンバーガーメニューボタンの実装
- CSSメディアクエリの書き方
- Google Fontsの使い方と設定方法
- 画面幅変動時の画像サイズ問題の解決法
スライダー実装基礎
- JavaScriptライブラリ「Swiper.js」の使い方と設定手順
- JavaScriptファイルの作成
- PC版とスマホ版の画像素材の切替方法
よく使うレスポンシブコード
- インナーブロック幅のレスポンシブ設定
- 縦横並びレイアウトのレスポンシブ
- 共通パーツの作成
- 疑似要素タイプのボタン作成
レスポンシブサイト対応の表レイアウト
- tableのHTML/CSS実装
- tableのスクロール制御
- JavaScriptライブラリ「ScrollHint」の使い方と設定手順
スライダー実装応用
- Swiper.jsの複数設置対策
- Swiper.jsのオプション利用
- クラスの詳細度
- スライダーのレスポンシブウェブデザイン
- 親要素の高さ揃えと子要素配置のCSSテクニック
フォームのHTML/CSS応用仕様
- ラベルの紐づけ
- 疑似要素タグの作成
- セレクトボックス（都道府県）のコーディング
- ラジオボタンとチェックボックスのオリジナルデザイン
- テキストエリアのコーディング
- 送信ボタンのオリジナルデザイン
- formのレスポンシブウェブデザイン
よく使うフッターエリアの実装
- ナビゲーションメニューのレスポンシブウェブデザイン
- トップ遷移ボタンの作成
- アンカーリンクの設定
jQueryアニメーション
- JavaScriptライブラリ「jQuery」の使い方と設定手順
- ページトップへ戻るボタンのjQuery実装
- ラジオボタン装飾のjQueryとCSS実装
- チェックボックス装飾のjQueryとCSS実装
- スマホ用ハンバーガーメニューのjQueryとCSS実装
- スクロール時のフェードイン表示
目標は、PC・スマホに対応したレスポンシブウェブデザインを実装できるようになること。
現在は、モバイルフレンドリーやモバイルファーストといったスマートフォンにも対応できる知識は必須です。そのようなレスポンシブウェブデザインの実装では、HTML/CSSの応用スキルに加え、コンテンツに動きを表現するためのJavaScriptを使ったプログラミング言語の知識も必要となります。
また、ホームページ制作の仕事では、Webデザイナーが作成したワイヤーフレームやデザインカンプを正確且つ美しく実装できるスキルが求められます。HTMLとCSSの実装学習と同時に、模写のベースとなるデザインカンプの取り扱いにも慣れておくことも重要です。
この講座では、レスポンシブサイトのデザインカンプを事例に、HTML/CSSの応用スキルと実践的なコーディング手順をしっかり学ぶことができます。特に、レスポンシブコーディング初心者の方は、HTMLとCSSの効率的な書き方、よく使うJavaScriptライブラリの使い方、デザインカンプからの模写手順を身につけてください。これができるようになると、Webサイトのコーディングを仕事にできるようになります。
1つの講座でこれだけの知識と技術を網羅
プロのWebエンジニアが実務で必要な
基礎応用を盛り込んで監修しています。
-
HTML
レスポンシブサイトの制作でよく使うHTMLタグの使い方と実装手順を習得できます。
-
CSS
レスポンシブウェブデザインを実装するためのCSSの応用スキルが身につきます。
-
JavaScriptライブラリ
ホームページに動きやアニメーションを実装するためのJavaScriptライブラリを使えるようになります。学習したコードは実務でご利用いただけます。
-
Visual Studio Code
実用向きのフリーエディタ VSコードを使いこなせるようになります。
-
Figma
Figmaでつくられたサンプルのデザインカンプからウェブページを制作できるようになります。実務さながらのトレーニングが可能です。
-
検証ツール
ホームページ制作に便利なGoogle Chromeの検証ツールを実践で活用できるようになります。
ガイダンス
| 講座/セミナー名 | レスポンシブコーディング講座 |
|---|---|
| 提供教材 | 学習用データ（html・css・jsファイル、画像素材） 完成版データ デザインカンプ（figmaファイル） |
| 受講料金 | 22,000円（税込） ≫ キャンペーン料金はこちら |
| 講義形式 | eラーニング（オンライン講義でいつでも受講可能） |
| 所要時間 | 実演講義動画 約10時間38分 |
| 視聴期限 | 視聴開始日から1年間 （期間内は何度でもご覧いただけます） |
| 使用ツール | Figma（無料ツール）／Visual Studio Code（無料エディタ）／Google Chrome（ブラウザ）※ご利用のパソコンに事前にご準備ください。※Figmaは、公式サイトにてアカウントを作成しログインできる状態にしてください。※Visual Studio Codeは、公式サイトよりダウンロードいただけます。 |
| ご用意いただくもの | インターネット環境／パソコン（MacまたはWindows）／上記使用ツール※実装学習はパソコンを推奨いたします。視聴はタブレットやスマートフォンでも可。 |
| キャンセルポリシー | 視聴開始前（購入日から1ヶ月以内）：なし 視聴開始前（購入日から1ヶ月後以降）：料金の100% 視聴開始後：料金の100%※ご返金の際は受講料金から振込手数料を差し引いた金額をご返金いたします。 |
受講の流れ
-
1. 講座のお申し込み・購入手続き
こちらよりご購入手続きをお願いいたします。お手続き完了後、受講に関する案内メールをお送りいたします。
-
2. アカウント発行
ご入金の確認が出来次第、アカウントを発行いたします。
-
3. 講座の視聴・学習開始
マイページにログインして視聴・学習を開始することができます。
講師・監修
柳橋 史成
工学エンジニアを経て、兼業でWebコーディング業務の受託を開始。2023年、フリーランスWebエンジニアとして独立し、主に、LPやコーポレートサイトのフロントエンドコーディング・WordPressオリジナルテーマ開発等を手掛ける。さまざまな業種の企業や個人のWebサポートや教育を行っている。
Web業界では、未経験からWebコーダーを目指す人が増えた一方で、クライアントやデザイナーの意図を汲み取った実装ができるコーダーは、まだまだ少ないと感じています。実案件では、デザインカンプから意図を読み取るスキルが求められます。実務で必要な着眼点やノウハウを、本講座で学んでいきましょう。
最速でレスポンシブ化できるようになる！
実務を想定した実践学習だから
着実にスキルアップできる
レスポンシブコーディング講座を
受講したお客様の声
-
仕事ですぐに使えるようになりました
東京都 S.T 様 / コーダー
求めていたスキルを得ることができて大満足です！JavaScriptライブラリーは実用的な内容ばかりで、仕事ですぐに使えるようになりました。
-
Figmaから書き出しが必要になり受講しました
神奈川県 A.Y 様 / Webデザイナー
Figmaから書き出しが必要になり受講させていただきました。レスポンシブデザインの実装の流れは当然ながら、細かい部分のコーディング方法やjQueryとCSSを組み合わせた使い方は、大変勉強になりました。早速業務で使っております。
-
短期間でレスポンシブ化できるようになりました
大阪府 Y.T 様 / コーダー
コーダー初心者です。実際のコーディング業務の流れやプロの実装手順を見ることができて勉強になりました。おかげさまで、レスポンシブサイトの作り方を理解でき、短期間でレスポンシブ化できるようになりました。ありがとうございました。
- 熊本県 M.K 様 / Webデザイナー レスポンシブサイトを作るうえで全部役立つ内容でした。解説も丁寧でわかりやすくて良かったです。
- 千葉県 S.O 様 / Webエンジニア ありがとうございました！こんなにたくさんの内容をカバーしているオンライン講座ははじめてでした。これでHTMLとCSSのレスポンシブ対応も完璧です。
- 愛知県 Y.H 様 / Webエンジニア 大満足です！特にハンバーガーメニューとオリジナルフォームの作り方がとても役立ちました。
- 東京都 A.M 様 / コーダー Webサイトコーディング基礎講座に続き受講しました。PC版とスマホ版の組み立て方と実装テクニックをしっかり学習できました。
- 埼玉県 T.Y 様 / Webデザイナー HTMLとCSSは何となく理解しているレベルでしたが、一気にスキルアップできた気分です。とても充実した講義でした。ありがとうございました。
よくある質問
- ホームページ制作の初心者でも受講できますか？
- ホームページ制作初心者の方も受講いただける内容となっております。
特に、HTML/CSSを少しでも学習された方の次のステップとしておすすめです。 - Visual Studio Code以外のエディタやソフトウェアを使ってもいいですか？
- 普段使い慣れたエディタをご利用ください。
本講座では、無料で使える「Visual Studio Code」を使って解説しております。代替として、他のテキストエディタやソフトウェアでも受講いただけます。HTML、CSS、JS等のファイルを編集できるツールでしたら問題ございません。 - 事前に自分で準備するものはありますか？
- 詳しくは ガイダンス をご覧ください。
本講座で使用するツールとご用意いただくものについて掲載しております。 - 質問はできますか？
- 講師の解説について、ご不明な点は、受講期間以内はメールでご質問いただけます。
ただし、講座以外の内容や発展的・技術的なご質問は受け付けておりませんのでご了承ください。 - 受講料の支払い方法は何がありますか？
- クレジットカード払い、または、銀行振込からお選びいただけます。
銀行振込は入金および確認にお時間を要します。すぐに受講を開始されたい場合は、クレジットカードを推奨いたします。 - 銀行振込の場合の振込期限はありますか？
- お申込みいただいた日から3営業日以内となります。ご入金が確認できなかった場合はキャンセルとさせていただきます。
- 申し込み後のキャンセル料はかかりますか？
- 視聴開始まではキャンセル料はかかりません。
ただし、ご購入日から1ヶ月以降よりキャンセル料発生の対象となりますのでお早めにご連絡ください。
レスポンシブWebサイトを実装できるようになるレスポンシブコーディング講座のお申込み
レスポンシブコーディング講座
キャンペーン割引 12/30まで
22,000円13,200円（税込）
- 受講形式
- eラーニング（いつでも学習できるオンライン講義）
- 視聴期限
- 受講開始から1年間