Progate HTML&CSS 記事

Progate

検証ツール（デベロッパーモード）の使い方

検証ツールの開き方

html の確認と一時的な編集

  1. 開発ツール側の右上のアイコン > webページ側を左クリック で検証ツール(上)内の該当htmlが分かる。
  2. 上の該当htmlを右クリック > Edit as HTML で編集可能

css の確認

  1. 開発ツール側の右上のアイコン > webページ側を左クリック
    • 検証ツール(中央左)内でStylesを選択しているとき該当要素で有効となっているCSSが分かる。
    • 取り消し線があるのは上書きされた要素。
    • 中央右は該当要素のボックスモデル。単位は px で, 要素の値が - のものは 0px
    • Filter の横の :hov は :hover 等の状態のページ状態とCSSを確認可能。
    • CSS や ボックスモデル の値は値を左クリックして書き換え可能
    • チェックボックスでプロパティの無効化可能
    • CSS の {} の { の後ろあたりをクリックすることでプロパティを追加可能

HTML & CSS の開発環境を用意しよう！

  • Atom: https://atom.io/ のダウンロード
  • 作成したhtmlファイルを 右クリック > プログラムから開く > Google Chrome
    • macOS の場合は「このアプリケーションで開く」
  • ファイルを更新した時はブラウザをリロードする。

自分で作ったWebページをインターネット上に公開しよう！

  1. GitHub にリポジトリを作成する(以下, ユーザー名をprog-8とする)
    • リポジトリ名を prog-8.github.io としたとき, 公開URLは https://prog-8.github.io となる。
    • リポジトリ名を hoge (上記以外)としたとき, 公開URLは https://prog-8.github.io/hoge となる。
  2. master ブランチの html へのパスが自動で公開される。