HTML/CSS

【はじめてのHTML】 ブラウザに表示させて確認する方法

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTMLで記述したコードを確認する方法が知りたい方
  • HTMLをブラウザで実際の表示を見てみたい方

 

 



 

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ!

※上記は当サイトからの登録が多い順になっています
※上記以外のエージェントを知りたい方はIT業界エージェント・転職サイトのおすすめをご覧ください。

 

HTML (えいちてぃーえむえる) とは

「HTML」というのは、ウェブページの土台を作るためのマークアップ言語です。

 

ウェブページに表示したい文章やウェブページの情報を独自の「タグ」というもので挟むことでHTMLを書いていきます。

 

ポイント

  • HTMLはウェブページに無くてはならない土台
  • ウェブページに表示する文字は、HTMLのファイル上に書く

 

とはいえ、あくまでもHTMLで書くのはウェブページの土台のみです。

 

HTMLだけで作られたウェブページは、文字と画像だけが並んだ白黒の単調なものになってしまいます。

そこにデザインやレイアウトを決めるのが”CSS”と呼ばれるコンピュータ言語です。

 

「CSS」を使うことでウェブページの文字や背景の色を変えたり、カラフルな線を引いたりすることができます。

このCSSについては別の記事で1から紹介しますね。

>> 【はじめてのCSS】 CSSの書き方やHTMLに紐づける方法を解説

 

HTMLは文字とアルファベットや記号を組み合わせて書いていきます。

まずは基本の構成から一緒に見ていきましょう。

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Sample</title>
</head>

<body>
    <p>HTMLの基本を勉強しよう。</p>
</body>

</html>

 

これだけ見るとちょっと複雑で難しそうですが、ポイントを抑えると簡単なので安心してくださいね。

 

さっそくHTMLをブラウザで表示してみよう!

「HTMLがどのようなものなのか」実際に触ってみると分かってくると思います。

HTMLのいろいろな書き方を学ぶ前にまずは全体の流れを実際に動かして練習してみましょう。

 

自分で記述したHTMLをブラウザで表示する方法ですが、「ブラウザで表示するのに必要なのはたった2つです

  1. コードを書くためのテキストエディタ
    例えばWindowsで初期搭載している"メモ"などでもいいんですが、プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができます。(ここではSublimeTextを使っていきます)
  2. 書いたコードを実際に表示させるためのWebブラウザ
    こちらも何でもいいのですがシンプルで動作も早くて使いやすい”GoogleChrome”がおすすめです。

①まずはテキストエディタを開く

この画面がテキストエディタ(SubLimeText)を開いた画面です。

 

シンプルで見やすくてかっこいい雰囲気ですね!

 

このテキストエディタも見た目をカスタマイズできるので自分好みにアレンジしてみてください。

モチベーションもあがりますよ♪

 

②サンプルコードをコピー

 

<!DOCTYPE html>
<html>

<head>
    <title>thefirsttime</title>  
    <meta charset="UTF-8">
</head>

<body>
    <h1>ゼロからウェブデザインを勉強しよう!</h1>
    <p>まずはHTMLについて学びましょう</p>
</body>

</html>
 

この左のコードを先ほど開いたテキストエディタにすべてコピーしてみてください。

「<!DOCTYPE html>」から「</html>」まで漏れなくコピーしてください。

 
 

③ファイル名の末尾を「.html」にしてファイルを保存

Windowsなら「ctrl+S」、Macなら「⌘+S」でファイルを保存できます。

 

その際の保存ウィンドウで好きな名前をつけて保存するのですが、1点だけ注意してください。

必ずファイル名は「test.html」というように末尾に.htmlをつけるようにしましょう。

これにより書いたコードがHTMLファイルとして保存されます

 

ブラウザにHTMLファイルをドラッグして表示してみよう

上記の画像のように先ほど保存したHTMLファイルを、ブラウザにドラッグアンドドロップします。

すると下記のようなページが表示されます。

Webに表示するのはサーバーが必要って聞いたことがあるような...
実際にみんなに見てもらうためにはサーバーを借りる必要があるけど、自分のパソコンで練習したり、テスト用のウェブサイトを作るのにサーバーは必要ないです。
なので、ガンガン練習しましょう!

 

 

まとめ

今回は"HTML"の基本の部分をまとめました。

HTMLファイルを作り、Webブラウザに表示するまでの全体の流れは理解できましたでしょうか。

 

次の記事からは"HTML"のもっと詳しい部分や、文字に色を付けたりデザインを変えられる「CSS」も紹介していきます!

>> 【はじめてのCSS】 CSSの書き方やHTMLに紐づける方法を解説

 

関連記事

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。

CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】

CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。

【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!

今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。

【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介

HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.