静的ファイルを使う


動画の流れ

  • contactsにマウスをあてて右クリック New Folder を選びます。
  • publicフォルダ(ディレクトリ)を作ります。
  • publicディレクトリ内にstyle.cssを作成します。
  • style.css内にh1タグの色を変更するCSSを書きます。
    h1{
        color: blue;
    }
  • index.erb内にstyle.cssを呼ぶ記述を書きます。
  • https://workspace-username.c9users.io/にアクセスしてstyleで指定した色や形が反映されているか確認します。

  • ブラウザ上で右クリックを押し、ページのソースを確認します。
    <html>
        <head>
            <meta charset="UTF-8">
            <title>連絡帳</title>
            <link rel="stylesheet" href="/style.css">
        </head>
        <body>
            <h1>これはErbで書きました</h1>
            <p>今の時刻は 現在時刻</p>
        </body>
    </html>
  • href="style.css"style.cssをクリックして、https://workspace-username.c9users.io/style.cssにアクセスします。
  • https://workspace-username.c9users.io/style.csspublicディレクトリのstyle.cssファイルであることを確認します。

いろいろやってみよう

  • style.cssを変更して、文字の色を赤に変更してみましょう。
  • CSSについて検索して、自分の好きなスタイルを一つ適用してみましょう。
  • https://workspace-username.c9users.io/style.cssにもう一度アクセスして以下を確認しましょう。
    • publicディレクトリ内のフォルダが直接WEBからアクセスできること。

一歩進んだ学習

CSSなどはプログラミングで扱わないことが多いので、静的なファイルとして作成することが多いです。 詳しく知りたい方は静的なファイルと動的なファイルの違いを検索して簡単に確認しておくと良いでしょう。

今回のコードはこちらから確認できます。

前の章に戻る

次の章に進む


コメントを残す