メインコンテンツまでスキップ

はじめに

今日はWebフロントの基礎をやります。内容としては以下になります。

  • HTMLの基礎
  • CSSの基礎
  • DOM APIの基礎

作業環境について​

手元のPCでブラウザを立ち上げてもらう時があります。その際には Google ChromeかFirefoxのどちらかだと講師が助かります。

HTML・CSSの役割​

HTMLはWebページの文書構造を構成する。
つまり、Webページにある画像や文章、その他いろいろをHTMLを用いて定義する。

CSSはWebページの見た目を装飾する。
HTML単体だとただの画像と文章だけ。それをいい感じの見た目にするのがCSSの役割。

やってみよう💪​

百聞は一見にしかず、学校のlmsで遊んでみましょう。リンクを開いてログインし、

  • Firefoxの場合
    • ページ上で右クリック→要素を調査
  • Google Chromeの場合
    • ページ上で右クリック→検証
<DOCTYPE!>
<html ... >
  <head>...</head>
  <body ... >
  ...

このようなものが表示されると思うので、<head>...<head> を左クリック → 右クリック → 要素を削除。

これにより<head>...<head>内で読み込まれていたCSSが消えます。

どうでしょうか？