プロフィールサイトを作成しましょう!❹【HTMLの実践的操作】

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

 

さぁ、テンプレートもテキストエディタも用意して、プロフィールサイトを立ち上げたよ。

 

でも、どうやってプロフィールサイトを改造していけばいいんだろう。。

 

文字や画像の変え方とかわからないし。。

 

そんな方向けの本記事です。

 

立ち上げたサイトを改造するには、サーバーにアクセスをして、テキストエディタで編集をする必要があります。

 

しかし、テキストエディタで編集をする前に、Google Chromeデベロッパーツールを使います。

 

このツールを使うことで、サイト上で編集のシュミレーションができるのです。

 

それでは、HTMLの実践的操作いってみましょう!

Sublime Text3の設定がまだの方はこちら。↓

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?




プロフィールサイトを作成しましょう!❹【HTMLの実践的操作】

Google Chromeデベロッパーツールを使う〜名前編〜

 

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

 

 

次に、「command + option + I」を押しGoogle Chromeデベロッパーツール(以下、デベロッパーツール)を開きましょう。そして、デベロッパーツール左上のボタンをクリックします。

 

 

次に、サイト中央の名前の部分をホバーすると、その部分のコードが色付きで表示されます。そして、先頭の▶︎をクリックします。

 

 

▶︎をクリックすると、隠れていた部分が展開されます。「Louie Jie Mahusay」が出現しましたので、こちらをダブルクリックします。

 

 

「Louie Jie Mahusay」を書き換えられるようになりました。こちらに自分の名前を入力して、Enterを押しましょう。

 

 

すると、サイトに自分の名前が出現しました。いい感じです。しかし、更新ボタンを押すと。。

 

 

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

 

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

 

Sublime Text3を使ってコーディングする〜名前編〜

 

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

 

ここからが本番です。Cyberduckを開き、サーバーにアクセスします。

 

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

 

 

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

 

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

 

 

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

 

 

Sublime Textが開きました。(Sublime Text3なので安心してください。)

 

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

 

 

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

 

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

 

 

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

 

このように(↑)自分の名前が表示されているはずです。おめでとうございます!

 

Google Chromeデベロッパーツールを使う〜画像編〜

 

次は画像の変更です。

 

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

 

 

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

 

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

 

 

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

 

Sublime Text3を使ってコーディングする〜画像編〜

 

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

 

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

 

 

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

 

 

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

 

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

Google Chromeデベロッパーツールを使えば、プロフィールサイト上で文字や画像の変更後のシュミレーションができます。

 

その後、サーバーにアクセスをして、テキストエディタで編集をすると、サイトが改造できるのです!

 

次回は、CSSを触っていこうと思います。

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

コメントを残す

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

CAPTCHA