Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【最新HTML / CSS】 実践開発コース　ワンランク上のCSSで上級WEBデザイナーを目指すリスキリングコース
Highest Rated
Rating: 4.2 out of 5(143 ratings)
1,484 students

【最新HTML / CSS】 実践開発コース　ワンランク上のCSSで上級WEBデザイナーを目指すリスキリングコース

錆びついたHTML/CSS手法を再生しよう。CSS3の動的な効果テクニックやレスポンシブWEBデザイン、グリッドレイアウトなど最新の開発手法を実践形式でマスターするコースです。
Highest Rated
Created byむらもり こう（村守康）
Last updated 10/2024
Japanese

What you'll learn

  • 最新のHTML/CSS技術を使って、実際に１つのビジュアルで高品質のWEBサイトを完成させることで、初級のWEBデザイナーが中上級者にステップアップするためのコースです。手を動かしてコードを書き、プレビューを繰り返しながら成功体験を積み重ねていくことで最後まで飽きずに確実にスキルアップできます。
  • スマホからタブレット、PCサイズまで、どんなデバイスサイズにも最適のページデザインで表現する、メディアクエリを使ったレスポンシブWEBデザインの技術をマスターします。WEBサイト開発プロジェクトでフロントエンド部門を統括できる能力が身に付きます。
  • グリッドレイアウトとFlex Boxを駆使して、安定してトラブルのないページレイアウトをする技術を学びます。不安定な従来型のfloatを全く使いません。効率的なコーディング技術で処理能力は飛躍的に上がります。
  • 最新のWEBページに不可欠な、カルーセルやバーガーメニューを擬似要素や擬似クラス、positionプロパティなどを実際にコードを書いて学習し、高度なCSSテクニックを学習します。 初級のWEBデザイナーから中上級者への最短のコースです。
  • コースをHTML/CSSコーディングの辞書に変える「逆引きINDEX」機能付き

Course content

9 sections • 104 lectures • 14h 27m total length

  • このコースで学習すること5:09

    このコースで学習する内容を具体的に説明しています。

  • 学習の進め方8:19

    このセクションの学習の進め方、学習に入る前の準備について説明しています。

  • HTMLのコード12:37

    最初に制作する簡単なグリッドレイアウトのサンプルのhtmlコードの書き方を説明します。

  • CSSの設定(1)6:38

    続いて前のレクチャーで説明した、簡単なグリッドレイアウト例のHTMLに対するCSSの書き方の説明です。グリッドレイアウトはほぼ全てがCSSの設定によって決まるので、ここからが本格的なグリッドレイアウトの学習になります。

  • CSSの設定(2)5:08

    前のレクチャーに続き、簡単なレイアウト例のCSS スタイルシートの書き方を示しています。（2/3)

  • CSSの設定(3)6:05

    前のレクチャーに続き、簡単なレイアウト例のCSS スタイルシートの書き方を示しています。（3/3)

  • Step02のHTML9:11

    もう少し複雑なグリッドレイアウトの例を練習します。このレクチャーではまずHTMLコードの書き方からですが、何度も言うようにグリッドレイアウトはCSSの設定で決まるので、HTMLのコードはこれまでと特に変わったことはありません。

  • Step02のCSS(1)5:31

    少しだけ複雑になったグリッドレイアウト例のCSS スタイルシートの書き方を示しています。（1/3)
    この例では列（カラム）の分割についての指定について、frという新しい単位の使い方を学びます。

  • Step02のCSS(2)3:55

    少しだけ複雑になったグリッドレイアウト例のCSS スタイルシートの書き方を示しています。（2/3)
    特に新しいことはありませんが、複雑になっているの頭の中で整理しながら学習しましょう。

  • Step02のCSS(3)10:08

    少しだけ複雑になったグリッドレイアウト例のCSS スタイルシートの書き方を示しています。（3/3)
    このレクチャーでCSSを完成させます。

  • 少し進んだグリッドレイアウト6:36

    このレクチャーでは更に少し複雑化したグリッドレイアウト例を示しています。

  • Step03のHTML12:41

    前のレクチャーで示したグリッドレイアウト例のHTMLコードを書きます。ここでも特に新しいことはありません。

  • レイアウトの簡略化8:00

    先のレクチャーで書いたHTMLに対応するグリッドレイアウト例のCSS　スタイルシートです。ここでは簡略化したグリッドレイアウトのCSSの書き方を練習します。

Requirements

  • 初めての方でも学べますが、初級のHTML、CSSの知識があると大きな学習効果があります。
  • WEBサイト開発の工程について、実践的な経験は不要です。
  • プログラミング・エディターが操作できると効果的に学べます。

Description

　このコースは、古いHTMLやCSSの技術で現在も開発を続けているWEBデザイナーが、現在主流となっている最新のHTML5、CSS3を学んでスキルアップすることを目的に開発したコースです。

　社内でフロントエンド部門を統括し、フリーランサーでも高い収入を得られるようなエンジニア・デザイナーになるには、最新のHTM/CSSのスキルを身につけることが必須条件です。

　このコースでは13時間超の学習で、経験則に頼らないしっかりとした技術を学びます。講座はすべて実践的な作品制作を行う演習形式で構成され、動画の内容に従って１つのWEBサイトを制作することで、ミスへの対処、時短テクニック、Tips、効果的なコード記述などプロWEBデザイナーに必須のスキルが自然に身につきます。


高度なHTML/CSS 技術が学べます

  • スマホ、タブレット、PCサイズまで、すべてのデバイスで最適のデザインを実現するレスポンシブWEBデザイン

  • グリッドレイアウトを駆使した最新のページレイアウト技術

  • floatを全く使わないFlexBox

  • モダンブラウザに対応した動的な効果テクニック


全編動画と練習素材付きの講座

  • コースは８つのセクション、13時間以上の動画講座です。

  • １つのサンプルWEBサイトを動画を見ながら手を動かして制作することで実践的なテクニックが学べます。

  • すべてのセクションに練習素材が添付されているので、すぐに学習が開始できます。


Who this course is for:

  • 初級からランクアップして中上級を目指すWEBデザイナーの方
  • フリーランスでランディングページを制作しているWEBデザイナー初級の方
  • 企業内で上級のエンジニアを目指すWEBデザイナーの方
  • 最新のページデザイン技術を学びたい方
  • 単一のランディングページ制作から、プロジェクト全体の統括ができるスキルを身に付けたい方

Report abuse