HTMLの書き方入門 - はじめてのWebデザイン
HTMLの書き方・考え方を、初めて触れる初心者の方にも分かるように画像たっぷりで解説しています。これさえ知っていればHTMLの重要な部分をマスターすることができます。
無料で今すぐはじめる※ ログインする必要はありません。
レベル
ビギナー
13レッスン
1日間
HTMLの勉強を始めて、こんなことはありませんか？
タグの種類が多すぎて
ウンザリしてしまう
自分で書いたはずなのに
日が空くとわからなくなる
何をすれば良いのかが
そもそも、わからない
簡単すぎて唖然…!HTMLの重要な部分は2時間で習得できます
～暗記不要! ほんとうに必要なことを作りながら学ぶミニマムhtml入門～
HTMLはWebデザイナーを目指している方にも、Webエンジニアを目指している方にとっても必修スキル。「Web制作の勉強してみたいな」と思って学習を開始して、真っ先に現れる壁でもあります。
頑張って書いてみても思ったとおりに出来なかったり、画面には表示されない部分なので正しく書けているか不安になったり……。
専門的でむずかしいと思われがちなHTMLマークアップ。ですが、実は一生懸命覚えなくても、基本の考え方と簡単な英単語が分かれば主要なタグはだいたいわかります。頑張って暗記しなくても、自然に書けるようになりますよ。
短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、受講したその日に基礎習得という超短期学習を実現することができます。
本講座は穴埋め形式ではなく、htmlファイルの作成から行っていきます。フォルダ分けやファイル構成など、実践的なWebサイト制作の基本も一緒に覚えることが可能。CSSの書き方入門講座も合わせて受講頂くと、Webサイトコーディングの基礎を総合的にマスターしていただけます。
イチから作ることで、最短で「使える」技術を習得します
分かりやすい表現でHTMLタグの構造を理解する
本講座では、専門書やリファレンスのような難しい言葉使いをせず、親しみのある言葉でマークアップの意味を解説しています。
マークアップだけではなく、HTMLを書くためのエディタ、ファイルの置き場所など、基本中の基本から解説。図解もたっぷりなので、初めてhtmlに触れる初心者の方も安心してご受講いただけます。
実際にマークアップしながら、タグの書き方や意味を学ぶ
本当に基本的な書き方を学んだら、すぐにサイトのコーディングをしてみましょう。タグの種類を暗記する必要はありません。よく使うタグは何回も出てきますので、書いているうちに自然と覚えます。
見出しやリスト形式だけではなく、テーブルやフォームなど、HTML学習で躓きやすい部分もしっかり解説。一緒にWebサイトをコーディングするなかで、実際の業務でよく使われるタグの大半を理解することが出来ます。
SEOにも強いマークアップを習得できる！
見出しをh2にするかh3にするか、どこをmainにするかなど、ページの構成によって臨機応変なマークアップが必要です。本講座では、Webページのコーディングを最初から最後まで行うことで、マークアップの「考え方」を身につけることができます。
コンテンツにあわせて的確にマークアップすることは、SEOの基礎でもありますよ。SEOコーディング基礎も同時に習得しましょう!
本講座を終えると、できるようになること
- HTMLの基本書式、主要なタグが分かる
- 内容に応じて、的確なタグを使用できる
- SEOに強いマークアップができる
- テーブルタグを使って情報を整理できる
- お問合せフォームの枠組み作成できる
レッスン内容
-
1
HTMLを学習するために必要な開発環境を確認しましょう。パソコンに元々入っているソフト・アプリでも制作可能ですが、コーディングに適したエディタを使うとより効率的に制作できます。
-
2
本講座では、WebサイトをコーディングしながらHTMLの基礎を習得します。今回のレッスンでは、これから作るサイトを確認して、必要なファイルをフォルダにまとめて制作の準備を整えましょう。
-
3
今回のレッスンでは、HTMLの基礎知識である「タグ」とは何かについて学びます。タグの書き方と、開始・終了タグを確認しましょう。
-
4
index.htmlの役割とHTML文書（htmlファイル）の基本書式について学びます。実際にhtmlを書きながら、HTMLの構造とhead要素・body要素を確認してください。
-
5
htmlファイルの上部、～の中には、機械（googleやSNS、ブラウザなど）に向けた情報が主に書かれています。head要素の役割と、head内でよく使われる基本的なタグを知りましょう。
-
6
htmlファイルの～の中には、Webページとして表示する情報が入ります。最も基本的な、テキストに意味を持たせるタグを書いてみましょう。hタグとpタグを使って、テキストを見出しと段落にわけていきます。
-
7
HTMLでは「ここは重要である」「ここは引用文である」など段落内の一部分にだけ意味を持たせるタグもあります。また、段落ではなくリスト（箇条書き）としてテキストをマークアップすることも可能です。リストの作り方やulとolタグの違いも解説します。
-
8
表示されている部分とは別のページ、パートに移動させるための「リンク」を設置しましょう。リンクを作るためのタグ、クリックした際の移動先を示す属性hrefの使い方を解説します。
-
9
タグを使ってページに画像を表示させる方法を学びます。表示する画像ファイルを指定するsrc属性、代替テキストを設定するalt属性について解説します。
-
10
マークアップ（HTMLタグ）によって情報の意味・役割を伝えることをセマンティックマークアップと言います。今まで作ってきたページにページの構成を伝えるためのHTMLタグを加えて、より機械が内容が把握しやすいセマンティックマークアップを完成させましょう。
-
11
コードを分かりやすく綺麗に書くために必要なインデント（字下げ）の方法とルールを解説します。
-
12
会社概要のページをHTMLでコーディングしていきましょう。情報を整理して表示するために表（テーブル）と、tableタグを使って作成する方法を解説します。
-
13
お問い合わせページを作成しながら、フォームの作り方を解説します。コードが長く難しく見えますが、チェックボックスなども簡単に作れますよ。
もっと見る
HTMLの書き方入門 - はじめてのWebデザインを 無料で始めましょう！
無料申し込み期限
11月24日まで
募集
人数
100名 （残りわずか）
2～3時間くらいあれば、完全初心者でもWebサイトを作ることができます。マークアップしたファイルがWebページになる、という制作者の醍醐味も味わうことができるので、ぜひ挑戦してみてください。