楽しいおかず修正：IE対策！(IE9だけ。。)

授業メモ

前の記事のコードを、IE9で見たらレイアウトがめちゃくちゃ崩れていて、修正しました。
http://web-study.lolipop.jp/kadai/css/side_dish/

ポイント

IEの場合、画像リンクにborderがついてしまい崩れる。
なのでcssに下記のコードを追加しました。

img {border: none;}

あと、ナビの位置なども変更しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しいおかず♪</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<section class="left"><!-- col1▼ -->
<figure class="box">
<h1 class="left"><img src="images/01.png" alt=""></h1>
</figure>

<nav class="box">
<ul>
<li class="left"><!-- concept：左上 -->
<a href="#">
<img src="images/02.png" alt="" class="m-r">
</a></li>

<li><!-- access：右上 -->
<a href="#">
<img src="images/04.png" alt="" class="m-b">
</a></li>

<li class="left"><!-- menu：左下 -->
<a href="#">
<img src="images/03.png" alt="" class="m-r">
</a></li>

<li><!-- news：右下 -->
<a href="#">
<img src="images/05.png" alt="">
</a></li>
</ul>
</nav>

<figure class="box">
<img src="images/11.jpg" alt="">
</figure>

<figure class="box">
<p class="left"><img src="images/12.jpg" alt="" class="m-r"></p>
<p><img src="images/13.jpg" alt="" class="m-b"></p>
<p><img src="images/14.jpg" alt=""></p>
</figure>

<figure class="box">
<p class="left"><img src="images/15.jpg" alt="" class="m-b"></p>
<p class="left"><img src="images/16.jpg" alt="" class="m-r"></p>
<p class="left"><img src="images/17.jpg" alt=""></p>
</figure>
</section>

<section class="left"><!-- col2▼ -->
<figure class="box">
<p class="left"><img src="images/07.jpg" alt="" class="m-b"></p>
<figure class="box">
<p class="left"><img src="images/08.jpg" alt="" class="m-r"></p>
<p class="left"><img src="images/09.jpg" alt=""></p>
</figure>
</figure>

<figure class="box">
<p><img src="images/18.jpg" alt=""></p>
</figure>

<figure class="box">
<p class="right"><img src="images/21.jpg" alt=""></p><!-- right!! -->
<p><img src="images/19.jpg" alt="" class="m-b"></p>
<p><img src="images/20.jpg" alt="" class="left"></p>

</figure>

<figure class="box">
<p><img src="images/22.jpg" alt=""></p>
</figure>

<figure class="box">
<p class="left"><img src="images/23.jpg" alt="" class="m-b"></p>
<p class="right"><img src="images/24.jpg" alt=""></p>
<p><img src="images/25.jpg" alt=""></p>
</figure>
</section>

<section class="left"><!-- col3▼ -->
<figure class="box">
<p class="left"><img src="images/10.jpg" alt=""></p>
</figure>

<figure class="box">
<p><img src="images/06.jpg" alt="" class="right"></p>
<p class="left"><img src="images/26.jpg" alt="" class="m-b"></p>
<p><img src="images/27.jpg" alt="" class="left"></p>
</figure>

<figure class="box">
<p class="left"><img src="images/28.jpg" alt="" class="m-r"></p>
<p><img src="images/34.jpg" alt="" class="m-b"></p>
<p><img src="images/35.jpg" alt="" class="left"></p>
</figure>

<figure class="box">
<p class="left"><img src="images/33.jpg" alt="" class="m-r" ></p>
<p><img src="images/29.jpg" alt="" class="m-b"></p>
<p  class="left"><img src="images/30.jpg" alt="" class="m-r"></p>
<p><img src="images/31.jpg" alt=""></p>
</figure>

<figure class="box">
<p><img src="images/32.jpg" alt=""></p>
</figure>
</section>
</div>
</body>
</html>

@charset "UTF-8";

* {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
}
#container {
	width: 960px;
	margin: 20px auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
.box {
	width: 300px;
	height: 300px;
	padding: 0 20px 20px 0;
}
.m-r {
	margin-right: 20px;
}
.m-b {
	margin-bottom: 14px;
}
img {
	border: none;
}

課題 : 楽しいおかず

授業メモ

作成リンク

http://web-study.lolipop.jp/kadai/css/side_dish/

