個人練習用：サイトパーツ、ボトムアイコン
関連タイピング
-
解説なしで、個人練習用のコードです。
プレイ回数378英語長文327打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数3728英語長文673打 -
html,cssカーソルを合わせると動く画像
プレイ回数556長文456打 -
２カラムフレックスボックスのサンプルサイト
プレイ回数611英語長文630打 -
解説付きでbox-shadowの基本をまとめています。
プレイ回数270長文315打 -
h2やh3のデザインのcssです。解説なしです。
プレイ回数316英語長文980打 -
ボックスのCSSを解説なしで
プレイ回数178英語長文760打 -
個人練習用：サイトパーツ、アコーディオン
プレイ回数134英語長文1379打
問題文
(<!DOCTYPE html><html><head><meta charset="UTF-8">)
<!DOCTYPE html><html><head><meta charset="UTF-8">
(<title>bottomnav</title><link rel="stylesheet" href="css/icon.css">)
<title>bottomnav</title><link rel="stylesheet" href="css/icon.css">
(</head><body><ul class="bottom-menu">)
</head><body><ul class="bottom-menu">
(<li><a href="#">)
<li><a href="#">
(<div align="center"><span class="mini-text">home</span><br/>)
<div align="center"><span class="mini-text">home</span><br/>
(<img src="image/1.png" width="24px" height="24px" alt="">)
<img src="image/1.png" width="24px" height="24px" alt="">
(</div></a></li><li><a href="#">)
</div></a></li><li><a href="#">
(<div align="center"><span class="mini-text">sample</span><br/>)
<div align="center"><span class="mini-text">sample</span><br/>
(<img src="image/2.png" width="24px" height="24px" alt="">)
<img src="image/2.png" width="24px" height="24px" alt="">
(</div></a></li><li><a href="#">)
</div></a></li><li><a href="#">
(<div align="center"><span class="mini-text">calender</span><br/>)
<div align="center"><span class="mini-text">calender</span><br/>
(<img src="image/3.png" width="24px" height="24px" alt="">)
<img src="image/3.png" width="24px" height="24px" alt="">
(</div></a></li><li><a href="#">)
</div></a></li><li><a href="#">
(<div align="center"><span class="mini-text">mail</span><br/>)
<div align="center"><span class="mini-text">mail</span><br/>
(<img src="image/4.png" width="24px" height="24px" alt="">)
<img src="image/4.png" width="24px" height="24px" alt="">
(</div></a></li></ul></body></html>)
</div></a></li></ul></body></html>
(css start)
css start
(.mini-text{font-size:10px;})
.mini-text{font-size:10px;}
(ul.bottom-menu {)
ul.bottom-menu {
(position: fixed; left:0; bottom:0; width: 100%;)
position: fixed; left:0; bottom:0; width: 100%;
(height:42px; margin:0; padding:0; background-color:#f5f5f5;)
height:42px; margin:0; padding:0; background-color:#f5f5f5;
(border-top:2px solid #808080; border-bottom:2px solid #808080;)
border-top:2px solid #808080; border-bottom:2px solid #808080;
(z-index:30; })
z-index:30; }
(ul.bottom-menu li {)
ul.bottom-menu li {
(float:left; width:25%; background-color:#f5f5f5;)
float:left; width:25%; background-color:#f5f5f5;
(list-style-type:none; text-align:center;)
list-style-type:none; text-align:center;
(font-size:24px; })
font-size:24px; }
(.bottom-menu li a {)
.bottom-menu li a {
(display: block; color:#808080; padding-top:0px;)
display: block; color:#808080; padding-top:0px;
(padding-bottom:5px; line-height:10px;)
padding-bottom:5px; line-height:10px;
(text-decoration:none; })
text-decoration:none; }
(.bottom-menu li a:hover { color:#a9a9a9; })
.bottom-menu li a:hover { color:#a9a9a9; }