kzms2 - html,css,javascript » cording http://kzms2.com HTML、CSS、Javascript、Actionscriptなどページを作るのに必要なものならなんでも取り扱います。某ポータルのトップページをコーディング担当。 Mon, 31 May 2010 03:27:08 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 第2回コーディングコンテスト　入賞しました。 http://kzms2.com/2010/04/27/about_coding-contest-2nd/ http://kzms2.com/2010/04/27/about_coding-contest-2nd/#comments Mon, 26 Apr 2010 18:22:52 +0000 Zuma http://kzms2.com/?p=677 aside:last-of-type li{ position:absolute; top:0; left:0; width:100%; text-align:center; background:rgba(0,0,0,0.5); height:100%; -webkit-transition:opacity 3s ease-in-out; } body>aside:last-of-type li span{ position:absolute; top:0; left:50%; padding-top:10px; margin-left:-480px; text-align:center; width:960px; height:100%; -webkit-transition:opacity 3s ease-in-out; } li[role="zoomImg"]{ display:none; opacity:0; } li[role="zoomImg"]:target{ display:block; opacity:1; } 若干表示崩れを起こしていますが…ご愛嬌ということで。 アニメーションを付け忘れたのが無念…！ css3によるビジュアライズ 各ボタンなどのグラデなどにcss3によるグラデーションや角丸などを使用しています。 というかこれはむしろ当たり前な感じがするので特に触れる必要はないかと思います。 ちなみに地味に苦労したのはヘッダー上部の黒線にシャドウがかかった部分でした。 自分はcss3の「:before」を用いて実装してみました。 header:first-of-type:before{ content:""; display:block; background-color:#152427; height:6px; position:absolute; left:0; width:100%; -moz-box-shadow:0 1px 2px #666; -webkit-box-shadow:0 1px 2px #666; } という感じです。 まとめ・感想 組んでみた全体的な感想 idやclassを無駄に振らずにすんだ。 →これは自分が無理やり実装したからなのですが、命名しなくてよいというのはかなり時間短縮にはつながりました。 リッチな表現がcss3のみでかなり出来た 本来ならJavascriptを用いなければならない部分がcss3で対応が可能になった →ライトボックスなどが該当 今までグラデなどはスライスすればよかったものが、ピッカーなどを使って再現する必要があったため、逆に時間を浪費した というように、良いことばかりでは無く悪い点もいくつか見受けられました。 正直穴だらけのコーディングでお恥ずかしい限りですが、沢山勉強になりました。 また名のある審査員の方々に見ていただけて大変光栄でした！ その他のお話 当日の懇親会などで審査員の方何名かにお話をお伺いしたところ　マニアック　や　変　だの　キモかった　だの、非常に嬉しいお言葉をいただけました！ 致命的だったのがSafariで画像が表示されなかったことだったそうです。そりゃそうだ…！ あとはそもそも、css3とは別の部分での評価が多かったため　という感じでした。 理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。 ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。 他の応募者様もおつかれさまでした！！ ]]>

コーディングコンテンストについて

CSS Nite LP9 連動 第2回コーディングコンテスト
4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。

CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。

入賞した作品

応募したのは以下のHTMLになります。

他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。
ちなみに1枚にする前のファイルはこちらにまとめてあります。

詳細は続きから。

前提みたいなもの


ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら…
まったく持って終わらない雰囲気が…！

そしてまさに23時59分30秒くらいまで作業をしていて、ぎりぎり2秒前に応募できました…
ちなみに一番最後の応募だったらしいです（汗

そして提出後、Webkitで画像がうまいこと表示されないことが判明して優秀賞などは無理と判断！

という流れがありました。

提出したものの特長や注力した点

0リクエスト


index.html内からのリクエストを0にするために、cssを直書き・画像をbase64形式で埋め込みなどを行いました。
要するにindex.htmlだけを応募したわけです。

idとclassを多用しないコーディング

良いか悪いかは別として、実験的にidとclassをあまり用いずにコーディングしてみました。
css3のセレクタを多用して組んでみています。
<header></header>
<div id="contents"></div>
<footer></footer>

ぶっちゃけ、idとclassはもっと振ったほうがいいと思いました！

:targetを用いたライトボックス


