講師:湊 有加里

1限目
学科 CSS基礎③
レイアウト系のプロパティについて

2限目
学科 CSS基礎③
練習問題の説明

3限目
学科 CSS基礎③
CSSのプロパティと値を考える

4限目
学科 CSS基礎③
練習問題の解説

5限目
学科 CSS基礎③
本日の講義のまとめ

CSSのリストを並べる(回り込み)のプロパティーを学ぶ。

  • 感想 練習問題は非常に難しかった。何度も修正しているうちにCSSが壊れてしまって、表示がおかしくなってしまっていた。もう一度、最初からダウンロードし直したら正常に表示された。
  • 質問 footerのリストを横に並べるのにfloat: rightではなくdisplay: inlineを使うのは何故でしょうか?
/*------------- footer -------------*/

footer{
	background: #888;
	padding: 10px;
	width: 100%;
}
footer p#btn_to-top{
	text-align:right;
	padding: 0;
	position: fixed;
	bottom: 20px;
	right: 0;
}
footer p#btn_to-top a{
	font-size:80%;
	padding:5px;
	background: #999;
	color: #fff;
}
footer p#btn_to-top a:hover{
	opacity:0.7;
}
footer ul{
	
	border-bottom:solid 1px #ccc;
	padding:10px 0;
	text-align: center;
	margin-bottom: 20px;
}
footer ul li{
	display: inline;

}
footer ul li a{
	padding: 0px 20px;
    color:#fff;
}
footer ul li a:hover{}
footer ul li a:before{
	content:"・";
}

footer p{
	font-size: 90%;
	text-align: center;
}
footer p small{
	font-size:80%;
	color: #ccc;
}
footer p small a{
	color: #ccc;
}
footer p small a:hover{}