|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/makeupwebc/
课程评论：没有评论
【Webサイト講座】從零開始打造網站：一次學懂 HTML 與 CSS 的視覺化操作
本課程將帶領您從零開始，透過實際手動操作 HTML 和 CSS，深入理解網頁製作的過程。
**課程重點：**
1. **開發環境準備：** 學習使用 Visual Studio Code 編輯器，進行軟體安裝、設定 Live Server，以及準備必要的檔案。
2. **架構搭建：** 掌握大多數網站的核心架構，包括標頭 (header)、主體 (main) 和頁尾 (footer)，並學習如何佈局標題 (h1)、文章 (article) 和區塊 (section) 等基本內容。
3. **內容與樣式設計：**
* 學習如何使用 `
開発環境の準備Visual Studio Codeというエディタソフトを使って開発を行います。ソフトインストール、ライブサーバーの設定、ファイルの準備を行います。Webサイトの大枠を作る開発環境の準備ができたら、エディタを開きます。多くのWebサイトは、ヘッダー、メイン、フッターで構成され、ヘッダーにはメニュー、メインは主内容、フッターは著作権などが配置されます。今回も、ヘッダー、メイン、フッターの大枠を作ります。h1タイトルを作るhtmlの中では、h1からh6くらいまで、タイトルタグがありますが、h1タイトルタグが、そのページの最も重要なタイトルになります。そのh1タイトルを作ります。article要素を作るhtml中で、ページの概要などを書く場合はarticle要素を使います。そのarticleタグの作成、要素の背景・境界線、文字列の間隔、色付けを行います。section要素を作るhtml中で、一般的な文章の塊はsection要素を使います。そのsecitonタグの作成、要素の背景・境界線、文字列の間隔、色付けを行います。画像(写真)を入れるWebサイトで、画像(写真)は必須ですね。画像の挿入方法、キャプション、余白、大きさの調整を学びます。header(ヘッダー)を作るWebサイトの上部をヘッダーと言います。大抵はメニューやロゴがありますが、まずは、その要素を作ります。headerにロゴを作るWebサイトには、サイトを象徴するロゴがありますね。通常はheaderの中に入れます。今回もheaderの中に入れて、フォントもフリーのかっこいいものを選びましょう。headerにメニューボタンを作るWebサイトには、メニューボタンがありますね。フリーで見栄えのするメニューボタンを作ります。headerにハンバーガーを作るWebサイト、特にスマホサイトで、ハンバーガーのようなメニューボタンがありますね。スマホサイトでは必須の機能です。作ってみましょう。footer(フッター)を作るWebサイトの下部をフッターと言います。大抵はコピーライトや[次のページへ]などがあります。ここでも作ってみます。レスポンシブ対応WebサイトはPCで見る場合もあるし、スマホで見る場合もある。つまり、画面の大きさが違いますね。cssなどで、その画面の大きさに適切に対応することをレスポンシブ対応と言います。ここでも作ってみます。文法チェック出来上がったhtmlとcssに対して、ネットのフリーツールを使って、文法チェックを行います。この文法チェックが通らないと、SEO的にもよくないですし、表示や動作の不具合にもつながります。必ずチェックしましょう。
