コピペで簡単に理解! HTMLファイルを作って表示させてみる【HTML超入門4】

HTMLファイルを作って表示させる

HTML/CSS入門

HTMLを本やテキストで覚えるのもいいですが、ひとまず書いてみて表示させ、どのように表示されるのかを見てみるのもいい勉強になります。

この記事では、超簡単なHTMLをコピペをして、それをブラウザに表示させてどうになるか?、をやってみてほしいと思っています。

 

sponsored link

表示させるHTMLファイルの元をコピペする

▼これが元のファイルです。

 

  • <head> ▶ ブラウザ・ウィンドウのタイトル・バーに表示されるタイトルや、その他の情報を記載する場所です。
  • <title> ▶ タイトル・バーに表示されるタイトル
  • <body> ▶ 実際にブラウザに表示される内容
  • <header> ▶ ホームページのヘッダー部分
  • <h1>・<h2> ▶ 見出し部分
  • <main> ▶ ホームページのメインのコンテンツ部分
  • <footer> ▶ ホームページのフッター部分

 

右上の<>をクリック

<>をクリック
右上の<>をクリックすると、表示が変わります。
この状態にしておくとコピペしやすいです。

 

全部選択してから、右クリックでコピします。

全部選択してコピー
全部をコピーしてください。

 

テキストエディターに貼り付ける

テキストエディターに貼り付ける
ウインドウズなら「メモ帳」、Macなら「テキストエディット」でHTMLを書くとこもできますが、HTMLを書くための機能が備わっていないので、当ブログでは「Sublime Text(サブライムテキスト)」をオススメしています。
 
【関連記事】WEBサイトの制作のために必要なテキストエディタをインストールする【HTML超入門2】

 

日本語の部分を、自分が確認しやすいように書き換える

全角の日本語の部分を好きに書き換える
このステップは正直、やってもやらなくてもいい感じなんですが、自分が入力したのものが、いままで見ていただけのブラウザに表示されるとちょっとうれしいものですよね。

うえせい
自分のパソコンだけでしか表示されないものですから、なんでも入力をさせてみてください。

 

「xxxxx.html」(xxxxxは、わかりやすいように書き換えて保存)というファイル名で保存

ブラウザにて表示させる
「xxxxx」の部分はなんでも適当でいいので、保存してください。

 

表示させてみた

表示させるには、ダブルクリックでブラウザが立ち上がります。
ブラウザにより、多少表示が違いますので、念のため2つのブラウザの表示の違いを見てください。

Chromeでの表示結果

Chromeでの表示結果

 

Safariでの表示結果

Safariでの表示結果

 

【まとめ】表示させてみると、なんとなく分かる

うえせいイラスト
自分で書いたものを、表示させることで、なんとなく

B さん
ああ〜、こんな感じだなあ

という感覚で理解ができるようになってきます。

一度やってみてくださいね。

では、また。最後まで読んでくれてテリマカシ。

▼HTML・CSS超入門 記事一覧

sponsored link





 

lineat

「この記事が気に入ったらLINE@で友だち追加をしよう!

合同会社うえせいやの最新情報をお知らせします。

友だち追加

うえせいイラスト

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
 
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。

詳しくは、コチラ