CSSの練習（課題16〜20）
下記課題ページの残り（CSS16〜CSS20）をやって見た。
http://d.hatena.ne.jp/css_design/20121130/p1
なるべくお手本を見ないで、まずは自力でCSSを打つ。
まるで動かない。そして文字化け。動かない理由を一個ずつ探してつぶす。
振返って見ると、ここで使う手法は授業の時に全部説明受けてるよね・・はあ。
でも本当に痒いところに手が届く先生のブログ、ありがたい。
そこがまともになったら見え方の違いを一個ずつ変更して仕上がりを検証。
時間かかるなあ。
こんなんで大丈夫なのか！
明日からやけにややこしそうなfloatに入るというのに。
CSS注意点チェックリスト
- 文字コード (エディタの設定がUTF-8になっているか確認)
- 文法html （HTML Validatorでチェック）
- 文法css （W3C CSS検証サービスでチェック）
- ファイル管理 リンク先フォルダ名、ファイル名ミスしていないか確認
CSS16 ULリスト、擬似クラスの練習
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習16メニューのリンク縦ナビブロックメニュー</title> <link rel="stylesheet" href="css/css16.css" media="screen, print"> </head> <body> <div class="navi"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>
charset "UTF-8";
.navi{
margin:50px 0 0 30px;
width:200px;
font-family:
"メイリオ",
Meiryo,
Sans-serif;
background-color:#f3f3f3;
}
.navi ul{
margin:0;
padding:0;
list-style-type:none;
border-top:solid 1px #aaa;
}
.navi li{
margin:0;
padding: 10px 0px 10px 16px;
background-color:#f3f3f3;
border-bottom:solid 1px #aaa;
font-size:16px;
}
.navi li a:link{
color:#000;
text-decoration:none;
}
.navi li a:hover{
color:#F98A11;
}
.navi li a:visited{
color:#000;
}
ブラウザで表示すると
CSS17 ULリスト、擬似クラスの練習2 背景色が変わる
HTMLは16をそのまま流用できるので少し楽。
というか16も15の流用すれば良かったではないか。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習17メニューのリンク縦ナビブロックメニュー</title> <link rel="stylesheet" href="css/css17.css" media="screen, print"> </head> <body> <div class="navi"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>
@charset "UTF-8";
.navi{
margin:50px;
width:200px;
height:auto;
font-family:
"メイリオ",
Meiryo,
Sans-serif;
font-weight:bold;
color:#fff;
}
.navi ul{
margin:0;
padding:0;
list-style-type:none;
}
.navi li{
margin:0;
border-bottom:solid 1px #fff;
font-size:16px;
}
.navi li a:link{
padding: 10px 1em 10px 1em;
text-decoration:none;
display:block;
color:#fff;
background-color:#22952d;
}
.navi li a:hover{
padding: 10px 1em 10px 1em;
background-color:#ff9700;
}
.navi li a:visited, a:active{
padding: 10px 1em 10px 1em;
color:#22952d;
}
気づいた点
.navi のheight:auto;の指定を追加したら上下がぐちゃっとくっつく。
.navi li のパディング指定はいらないらしい。
.navi li a:link のdisplay:block指定をするとぐちゃっとくっついていたのがいい感じに拡がる。
display:blockってなんだ？
ブラウザ表示
CSS17 ULリスト、擬似クラスの練習3 左太ボーダーの色がマウス操作で変わる
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習18メニューのリンク縦ナビブロックメニュー</title> <link rel="stylesheet" href="css/css18.css" media="screen, print"> </head> <body> <div class="navi"> <ul> <li><a href="#">メニューのリンク1</a></li> <li class="current"><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>
@charset "UTF-8";
.navi{
width:200px;
font-family:
"メイリオ",
Meiryo,
Sans-serif;
font-weight:bold;
/* color:#999;*/
}
.navi ul{
list-style-type:none;
margin:0;
padding:0;
border-top:solid 1px #aaa;
border-right:solid 1px #aaa;
border-left:solid 1px #aaa;
/* border-left:solid 10px #d5eaef;*/
}
.navi li{
border-bottom:solid 1px #aaa;
/* border-left:solid 10px #b3e;*/
}
.navi li a:link{
display:block;
padding-left:10px;
border-left:solid 10px #d7eaef;
font-size:0.9em;
line-height:30px;
text-decoration:none;
color:#000;
}
.navi li a:visited{
border-left:solid 10px #606dbd;
}
.navi li a:hover{
border-left:solid 10px #00b7ef;
}
.navi .current a:link{
border-left: solid 10px #0b74a8;
}
ブラウザで表示すると
気づいた点
課題の画像の通りにならない。文字が黒くならない。でもお手本のcssを丸写しして実行してもそこは同じだからまあいいか・・
.currentって初めて登場したなあ。これは手本見ないで作るのは無理だったよ。
CSS19 ULリスト、擬似クラスの練習4 リストの見出し記号を画像にする
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>擬似リンク縦ナビメニュー</title> <link rel="stylesheet" href="css/css19.css" media="screen,print"> </head> <body> <div class="navi"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>
私が作ったCSSはこれ
@charset "UTF-8";
*{
font-family:
"メイリオ",
Meiryo,
sans-serif;
}
.navi{
font-size:0.875em;
}
.navi ul{
list-style-image:url(../img/sankaku.jpg);
}
.navi li{
color:#f00;
margin:0 0 8px 0;
line-height:1.2;
}
.navi li a{
color:#000;
}
.navi a:hover{
color:#f80;
}
a:visited{
}
a:active{
}
ブラウザで見ると
お手本のCSSとは違ってた。
お手本は
@charset "UTF-8";
*{
font-family:
"メイリオ",
Meiryo,
sans-serif;
}
.navi{
font-size:0.875em;
}
.navi ul{
list-style-type:none;
}
.navi li{
color:#f00;
margin:0 0 8px 0;
line-height:1.2;
}
.navi li a{
padding:0 0 0 13px;
background-image:url(../img/sankaku.jpg);
background-repeat:no-repeat;
background-position:0 5px;
color:#000;
text-decoratiion:none;
}
.navi a:hover{
color:#f80;
}
a:visited{
}
a:active{
}
ブラウザ表示
表示させると違いはほとんどないですよね。
background-imageで△画像を指定すること、background-image-positionで左上からの画像の配置位置を指定して、画像がちょっと上に浮いた配置なのを修正するのがポイントなのだと思います。
CSS20 ULリスト、擬似クラスの練習4 グラデーション画像を背景にしてボタン風に見せる。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習20メニューのリンク縦ナビブロックメニュー</title> <link rel="stylesheet" href="css/css20.css" media="screen,print"> </head> <body> <div class="navi"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>
@charset "UTF-8";
*{
font-family:
"メイリオ",
Meiryo,
sans-serif;
margin:0;
padding:0;
}
.navi{
font-size:0.875em;
width:200px;
overflow:hidden;
margin:30px 0 0 30px;
}
.navi ul{
list-style-type:none;
border-top:solid 1px #aaa;
}
.navi li{
color:#f00;
border-right:solid 1px #aaa;
border-bottom:solid 1px #aaa;
border-left:solid 1px #aaa;
}
.navi li a{
display:block;
line-height:30px;
padding:0 0 0 24px;
background-image:url(../img/bg1.png);
background-repeat:no-repeat;
color:#000;
font-size:0.9em;
text-decoratiion:none;
}
.navi a:hover{
background-position:0-40px;
}
a:visited{
}
a:active{
}
ブラウザで表示すると
これは感動です。2本のグラデーション帯がある画像を上下にずらして配置することでボタン風に見えます。
背景に使った元画像はこれです。
