Kakera.link

ゼロから始めるHTML

これで9割完了!HTMLの土台

動画編

HTMLの土台

(補足1)インデント

(補足2)タグの書き方のいろいろ

テキスト編

ブラウザを通してみるページのほとんど全てがHTMLとCSSという言語で書かれています。
ブラウザというのはSafariやChromeなどです。

つまり、HTMLとCSSが書けるようになれば、Webサイトがつくれることになります。
HTMLとCSSのそれぞれの役割は、ざっくり言えば、

  • HTML→タイトルや本文などの骨格をつくる役割
  • CSS→レイアウトや色などをつける役割

という感じです。

今回はHTMLです。
まだ1回目ですが、今回の内容が分かればこれから先の部分は、今回の内容の応用するだけです。
そのため、今回の内容が分かってしまえば9割方は完了していると言える状態になります。

STEP1

それでは早速HTMLのファイルをつくってみましょう
VSCodeを開いて、ファイルを新規作成し、保存してみてください。
ファイルの名前の最後は
.html
とします。こう書かないとHTMLとして認識されないので、HTMLの最後はすべて.htmlにする必要があります。

ここでは、「HTMLの土台」というフォルダをつくりその中に「index.html」という名前で保存します。
(index.htmlはよくトップページ用のファイル名として使われるので、フォルダ内のメインのページの場合はこの名前をつけるのがオススメです)

Step2

それではいよいよHTMLの中身を書いていきます。
ここが最大の山場なので、頑張りましょう!
と言っても、実はこのSTEP2の内容はコピペでOKです

この中に、これからブログの記事や写真などいろんなものを入れていくことが出来ます。
今回はそんなメイン部分の外側の枠の部分です。この外側の枠を書くことで「これからHTMLで中身を書いていきますよ」ということをブラウザに伝えることができます。
長いですが、これはただの決まり文句なので覚える必要はありません。下の内容をコピペしてしまいましょう。

<!DOCTYPE html>
<html>
  <body>
  </body>
</html>

(補足)文字が若干ずれていますが、これは見やすくするためにずらしているだけで、ずらさなくてもずらし方が違っていても同じです。このずらす部分をインデントと言うのですが、どうインデントすると見やすくなるのかについては、慣れてきたころにやるので、ここではちょっとまねしてみるくらいの感じでOKです

保存

最後にこの作成したファイルを保存して、ブラウザで確認してみましょう。

キーボードの「コマンドキー+s」で保存するか、左上の「File」から「Save」と選択すれば保存完了です。

早速できあがったファイルをブラウザで確認してみます。
ファイルのところに行きファイルをダブルクリックするとブラウザが勝手に開き表示されるはずです。
(もし他のエディターなど何か別のアプリが立ち上がったら、いったん閉じてからファイルを右クリックして上から2番目の「このアプリケーションで開く」を選択し、ブラウザを選ぶと開けます)

完成

おめでとうございます!
これでHTMLの土台が完成しました!
とは言え、まだ中身はありません。
少しだけ中身を追加してみましょう。

先ほど書いた中に

    <body>
    </body>

という部分がありますよね?

ここの間に

    <body>
        Hello world!
    </body>

と文字を入力してみましょう。
もう一度保存して、ブラウザで確認すると、先ほど入力した文字が表示されているはずです。

勘のいい方は気がついたかもしれませんが、今入力した部分をどんどん変更していったらいいんですね。

次回からいよいよメインコンテンツ部分の作成へと進んでいきます!

(補足: 実際にはこの「Hello world!」の部分は「

Hello world!

」のように書かなければならないなど、決まりがあるのですがそれは次回から早速やっていきます。)
最終更新: 2020/10/03 15:54

【HTML基礎8本ノック 1本目】見出しを追加

bodyタグ内に好きな見出しを追加してください。

最終更新: 2020/10/03 15:56

【HTML基礎8本ノック 2本目】文章(段落)を追加

bodyタグ内に好きな文章(段落)を追加してください。

最終更新: 2020/10/03 15:57

【HTML基礎8本ノック 3本目】改行を挿入

bodyタグ内に好きな文章(段落)を追加し、その文の途中で改行してください。

最終更新: 2020/10/03 15:59

【HTML基礎8本ノック 4本目】リンクを追加

bodyタグ内に好きなリンクを追加してください。

最終更新: 2020/10/05 12:35

【HTML基礎8本ノック 5本目】画像を挿入

bodyタグ内に好きな画像を追加してください。

最終更新: 2020/10/05 12:35

【HTML基礎8本ノック 6本目】順序付きリスト(箇条書き)

bodyタグ内に好きな順序付きリストを追加してください。

最終更新: 2020/10/05 12:22

【HTML基礎8本ノック 7本目】順序なしリスト(箇条書き)

bodyタグ内に好きな順序なしリストを追加してください。

最終更新: 2020/10/09 10:16

【HTML基礎8本ノック 8本目】かたまりをつくる

bodyタグ内に好きなタイトルと好きな文章(段落)を追加し、それらをまとめてグループ化してください。

最終更新: 2020/10/09 10:25