DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

CSSのアニメーションを利用して、左から背景を少しずつ表示したい

バイト先の職業訓練学校では「実制作」なるものがありまして
訓練生さんから、質問が出た。
「背景画像の道を、左から、じょじょに表示させて、道を歩いてるような感じにしたい。」
訓練生さんのイメージするようなものが、ググってもなかったので
苦労して作ったので「めも」

↓完成したのは、こんな感じ
http://memo352.web.fc2.com/2017-10-michi/

イラストはS先生、作成のヒントはN先生にいただきました。
ありがとうございますm(_ _)m


コードは以下の通り

まずはHTML 背景画像(道)をDIVで隠しています
<div class="box1">
<div class="box2"></div>
</div>

<div class="box3">
<div class="box4"></div>
</div>


次にCSS DIVにアニメーションを付けて移動させます
html,body,div,p { margin: 0; padding: 0; }

.container{
	width:900px;
	background-color:#CCC;
	margin: 0 auto;
	overflow: hidden;
}

/* 道路上 ======================================================  */
.box1 {
	background-image:url(img/michi2.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 900px;
	height: 100px;
}

/* カバー(道路上 左から表示)===================================  */
.box2 {
	width: 900px;
	height: 100px;
	background-color: #CCC;
}

.box2 {
animation-name: animation01; /* アニメーション名を指定 */
animation-duration: 5s; /* アニメーション一回分の時間の長さ */
animation-timing-function: ease;/* アニメーションのタイミング・進行割合を指定する:easeが初期値 */
animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム(100%)のスタイルが適用 */
}

@keyframes animation01 { /* @keyframesで動作を定義、fromからtoへアニメーション */
	from {
		transform: translateX(0px);/* 水平方向に移動 */
	}
	to {
		transform: translateX(980px);/* 水平方向に移動 */
	}
}


/* 道路下 ======================================================  */
.box3 {
	background-image:url(img/michi3.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 900px;
	height: 100px;
	margin-top:-10px;
}


/* カバー(道路上 右から表示)===================================  */
.box4 {
	width: 900px;
	height: 100px;
	background-color: #CCC;
	margin-top:0px;
}


.box4 {
animation-name: animation02; /* アニメーション名を指定 */
animation-duration: 5s; /* アニメーション一回分の時間の長さ */
animation-timing-function: ease-out;/* アニメーションの終了付近の動きを緩やかにする */
animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム(100%)のスタイルが適用 */
animation-delay: 4s; /* アニメーションが開始するまでの時間を指定:0sが初期値 */
}


@keyframes animation02 { /* @keyframesで動作を定義、fromからtoへアニメーション */
	from {
		transform: translateX(0);/* 水平方向に移動 */
	}
	to {
		transform: translateX(-980px);/* 水平方向に移動 */
	}
}

いまさらですが…CSSで三角形を描く

これ、今日知りました(^^;)
たまたま、もとクラスメートのかたから違う質問メールがあり
調べている時に見つけてしまいました。
(質問された内容は解決せずでしたすみません

こんな便利なものがあったのですね!!
CSS三角形作成ツール
http://apps.eky.hk/css-triangle-generator/ja


↓ちなみにコードはこんな感じ
.sankaku {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 7px;
border-color: transparent transparent transparent #007bff;
line-height: 0px;
_border-color: #000000 #000000 #000000 #007bff;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

感激してしまいましたー。もっと早く知りたかったです(^^;)
↑そのままだと上下ずれるので、試しにバックに色をつけてline-height入れてみました。

さぶめにゅー

今やっている仕事で、日本語×1、外国語×2 の話がきています。

外国語×2は翻訳してくれるというけれど、
以前、外国語サイトの仕事をした時に、メニューの文字などは翻訳してもらえず、
その国のサイトを見て、なんて書くのがいいのか、探しまわった思い出があります(@o@;)

その教訓から、文字のやり変えやメニューの増減などにそなえて、
せめてサブメニューは文字部分を画像でなく、テキストで作ろうと思いました(^^;)
→文字部分 画像ではなくテキストのサブメニュー(別画面で開きます)

201209submenu01.jpg

↓HTMLのソースはこんな感じ <は全角です。
<div class="subnav_wrap">
<ul class="suvnav_ao">
<li>
<a href="***" class="alpha"><img src="画像1" alt="めにゅー1" height="25" width="32">めにゅー1</a></li>
</ul>
</div>
メニュー全体を<div>で囲んで
色ごとに<ul class="色別クラス分け">な感じです。
それから画像は、入れ替えが予想されるので、直接HTMLに貼りました。

CSS、他に良い書き方があるとは思うんですが、以下の感じで・・・

  まずは、メニューの全体。メニューを囲む<div>の中の<li>に指定。
 ↓ボタンのバックを画像にしたいので、これは背景で呼びました。
.subnav_wrap li{
	height:35px; /* メニューの高さ */
	width:198px; /* メニューの横幅 */
	background-image:url(画像); /* メニューボタンの背景の画像です */
	background-position:left bottom; /* メニューボタンの背景の画像の位置、下からうっすらグラデーションにしたかったので */
	background-repeat:repeat-x; /* メニューボタンの背景の画像の繰り返し、横に繰り返す */
	background-color:#FFF; /* メニューボタンの背景色 */
	margin-left:5px; /* メニューボタンの横の空き、なくても良い */
	margin-bottom:5px; /* メニューの下の空き */	
	font-size:12px; /* 文字の大きさ */
}

 ↓それからこんな感じで、個別に色の部分を指定しました。
.suvnav_ao{
	padding-top:15px; /* 青枠メニュー全体の上の空き 、なくても良い*/
}

.suvnav_ao li{
	border:solid 1px #3480D4; /* メニューボタンの枠の色 */
}

/* 文字に対して */
.suvnav_ao li a {
	line-height: 35px; /* 文字の前に画像が入っているので。メニューの高さ入れないと位置が揃わなかった */
	color:#333; /* リンクされている文字の色 */
	text-decoration:none; /* リンクされている文字の下線はいらない */
	display:block; /* これを指定しないとテキストの上にマウスが来た時だけ、ホバーになる。
             ボタンの上にマウスを載せた時にホバーさせたかったので入れました */
}
 /* 文字ホバー時 */
.suvnav_ao li a:hover{
	color:#3480D4; /* 文字の色 */
	text-shadow: 0px 0px 3px #3480D4; /* css3 文字の影 (右距離 下距離 ぼかし具合 影の色) 
                     でもこれIEでは効かないみたいです */ 
}

 ↓画像はホバー時にちょっと表示が薄くなるようにしました。
  <a href="***" class="alpha">のクラスアルファに作用します。
  これは拾ってきたコード入れました。
/*ボタン半透明 */ 
a.alpha:hover img{
	opacity:0.7; /*モダンブラウザ用*/
	filter:alpha(opacity=70); /*IE7以下用*/
	-ms-filter:"alpha(opacity=70)"; /*IE8用*/
}


ついでに、↓画像はメニューごとに変えないパターンも。
201209submenu02.jpg
↓こちらのHTMLのコードはこんな感じ
<ul class="suvnav_link">
<li><a href="***">めにゅー1</a></li>
</ul>
先頭の「まる」は共通なので、背景画像を呼び出します。 なので画像はHTMLには入りません。 ↓CSSはこんな感じ
.suvnav_link li{
	border:solid 1px #B29BD3; /* メニューボタンの枠の色 */
	line-height:35px; /* 入れないと文字がセンターにこないので、メニューボタンの高さを入れました */
}

.suvnav_link li a {
	background-image:url(まる画像ホバー前); /* 文字の先頭のまるやじるし画像 */
	background-repeat:no-repeat; /* 画像の繰り返しなし */
	background-position:3px center; /* 画像の位置は左から3px、上下真ん中にしました */
	padding-left:15px; /* 文字の位置は左から15px */
	display:block; /* これを指定しないとテキストの上にマウスが来た時だけ、ホバーになる。
             ボタンの上にマウスを載せた時にホバーさせたかったので入れました */	
	color:#333; /* リンクされている文字の色 */
	text-decoration:none; /* リンクされている文字の下線はいらない */
}

.suvnav_link li a:hover{
	background-image:url(まる画像ホバー時);
	background-repeat:no-repeat; /* 画像の繰り返しなし */
	background-position:3px center; /* 画像の位置は左から3px、上下真ん中 */	
	color:#6C48A4; /* ホバー時の文字の色 */
	text-shadow: 0px 0px 3px #B29BD3; /* css3 文字の影 (右距離 下距離 ぼかし具合 影の色) */ 
}

IEで table の上に隙間ができる(揃わない)

お客さんのサイトのロゴ部分だけ入れ替える仕事があり…
ありゃ?
2012-03-IEsukima01.jpg
IEで見ると、上が揃わないんですけど・・・

Firefoxではちゃんと見れるんだけどなー(^^;)
2012-03-IEsukima00.jpg
でもお客さん、IEなんだよねー。
あ、もしかして、それを直すためにロゴ入れ替え?なんちゃって。

・・・で、何かの設定が効いてるのかな?と思って、
お客さんのサイトのCSS読んだりしてたんですけど・・・
めっちゃよくできてますやん!!
デザインもいいしねー、コードもキレイだしねー、私よりめっちゃいいです(^^;)
どこを直せと・・・

・・・で、悩んだ末 
テーブル要素の上の、この「スペース」がアヤシイ・・・
2012-03-IEsukima02.jpg

2012-03-IEsukima03.jpg

↓波打つコードのスペースを消してみた。
2012-03-IEsukima04.jpg


なんですって!!Σ(°□°) そのスキマはスペースでしたか!! IE!!
2012-03-IEsukima05.jpg
最初は、<table>の上の改行かな?とか思ってたんですけど
<table>内のスペースだったんですね。

こんなことって、あるんですねー。 これだけで半日つぶしてしまいました
知ってれば、どってことないのに、知らないって、そんなもんなんですねー。
これって、IEでは普通にこうなるのかな(?_?)
私は経験がないので、初めて知りました。
なぜ経験がないかと言うと・・・

コードを書くのが苦手
     ↓
会社だけでは間に合わないから、家でも書く
     ↓
家のノートパソコンは画面が小さいから
     ↓
コードは全て左寄せで書く

    そして!
まだそんなにサイト制作をしたことがない!!

・・・からなんですけど(^^;) 
小さい画面だったのが不幸中の幸いだったと、今回、勉強になりました。←ちょっと違うか


CSSでツールチップ

この前、友達と話していてツールチップの話題が出たのですが

ツールチップ↓こんなやつですね。
tooltip-01.jpg

IE9では出ないんですか、 私は知りませんでした

出ないならCSSで出してみたらいかがでしょう(^^;)
↓こんな感じ。見本はコチラ(別窓で開きます)
tooltip-tameshi.jpg

もとサイトはこちら(別窓で開きます)
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/# EasyCSSTooltipKollermedia-01.gif

素晴らしいですね~!!!
Jürgen Koller B.A. (Hons.)様に感謝です!!
ダウンロードしたサンプルを見れば、感激しますよ(^^)
ほんとにたったこれだけで、こんなことができるなんて、すごすぎる~。
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

EasyCSSTooltipKollermedia-02.gif

ほんっとに素晴らしい!!
何と言葉で表現してよいのやら(*^^*)