右上部分にある画像をクリックするとオーバーレイしてライトボックスが出るんですが、そこはJavascriptを使わずに実装しています。
body>aside:last-of-type li{
position:absolute;
top:0;
left:0;
width:100%;
text-align:center;
background:rgba(0,0,0,0.5);
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
body>aside:last-of-type li span{
position:absolute;
top:0;
left:50%;
padding-top:10px;
margin-left:-480px;
text-align:center;
width:960px;
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
li[role="zoomImg"]{
display:none;
opacity:0;
}
li[role="zoomImg"]:target{
display:block;
opacity:1;
}
若干表示崩れを起こしていますが…ご愛嬌ということで。
アニメーションを付け忘れたのが無念…！

css3によるビジュアライズ

各ボタンなどのグラデなどにcss3によるグラデーションや角丸などを使用しています。
というかこれはむしろ当たり前な感じがするので特に触れる必要はないかと思います。

ちなみに地味に苦労したのはヘッダー上部の黒線にシャドウがかかった部分でした。
自分はcss3の「:before」を用いて実装してみました。
header:first-of-type:before{
content:"";
display:block;
background-color:#152427;
height:6px;
position:absolute;
left:0;
width:100%;
-moz-box-shadow:0 1px 2px #666;
-webkit-box-shadow:0 1px 2px #666;
}
という感じです。

まとめ・感想

組んでみた全体的な感想

  • idやclassを無駄に振らずにすんだ。
    →これは自分が無理やり実装したからなのですが、命名しなくてよいというのはかなり時間短縮にはつながりました。
  • リッチな表現がcss3のみでかなり出来た
  • 本来ならJavascriptを用いなければならない部分がcss3で対応が可能になった
    →ライトボックスなどが該当
  • 今までグラデなどはスライスすればよかったものが、ピッカーなどを使って再現する必要があったため、逆に時間を浪費した

というように、良いことばかりでは無く悪い点もいくつか見受けられました。

正直穴だらけのコーディングでお恥ずかしい限りですが、沢山勉強になりました。
また名のある審査員の方々に見ていただけて大変光栄でした！

その他のお話

当日の懇親会などで審査員の方何名かにお話をお伺いしたところ　マニアック　や　変　だの　キモかった　だの、非常に嬉しいお言葉をいただけました！

致命的だったのがSafariで画像が表示されなかったことだったそうです。そりゃそうだ…！
あとはそもそも、css3とは別の部分での評価が多かったため　という感じでした。

理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。
ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。

他の応募者様もおつかれさまでした！！

]]> http://kzms2.com/2010/04/27/about_coding-contest-2nd/feed/ 10 これは便利！エディタで保存と同時に3ブラウザを更新 http://kzms2.com/2010/02/08/editer_save_with_browser_reload/ http://kzms2.com/2010/02/08/editer_save_with_browser_reload/#comments Sun, 07 Feb 2010 17:31:08 +0000 Zuma http://kzms2.com/?p=565

デモ動画と概要

上記動画のデモは、EmEditorを用いた場合の使用例となります。

エディタを保存していちいちブラウザでリロードするのは大変だし面倒です。
色々調べていたら保存したタイミングで、自動的に更新出来る方法を見つけたので調整して作成してみました。
デュアルディスプレイの人とかはかなり恩恵を受けるんじゃないでしょうか。

詳細は続きから

ダウンロード

下記から自分が使っているエディター用のexeをダウンロードしてください。ちなみにWindowsのみです。

該当ブラウザ

該当ブラウザは以下の4つのものとなります。（Operaは何故かうまく動かない…）

  • Firefox
  • Chrome
  • IE
  • IETester

使い方


  1. ダウンロードしたcoding_save_and_reload-**.exe（**はエディタ略名）を起動します。タスクトレイに「K」というロゴが出ていれば起動出来ています。
  2. エディターとブラウザを起動している状態で、Ctrl+sを押すことで保存と同時に該当ブラウザがリロードされます。

手順を書こうと思ったら手順2で終わってしまいました…
※自動保存を一時的に無効にしたい場合は、「Suspend Hotkeys」を有効にしてください。
Suspend Hotkeys

作成ソフト

使用したソフトはAutoHotKeyというフリーソフトです。下記参照サイトを見るとどんなソフトかがわかるかと思います。

ご意見・ご要望など

うまく動かない！もっとこうしたい！
なんてことがあったら、出来たら対応するかもなので何かTwitterなりコメントなりでご意見をいただけたらと思います。

]]> http://kzms2.com/2010/02/08/editer_save_with_browser_reload/feed/ 8