そんな疑問に答える本記事です！
こんにちは。いちかわともや（Twitter: @tomochan8282）です。
HTMLを編集するには、サーバーにアクセスをして、テキストエディタでコードを編集をする必要があります。
しかし、Google Chromeのデベロッパーツールを使えば、テキストエディタを使う前に、Webサイト上でHTMLを編集するシュミレーションができてしまうのです。
本記事では、実践的なHTMLの使い方を解説していきます！
もくじ
実践的HTML入門【ポートフォリオサイトの作り方❹】
HTML入門１：Google Chromeデベロッパーツールを使う〜名前編〜
最初に、プロフィールサイトのドメインを入力し、サイトを開きます↑↑
次に、「command + option + I」を押し、Google Chromeデベロッパーツール（以下、デベロッパーツール）を開きます↑↑
そして、デベロッパーツール左上のボタン（赤枠部分）をクリックします。
次に、サイト中央の名前の部分をホバーすると、その部分のコードが色付きで表示されます↑↑
そして、先頭の▶︎をクリックします。
▶︎をクリックすると、隠れていた部分が展開されます↑↑
「Louie Jie Mahusay」が出現しましたので、こちらをダブルクリックします。
「Louie Jie Mahusay」を書き換えられるようになりました↑↑
こちらに自分の名前を入力して、Enterを押しましょう。
すると、サイトに自分の名前が出現しました↑↑
しかし、更新ボタンを押すと。。
元に戻ってしまいました↑↑
そうなのです。デベロッパーツール上で名前を書き換えただけなので、更新をすると元に戻ってしまいます。
デベロッパーツールはこのように、実際にコードを書き換える前に検証をするためのツールなのです。
HTML入門２：Sublime Text３を使ってコーディングする〜名前編〜
次に、サーバーにアクセスをしてコードを書き換えてみましょう。
Cyberduckを開き、サーバーにアクセスします↑↑
「profile-master」フォルダの▶︎をクリックしましょう。
「index.html」が表示されますので、右クリックをします↑↑
この「index.html」が、サイトのトップページのコードになります。
「エディタで編集」より、「Sublime Text」をクリックします↑↑
Sublime Textが開きました↑↑
先ほど、デベロッパーツール上で書き換えたのと同じように、「Louie Jie Mahusay」を自分の名前に書き換えます。
入力が終わったら、「command + S」で保存をします↑↑
保存がうまくいくと、右上に「アップロード完了」と表示されます。
早速サイトを更新してみましょう↑↑
このように（↑）自分の名前が表示されているはずです。
HTML入門３：Google Chromeデベロッパーツールを使う〜画像編〜
次は、画像の変更です。
まず、自分のお気に入りの写真を用意して、「images」フォルダにアップロードします↑↑
次に、サイト中央の画像部分をホバーすると、その部分のコードが色付きで表示されます↑↑
backgroundプロパティの「user-3.jpg」を自分の写真のファイル名に変更し、Enterを押します。
サイトに自分の写真が出現しました↑↑
HTML入門４：Sublime Text３を使ってコーディングする〜画像編〜
先ほど同様、Cyberduckを開きサーバーにアクセスをして「Sublime Text」を開きます↑↑
デベロッパーツール上で書き換えたのと同じように、backgroundプロパティの「user-3.jpg」を自分の写真のファイル名に変更します。
入力が終わったら、「command + S」で保存をします↑↑
サイトに自分の写真が出現しました！
以下のページ（↓）も同じ要領で、画像をや文字を変更して、自分のオリジナルプロフィールサイトを完成させてくださいね。
以上が、実践的なHTMLの使い方でした！
ポートフォリオサイトの作り方はコチラ↓↓
Twitterでも、エンジニア向けの技術情報やブログ運営の方法など、役に立つ情報をわかりやすく発信していますので、よろしければフォローをお願いいたします↓↓
イチカワトモヤ＠ホテルマンエンジニア（Twitter: @tomochan8282）
実践的なHTMLの使い方が知りたい！！