はじめてのHTML

簡単なプロフィールサイトを作りながらHTMLについて学んでいきます。
0%

このレッスンをはじめる前に

このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。

#01 プロフィールサイトを作ってみよう
2020年5月18日

・HTML/CSSの学習環境を整えよう [Windows編] (全5回)
https://dotinstall.com/lessons/basic_pcsetup_win_v2
・HTML/CSSの学習環境を整えよう [macOS編] (全5回)
https://dotinstall.com/lessons/basic_pcsetup_mac_v2

上記のレッスンを終えるとVS Codeの背景色は黒になっていますが、レッスン動画では見やすくなるように背景色が白いテーマを使っております。背景が黒いままでも問題ありませんのでそのまま学習を進めてください。

2019年10月2日

このレッスンを始める前に、以下を参考にして学習環境を整えるようにしましょう。

・HTML/CSSの学習環境を整えよう [Windows編] (全5回)
https://dotinstall.com/lessons/basic_pcsetup_win_v2
・HTML/CSSの学習環境を整えよう [macOS編] (全5回)
https://dotinstall.com/lessons/basic_pcsetup_mac_v2

#02 ブラウザに名前を表示しよう
2020年4月26日

3aa2d441d036f08db959ecfc01361e3194ba8599-2.png

最近の macOS ではアプリケーションからローカルファイルへのアクセスの際に、許可が必要な場合があります。

一度 Chrome を Cmd + Q で完全に終了させ、もう一度 Chrome を起動し直してみてください。

次に Chrome の「ファイル」メニューから「ファイルを開く...」を選択し、該当するファイルを開いてみてください。

2020年1月6日

1:23〜からブラウザのタブにて表示されている眼鏡のアイコンですが、ブラウザによっては表示されないことがあります。このアイコンはfaviconと呼ばれていて、以下のレッスンにて表示するためのタグを紹介しています。この時点では表示されていなくても気にせずに学習を続けてください。
https://dotinstall.com/lessons/basic_html_v5/49807

2019年9月14日

動画の1分20秒あたりで実施しているドラッグ&ドロップ操作ですが、ブラウザのタブ部分にドラッグ&ドロップするようにしてください。

特に Windows の Chrome では、ブラウザの表示領域にドラッグ&ドロップしてしまうと「about:blank#blocked」という真っ白なページが表示されてしまい、上手くいきません。

chrome-drag-and-drop.png

#01 プロフィールサイトを作ってみよう
#02 ブラウザに名前を表示しよう
#03 タグでマークアップしてみよう
#04 imgタグで画像を表示しよう
2020年5月5日
#05 全角文字に気をつけよう
#06 文書全体につけるタグを見ていこう
#07 文書に関する情報を設定しよう
#08 文書の本文を書き込んでいこう
#09 コメントタグを使ってみよう
#11 sectionタグを使ってみよう
#12 ulタグでリストを表現してみよう
2020年5月8日
#13 外部サイトへのリンクを設定しよう
#14 HTMLの仕様を確認してみよう

次におすすめのレッスン