コーディングに慣れていない、新しい試みを行うとき、思ったよりも作業時間が掛かります。そんなコーディング方法を説明しているサイト(?)で面白いモノを見つけました。
http://livedoor.blogimg.jp/newsteams/imgs/5/e/5e05c958.gif
見ると分かりますが、情報を組み込んでからレイアウトを決め、それにあわせてコーディングを行っていくということをGIFアニメで紹介しています。
面白ネタ(?)コーディング方法
2009 年 8 月 23 日
CSSハック
2009 年 8 月 21 日
先日FIrefoxがバージョンアップし、それに連動してレイアウトが崩れるという問い合わせがありました。調べてみると、どうやらFIrefox3.5は、それ以前のバージョンとCSSの認識が違う模様。調整をしてみたら、今度は他のモダンブラウザとコンフリクト。そのような流れで、最新のCSSハックまとめを探して見ました。
IE8、FIrefox各バージョンなど新しいハックが紹介されています。また、Google ChromeはSafari準拠のようで、単独のハックは今のところ無いみたいです。
XHTML&CSS第２回コーディング勉強会参加
2009 年 5 月 23 日
THE HAM MEDIAさん主催のXHTML&CSS第２回コーディング勉強会に参加してきました。
コーディングについて興味を持たれている方が多く、20名以上参加されていたようでその人気ぶりに少し驚きました。
内容は、あらかじめ提示されていた課題に対して実際にコーディングを行うという実践的な形。私は（我流ですが）ある程度構築方法が分かっていたので、HAMさんの講義そっちのけで作業していました（笑）。申し訳なかったな～。何とか見た目だけでも完成できればと思い挑戦してみましたが、無理でした。何でもない背景画像のパス指定が（その時は）分からず、悩んでたり。帰ってきてから一人見直し反省会開催。
コーディング後はディスカッション。初心者からPGまでスキル幅の広い中で色々疑問に持たれているところが人により違い、おもしろかったです。
CSSコーディングは実際に組み立てをしてみないと見えてこない面や、組み立てする際にどうすれば良いか分からなかったりするので、こういう機会はすごくためになると思います。
コーディング勉強会参加しました。
2009 年 2 月 8 日
私が参加している北海道Webコンソーシアムのつながりで、コーディングスキルの向上を目的とした勉強会に参加してきました。そこで学んできたことのまとめです。
現在のコーディング手法
- 文字サイズを可変とし、文字サイズを大きくしても文字が読めるように構築します。
まとめられる命令はまとめておくとすっきりして見やすくなります。 - bodyにIDとCLASSを指定することで個別の場所を特定してCSS指定することができます。
多人数でコーディングする場合の注意点
- セレクタの記述を統一する→セレクタはその対象まで細かく記述する優先順位が上がります。
あらかじめ記述ルールを決めておくと、意図しない動作をしても対応しやすいです。
ブラウザによる差異を無くす方法
- リセットCSSを作る→各ブラウザ間の違いを吸収するためのリセットCSSを自作することで、基本的な崩れの原因を減らすことができます。
- 外枠を先に完成させ、ブラウザチェックする→細かい部分は作り込まず、段組程度までできた段階で崩れがないか確認することでその対応に時間を割かなくて済みます。
positonを上手に使う
- positonはあまり使っていない方が多いようですが、目的により構造的に使いやすいケースがあります。
relativeとabsoluteの違いを覚えておけばそれほど困ることはないとのことです。
CSSロールオーバーのメリット
- JavaScriptのロールーオーバーは使いやすいプラグインが出ていますが、ちらつきなどの制約があります。
1枚背景とpositonを使うことでちらつきを無くすことができます。
他TIPS
- DreamWeaverのCSSコードヒントはXMLでできていて、特定の場所に格納されています。
必要であれば自作したコードヒントを追加で記述しておくと作業効率がアップします。
個人的な感想としては、大変有意義な時間を過ごすことができました。
自分で研鑽してきた技術は概ね間違っていなかったことも再確認できました。ただ、まだ作業効率化する余地が残っていましたので、あらためてもっと良い方法を編み出せるよう考えてみたいものです。