Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

非専攻者のためのウェブサイト開発の第一歩 #HTML、#CSS

ウェブサイトを制作する開発者になるためには、学ぶべき技術がたくさんあります。 その多くの技術の中で、一番最初に学ぶべき、ウェブサイト制作の基本であるHTML、CSSについて説明します。HTML、CSSの作成方法を学び、 最後にはAmazonという実際のウェブサイトを似せて作るプロジェクトを行います。 そして、作成したプロジェクトをURLにして配布できるようにします。

2名 が受講中です。

  • banana7468
웹개발
웹사이트개발
html
CSS
HTML/CSS
github-desktop

こんなことが学べます

  • ウェブページの要素を作るHTML理論

  • ウェブページの要素をデザインするCSS理論

  • HTML/CSS を用いたコーディングプロジェクト

  • GitHub Desktop で GitHub サイトに作成したコードを管理

  • 作成したウェブサイトをnaver.comのようにアドレスで作成する

専攻者のためのウェブサイト開発の第一歩HTMLCSS

ウェブサイトを作る開発者になりたいのですが… 最初に何を勉強すべきか分からないんですか?

1. Webサイト開発の最初の開始HTML / CSSです!

家を作るためには、その家にどんな要素が入り、どのように設計すべきかを決めなければなりません。

ウェブサイトも同様です。

ウェブサイトという家を建てるためには、ウェブサイトにどんな要素が入るかをHTMLで決め、

その要素をCSSとしてデザインします。

HTMLでどの要素が入るかを決めて..... CSSでその要素をデザインします

このようにHTMLCSSはウェブサイトの作成に最も基本的な言語であるため、ウェブサイト開発者が最初に勉強しなければならないコンピュータ言語です。


だから2024年の開発者を対象としたStack Overflowアンケートを見ると、 HTML / CSSはウェブサイトを作る最も基本的な言語なので、2番目に人気のあるコンピュータ言語であることがわかります!

2. この講義はウェブ開発経験のない方のための講義です

こんな方におすすめです!

非専攻者ですが、コーディングをしたことがありません。

専攻者ですが、ウェブサイトの開発は初めてです。

今回のHTML / CSS講義は、ウェブサイト開発経験がなかった方を対象とした講義です。

したがって、専攻に関係なく、コーディング経験に関係なく、ウェブサイトの開発を始めたばかりの方に今回の講義をお勧めします

選手の知識はまったく必要ありません!

3. したがって講義は以下の特徴を持っています

-理解しやすい講義

できるだけ簡単に説明しようとしました。今回の講義はウェブサイト開発の知識がない方のための講義なので、小学生も理解できるほど簡単な講義を作りました。

-多くの繰り返し

HTML / CSSは他のコンピュータ言語と比較して簡単な言語です。でも、初めてコーディングをしてみる方には見慣れないで覚えることが多いと感じられます。

そのため、講義の多くを繰り返す+講義を終え、復習を経て何度も同じ内容を繰り返す

-講義要約を提供

講義内容を筆記しても講義に集中できなかったり要約のためストレスを多く受けている方のために講義要約本をご提供いたします! (pdfファイル)

以前にHTML / CSSを学んだ方のうち、講義のまとめを見て100%知っている内容ならスキップしてもいいです!

4. 講義を聞いたらこんな結果物を作ることができますよ

HTML理論講義、CSS理論講義を終えた後、クローンコーディングプロジェクトがあります!

Amazonホームページを見て、同様にウェブページを整理するプロジェクトです!

また、完成したWebページを他の人がアクセスできるようにURLアドレスにします

以下の例は実際の講義よりも画質が低い

ログインページ

  • ID、パスワード入力スペース

  • 情報送信ボタン

  • 状態変化アニメーション

メインホームページ

  • ページレイアウト

  • 状態変化アニメーション、自動実行アニメーション


詳細商品ページ

  • ページレイアウト

  • 状態変化アニメーション、自動実行アニメーション

画面サイズによって異なるレスポンシブWebページ

  • 画面サイズに応じたWebページの構成の変更

  • モバイル、タブレットにも適用されるページ

5. 講義学習内容

HTML / CSS基礎理論に基づいて、ウェブページの制作コード管理ウェブサイトの配布方法を学びます。

またHTML / CSSに関する追加情報を他の人の助けなしで検索して活用する能力を養うことが目標です。

セクション2: HTML理論(無料!)

Webページでどの要素が入るかを決定するHTMLの基本理論を学びます。

  • HTML文法(タグ、属性)

  • HTML基本構造

セクション3: CSS理論

HTMLで定義された要素を設計するCSS基礎理論について学びます。

  • CSS文法(セレクタ、属性)

  • レイアウト構成(box model, flex, position, media query)

セクション 4: CSS深化理論

CSSHTMLよりも量が多いです。よく使われる追加文法アニメーションを追加する方法を学びます。

  • CSS追加文法(セレクタ、属性)

  • アニメーションの作成 (transition, transform, animation )

セクション5:作成したコード管理変更の追跡

長いコードを書いてみると、私はどのようなプロセスを経てコードを書いたかを混乱させます。また、作成したコードでコラボレーションが難しくなります。これを行うには、コードストレージを作成し、コード管理変更を追跡するgithubの使い方について学びます。

  • github , github-desktop , commit

セクション6: Amazonクローンコーディング

これまで学んだ内容を総動員して海外ショッピングサイトであるAmazonサイトを見て、同様にWebページを作ってみます。

  • ファイルの整理方法コードの作成規則追加の文法

セクション7:ウェブサイトの配布住所の作成

githubの助けを借りて、完成したプロジェクトをnaver.com、 google.comのようにウェブページのアドレスにして他の人に配布します。

  • github hosting , deploy

セクション8:レスポンシブウェブサイトの作成

(元のセクション7までしか作ろうとしましたが…講義の完成度を高めたい) モバイル画面のように小さな画面でも私たちのウェブページが動作するようにします。

  • 小さな画面で要素を隠すWebページ構成を変更する

6. 受講前の注意事項

学習資料

  • 講義要約本はそれぞれ1講、22講にアップロードされています。


選手の知識と注意事項

  • 本番プロジェクトで書かれたコードは提供されます

  • 動画には独自の字幕があります。 Inflearnサイトの字幕をオフにしてください

  • 講義の概要を一度読んだ後、講義を受講することをお勧めします

  • 講義、要約版の著作権は「バナナコーダー」に

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ウェブサイト開発を初めて始める方

  • ウェブサイト開発を始めるにあたって、まず何を勉強すればいいかわからない方

  • コンピュータ言語自体が初めての方

こんにちは
です。

カリキュラム

全体

77件 ∙ (12時間 25分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

¥6,553

似ている講座

同じ分野の他の講座を見てみましょう!