WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

CSS復習/縦ナビゲーション

復習

<<01>>

f:id:mmmmofu:20160921031212j:plain

http://efu.sakura.ne.jp/web/0331/index4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title></title>
<style>
body {
font-family:
"Hiraino Kaku Go"
}
h1 {
background: limegreen;
color: #FFF;
padding: 10px;
margin-bottom: 40px;
} 
p {
font-size: 20px;
color: #FFF;
background: #666;
padding: 1.0em;
}
</style>
</head>
<body>
<h1>CSSの使い方</h1>
<p>ここに段落が入る</p>
</body>
</html>

<<02>>

f:id:mmmmofu:20160921030854p:plain

http://efu.sakura.ne.jp/web/0331/index3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
#content {
width: 500px;
margin: 30px auto; 
}
h1 {
margin-bottom: 20px;
}
h2 {
font-size: 24px;
color: #FFF;
background: #5DB254;
padding: 10px 0 10px 20px;
}
p {
font-size: 16px;
color: #333;
line-height: 1.5;
border: 2px solid #5DB254;
border-top: none;
padding: 20px;
}
</style>
</head>
<body>
<div id="content">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p> 
</div><!--/ #content -->
</body>
</html>

縦ナビゲーション

f:id:mmmmofu:20160729185310p:plain

http://efu.sakura.ne.jp/web/0331/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦のナビゲーション</title>
<style>
body,div, ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
width: 100px;
margin: 50px auto;
}
body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
li a {
display: block;
width: 100px;
height: 70px; 
border: 1px solid #333;
text-align: center;
line-height: 70px;
font-weight: bold;
color: #FFF;
}
li#new a {
background: #FF2801;
border: 2px solid #FF2801;
}
li#new a:hover {
background: #FFF;
color: #FF2801;
} 
li#info a {
background: #FFA101;
border: 2px solid #FFA101;
}
li#info a:hover {
background: #FFF;
color: #FFA101;
} 
li#item a {
background: #97C500;
border: 2px solid #97C500;
}
li#item a:hover {
background: #FFF;
color: #97C500;
}
li#shop a {
background: #00C40B;
border: 2px solid #00C40B;
}
li#shop a:hover {
background: #FFF;
color: #00C40B;
}
li#company a {
background: #69D1EE;
border: 2px solid #69D1EE;
}
li#company a:hover {
background: #FFF;
color: #69D1EE;
}
</style>
</head>
<body>
<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>
</body>
</html>

f:id:mmmmofu:20160729185324p:plain

http://efu.sakura.ne.jp/web/0331/index2

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
body,div,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}
body {
font-size: 16px;
font-family: 
"Hiragino Kaku Gohic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
width: 180px;
margin: 30px 0 0 50px;
padding: 3px 0;
border-bottom: dotted 1px #73A1FF;
}
li {
display:block;
padding: 10px 0 10px 20px;
border-top:dotted 1px #73A1FF;
background: 12px;
background-position
}
a {
font-weight:bold;
color:#73A1FF;
text-decoration:none;
display: block
}
a:hover {
color:#FFAA00;
}
</style>
</head>
<body>
<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>
</body>
</html>

以前の記事

mmmmofu.hatenablog.com