1時間時計(4)@アドベントカレンダー(17/11)

  • 1時間時計4

1時間時計4

はい、1時間時計の第4回になりま~す。

それでは、続きを見ていきましょう。



.mcinner-cl {
	width: 900%;
	height: 240px;
	overflow: hidden;
	letter-spacing: -0.4em;
	white-space: nowrap;
}


続いて、mcinner-clクラスのCSSになります。

マーキーさせる要素は、横に並べるので、※幅widthを要素%分、指定します。

※サンプルでは、9要素なので、900%を指定しています。

letter-spacingに-0.4emを、white-spaceにnowrapを指定していますが、これは、マーキーさせる要素をinline-blockにして、余分な空白に置き換わった改行を削除するための設定です。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング
スポンサーサイト

1時間時計(3)@アドベントカレンダー(17/11)

  • 1時間時計3

1時間時計3

はい、1時間時計の第3回になりま~す。

それでは、続きを見ていきましょう。



.mcouter-cl {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 480px;
	height: 240px;
	margin: auto;
	overflow: hidden;
}


mcouter-clクラスのCSSからです。

何をしているのかというと、ほとんどはセンタリングの設定です。

positionをabsoluteに、top、right、bottom、leftを0に、幅widthと高さheightを指定して、marginをautoにします。

mcouter-clクラスは、マーキーさせるmcinner-clクラスの外側なので、overflowをhiddenにします。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

1時間時計(2)@アドベントカレンダー(17/11)

  • 1時間時計2

1時間時計2

はい、1時間時計の第2回になりま~す。

それでは、続きを見ていきましょう。



<div class="mcouter-cl">
	<div id="mcinner-id" class="mcinner-cl" style="margin-left: -300px;">

		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari6_marqueeclock.png" alt="ふわふわ。り素材6" />
			<div class="mchelement-cl">50</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari1_marqueeclock.gif" alt="ふわふわ。り素材1" />
			<div class="mchelement-cl">0</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari2_marqueeclock.png" alt="ふわふわ。り素材2" />
			<div class="mchelement-cl">10</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari3_marqueeclock.png" alt="ふわふわ。り素材3" />
			<div class="mchelement-cl">20</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari4_marqueeclock.png" alt="ふわふわ。り素材4" />
			<div class="mchelement-cl">30</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari5_marqueeclock.png" alt="ふわふわ。り素材5" />
			<div class="mchelement-cl">40</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari6_marqueeclock.png" alt="ふわふわ。り素材6" />
			<div class="mchelement-cl">50</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari1_marqueeclock.gif" alt="ふわふわ。り素材1" />
			<div class="mchelement-cl">60</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari2_marqueeclock.png" alt="ふわふわ。り素材2" />
			<div class="mchelement-cl">70</div>
		</div>

	</div>
</div>


まずは、一番外側のmcouter-clクラスですが、1時間時計を上下左右にセンタリングするクラスになります。

次に、その1つ内側のmcinner-clクラスですが、こちらはディスプレーになります。

idとstyleでmargin-leftを指定していますが、このdivタグのmargin-leftを操作して、フレームをスライドさせるためのものです。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

1時間時計(1)@アドベントカレンダー(17/11)

  • 1時間時計1

1時間時計1

はい、今回から新企画”アドベントカレンダー”を始めま~す。

アドベントカレンダーとは、毎日プレゼントを開けてクリスマスを待つカレンダーのことです。

17年11月のアドベントカレンダーは、ローカルで使える1時間時計のソースコードを、毎日少しずつ解説していきたいと思います。

完成品は、リンク先をご覧ください。

素材のダウンロードは、各素材サイトからお願いします。

それでは、まずは、HTMLから見ていきましょう。


<div class="mcouter-cl">
	<div id="mcinner-id" class="mcinner-cl" style="margin-left: -300px;">

		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari6_marqueeclock.png" alt="ふわふわ。り素材6" />
			<div class="mchelement-cl">50</div>
		</div>

		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari1_marqueeclock.gif" alt="ふわふわ。り素材1" />
			<div class="mchelement-cl">0</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari2_marqueeclock.png" alt="ふわふわ。り素材2" />
			<div class="mchelement-cl">10</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari3_marqueeclock.png" alt="ふわふわ。り素材3" />
			<div class="mchelement-cl">20</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari4_marqueeclock.png" alt="ふわふわ。り素材4" />
			<div class="mchelement-cl">30</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari5_marqueeclock.png" alt="ふわふわ。り素材5" />
			<div class="mchelement-cl">40</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari6_marqueeclock.png" alt="ふわふわ。り素材6" />
			<div class="mchelement-cl">50</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari1_marqueeclock.gif" alt="ふわふわ。り素材1" />
			<div class="mchelement-cl">60</div>
		</div>
		<div class="mceouter-cl">
			<img class="mcdelement-cl" src="./fuwafuwari2_marqueeclock.png" alt="ふわふわ。り素材2" />
			<div class="mchelement-cl">70</div>
		</div>
	</div>
</div>

今回、解説するのは、濃いブルーで強調している部分です。

mceouter-clクラスのdivタグで、くくられている部分ですね。

完成品をご覧いただくとわかると思いますが、この部分が1フレームになります。

中には、mcdelement-clクラスの画像と、目盛になるmchelement-clクラスのテキストが入っています。

ローカルで使うので、画像のsrcは、相対パスにしてあります。

この場合、HTMLファイルを置くのと同じフォルダーに画像を置くと、表示されます。

完成品を見て、自分でつくれる方は、自由に構造を変更してもらって構いませんが、わからない方は、この通りに書いてください。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

A Netlore Chaseさん:ジョブズがiPodを水没させる逸話について

  • iPodを水没させる逸話

iPodを水没させる逸話

はてブでも上位に入っていたので、ご存知の方が多いと思いますが、紹介したいと思います。

【追記】ジョブズがiPodを水没させる逸話はウソである、フェイクだっていいじゃない

タイトルにもある通り、嘘だったんですね~。

ジョブズっぽい恰好いい逸話だったので、完全に信じていましたが。笑

テレビでも紹介されていましたし、ジョブズの話だと信じている人も多いんじゃないかと思います。

この話で良かったのは、日本人の話だったという点ですね。

何か、数年前に買ったジョブズ関係の本を思い出して、読み返したくなりました。


にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング
続きを読む