検索結果0件」

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

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

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

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

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


    CSSとは何か?

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

    CSSとは「Cascading Style Sheets(カスケーディングスタイルシート)」の略で、ホームページの「見た目」の装飾を行う言語です。

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

    家づくりで例えると、

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

    という感じです。


    なぜCSSで見た目を整えるのか?

    ホームページは、1ページだけ作って終わりということが、ありません。

    例えば、お店のホームページや、会社のホームページを作るとき、「商品説明」や「会社概要」を作りますよね。

    色々なページを作って、それを一つにまとめて「ホームページ」を作ります。

    なので、たくさんあるページを一つ一つデザインを変えるのは、とても大変です😨

    そのため、一度に見た目を変えることができる、CSSというものができました❗️


    CSSは、どうやって見た目を変えているのか

    CSSが見た目を変えている構造

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

    「会社概要」と「商品説明」のページに、同じ「.box」という名前をつけた、箱があります。

    この、箱に名前をつけることを、「クラス名をつける」と言います。

    つまり、箱の名前は「クラス」と呼ばれます。

    CSSを使って、「.box」クラスの名前を持つ箱に、背景の色と文字の色を指定すると、このようになります。

    別々のページにある「.box」クラスの箱が、一緒に見た目が変わります。


    ホームページにCSSを反映させる

    では、実際にホームページを作って、CSSを反映させていきたいと思います。

    HTML

    <!DOCTYPE html>
    <html lang="jp">
      <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>ホームページタイトル</title>
      </head>
      <body>
        <h1>タイトルです!</h1>
      </body>
    </html>

    HTMLファイルを作って、上のコードを書いていきます。

    CSS

    HTMLファイルを作ったフォルダに、elements.cssというCSSファイルを作ります。

    CSSファイルを読み込む

    <!DOCTYPE html>
    <html lang="jp">
      <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" />
    
        <!-- ↓CSSファイルを読み込む↓ -->
        <link rel="stylesheet" href="./elements.css" />
        <title>ホームページタイトル</title>
      </head>
      <body>
        <h1>タイトルです!</h1>
      </body>
    </html>

    先ほど作ったHTMLのコードに、CSSファイルを読み込むコードを追加して、CSSが使える状態にしておきます。

    CSSを編集する

    body {
      background: red;
    }

    上のコードを追加してみて、背景の色が変わったら、CSSがちゃんと反映されています🔥


    もっと手軽にCSSを練習したい

    でも、先ほどのやり方は、HTMLファイルやCSSファイルを準備しなくちゃいけないので、ちょっと準備がめんどくさいですよね😥

    ですが、もっと手軽にできる方法があります。

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


    CodeSandboxでCSSの練習をする

    トップページへ飛ぶ

    codesandbox01

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

    Sandboxを作る

    codesandbox02

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

    CSSファイルを作る

    codesandbox03

    画像にある、赤線のアイコンをクリックします。

    そうすると、ファイルを作れますので、elements.cssという名前で、CSSファイルを作ります。

    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" />
    
        <!-- ↓CSSファイルを読み込む↓ -->
        <link rel="stylesheet" href="./elements.css" />
        <title>Static Template</title>
      </head>
      <body>
        <h1>
          This is a static template, there is no bundler or bundling involved!
        </h1>
      </body>
    </html>

    SandboxにあるHTMLに、先ほど作ったCSSファイルを読み込ませます。

    CSSを編集する

    body {
      background: red;
    }

    先ほど作ったelements.cssを開いて、上のコードを入力して、背景が赤色になったら成功です🔥


    CSSを勉強するためにオススメの本3つ

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

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

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

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

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

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

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

    広告