shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

5. CSSの適用と画像の表示(2週目)

f:id:shinoblog-manabu:20210227104945p:plain

 

CSSを適用しよう

 

目標:CSSを利用しトップ画面を整える。

 

CSSを適用するには(1)

 

パブリックフォルダを作成

cssフォルダ及び画像ファイルを入れる場所として作成

 

このように覚える・

 

 

CSSを適用するには(2)

 

  • cssファイルを作成
  • パブリックフォルダ内のパスを指定(つまり反映したいファイルにパスを書く)する

 

書く場所

<title></title>の下が分かりやすい(<>見えやすいようにわざと大文字にしてます)

 

 

 

画像を使う

 

こちらもCSS同様、画像用フォルダをパブリック(public)ファイル内に作成する

用意するもの

 

  • imagesファイル
  • 画像を置くファイル(top.ejs)内にtop-imageクラスを設置、画像urlとイメージ指定パスを書く

 

 

演習問題

実際に書いてみた。

f:id:shinoblog-manabu:20210227104945p:plain

トップ画面ができた。CSSまるコピペなので、色々ためしつつ実行していこう

 

 

 

 

今回は以上になります。お疲れさまでした。