<h2 id="h5ef7d69a3b">成果物</h2>この記事では、このような自己紹介サイトを作っていきます。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/92b52fe1d29541469b1bbed0e8a18526/Image%202023-02-21%2014.43.00.png" alt=""><h2 id="h1eaeb72754">この記事で学習すること</h2>この記事ではHTMLの基礎的なタグを学習していきます。 <h2 id="h5fd314680e">HTMLの書き方</h2>HTMLはタグという印で囲んで書いていきます。 例えば、 <code>&lt;p&gt;私の名前はDREAMです。&lt;/p&gt;</code> といった感じで、こちらの例では&lt;p&gt;&lt;/p&gt;の部分がタグになります。 細かい書き方はこれから学習していきますが、HTMLの基本はこのタグで囲むことが全てです。 「どのタグで囲んだらサイトが作れるんだろう…。」ということをこれから一緒に学習していき、 それを知ることによって、あなただけのオリジナルサイトが出来上がってきます！<h2 id="h86ae25f4ee">サイトの保存場所を作ろう</h2>さあ、早速HTMLを書いてみましょう！…と言いたいところですが、 HTMLを保存する場所から一緒に作りましょう。(たくさんのファイルを作成するようになると、後々混乱するため…。。) HTMLの保存場所は任意なので、好きな場所にフォルダを作成してください。 本記事では、デスクトップにHTMLの保存場所を作成します。 デスクトップで右クリック→新規作成→フォルダーを選択して、分かりやすいフォルダー名を付けましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/4e7f5dd7b15f4629bac36652fcc66cd0/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%202023-02-16%2017.20.01.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/dc58ccf1e8e44f179041569f0f57a865/Image%202023-02-16%2017.22.00.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/8a73d1d5629e47ffbf1f2090c56cbf14/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%202023-02-16%2017.24.40.png" alt=""> HTMLの保存場所が作成できたら、前回インストールしたVSCodeで保存場所を開いてみましょう！ 作成したフォルダーの中で右クリック→Codeで開く を選択します。 (本記事では、デスクトップの中に作ったオリジナルサイトというフォルダーの中で右クリック→Codeで開く を選択しています。) <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/7e57b4c53e4e452fa320281df77f6071/%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%202023-02-16%2017.28.03.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/d3a10b6a85b04eb3a43bf055f8a87282/image.png" alt=""> このようにVSCodeが立ち上がれば大成功です！👍 <h2 id="h303dcddcbb">HTMLを書いてみよう</h2><h3 id="h3f68580ccf">HTMLファイルを作ろう</h3>では、ここから主にVSCodeを使用してサイトを作成していきます！ まずはHTMLファイルを作成します。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/8f0d15638b5a48949755b4669386f072/%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%20-%20Visual%20Studio%20Code%202023-02-16%2017.49.21.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/08e30049f86645acbcfdafd0ec11883e/Image%202023-02-20%2014.36.44.png" alt=""> これで、HTMLファイルの作成が完了しました！ この時点でHTMLの保存場所にindex.htmlというファイル名のHTMLファイルが作成されています。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/8550b7eb120447b896601b612475ba4e/%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%202023-02-20%2014.39.15.png" alt=""> ちなみに、このHTMLファイルをダブルクリックで開くと真っ白なサイトが開きます。(中身が無いので当たり前ですが、、) これからこのHTMLファイルにコードを書いていきましょう！ <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/cf34ede1a6c441059bf4cf61091c0966/index.html%20-%20%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%20-%20Visual%20Studio%20Code%202023-02-20%2014.48.04.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/855d1fdfcb67422b8472139f8814d02e/notenecbw_L%202023-02-21%2013.56.15.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/bac3d689320f406eb40a29bb4f2bf302/Image%202023-02-20%2014.49.50.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/fe78a66007f949c19c05ed68b2675096/index.html%20-%20%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%20-%20Visual%20Studio%20Code%202023-02-20%2014.52.57.png" alt=""> 「なんじゃこりゃ！！」 と思われるかもしれませんが、VSCodeの機能でHTMLファイルに「!」と入力・Enterキーを押すと HTMLのテンプレートを作成することが出来ます。 これはEmmetエメットと呼ばれる、省略したコードを書いてEnter、Tabキーを押すだけで記述できる機能を用いています。 VSCodeではEmmetに標準で対応しているので、「!」と入力するだけでHTMLのテンプレートファイルが作成できます。(とても便利！) この作成されたテンプレートの中身を書き換え・書き足していってサイトを作っていきます。 <h3 id="h0205317460">出力されたHTMLのテンプレートを見てみよう</h3>自動的に挿入されたHTMLのテンプレートについて少し覗いてみましょう。英語ばかりでとっかかりにくそうですが、内容はそれほど複雑ではありません。 まずは1行目に<code>&lt;!DOCTYPE html&gt;</code>と記載されています。これは「HTML5という最新のバージョンのHTMLファイルをこれから記載します」ということを意味しています。 2行目から12行目が<code>&lt;html lang="en"&gt;&lt;/html&gt;</code>という風にhtmlタグが記載されています。この中にhtmlの内容を記載していきます。また、<code>lang="en"</code>は、言語が"英語(English)"のサイトであるということを表しています。日本語のサイトを作る場合は<code>lang="ja"</code>と変更することにより、"日本語(Japanese)"のサイトであることを意味するようになります。今回は日本語のサイトを作るので、lang="ja"に変更しておくことが望ましいです。(サイトの表示には問題ないですが、学習のためぜひlang="ja"に変更してみましょう。) 3行目から8行目が<code>&lt;head&gt;&lt;/head&gt;</code>という風にheadタグが記載されています。この中の詳細は別記事で解説する予定ですが、主にサイトの画面には現れない部分についてのコードを記載することになります。 そして9行目から11行目が<code>&lt;body&gt;&lt;/body&gt;</code>という風にbodyタグが記載されています。この中は今何も記載されていないため、この中にコードを打ち込んでいくことによってサイトを作成します。 さぁ、ここからbodyタグの中身を書いていきましょう！ <h3 id="h3324f707cd">「見出し」を表すh1, h2, h3タグ</h3>ここから実際にコードを書いてみましょう。 bodyタグの中に、<code>&lt;h1&gt;自己紹介サイト&lt;/h1&gt;</code>と書いてみましょう。 h1タグは見出しを表します。またh2タグやh3タグ,h4タグ,h5タグ…というのも存在します。全部見出しです。 どう使い分けるのかというと h1 画面タイトル h2 大見出し h3 中見出し h4 小見出し h5 更に細かい小見出し h6 更に更に細かい小見出し… といった感じで使い分けます。 そのため、h1タグは基本的に1ページにつき最大1つのみ書くようにしましょう。(h2～h6は好きなだけ書いてOK) 今回は1ページのみの自己紹介サイトを作る予定なので、h1タグで「自己紹介サイト」という文章を表示させようと思います。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/fc712ca4f7cc4c14a9d5aa31a529fe39/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.00.54.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/aeabaf7b435b4d1792a4e47664a82bc8/notenecbw_L%202023-02-21%2014.02.03.png" alt=""> 最後に、今後コードが見やすいように文の行頭に空間を空けておきましょう。 行頭を空けるためには、行頭でTabキーを押すことによって空けることが出来ます。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/aa958bedb247478ba826abd6e799a54f/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.24.00.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/541f16852123464b818b1f32f4c14c9b/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.24.47.png" alt=""> これで、bodyタグの中にh1タグが含まれているということが分かりやすくなったのではないでしょうか。 このようにコードが見やすいように行頭に空間を空けることをインデントと言います。 「インデントを空けてください」と言われたときは、「行頭を空けてコードが見やすいように字下げしてや～」という意味となります。 ちなみに、こちらの環境では1つのTabキーで2つ分のスペースを空けるように設定しています。 デフォルトでは1つのTabキーで4つ分のスペースが空いているかと思います。 この設定は好みなので、もしTabキーのスペースを変更したい場合は設定方法をぜひ調べてみてください。 h1タグを書いてインデントを空けるところまでできたら、ctrlキーコントロールキー + sキーを押してindex.htmlを上書き保存しましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/d7ed60e5aaba4819810792cb6ffc3d9b/notenecbw_L%202023-02-21%2014.34.21.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/3cdc32be9dad4bb79d909689c23fddd8/%E2%97%8F%20index.html%20-%20Visual%20Studio%20Code%202023-02-21%2014.36.19.png" alt=""> さあ、エクスプローラーのindex.htmlを表示してみましょう。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/a9823535822641b0b98979203b108fd3/Image%202023-02-21%2014.46.52.png" alt=""> このように文章が表示されましたか？ 正常に文章が表示されたら、次の項へ進んでいきましょう！ <h3 id="h043f2db3f8">「要素をまとめる」divタグ 「段落」を表すpタグ 「リンク」を表すaタグ 「画像」を表すimgタグ 「行内の要素」を表すspanタグ</h3>

