12月2011

恵那へ行く。えなさんなんだもんだに出会う

見習、恵那へ出没です。

道の駅マップをたよりに、恵那市にある道の駅上矢作ラ・フォーレ福寿の里へ行きましたぁ。

恵那

道の駅上矢作ラ・フォーレ福寿の里

どんよりとした空、ちょっとドライブ日和とは言いにくいですが、とにかく恵那へ行きました。
山に囲まれたいいところ。日ごろパソコンの前に一日中座っている見習には、いい景色です。
と、格好のいいことを言いますが、すぐにお土産をお買い上げ。（といっても、自分用の食べ物ばかり…。）

シルクのようなえなさんなんだもんだ

シルクのようなえななんだもんだ

胞山(えなさん)なんだもんだ。

一言で言えば自然薯パウダー。3gずつの小袋タイプ。恵那の特産自然薯をパウダー状にしたもの。袋をあけると、きめの細かい、白いパウダーがサラサラとお皿に出てきます。ほんのり黄味がかっていて、シルクパウダーのよう。ふんわりまあるい香りがします。いろいろお料理の隠し味に使えるそうです。

水で溶けばすぐにとろろ汁ができると封入されている紙にあったので、朝とろろ汁しました。

朝とろろに

少量のぬるま湯で溶いてからマルイエしょうゆと粉末カツオだしのもとを加えます。それからよーくかき混ぜてアツアツごはんにかけると朝とろろ汁の完成です。ホントに数分でできるので朝でもさっとおいしいとろろ汁ごはんができます。とろろは栄養満点、体に優しいので朝ごはんにぴったりです。１日パワフルに動けます。

胞山(えな)なんだもんだ3g入りが5袋入って600円。東野のサイトでも買えます。

2011年12月25日1:11 AM| カテゴリー： くつろぐ、たびログ,まち歩き| コメント (0)

Java Scriptでナビボタンをマウスオーバー

CSSでナビボタンをコントロールできます。hoverとか使えば、マウスオーバーも表現できます。これってJava Scriptでもできるんですね。って、Fire Worksでボタン作成して、マウスオーバー表現すると、それをHTMLに書き出してくれる機能を使うと、Java Scriptで書き出します。

「Java Scriptでやるのはできるだけよしたほうがよい」とか聞いことがあって、それにCSSでできるしぃ～と思ってました。でも、時代はHTML5。Java Scriptが重要になってくるとかいうと、話は違う？ってことになります。それにCSSだと、マウスを押した瞬間の表現ができません。

Java Scriptだと、マウスを乗せた瞬間（CSSでHoverで表現したときと同じ）だけでなく、マウス押したときの表現も可能です。

ということで、Java Scriptでナビボタンをマウスオーバーにトライですぅ。

XHTML

<ul>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="" onmouseover="this.src='img/navbtn02.gif'" onmouseout="this.src='img/navbtn01.gif'" onmousedown="this.src='img/navbtn04.gif'"/></a></li>

</ul>

CSS

*{

padding:0;

margin:0;

}

ul{

width:400px;

margin:auto;

list-style-type:none;

}

li {

float:left;

}

img {

border:none;

}

▼サンプルはこちら

どうでしょう。とりあえず、できました。うひほほ。ちょっとずつ楽しくなってきた見習ですぅ。

2011年12月24日1:45 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)

CSSでナビボタンを作る　背景画像の切り替えその3

CSSでコントロールしてナビゲーションボタンを作っていて、不思議なことに出くわしました。

次の二つのコード、見てください。

サンプル１

(X)HTML

<ul>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;
	height:50px;
	background-image:url(img/navbtn02.gif);
}
a {
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:0 0;
	text-decoration:none;
	
}
a img {
	border:none;
}
a:hover {
	visibility:hidden;	
}

サンプル１はこちら

サンプル２

(X)HTML

<ul>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;
	height:50px;
	background-image:url(img/navbtn02.gif);
}
a {
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:0 0;
	text-decoration:none;
	
}
a img {
	border:none;
}
a:hover span{
	visibility:hidden;
}

サンプル２はこちら

どちらも通常時の画像をimgでHTML内に張り込んで、hoverのときは、見えなくなるようにvisibility:hiddenをつけて、親要素であるliの背景画像を見せるという考え方です。

違いは、サンプル２のほうでは、HTMLでimgをspanで囲ってあること。CSSでは、hoverのときにvisibility:hiddenを設定するのが、a:hoverではなく、a:hoverの中にあるspanです。

たったこれだけの違いですが、なぜかサンプル２のほうが、hoverの画像の読み込みがはやい、というか、ちらつかないです。

IE8とFire Fox8で試してみましたが、両方とも、サンプル１ではがたがたちらつくのに、サンプル２はそんなに気にならないです。プリロード的な違いはないように思えるし、なぜでしょう…。はて。

2011年12月23日1:53 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

« 古い記事 新しい記事 »