<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS3の世界</title> <link rel="stylesheet" href="kadai.css" type="text/css"> </head> <body> <header><span>CSS3ってすごい</span></header> <div> <nav> <h1 class="center">一覧</h1> <ul> <li class="now">猫</li> <li><a href="https://www.yatex.org/gitbucket/koekiInfoDesign/2020-Y.ryusei/pages/kadai2.html#">草むらにいる猫</a></li> <li><a href="https://www.yatex.org/gitbucket/koekiInfoDesign/2020-Y.ryusei/pages/kadai3.html#">混ざっちゃった猫</a></li> </ul> </nav> <main> <img src="cat.PNG" alt="猫" width="500"> </main> </div> <footer> <p class="maruwaku">今回使ったのはflex-direction等のフレキシブルレイアウト、画像の合成にmix-blend-mode、画像ボーダーにborder-imageの3つ。どれも便利だし面白い</p> </footer> </body> </html>