今日はCSSの授業でした。
今日は授業でCSSをやった。
今日の授業でやったCSSを載せてみるてすと。(*ω*)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション1</title> <link rel="stylesheet" href="css/style1.css"> </head> <body> <div id="nav"> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </div> </body> </html> @charset "utf-8"; /* reset */ html, body, div, ul, li, { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { font-size: 16px; } #nav { width: 200px; margin: 50px auto; } ul { border-top: #65A6FF 1px dotted; } li { font-size: 20px; font-weight: bold; width: 190px; height: 40px; margin-bottom: 10PX; background: url(../img/arrow.png) no-repeat 7px 10px; border-bottom: #65A6FF 1px dotted; } li a { text-align: center; display: block; color: #65A6FF; padding: 10px 0 8px 1em; font-weight: bold; } li a:link, li a:visited { color: #65A6FF; } li a:hover { color: #F60; } <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション1</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div id="nav"> <ul> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </div> </body> </html> @charset "utf-8"; /* reset */ html, body, div, ul, li, { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { font-size: 16px; } #nav { width: 100px; margin: 50px auto; } li { font-size: 16px; font-weight: bold; } li a { display: block;; text-align: center; padding: 27px 0; } li#new a { background: #FF2801; color: #FFF; border: #FF2801 1px solid; } li#info a { background: #FFA101; color: #FFF; border: #FFA101 1px solid; } li#item a { background: #97C500; color: #FFF; border: #97C500 1px solid; } li#shop a { background: #00C40B; color: #FFF; border: #00C40B 1px solid; } li#company a { background: #69D1EE; color: #FFF; border: #69D1EE 1px solid; } li#new a:hover { background: #FFF; color: #FF2801; } li#info a:hover { background: #FFF; color: #FFA101; } li#item a:hover { background: #FFF; color: #97C500; } li#shop a:hover { background: #FFF; color: #00C40B; } li#company a:hover { background: #FFF; color: #69D1EE; }