前のパートに戻る 完了して次のパートへ  

  1-4 CSS を配信しよう

本パートでは HTML 返却後のサブリソースとして CSS を配信できるようにプログラムを改良しページをスタイリングできるようにします。

本パートの目標物


文字の色を赤色に変更してみます。

目標物を作成するまでの流れ


  1. 静的ファイル配信の設定の追加
  2. CSS ファイルの作成
  3. CSS ファイルの読み込み

では実際に進めていきましょう。

1. 静的ファイル配信の設定の追加

CSS ファイルを Web サーバーから配信するには echo に設定を追加します。

main.go ファイルを次のように編集します。

go-tech-blog
└── main.go

2. CSS ファイルの作成

スタイルを定義するための CSS ファイルを作成していきます。

まずはディレクトリを作成します。

$ mkdir -p src/css/article

ディレクトリが作成できたら CSS ファイルを作成します。

$ touch src/css/article/index.css

このときのディレクトリ構造を tree コマンドで確認してみます。

$ tree

実行結果は次のようになります。

$ tree
.
├── go.mod
├── go.sum
├── main.go
└── src
    ├── css
    │   └── article
    │       └── index.css
    └── template
        └── article
            └── index.html

5 directories, 5 files

作成した src/css/article/index.css に次の内容を記述して保存します。

go-tech-blog
└── src
    └── css
        └── article
            └── index.css

3. CSS ファイルの読み込み


src/template/article/index.html を編集し、サブリソースとして CSS ファイルを読み込むようにします。

go-tech-blog
└── src
    └── template
        └── article
            └── index.html

動作確認


go run main.go で Web サーバーを起動し、Chrome で http://localhost:8080 にアクセスします。なお、前回から Web サーバーを起動し続けている場合は再起動の必要があります。その場合は control + C で一度停止してから起動するようにします。

CSS によるスタイリングが効いて文字色が赤になっています。

ソースコードの解説


main.go

プロジェクト内の src/css ディレクトリに配置してあるファイルを静的ファイルとして配信する設定をしています。試しに Web サーバーを起動した状態でウェブブラウザから http://localhost:8080/css/article/index.css にアクセスしてみましょう。レスポンスとして index.css が返却され、内容がブラウザに表示されます。

以上で今回のパートは終了です。

CSS を用いることでウェブサイトのレイアウトを自由にカスタマイズできます。本教材では CSS について詳細な解説は行いませんので、ぜひ個人で学習して知識を深めてみてください。

お疲れさまでした。

議論

0 質問

このコースの評価は?