コンテンツにスキップ

第6章 ユーザ別ページ(演習)

そのユーザのみの画像を表示した一覧ページを作成します。

1 リンク

投稿一覧(index.html)のユーザ名を /user/ユーザID へリンクします。

2 app.py

以下の関数を作成します。

  • URL:/user/
  • 関数名:user(uid)

Userテーブルからuidのユーザを検索し、user.htmlにuserという名前で渡します。

※ヒント:関数 toukou参照

3 user.html

まず、h1タグで 「(ユーザ名)の写真」 と表示します。

次にfor文でそのユーザの画像を表示します(index.html参照)。ただし、ユーザ名は全て同じなので表示しません。

なお、そのユーザの投稿リストは user.toukou で取得出来ます。

4 style.css

リンクを設定すると色が変わるため、元の色の黒にします。 また、リンクを設定すると下線が設定されるのでこれを消去します。

また、マウスを上に持って行くと下線を引くようにします。

ヒント1:text-decorationプロパティをunderlineにすると下線が引かれます。noneにすると何も引かれません。

ヒント2:セレクタのタグの後ろに :hover を付けることでマウスが上に来たときのスタイルになります。