デモ動画と概要

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

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

詳細は続きから

ダウンロード

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

• dreamweaver対応版
• 秀丸対応版（動作未確認）
• TeraPad対応版
• EmEditor対応版

該当ブラウザ

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

• Firefox
• Chrome
• IE
• IETester

使い方

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

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

作成ソフト

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

• AutoHotKey
• AutoHotkeyを流行らせるページ

ご意見・ご要望など

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

早速ですが作ったものの動画

というわけでこんな感じの物を作ってみました。
実際のサンプルはこちら

概要と対応ブラウザ

概要みたいなもの

タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。
このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。
JavascriptOFFでも同じ挙動になりますよ。

動作環境

Chrome4とSafari4での動作確認はしてあります。
Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。
Firefox3.6↑だとグラデーションも有効になるように記述してあります。

詳細と実物は続きから。

ソースの説明

HTML(HTML5）

一応HTML5で書いてありますが、お好きにDivなどに変えても動きますのでそこら辺は厳密には書いていません。
使いたい状況でかき分けてください。
<section id="kzms2tab">
<nav><ul>
<li><a href="#kzms2tab1">タブ1</a></li>
<li><a href="#kzms2tab2">タブ2</a></li>
<li><a href="#kzms2tab3">タブ3</a></li>
</ul></nav>
<div class="kzms2bd">
<article id="kzms2tab1">
<p>タブ1の内容ですよ。</p>
</article>
<article id="kzms2tab2">
<p>タブ2の内容ですよ。</p>
</article>
<article id="kzms2tab3">
<p>タブ3の内容ですよ。</p>
</article>
</div>
</section>

CSS(CSS3)

CSSはかなりの量があるので分けて書きます。
/* sample source
-------------------*/
#kzms2tab ul:first-child{
margin-bottom:-1px;
/* タブが増えてもフレキシブルな横幅に調整 */
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
/* for firefox */
width:100%;
}
#kzms2tab ul:first-of-type li{
text-align:center;
/* タブが増えてもフレキシブルな横幅に調整 */
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#kzms2tab ul:first-of-type li a{
border:1px solid;
display:block;
padding:5px;
text-decoration:none;
/* タブ部分角丸 */
-moz-border-radius:5px 5px 0 0;
/* Safari対応のために分けて記載 */
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}
#kzms2tab ul:first-of-type li a:hover{
/* hover時に光ってる様に見せる為に透過 */
opacity:0.8;
}
まずはタブの基本設定。
上部分のタブの部分の見た目の調整を行っています。

