よく読まれるWeb、速いWeb実装のための基盤! HTML&CSSをしっかり学びましょう✨
✅このレッスンは、[フルスタックWeb開発者ロードマップ]シリーズのレッスンです。
VIDEO
本講義は、フルスタックWeb開発者養成のための「Web開発フルスタックコース」講義シリーズ のうち、HTML&CSSについて取り上げる基礎講義です。 Web開発フルスタックコースには、HTML&CSS→バニラJavaScript→ブートストラップ→Vue.js→データベース→Node.js→ポートフォリオまで、フルスタックWeb開発のための全コースが含まれています。 Web開発フルスタックコースをすべて受講すると、Web開発の基礎だけでなく、実践にすぐに適用できるスキルを身につけることができます。 What is HTML/CSS?
Webを構築する基礎技術であるHTMLとCSSは、すべてをつなぐために生まれた言語です。
HTMLはHyper Text Markup Language の略です。 Hyper, Text, Markup, Language このように 4 つの単語で構成されています。この言葉の中で最も重要な言葉はハイパーです。 HTMLを理解するための最も重要なヒントは、ハイパーリンク( Hyperlink )から取得できるからです。
紙の時代の文字ではなく、WebブラウザやWordなどの文書作成ツールでは、ハイパーリンクと呼ばれる機能を使用して、ビデオ、音楽、写真、ファイル、投稿などの特定の場所をリンクできます。ハイパーリンクは、文書内ですべての形式の資料をリンクして指すことができる参照環です。初期ウェブにタグのようなハイパーリンクの機能をするタグがあったことは本当に驚くべきことではありません。 Webをなす根幹技術であるHTMLは、結局、すべてをつなぐために誕生したと 見れば良いのです。
Hyperは「超越」という意味を持ち、Textは「文字」を意味します。つまり、Hyper Textは、文字と文字、文章と文章、文書と文書が互いに有機的に連結されてコミュニケーションできる一般文字を超えた文字であるわけです。
HTMLは、これらのHyper Textをマークアップ(Markup)できる言語(Language) です。ここでマークアップとは、文書内容以外にも文書の書式、構造などを表現するための情報です。 HTMLは、これらのマークアップ情報を表現できる言語で、Webのスケルトンに対応しています。
一方、CSS(Cascading Style Sheets) はHTMLというスケルトンにきれいな服を着せるデザインを担当する言語です。 CSSを使用すると、Webのレイアウト、色、フォント、サイズなどのデザインを適用できます。
HTML&CSS、なぜ学ぶべきですか?
HTML / CSSを学ぶことなく Web開発者になることはできません 。
よく読んでいるWebとそうでないWebについて考えたことがありますか?私たちは毎日、本、テレビ、マガジン、ブログなど、数多くの記事を読みながら生きていきます。ところで、ある文章はよく読まれ、どんな文章もよく読まない。 Web開発者が書いたコードも同じです。人の目には見えませんが、検索エンジンやスクリーンリーダーなどのソフトウェアを介して読み込まれます。検索エンジンとスクリーンリーダーは、Webページを通じて目に見えないWebを構成するコードを解釈し、私たちが開発したWebページを解釈します。ソフトウェアがよく読んで理解できるコードを書くにはどうすればよいですか?そしてそれはなぜ重要なのでしょうか?
よく読んでいる文章を書く方法は、「簡単にはっきり」書くことです。開発者が書いたコードも同様です。マークアップを作成するときは、不要なタグを削除してページを整理するために必要なタグだけで構造を簡単に する必要があります。
今日、ウェブは熟練するだけでなく、速くなければなりません。 Googleの研究によると、Webページの読み込みに5秒以上かかると、訪問者がページを離脱する可能性が90%増加するという。ブラウザのレンダリングプロセスを理解し、ページ内で使用するリソースを最適化して読みやすくするだけでなく、高速なWebを提供する必要があります。そのため、良いWebを開発するためには、Webをなす基本言語であるHTMLとCSSの基礎をしっかりと積み重ねなければなりません。
この講義の特徴!
簡単かつ詳細に
実務応用中心
サンプルコードまで! Web開発のライフサイクルを理解できるようにお知らせします。 HTMLとは何かを理解します。 HTMLを構成する各タグの正確な使い方がわかります。 モバイルユーザー、視覚障害者に配慮したタグの作成方法がわかります。 CSSの基本構文をすべて習得します。 レイアウトを作成するためのCSSを学び、レスポンシブWebを実装できるようになります。 すべてのサンプルコードはFitHub を介して提供されています。 何を学びますか? 開発 IDE ツールとしては、Visual Studio Code を使用します。ビジュアルスタジオコードを使った開発方法と有用な拡張プログラムを知ります。 Node.js (ノードJS)をインストールし、Node.jsが何であるかを知ることができます。 Webの理解とWeb開発のための企画から開発とテストまでの全過程を知ることができます。 HTML 基本タグをすべて学習します。 HTML タグのグローバル属性とローカル属性を学習します。 セマンティックタグがわかり、意味に合ったタグが使えるようになります。 CSSは、色、フォント、リスト、表などのスタイリング方法を学びます。 レイアウトを作成するためのCSSを習得し、レスポンシブWebを実装できるようになります。
HTMLの基本構造と基本要素
レイアウトを作成するためのCSS
この講義をした人は 誰ですか? 開発者の品格 ソフトウェア技術を通じて世界に良い影響力を与えたい24年次ソフトウェア開発者 。 知識を分かち合うのが好きで、常に新しいスキルを身につけることを楽しんでいます。
国内外60社を超えるグローバル企業ERPシステムを構築するコンサルタントおよび開発者として活動し、直接開発したソフトウェアを国内はもちろん海外有数の企業に販売した経験も持っています。 ITスタートアップ代表取締役でもあります。
開発者だけでなく、UXコンサルタントとして、時にはビジネスコンサルタントとして働きながら、アプリケーションやサービス開発時の企画から開発まで、全過程について数多くの経験を積んできました。今は20年以上の実務経験をもとに、後輩たちに本当に必要な技術、本当にきちんとした知識を伝える使命感を持って知識を分かち合うことをしています。
もっと学びましょうか? 【ウェブ開発フルスタックコース】シリーズ集めてみる