CSSを削っった！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しいおかず♪</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
	<section class="left"><!-- col1▼ -->
		<figure class="box">
			<h1 class="left"><img src="images/01.png"></h1>
		</figure>
		
		<nav class="box">
		<ul>
			<li class="left"><a href="#">
			<img src="images/02.png" class="m-r">
			</a></li>
			<li><a href="#"><img src="images/03.png" class="m-b">
			</a></li>
			<li><a href="#" class="left">
			<img src="images/04.png" class="m-r"></a></li>
			<li><a href="#"><img src="images/05.png">
			</a></li>
		</ul>
		</nav>
	
		<figure class="box">
			<img src="images/11.jpg">
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/12.jpg" class="m-r"></p>
			<p><img src="images/13.jpg" class="m-b"></p>
			<p><img src="images/14.jpg"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/15.jpg" class="m-b"></p>
			<p class="left"><img src="images/16.jpg" class="m-r"></p>
			<p class="left"><img src="images/17.jpg" ></p>
		</figure>
	</section>
	
	<section class="left"><!-- col2▼ -->
		<figure class="box">
			<p class="left"><img src="images/07.jpg" class="m-b"></p>
			<figure class="box">
				<p class="left"><img src="images/08.jpg" class="m-r"></p>
				<p class="left"><img src="images/09.jpg"></p>
			</figure>
		</figure>
		
		<figure class="box">
			<p><img src="images/18.jpg"></p>
		</figure>
		
		<figure class="box"><!-- ( ･´ω･｀) --><!-- 不思議 -->
			<p class="right"><img src="images/21.jpg"></p><!-- right!! -->
			<p><img src="images/19.jpg" class="m-b"></p>
			<p><img src="images/20.jpg" class="left"></p>
			
		</figure>
		
		<figure class="box">
			<p><img src="images/22.jpg"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/23.jpg" class="m-b"></p>
			<p class="right"><img src="images/24.jpg"></p>
			<p><img src="images/25.jpg"></p>
		</figure>
	</section>
	
	<section class="left"><!-- col3▼ -->
		<figure class="box">
			<p class="left"><img src="images/10.jpg"></p>
		</figure>
		
		<figure class="box">
			<p><img src="images/06.jpg" class="right"></p>
			<p class="left"><img src="images/26.jpg" class="m-b"></p>
			<p><img src="images/27.jpg" class="left"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/28.jpg" class="m-r"></p>
			<p><img src="images/34.jpg" class="m-b"></p>
			<p><img src="images/35.jpg" class="left"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/33.jpg" class="m-r" ></p>
			<p><img src="images/29.jpg" class="m-b"></p><!-- なんだここ！！？？( ﾟДﾟ)！ -->
			<p  class="left"><img src="images/30.jpg" class="m-r"></p>
			<p><img src="images/31.jpg"></p>
		</figure>
		
		<figure class="box">
			<p><img src="images/32.jpg"></p>
		</figure>
		</section>
</div>
</body>
</html>

@charset "UTF-8";

* {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
}
#container {
	width: 960px;
	margin: 20px auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
.box {
	width: 300px;
	height: 300px;
	padding: 0 20px 20px 0;
}
.m-r {
	margin-right: 20px;
}
.m-b {
	margin-bottom: 14px;
}

JQuery や CSS でtabsなど

授業メモ

overcast

http://web-study.lolipop.jp/kadai/jquery/tabs/overcast/

JQuery_tools

http://web-study.lolipop.jp/kadai/jquery/tabs/jquery_tools/

Yetii

http://web-study.lolipop.jp/kadai/jquery/tabs/yetii/yetii.html

タブ切り替えパネル

http://web-study.lolipop.jp/kadai/jquery/tabs/yetii/yetii.html

ドロップダウンメニュー

http://web-study.lolipop.jp/kadai/jquery/tabs/dropdown_menu/index.html

スライドメニュー

http://web-study.lolipop.jp/kadai/jquery/slide/index.html

ポラロイド風写真配置

http://web-study.lolipop.jp/kadai/jquery/poraroid/index.html

CSSでaccordion

http://web-study.lolipop.jp/kadai/css/accordion.html

JQuery : スクロールとライトボックスを組み合わせる

授業メモ

スクロール＋ライトボックス

http://web-study.lolipop.jp/kadai/jquery/scroll_lightbox/index02.html
「美女」というキーワードで画像検索して、15位までのせました！

スクロール

http://web-study.lolipop.jp/kadai/jquery/scroll_lightbox/index01.html

jQuery : accordionのソースを削ってみた

授業メモ

http://web-study.lolipop.jp/kadai/jquery/accordion/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
</style>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim 
quis.</div>
</div>
</div>
</body>
</html>
</html>

/* Layout helpers */
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Component containers*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

/* Accordion */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }


jQueryおすすめサイト
jQuery UI