手打ちコーディングのすすめ【vol.1】
今日は、手打ちコーディングについて語ってみたいとおもいます。
手打ちコーディングとは、簡単に言えばツールの機能に(ほとんど)たよらずに、HTMLを組むという事です。
この手打ちコーディングには、色々とメリットがあります。
ちなみに、ツール(ソフト)に頼ったコーディングなどには色々と問題が出てきたりします。
1.特殊なコードを書き込まれてしまい、現在のweb標準から離れてしまう。
2.特殊コードのせいで他ツールで編集することが厄介。
3.絶対配置やHTMLに直書きのCSSまたは定義になってしまい、後々の編集が面倒。
4.そもそもとして、ツールに頼り切ってしまい、根本的にHTML、CSSを覚えられない。
今思いつくデメリットはこんな感じです。
自分は、Dreamweaver(ドリームウィーバー)くらいしか使わないのでデメリットを感じることが少ないかもしれません。
ちなみに、4.で書かれているデメリットは非常に多いと思います。
Dreamweaver(以下、DW)を使用している自分も結構そういう事がありました。
使用するツールが便利に高性能になればなるほど、ツールに頼ってしまい結局ツールがない状態では「できません」という状態になってしまう。
ちなみに、自分は専門学校でHTML、CSS、FLASHを習いました。
そのときに教えてくれた我が恩師は、僕らがツールばかりに頼ってできなくなってしまわないようにこんな授業をしてくれました。
まず第一に「PCの電源はつけない」
第二に「鉛筆と紙を用意」
第三に「タグとCSSプロパティのスペルと意味をひたすら書く!」
こんな授業を一週間程行ってくれました。当時の自分としてはとても不満が残る授業でしたが、今になって思えばあれがなければ、HTMLタグが略称であること、そして一つ一つにちゃんとして意味があること。そんな事理解できずに、していたと思います。
なので、本気でHTML、CSSを覚えたい方はデジタルから離れアナログでタグやCSSプロパティを書く事をオススメしたいと思います!
なんか最後の方は今日の記事のタイトルと趣旨が違うような期がするけど・・・きにしないぃ!
手打ちコーディングとは、簡単に言えばツールの機能に(ほとんど)たよらずに、HTMLを組むという事です。
この手打ちコーディングには、色々とメリットがあります。
ちなみに、ツール(ソフト)に頼ったコーディングなどには色々と問題が出てきたりします。
1.特殊なコードを書き込まれてしまい、現在のweb標準から離れてしまう。
2.特殊コードのせいで他ツールで編集することが厄介。
3.絶対配置やHTMLに直書きのCSSまたは定義になってしまい、後々の編集が面倒。
4.そもそもとして、ツールに頼り切ってしまい、根本的にHTML、CSSを覚えられない。
今思いつくデメリットはこんな感じです。
自分は、Dreamweaver(ドリームウィーバー)くらいしか使わないのでデメリットを感じることが少ないかもしれません。
ちなみに、4.で書かれているデメリットは非常に多いと思います。
Dreamweaver(以下、DW)を使用している自分も結構そういう事がありました。
使用するツールが便利に高性能になればなるほど、ツールに頼ってしまい結局ツールがない状態では「できません」という状態になってしまう。
ちなみに、自分は専門学校でHTML、CSS、FLASHを習いました。
そのときに教えてくれた我が恩師は、僕らがツールばかりに頼ってできなくなってしまわないようにこんな授業をしてくれました。
まず第一に「PCの電源はつけない」
第二に「鉛筆と紙を用意」
第三に「タグとCSSプロパティのスペルと意味をひたすら書く!」
こんな授業を一週間程行ってくれました。当時の自分としてはとても不満が残る授業でしたが、今になって思えばあれがなければ、HTMLタグが略称であること、そして一つ一つにちゃんとして意味があること。そんな事理解できずに、していたと思います。
なので、本気でHTML、CSSを覚えたい方はデジタルから離れアナログでタグやCSSプロパティを書く事をオススメしたいと思います!
なんか最後の方は今日の記事のタイトルと趣旨が違うような期がするけど・・・きにしないぃ!
class切り替え
とある仕事で、jQueryを使用してHTMLないにあるタグのclassを切り替えるという事をしました。
基本的に、jQueryは出来上がったものを使用してる事が殆どで自分で組んでみた事は、無いです。
というわけで、ここで忘れないために、備忘録的に書いておこうと思います。
$(function(){
$("li#map1").hover(
function(){
$("#target1").addClass("mapnum1");
},
function(){
$("#target1").removeClass("mapnum1");
}
);
});
「id="map1"」にマウスが乗った時に「id="target"」がついたタグに「mapnum1」というclassをつけるというものです。
「addClass」要素のクラス属性に、指定したCSSクラスを追加。
「removeClass」要素のクラスから、指定したCSS クラスを削除。
ちなみにどちらも複数可らしいので、応用して何か使えるんじゃないかなーと思ったりもしますが、まだまだ初心者なので応用は利かせられないでしょう・・・
しかし、触れてみるとなかなか楽しいjQueryでありました。
覚えておきたい豆知識としては、「alert("文字列");」で文字列の部分に設定した文言がそこの処理に達するとブラウザ上で表示されるという事。
いうなれば、アクションスクリプトの「trace(インスタンス名or"文字列");」みたいなもんかな。
基本的に、jQueryは出来上がったものを使用してる事が殆どで自分で組んでみた事は、無いです。
というわけで、ここで忘れないために、備忘録的に書いておこうと思います。
$(function(){
$("li#map1").hover(
function(){
$("#target1").addClass("mapnum1");
},
function(){
$("#target1").removeClass("mapnum1");
}
);
});
「id="map1"」にマウスが乗った時に「id="target"」がついたタグに「mapnum1」というclassをつけるというものです。
「addClass」要素のクラス属性に、指定したCSSクラスを追加。
「removeClass」要素のクラスから、指定したCSS クラスを削除。
ちなみにどちらも複数可らしいので、応用して何か使えるんじゃないかなーと思ったりもしますが、まだまだ初心者なので応用は利かせられないでしょう・・・
しかし、触れてみるとなかなか楽しいjQueryでありました。
覚えておきたい豆知識としては、「alert("文字列");」で文字列の部分に設定した文言がそこの処理に達するとブラウザ上で表示されるという事。
いうなれば、アクションスクリプトの「trace(インスタンス名or"文字列");」みたいなもんかな。