一つ一つのタブの色などは次のソースで指定してます。
/* タブ1つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(1) a{
background-color:#1a62db;
border-color:#1f54bc;
color:#fff;
/* webkit用グラデーション */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
from(#1a62db),
color-stop(0.5,#3690f0),
color-stop(0.5,#55a4ee),
to(#70b6f2)
);
/* mozilla用グラデーション */
background-image:-moz-linear-gradient(
top,
#1a62db,
#3690f0 50%,
#55a4ee 50%,
#70b6f2
);
/* テキストシャドウ */
text-shadow:-1px -1px 0px #1f54bc;
}
/* タブ2つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(2) a{
background-color:#ff7d00;
border-color:#dc6b00;
color:#fff;
/* webkit用グラデーション */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
from(#ff7d00),
color-stop(0.5,#ff7c00),
color-stop(0.5,#ffa73d),
to(#ffa03c)
);
/* mozilla用グラデーション */
background-image:-moz-linear-gradient(
top,
#ff7d00,
#ff7c00 50%,
#ffa73d 50%,
#ffa03c
);
/* テキストシャドウ */
text-shadow:-1px -1px 0px #dc6b00;
}
/* タブ3つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(3) a{
background-color:#7dbe0a;
border-color:#5b9400;
color:#fff;
/* webkit用グラデーション */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
from(#7dbe0a),
color-stop(0.5,#80c218),
color-stop(0.5,#a1d54f),
to(#a2d93f)
);
/* mozilla用グラデーション */
background-image:-moz-linear-gradient(
top,
#7dbe0a,
#80c218 50%,
#a1d54f 50%,
#a2d93f
);
/* テキストシャドウ */
text-shadow:-1px -1px 0px #5b9400;
}
ここがかなり長いですね・・・CSS3のグラデーション部分でかなり長いコードとなっています。
この詳細については別の機会にまた説明したいと思います。

.kzms2bd{
border:1px solid #ddd;
/* タブ部分角丸 */
-moz-border-radius:0 0 5px 5px;
/* Safari対応のために分けて記載 */
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
/* タブ全体のボックスシャドウ */
-moz-box-shadow:3px 3px 7px #999;
-webkit-box-shadow:3px 3px 7px #999;
}
.kzms2bd article{
display:none;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
border:1px solid;
padding:10px;
margin:-1px;
height:200px;
/* タブ部分角丸 */
-moz-border-radius:0 0 5px 5px;
/* Safari対応のために分けて記載 */
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
ここはタブ内容部分の外枠の見た目の調整。
影をつけたり、箱を作っています。

/* :targetの対象のarticle */
.kzms2bd article:target{
display:block;
}
/* :targetの対象でないarticle */
.kzms2bd article:not(:target){
display:none;
}
ここはセレクタについて(2/4)その2 – css3を触ってみて思った4個の利点などでも説明している、CSS3のセレクタを使って、ターゲットになっている部分となっていない部分をだし分けています。

/* :targetの対象のarticle */
.kzms2bd article:target{
-webkit-animation-duration:1s;
-webkit-transform-origin:50% 0;
-webkit-animation-timing-function:linear;
-webkit-animation-name:kzms2alpha;
opacity:1;
}
/* アニメーション用 */
@-webkit-keyframes kzms2alpha{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
ここでタブの中身がフェードインするアニメーションを追加しています。
Webkit系でないと期待した表示になりません。

/* タブ内容1つ目の色設定 */
.kzms2bd article:nth-of-type(1){
background-color:#edf7ff;
border-color:#1f54bc;
}
/* タブ内容2つ目の色設定 */
.kzms2bd article:nth-of-type(2){
background-color:#ffeeda;
border-color:#dc6b00;
}
/* タブ内容3つ目の色設定 */
.kzms2bd article:nth-of-type(3){
background-color:#edffd0;
border-color:#5b9400;
}
そして最後にタブの中身の背景色と、枠線色の設定をしています。

やってみた感想とかまとめ

1. CSS3でもMozillaとWebkitで解釈の仕方が異なる部分がいくつかあった。
   →display:box;の部分にwidth:100%;と指定しないとMozillaだと期待しない表示になる　等
2. セレクタだけで場合分けをするには限界がある
   →割りきってやっていたことですが、細かな状態分けはやはりJavascriptに頼らないと無理だと言うことがわかりました。（今カレントのタブを変化させられない）
3. 楽チン・綺麗・軽い
   →地味な感想ですが、やっぱりCSS３は素敵でした

動かせるブラウザIEなどが限られている、とかはもう若干お決まりになってきたので、そこまで触れないことにします。

今回はこの辺でおしまいとさせていただきたいと思います。

css3を触ってみて思った利点の2個目

この記事は、前回の記事（セレクタについて(2/4)その1 – css3を触ってみて思った4個の利点）の続きです。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

前回は途中で挫けたので、その続きのエントリーとなります。
今回は「:focus」の様に「:」を用いるセレクタである疑似クラスについての説明がメインです。
かなりの量が追加されているので、逆にややこしいかもしれません。
※表示確認には、Firefox3.5、Chrome4を使用しています。

詳細は続きから。ちなみに3ページあります。

擬似クラス・擬似要素とは

HTMLには記述されていないけれども、ブラウザとしてはその認識がある状態のセレクタのことを言います。
例で言うと、未訪問リンクと、訪問済みリンクのようなもので、ブラウザとしてはその状態を認識できるものの事を指します。
前回の記事で言及した擬似セレクタは以下の4つです。

1. :focus(css2)
   フォーカスが合っている要素を指定
2. :enabled
   要素が有効な状態のセレクタ
3. :disabled
   要素が無効な状態のセレクタ
4. :checked
   要素が選択されている状態のセレクタ

また、擬似クラスと擬似要素という分類分けがされていますが、その差は以下のとおりです。

• 擬似クラス
  →E要素の状態に対して有効なセレクタの事を指します
• 擬似要素
  →E要素内の特定の位置や場所に対して有効なセレクタの事を指します

記事に出てくる「E」「F」「n」の説明

E、Fについて

要素のことを指す様に使用します。要素というのはtrやらh１やらaやら、一般的にはタグとも呼ばれているものでもあります。

n指定について

この後、「n」という指定が出てきますが、これはn個目を対象にすると思ってください。

• 5だったら5個目
• oddだったら1個目、3個目、5個目…
• evenだったら2個目、4個目、6個目…
• 5nだったら5個目、10個目、15個目…
• 5nだったら5個目、10個目、15個目…
• 2n-1だったら1個目、3個目、5個目…

と言った感じの指定が出来ます。
実例を交えて説明するので、ここは後でまた読み返してみてください。

では、CSS3で追加される予定の擬似セレクタの説明に入ります。

n番目がE要素なら指定する「E:nth-child(n)」系

この系統のセレクタは、仮にE:nth-child(2)とした場合、親要素から見て、2番目にE要素が来ていないと適用されません。
他の要素もn番目の対象になるのですが、その要素が指定した型（E）でないと適用されません。
※要するに子要素のn番目がE要素だった場合に適用されます。

n番目の要素がEだった場合に指定「E:nth-child(n)」

他の要素も含めて、子要素のn番目がE要素だった場合に指定することが出来ます。
下の例だとtrの子要素であるtdのn番目の物を指定しています。

サンプルはこちらtd:nth-child(6n){
color:#00f;
}
td:nth-child(7n){
color:#f00;
}

後ろからn番目の要素がEだった場合に指定「E:nth-last-child(n)」

上の「E:nth-child(n)」と似た指定が出来るものです。
他の要素も含めて、後ろからn番目のE要素だった場合に指定できます。

サンプルはこちらtd:nth-last-child(1){
background-color:#ccc;
}

子要素が1つだけで、それがE要素だった場合に指定「E:only-child」

他の要素も含めて、子要素が1つだけで、それがE要素だった場合に指定できます。

サンプルはこちらtd:only-child{
background-color:#000;
color:#fff;
}

表題だけだとよくわからないかもですが

こんな感じにページ内の要素がグリングリン回り始めます。

詳細は続きから

対応ブラウザ

Chrome3以上か、Safari4以上

使用方法

1. ページグルグル【kzms2】←をお気に入り登録（ブックマーク）します。
2. グルグルさせたいページでクリックします

以上です。
動きを見るだけならページグルグル【kzms2】をクリックするだけでこのページがグリングリンし始めます。

仕組みの説明

また今度アニメーションの要素については説明しますが、概要っぽく説明しておきます。

css3について

.kzms2{
/*動き方の指定*/
-webkit-animation-timing-function:cubic-bezier;
/*アニメーションの起点を決める*/
-webkit-transform-origin:50% 50%;
/*アニメーションの回数を設定*/
-webkit-animation-iteration-count:1;
/*kzms2rotateというアニメーションの動作をさせる*/
-webkit-animation-name:kzms2rotate;
}
/*kzms2rotateアニメーションの設定
%ごとに動きを決める*/
@-webkit-keyframes kzms2rotate{
0%{
}
12.5%{
/*rotateは回転、scaleは拡大・縮小*/
-webkit-transform:rotate(45deg) scale(0.5);
}
25%{
-webkit-transform:rotate(90deg) scale(1);
}
37.5%{
-webkit-transform:rotate(135deg) scale(0.5);
}
50%{
-webkit-transform:rotate(180deg) scale(1);
}
62.5%{
-webkit-transform:rotate(225deg) scale(0.5);
}
75%{
-webkit-transform:rotate(270deg) scale(1);
}
87.5%{
-webkit-transform:rotate(315deg) scale(0.5);
}
100%{
-webkit-transform:rotate(360deg) scale(1);
}
}

Javascriptについて

Javascriptは言うほど得意ではないのであまり載せたくないのですが。。。
ブックマークレットをクリックすると以下のJavascriptを読み込みます。
流れとしては

1. cssファイルをヘッダーに書き出し
2. body内の全要素を特定
3. body内の全要素それぞれにclass=”kzms2″を追加
4. ランダムな数値でアニメーションの感覚・時間を設定

と言った様な処理をしています。

var kzms2 = {
init:function(){
kzms2.getCSS('http://kzms2.com/lab/css3/bml/dance.css');
kzms2.dance();
},
getCSS:function(url){
var link = document.createElement('link');
with(link){
href = url;
type = 'text/css';
rel = 'stylesheet';
}
var head = document.getElementsByTagName('head');
head.item(0).appendChild(link);
},
dance:function(){
var i=0;
var el = document.getElementsByTagName('body')[0].getElementsByTagName('*');
for(i;i var rand = 500*parseInt(Math.random()*50);
var rand2 = 1500*parseInt(Math.random()*50);
el[i].className = el[i].className+' kzms2';
el[i].style.webkitAnimationDuration = rand+'ms';
el[i].style.webkitAnimationDelay = rand2+'ms';
}
}
}
kzms2.init();

またまたネタっぽいですね＞＜
css3の利点に関しては時間を多く取れる時に書きたいと思います！

このブログをリニューアルして思ったこと

やっぱりCSS3は便利でした。
自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

といった4点が利点かなー　なんて思いました。

本日はレイアウトについて便利だったことを書いてみます。
詳細は続きで。

まず始めに

css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。
css3からは違う概念でレイアウトを組むことが可能になっています。
表示確認には、Firefox3.5、Chrome4を使用しています。

※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっているので、そのような記述が必要となります。（IEは今のところ対応していないので書かないでいいかもですが、念のため…気になる方は抜いちゃってください）
しばらくは4つ書いておけば無難だと思います。

多分下の4つさえ抑えておけばcss3でのレイアウトは困らないかと思います。

1. display:box;
2. box-flex:1;
3. box-ordinal-group:1;
4. box-sizing:border-box;

詳細は下で説明します。

子要素を横に並べる「display:box;」

子要素を横並びに表示させます。対象子要素の横幅は指定しない限りはコンテンツの中身に依存します。

サンプルはこちらdisplay:box;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
Mozilla系だと子要素に指定した上下のpaddingがうまいこと表示されていません。
原因がわかり次第解決策を載せたいと思います。

要素をフレキシブルな横幅にする「box-flex:1;」

親要素がdisplay:box;のときに設定した割合で横幅をフレキシブルに変化させる。
兄弟要素にbox-flex:1;とbox-flex:2;があった場合1:2の割合で横幅を使います（33%と66%という感じ）

サンプルはこちらbox-flex:2;
-webkit-box-flex:2;
-moz-box-flex:2;
-ms-box-flex:2;

要素の表示順を決める「box-ordinal-group:1;」

親要素がdisplay:box;のときに子要素の表示させる順番を決める。
z-indexのように優先順位を設定することが可能で、数値の値が低いものほど左側に表示される。

サンプルはこちらbox-ordinal-group:2;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-ms-box-ordinal-group:2;

width+padding+borderをwidthとしてしまう「box-sizing:border-box;」

width+padding+borderをwidthとして計算する。
たとえばcss2だとwidth:100%;とpadding:20px;とした場合、40pxはみ出てしまいますが、この指定をすることによって、paddingを20px保持しながらはみ出すことなく表示することが可能になります。

サンプルはこちらbox-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;

まとめ

1. css3をうまく使うことで、カラム落ちも起きにくくなり今までよりもわかりやすくレイアウトが出来ます。
2. ただ、IEが対応しておらず、IE9でも今のところ対応が絶望的なため、そこがネック
3. でも楽しいし、判りやすいし使ってみたほうが良いよ！

と若干まとめかどうかあやしいですが、こんな感じになります。
他の3項目についてはまたの機会に！

いきなりですがサンプル

↓

ソースコードは続きから。

ソースコード

<textarea id="inputTxt" style="height:8em;width:100%;"></textarea>
<div id="targetArea" style="border:1px solid #999;">ここに上で入力した内容がリアルタイムで入ります。</div>
<script type="text/javascript" src="http://kzms2.com/jQuery/jquery-latest.min.js"></script>
<script type="text/javascript">//< ![CDATA[
//お決まりの文
jQuery(document).ready(function($){
//idが「#inputTxt」のところで、キーボードを押し終わった時に
$('#inputTxt').keyup(function(){
//「#targetArea」に、this（「#inputTxt」）のvalueを入れる
$('#targetArea').text($(this).val());
});
})
//]]></script>

いくつか注意とか説明

なんとなくな説明

1. jQueryを用いて実装しています。
2. タグは無効です。有効にするには「$(‘#targetArea’).text($(this).val());」を「$(‘#targetArea’).html($(this).val());」にしてください。
   ただし、ページ崩れたりするのでお勧めは出来ないかもです。
3. キーボードを用いない入力のリアルタイムプレビューは今回対応していません。

たいしたことはまったくしていませんが、こんな感じでjQueryを用いればリアルタイムのプレビューを簡単に作れちゃったりします。

応用編はまたの機会にっ

何を書こうか…

と考えて色々と書こうとしたらどんどん書きたいことが増えていってかけなくなると言う繰り返し…！
お堅いことをごりっと書こうとするからこうなるんすね
草案が4,5個も溜まっているのにぜんぜん書ききっていないという現実…！

まずはいろいろ書いてみよう！

とりあえず最近はまってるもの

ざっと並べてみれば何か見えるかもしれない
というわけでざっくり並べてみます

1. iPhone
2. Javascript
3. ツール作り（HTML+CSS+JS）
4. PSP（モンハン）

とかかなあ…気になることはもっといっぱいあるけども

1. iPhone

アプリケーション作ってみたいけどデザイナーが手を出すとまずそうな雰囲気がぷんぷんします
自分が出来ること…といったらサイトのiPhone対応やらiPhone向けウェブサービスですかね
このBlogをまずはiPhone対応してみますかね
その手順をできれば載せれるようにしてみまっす！

2・3. HTML+CSS+JS

2と3ってほぼ一緒のような…
とにかくjQuery使ってツール作ったりとかが楽しいです
何か公開できるやつでも作ろうかしら

4. PSP（モンハン）

これは…！
趣味以外の何物でもないっ
とりあえず下級集会所クリアしたらトレジャーでもするかなぁ
やりこみすぎてきてしまった気がする

少なくとも1～3は書く内容としてはありそうだな～

なんとなく思ったけど

自分がHTML・CSSコーディングする際にバグとか困ったことを今までの経験で結構直せるのだけども
それを書き連ねるだけでも結構それなりに誰かの為になりそうな？

まあ結構そういう手のサイトありそうですが備忘録も兼ねてやってみやすか

という感じで

なんとなく書く内容はこんな感じで
仕事が山を迎えているというのにこんな時間に・・・！

ということで明日以降の自分にタッチしてみる

就職して2年間

僕は今の会社に就いて2年間、（X)HTMLとCSSに関してはそれなりに力を入れてきました。
CSSの詳しい先輩に時間をとってもらったり、1pxのずれの指摘をしてくださる先輩がいたり、CSSで悩んだら相談に乗ってくれる同期がいたりで成長することができました。
たいていのバグも対処でき、ページを組むのも早くなりました。でもそれだけでした。

何か物足りない日々

コーディングは楽しい。でも動的で自分が思うようなページ作りはエンジニアさんにお願いしなければ作ることができない。
JavascriptやActionscriptの様な言語を使いこなせる同期がとてもうらやましかったです。
とは思いつつも、参考書を見て勉強するだけで、ただただコーディングをしている日々が続きました。

日常を変える事件

ですがある日その日常を変えるBlogを見てしまったのです。
それはamachangさんのが綴る、IT戦記の マークアップエンジニアはどこへ向かうべきかというエントリーです。
まさに自分に向けられたメッセージの様に思いました。
中に書いてあることは自分の様なマークアッパーに対しての手厳しい内容でしたが、心打たれてしまいました。

僕が JS しか出来なかった時のように、まだ CSS しか出来ない人には早く他の何かを見つけて欲しいです。
その先の未来はきっと明るいと思います。

自分が今Javascriptを触って学んでいるのはこのエントリーのおかげです。
ほんの駆け出しですがJavascriptを始めたときの気持ちを忘れず精進していきたいです。

有難うございます

amachangさんはもちろんのこと、相談に乗ってくださる先輩、同期の友達にも感謝をしたいと思います(o*＿ ＿)o