【文系大学生がウェブサイト制作に挑む】細かいことは何も分からないけどウェブサイト作ってみた②
こんにちは。小角祈（こかどいのり）です!
この記事は文系大学生である私が，ウェブサイトを制作するという過程を記したシリーズものの記事になります。詳しくは以下の画像をご覧ください。
第1回の記事はこちらになります。
それでは早速，HTMLでページの骨組みを作って行きます！
1.基本的なコード
まずは，タイトルや本文を表示させることから始めてみたいと思います。HTMLを書くためには「テキストエディタ」と呼ばれるものが必要です。
テキストエディタは文字を書くためのツールで，いわゆる「メモ帳」なのですが，「Atom」というHTMLを書く際に適したテキストエディタがあるようなので，そちらをダウンロードしました。
まずはAtomでNew Fileを選択して...
この画面にHTMLを書いて行きます。HTMLはマークアップ言語と言うもので，表示させたい内容にタグ（<>←こんな感じの三角形に囲まれている文字）をつけることで文章構成を作る役割があるそうです。
タグには多くの種類がありますが，全てを暗記する必要はなく，HTMLを書く際にタグを調べながら書けば大丈夫です。
以下に基本的なタグだけをまとめておきました。
_________________________________________________________________________________
<!DOCTYPE html> →文章がHTMLで書かれているということを示します。
<html lang="ja"> →「このHTMLは日本語で書かれていますよ」という事を示します。
<meta charset="UTF-8"> →UTF-8という文字コードを使用していることを示します。文字化けさせないための記述です。
<head> →ブラウザ上に表示されない裏の設定部分を表しています。
<title> →ページのタイトルを示します。
<body> →ブラウザ上に表示される部分であることを示します。
_________________________________________________________________________________
他のタグについて知りたい方や，もっと正確な説明が見たい方は本文の最後にある参考サイト様をご確認下さい！
2.実際に書いてみた
これらのタグを使用して実際にHTMLを書いてみました！ちなみにHTMLの内容は参考サイト様①のサンプルコードを参考にさせて頂いています。
多分これで出来たので保存します。保存したファイル名は，参考サイト様内の動画にあったように「index.html」にしました。
そしてこのファイルをGoogle Chromeにドラッグ&ドロップすると..
出来ました!!!!
URLにはユーザー名が表示されてしまうので隠してありますが，こちらがGoogle Chromeのスクリーンショットになります。
こうしてブラウザで表示させてみるとなんだか感動してしまいますね．．．( ◠‿◠ )
そろそろ日付を超えてしまいそうなので今回は終わりにさせて頂きます！
最後までお読みいただきありがとうございました！
参考サイト様
①
②
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？