検索結果0件」

    【初心者向け】HTMLの練習に一番いい方法を考えました!

    【初心者向け】HTMLの練習に一番いい方法を考えました!

    こんにちは、シンヤです!

    今回は、「HTMLの練習に一番いい方法を考えました!」というテーマで、お話していこうと思います!

    結論から書きますと、安いKindle本を買って、Webサービスを使って勉強する方法です。


    HTMLとは何か?

    まず、基本的なことからお話しいたします。

    HTMLとは「HyperText Markup Language(ハイパーテキストマークアップランゲージ)」の略で、ホームページの「骨組み」を作るために使う言語です。

    HTMLで、ホームページの「骨組み」を作ったら、次はCSSを使って「見た目」を作っていきます。

    家づくりで例えると、

    • HTML=土台づくり
    • CSS=ペンキ塗り

    という感じです。


    どうしてホームページ作りに、HTMLが必要なのか

    突然ですが、みなさん。インターネットは何で見ていますか?

    「スマホ」か「パソコン」で見ていますよね?

    では、「スマホ」か「パソコン」を使って、どうやってインターネットを見ていますか?

    「何かしらのアプリかソフトを使って、インターネットを見ています」よね。

    では、みなさんどんなソフトを使っていますか?

    人それぞれ違うと思いますが、「Internet Explorer」「Microsoft Edge」「Safari」「Google Chrome」のような、ソフトを使って、インターネットを見ていると思います。

    この、ソフトを「ブラウザ」といいます。

    そして、ブラウザはHTMLの情報を解析して、ホームページを表示させています。

    つまり、HTMLはブラウザにホームページの情報を伝える、設計図のようなものです。

    設計図がないと、家も建てられないのと同じように、HTMLがないと、ホームページを表示することができません。


    HTMLがホームページが表示されるしくみ

    HTMLがホームページを表示する仕組み

    ざっくりと図で説明すると、このような感じになります。

    ブラウザはHTMLを解析すると、ツリー状の構造を分解します。

    これを、DOMツリーといいます。

    このDOMツリーに、CSSを使って、HTMLのタグに「見た目」の装飾を行なっていきます。

    このHTMLで作った骨組みに、CSSを使って装飾されたホームページを、僕たちはブラウザを使って、見ています。


    HTMLで一番重要なもの「タグ」について

    タグとは、「HTMLの中身を決める情報の構造」のことです。

    このタグをブラウザが読み込んで、DOMツリーを作っていきます。

    ここでは、代表的なタグについて解説します。

    html

    HTMLは、この「html」タグに囲まれた情報を、読み込みます。

    なので、HTMLを作ったら、まずこのhtmlタグの中に、必要な情報を書き込む必要があります。

    meta

    「meta」タグには、ホームページの表側には表示されない、裏側の処理や情報を書き込みます。

    具体的に言うと、JavaScriptのファイルや、CSS、ホームページの情報や、SNSでシェアされた時の写真や説明文などを、入れていきます。

    body

    「body」タグには、ホームページの表側に表示される、処理や情報を書き込みます。

    普段僕たちが見ているホームページは、このbodyタグの中に囲まれた情報を、表示しています。

    h1,h2,h3,h4,h5,h6

    「h1~h6」のタグには、ホームページで重要な情報を書くときに使われいます。

    hはHeadingの略で、「見出し」を表しています。

    数字が小さいほど、重要度が高い情報を書いていきます。

    p

    「p」は「Paragraph(段落)」の略称で、一つの文章の塊を表しています。

    一つの文章を書いたら、また次のpタグを作って、文章を書いていきます。

    br

    「br」は「Break(改行)」の略称で、文章を改行させたいときに使います。

    img

    「img」は「image(画像)」の略称で、画像を表示させたいときに使います。

    div

    「div」は「Division(分割)」の略称で、文章を含めた色々な塊を、分割させたいときに使います。

    よく使われるのは、divの中に、p(文章)やimg(画像)を入れて、一つの塊を作っていきます。


    簡単な方法で、HTMLの書き方の練習をする

    では次に、簡単な方法でHTMLの書き方の練習をする方法を、ご紹介いたします。

    それが、CodeSandBoxを使って、HTMLの練習をする方法です。

    トップページへ飛ぶ

    codesandbox01

    まず、トップページに来たら、「Create a Sandbox, it’s free」ボタンを押します。

    Sandboxを作る

    codesandbox02

    ボタンを押したら、「Static」を押して、Sandboxを作ります。

    HTMLを編集する

    Sandboxが作れたら、HTMLの文章が表示されると思うので、まずは適当に書いてみましょう❗️

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
        <title>Static Template</title>
      </head>
      <body>
        <h1>
          This is a static template, there is no bundler or bundling involved!
        </h1>
      </body>
    </html>

    プレビュー画面に、文章が表示されたら成功しています❗️

    HTMLの練習にオススメの本

    1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Kindle版

    HTML&CSSとWebデザインが 1冊できちんと身につく本 Kindle版

    スラスラわかるHTML&CSSのきほん 第2版 Kindle版

    今回は、比較的安くて、合わなかったら返品しやすいKindle版を中心に、ピックアップいたしました。

    Kindle版なら、近くにスマホを置きながらこちらの商品に記載されているコードを見て、パソコンを使ってCodeSandboxを使って、勉強することも、できるのではないでしょうか?

    それが、一番効率がいい勉強方法だと思います。

    • 【初心者向け】HTMLの練習に一番いい方法を考えました!

    広告