ホームページ制作入門コース
HTML/CSSの実践スキルを習得できる
Webサイトコーディング
基礎講座
HTML5 CSS3 AdobeXD対応！
実践から学ぶHTML/CSSオンライン講座Webサイトコーディング基礎講座のお申込み
Webサイトコーディング基礎講座
ホームページでよく使うHTML/CSSがわかる！
5,500円（税込）
- 受講形式
- eラーニング（いつでも学習できるオンライン講義）
- 視聴期限
- 受講開始から1年間
こんな方におすすめですWebサイトコーディング基礎講座で学べること
-
ホームページ制作の初心者、HTMLとCSSの実用スキルを習得したい方
実践で必要なHTMLとCSSの書き方・使い方・実装手順を学ぶことができます。
-
デザインカンプからWebページを実装できるようになりたい方
Adobe XD版のデザインカンプを事例に、正確なデザインの再現とコーディングができるようになります。
-
スキルアップを考えている方、副業やフリーランスで仕事をしたい方
Webサイト制作の業務案件受注を前提にHTMLとCSSの標準規格やコーディングの基本を学ぶことができます。
Webサイトコーディング基礎講座の特徴
- コーディングの基本を完全マスター！
- 実務で使えるHTML/CSSを習得！
- AdobeXDデザインカンプを攻略！
HTML/CSSのコーディング技術をしっかり学ぶWebサイトコーディング基礎講座の学習内容
デザインカンプの構造を理解しながら
正確なWebコーディングができるようになります。
Webサイト作成の実践環境
- 開発用ディレクトリの説明
- Visual Studio Code、XDデザインカンプの確認
- Google Chrome検証ツールの使い方の解説
ヘッダーエリア
- ボックスモデルの考え方
- htmlの書き方、クラス名の付け方
- 基本的なhtmlタグの解説
- cssの書き方
- imgタグ、画像サイズを調整するcss
- cssレイアウトデザイン基礎（Flexboxの使い方）
ファーストビューセクション
- 背景画像を指定する5つのプロパティ
- 背景画像を画面いっぱいにぴったり表示させるテクニック
- 配置位置を調整するcssの解説（positionの便利な使い方）
コンセプトセクション
- インナー幅の設定
- 共通ブロックのhtmlとcssの考え方と書き方
- よく使う中央揃えの2つの方法
- アルファベットテキストの豆知識（読み上げソフト対策）
サービス案内セクション
- 影の付け方、ドロップシャドウの使い方
事例セクション
- cssレイアウトデザイン応用（Flexboxの使い方）
- よく使うN番目の要素のスタイル指定方法
- html、cssで作るボタン素材の基礎
ニュースセクション
- カードの横並びデザインのつくり方
- 背景色の塗り分けデザイン
会社案内セクション
- 表の作成、tableタグを使ったcssデザイン
- リストの横並び、均等、中央配置
お問い合わせフォーム
- htmlとcssでつくるformデザイン
- inputタグ、type要素、name属性の解説
- 疑似要素の使い方
- 送信ボタンのスタイル指定
フッターエリア
- 複数ブロックのCSSレイアウトデザイン
全体のブラッシュアップ
- ページ内リンクの設定
- ボタンのクリック範囲の指定、ホバーアクション、カーソル調整
- 画像の隙間対策
- ラジオボタンのラベル
目標は、デザインカンプ通りのWebデザインをHTMLとCSSで実装できるようになること。
ホームページ制作の仕事では、Webデザイナーが作成したワイヤーフレームやデザインカンプを正確且つ美しく実装できるスキルが求められます。HTMLとCSSの実装学習と同時に、模写のベースとなるデザインカンプの取り扱いにも慣れておくことが重要です。また、業務で使われるさまざまなソフトウェアに触れておくことで仕事の受注の幅が広がり、プロジェクトをスムーズに進めることができるようになります。
この講座では、初級向けにシンプルなウェブデザインのデザインカンプを事例に、HTML/CSSコーディングの基礎基本と実践的なコーディング手順をしっかり学ぶことができます。特に、Webサイトコーディング初心者の方は、ボックスモデルの理論や、HTMLとCSSの効率的な使い方・書き方、デザインカンプからの模写方法やコーディング手順を身につけてください。これができるようになると、いろいろなWebサイトのコーディングに応用できるようになります。
応用コースとして、レスポンシブコーディング講座 もご用意しております。ステップアップ学習にご活用ください。
この講座で身につくスキル
プロのWebエンジニアが仕事で必要な
基礎基本を盛り込んで監修しています。
-
HTML
ホームページ作成でよく使うHTMLタグの使い方と実装手順がわかります。
-
CSS
デザインカンプ通りのWebデザインを実現するためのCSSスキルが身につきます。
-
Visual Studio Code
実用向きのフリーエディタの使い方を習得できます。
-
Adobe XD
デザインカンプのサンプルを用いて、HTMLとCSSで実装できるようになります。
-
検証ツール
ウェブページ制作に便利なGoogle Chromeの検証ツールを活用できるようになります。
ガイダンス
| 講座名 | Webサイトコーディング基礎講座 |
|---|---|
| 提供教材 | 学習用データ（html・cssファイル、画像素材） 完成版データ デザインカンプ（Adobe xd形式ファイル） |
| 受講料金 | 16,500円（税込） ≫ キャンペーン料金はこちら |
| 講義形式 | オンライン講義（eラーニングでいつでも受講可能） |
| 所要時間 | 実演講義 約6時間15分 |
| 視聴期限 | 視聴開始日から1年間 （期間内は何度でもご覧いただけます） |
| 使用ツール | Adobe XD／Visual Studio Code（無料エディタ）／Google Chrome※ご利用のパソコンに事前にご準備ください。※Adobe XDは、2023年2月よりAdobe Creative Cloud(Adobe CC)プランに含まれます。詳しくはAdobe公式サイトにてご確認ください。※Visual Studio Codeは、公式サイトよりダウンロードいただけます。 |
| ご用意いただくもの | インターネット環境／パソコン（MacまたはWindows）／上記使用ツール※実装学習はパソコンを推奨いたします。視聴はタブレットやスマートフォンでも可。 |
| キャンセルポリシー | 視聴開始前（購入日から1ヶ月以内）：なし 視聴開始前（購入日から1ヶ月後以降）：料金の100% 視聴開始後：料金の100%※ご返金の際は受講料金から振込手数料を差し引いた金額をご返金いたします。 |
受講の流れ
-
1. 講座のお申し込み・購入手続き
こちらよりご購入手続きをお願いいたします。お手続き完了後、受講に関する案内メールをお送りいたします。
-
2. アカウント発行
ご入金の確認が出来次第、アカウントを発行いたします。
-
3. 講座の視聴・学習開始
マイページにログインして視聴・学習を開始することができます。
講師・監修
柳橋 史成
工学エンジニアを経て、兼業でWebコーディング業務の受託を開始。2023年、フリーランスWebエンジニアとして独立し、主に、LPやコーポレートサイトのフロントエンドコーディング・WordPressオリジナルテーマ開発等を手掛ける。さまざまな業種の企業や個人のWebサポートや教育を行っている。
Web業界では、未経験からWebコーダーを目指す人が増えた一方で、クライアントやデザイナーの意図を汲み取った実装ができるコーダーは、まだまだ少ないと感じています。実案件では、デザインカンプから意図を読み取るスキルが求められます。実務で必要な着眼点やノウハウを、本講座で学んでいきましょう。
最短でコーディングの基礎を習得しよう！
Webサイトコーディング基礎講座を
受講したお客様の声
-
HTMLとCSSの実装方法をしっかり学習できました
東京都 A.M 様 / コーダー
HTMLとCSSのコードは一通り学習したつもりでいたしましたが、少し複雑なデザインになるとどこから手を付けてよいか迷いがありました。ボックスモデルの考え方を教えていただいたおかげで、実装前に使うコードをイメージができるようになりました。HTMLとCSSの実装方法をしっかり学習できました。
-
デザインカンプで指示がくる制作案件を受注できるようになりました
大阪府 K.S 様 / Webエンジニア
デザインカンプから模写するホームページ制作案件が増えてきたので受講しました。これまでAdobe XDは触れたことがありませんでしたが、xd形式のデザインカンプを見ながら実装する流れは早速役に立ちました。おかげさまで、デザインカンプで指示がくる案件を受注できるようになりました。
-
HTMLとCSSの使い方がわかりやすくて感動
福岡県 M.M 様 / Webデザイナー
本職はウェブデザインですが、ホームページの修正依頼に対応できるよう学習を試みました。解説が丁寧でレイアウトに応じたHTMLとCSSの使い方がわかりやすくて感動しました。どの内容も重要な基礎だと感じました。ありがとうございました。
- 埼玉県 T.K 様 / Webデザイナー HTMLとCSSの本を読んだ程度の私にちょうどいいレベルでした。実装の基礎知識がわかりやすくまとめてあり、視聴するだけでも参考になります。
- 東京都 M.I 様 / コーダー デザインカンプからコーディングする流れと検証ツールの使い方がわかってスッキリしました。
- 愛知県 S.T 様 / Webデザイナー 解説がとても丁寧で役立つ情報ばかりでした。あと、Visual Studio Codeは使いやすくて驚きました。教えていただきありがとうございました。
- 鹿児島県 H.N 様 / Webエンジニア 聴きやすくて、基礎内容が盛りだくさんの講座でした。XDは持っていないので画面と完成版を見ながら実装しましたが、とてもいい勉強になりました。
- 神奈川県 T.O 様 / Webデザイナー 復習を兼ね受講しました。よく使いそうなレイアウトが題材だった点が良かったです。
よくある質問
- ホームページ制作、HTML・CSSの初心者でも受講できますか？
- HTML・CSSの初級レベルの方でも受講いただける内容となっております。実践でよく使うHTMLとCSSの基礎基本を学習できます。
- 事前に準備するものはありますか？
- 講座で使用するツールをご用意ください。詳しくはガイダンスの使用ツールをご覧ください。
- 受講料の支払い方法は？
- クレジットカード払い、銀行振込よりお選びいただけます。
- 銀行振込の場合の振込期限は？
- お申込みいただいた日から3営業日以内となります。ご入金が確認できなかった場合はキャンセルとさせていただきます。
- グループでの申し込みはできますか？
- 可能です。ただし、おひとり様つき1つのアカウントの登録・発行が必要となります。お手続き方法をご案内させていただきますので、お問合わせフォーム より受講人数をご連絡ください。
- 申し込み後のキャンセル料はかかりますか？
- 講義形式がeラーニングの講座は、受講開始までキャンセル料はかかりません。
ただし、ご購入日から1ヶ月以降よりキャンセル料の対象となりますのでお早めにご連絡ください。 - Webサイトのコーディングとは何ですか？
- Webデザインやウェブ設計書をもとに、マークアップ言語（HTMLやCSSなど）やプログラミング言語をファイルに書いて、Web上で「見る」「動く」をできるようにする作業をコーディングと言います。コーディングされたファイルは、ブラウザに表示して見ることができます。コーディングはWebサイトやホームページの制作工程で必須の作業となります。この講座では初級コースとして、HTMLとCSSのコーディングの基礎をしっかり学ぶことができます。
実務で使えるHTML/CSS基本技術を習得できるWebサイトコーディング基礎講座のお申込み
Webサイトコーディング基礎講座
HTML/CSSの使い方の基本がわかる！
5,500円（税込）
- 受講形式
- eラーニング（いつでも学習できるオンライン講義）
- 視聴期限
- 受講開始から1年間