この記事では、実際にHTMLを一緒に書いてあなただけのサイトを作り始めます。 前回導入したテキストエディタを使用して、一緒にHTMLを書いてみよう！

【Web開発編 第2回】HTMLを学んでみよう！

<h2 id="he8ff15b0ca">そもそもWebサイトってどんなもの？</h2><h3 id="h82a6404d8c">Webサイトとは</h3>Webサイトとは、パソコンやスマートフォンのブラウザから見ることの出来る画面のことです。 ちなみにブラウザとは、例えば GoogleChromeｸﾞｰｸﾞﾙｸﾛｰﾑ や、Safariｻﾌｧﾘ、MicrosoftEdgeﾏｲｸﾛｿﾌﾄｴｯｼﾞといったものがあります。パソコンやスマートフォンに最初から入っている方が過半数のため、すでに知っている方、一度は耳にしたことがある方も多いのではないでしょうか？ 今はもう滅多に聞くことのなくなったInternetExplorerインターネットエクスプローラーもブラウザの一つです。<h3 id="h36c1dc7783">HTMLとは</h3>Webサイトを表示するための構成を記述するための言語がHTMLｴｲﾁﾃｨｰｴﾑｴﾙです。初めてHTMLという単語を聞いた方には、なんとなく難しいイメージがあるのではないでしょうか？(自分がそうでした。) HTMLという言語を学ぶだけで、あなただけのWebサイトが作れてしまうので、後の記事で一緒に学んでみましょう！<h3 id="h56456981e9">HTMLを書くために</h3>HTML言語をパソコンで書くためには、テキストエディタを入れる必要があります。(ほんとはメモ帳アプリでも書けるけれど、専用のテキストエディタで書くことにより、HTMLを書くための便利機能が使えたり、HTMLの書き間違いを防止する機能が使えます。) 本ブログではVisualStudioCodeビジュアルスタジオコードをお使いのパソコンにインストールします。(Windowsを作ってるマイクロソフトという会社が作ってるアプリで無料だよ)<h2 id="h9f32c83c87">テキストエディタをPCにインストールしてみよう</h2>本記事では、VisualStudioCode(今後VSCodeブイエスコードと略します。)をPCにインストールし、更に今後Webサイトを作りやすくするよう拡張子を表示する設定をするところまで解説します。 では、早速VisualStudioCodeをパソコンに入れてみましょう！下記のリンクからインストールしてください。 <a href="https://code.visualstudio.com/download" target="_blank" rel="noopener noreferrer">VisualStudioCodeダウンロードサイト</a> ご利用の端末のOSを選択して、VisualStudioCodeをダウンロードしてください。 ※2023/2/12時点でのサイト画像です。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/3f5b351888f74c5da6c08428e6cc1060/Image%202023-02-13%2015.16.21.png" alt=""> ここから下はWindows11の端末にVisualStudioCodeをインストールする手順を説明します。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/a85bbb60c571406ebb1bc15c897e76b8/Image%202023-02-13%2015.20.22.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/21f28ca358754b84af541ae598330cae/Image%202023-02-13%2015.22.56.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/6eba7e72dc9740fc81627bc3ad6af1d5/Image%202023-02-13%2015.27.53.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/94b5e53d6e05440e908e7431c9b33e31/Image%202023-02-13%2015.29.54.png" alt=""> 下記画像について、 ・エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する ・エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する を追加しておくと、エクスプローラー内で右クリックすると、VisualStudioCodeで開く選択肢が表示されます。 個人的にはめちゃくちゃ便利なので、迷ったらぜひチェックを入れてみてください。 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/88e7f8f67f834ae880fb377e4d681e89/Image%202023-02-13%2015.30.38.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/b53f812faaaa46a1a5addebd99d946cb/Image%202023-02-13%2015.35.42.png" alt=""> <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/91c633e6ae114b02a3af0052746285c6/Image%202023-02-13%2015.36.18.png" alt=""> 以上で、VisualStudioCodeのPCへの導入は完了です！お疲れ様でした！！😊 <h2 id="had20a6dffb">Webサイトが作りやすくなるよう拡張子を表示する設定に変更しよう！</h2><h3 id="h978d81ce94">拡張子とは</h3>ファイルの種類を表すものが拡張子と呼ばれます。 例えば、画像の場合はpngやjpg、テキストの場合はtxt、動画の場合はmp4、音楽の場合はmp3…などなど。。 音楽再生機器に「mp3プレーヤー」というものがあったりしますが、そのmp3というのは拡張子のことを言うんですね！ (※ほんとは実際のmp3プレーヤーはmp3拡張子以外も入れることが出来るみたいですが、それはまた別の話…。) 例えば「思い出の画像1」というファイル名で画像を保存した場合、 実はPCの中では「思い出の画像1.jpg」といったファイル名などで保存されています。 この「.jpg」部分を表示させる設定をこれから一緒に行っていきましょう！ <h3 id="h8db3cbb069">拡張子を表示すると何が良いの？</h3>先ほどの例で画像に「.jpg」を表示させたところで、普段パソコンを使っていても 「で？」って感じだと思いますが、 Webサイトを作る上では、非常に便利なものに変わります。 例えば、HTMLを使用して「思い出の画像.jpg」という画像を表示させる場合、「思い出の画像1」とだけ書いても表示されません。 ちゃんと「思い出の画像1.jpg」と拡張子を含めたファイル名を指定してあげないといけないんです😥 「思い出の画像1.png」でも「思い出の画像1.txt」でもダメなんです。「思い出の画像1.jpg」です。 そういった拡張子の指定を間違えないようにするためにも、エクスプローラー上で拡張子を表示することが大切になってきます。 <h3 id="haf4975648c">拡張子を表示する設定方法</h3>Windowsで拡張子を表示する方法を解説します。 エクスプローラーを立ち上げて、下記画像を参考に、拡張子を表示する設定にしてみましょう！ Windows10の方は下記の方法 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/1b237ee0747e4412a1007a8b78eb5466/PC%202023-02-13%2015.47.38.png" alt=""> Windows11の方は下記の方法 <img src="https://images.microcms-assets.io/assets/06242764a7494493b43f854fdf079611/5a0874f78b174331be8cff59dc3f9aae/Image%202023-02-13%2015.46.05.png" alt=""> 以上で、拡張子を表示する設定変更は完了です！お疲れ様でした！！😊

Webサイトを作成するために、必要となるのがHTMLです。HTMLという言語を記述して、Webサイトの構成を作っていきます。 このページでは、Webサイトを作るための準備としてHTMLという言語を書くためのテキストエディタを一緒にパソコンに導入しましょう！

HTML

カテゴリー