実践的HTML入門【ポートフォリオサイトの作り方❹】

みーちゃん

実践的なHTMLの使い方が知りたい!!

 

そんな疑問に答える本記事です!

 

こんにちは。いちかわともや(Twitter: @tomochan8282)です。

 

HTMLを編集するには、サーバーにアクセスをして、テキストエディタでコードを編集をする必要があります。

 

しかし、Google Chromeのデベロッパーツールを使えば、テキストエディタを使う前に、Webサイト上でHTMLを編集するシュミレーションができてしまうのです。

 

本記事では、実践的なHTMLの使い方を解説していきます!

 

実践的HTML入門【ポートフォリオサイトの作り方❹】

HTML入門1:Google Chromeデベロッパーツールを使う〜名前編〜

 

最初に、プロフィールサイトのドメインを入力し、サイトを開きます↑↑

 

 

次に、「command + option + I」を押し、Google Chromeデベロッパーツール(以下、デベロッパーツール)を開きます↑↑

 

そして、デベロッパーツール左上のボタン(赤枠部分)をクリックします。

 

 

次に、サイト中央の名前の部分をホバーすると、その部分のコードが色付きで表示されます↑↑

 

そして、先頭の▶︎をクリックします。

 

 

▶︎をクリックすると、隠れていた部分が展開されます↑↑

 

「Louie Jie Mahusay」が出現しましたので、こちらをダブルクリックします。

 

 

「Louie Jie Mahusay」を書き換えられるようになりました↑↑

 

こちらに自分の名前を入力して、Enterを押しましょう。

 

 

すると、サイトに自分の名前が出現しました↑↑

 

しかし、更新ボタンを押すと。。

 

 

元に戻ってしまいました↑↑

 

そうなのです。デベロッパーツール上で名前を書き換えただけなので、更新をすると元に戻ってしまいます。

 

デベロッパーツールはこのように、実際にコードを書き換える前に検証をするためのツールなのです。

 

HTML入門2:Sublime Text3を使ってコーディングする〜名前編〜

次に、サーバーにアクセスをしてコードを書き換えてみましょう。

 

 

Cyberduckを開き、サーバーにアクセスします↑↑

 

「profile-master」フォルダの▶︎をクリックしましょう。

 

 

「index.html」が表示されますので、右クリックをします↑↑

 

この「index.html」が、サイトのトップページのコードになります。

 

 

「エディタで編集」より、「Sublime Text」をクリックします↑↑

 

 

Sublime Textが開きました↑↑

 

先ほど、デベロッパーツール上で書き換えたのと同じように、「Louie Jie Mahusay」を自分の名前に書き換えます。

 

 

入力が終わったら、「command + S」で保存をします↑↑

 

保存がうまくいくと、右上に「アップロード完了」と表示されます。

 

 

早速サイトを更新してみましょう↑↑

 

このように(↑)自分の名前が表示されているはずです。

 

HTML入門3:Google Chromeデベロッパーツールを使う〜画像編〜

次は、画像の変更です。

 

 

まず、自分のお気に入りの写真を用意して、「images」フォルダにアップロードします↑↑

 

 

次に、サイト中央の画像部分をホバーすると、その部分のコードが色付きで表示されます↑↑

 

backgroundプロパティの「user-3.jpg」を自分の写真のファイル名に変更し、Enterを押します。

 

 

サイトに自分の写真が出現しました↑↑

 

HTML入門4:Sublime Text3を使ってコーディングする〜画像編〜

 

先ほど同様、Cyberduckを開きサーバーにアクセスをして「Sublime Text」を開きます↑↑

 

デベロッパーツール上で書き換えたのと同じように、backgroundプロパティの「user-3.jpg」を自分の写真のファイル名に変更します。

 

 

入力が終わったら、「command + S」で保存をします↑↑

 

 

サイトに自分の写真が出現しました!

 

以下のページ(↓)も同じ要領で、画像をや文字を変更して、自分のオリジナルプロフィールサイトを完成させてくださいね。

以上が、実践的なHTMLの使い方でした!

 

ポートフォリオサイトの作り方はコチラ↓↓

 

Twitterでも、エンジニア向けの技術情報やブログ運営の方法など、役に立つ情報をわかりやすく発信していますので、よろしければフォローをお願いいたします↓↓

イチカワトモヤ@ホテルマンエンジニア(Twitter: @tomochan8282

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA