狐のマークのWebブラウザ"Firefox"は様々な拡張機能"アドオン"を追加することができます。Webブラウジングに役立つものから、Web制作に役立つものまで・・よりどりみどりです。

私のお気に入りのアドオンは、Pearl Crescent Page Saverです。
ブラウザに表示中のページをカシャっと撮影してくれます。保存時にpngかjpgか選べます。

javascriptのライブラリは色々ありますが、中でもjQueryを採用することが多いです。実装が簡単だったり、Web上にドキュメントが豊富（だと感じる）。All Aboutのこちら記事では「魔法」という言葉で表現されている。プログラムが組めないデザイナーにとって魔法の様な強い見方、それがjQueryなんですよ、という意味を込めてだろう。

魔法のように感じるかどうかはさておき、私のお気に入りのjQueryプラグインをご紹介。

jQuery idTabs
いわゆる「タブインターフェイス」ってやつです。シンプルで軽快に動く、扱いやすいプラグインです。

このブログでは主に日常の出来事や、私が実際に体験したことを話題として扱ってきましたが、今月から少し路線変更してWebにまつわることを書いてみようと思います。
あくまでもメモ的な役割ですので、もしかしたら確かでない情報が混ざるかもしれませんが、とりあえず気楽に読んでいただけたらなと思います。

Duplicate Characters Bug
複数のfloatした要素の間にコメントを記述する場合、ちょっと注意が必要。IE6で発生するバグです。解決策として、コメントを削除してしまうという手がありますが、本末転倒。

解決法は色々とあるようです。

• floatした要素に「margin-right:-3px;」指定
• コメントを条件コメントに変更
• コメントを要素の内側に入れちゃう

結構有名なバグですが、発生条件・解決法もこれに限らないみたいです。

前回のあらすじ

コーディングハンズオン勉強会の抽選に応募して、なんやかんやで参加権獲得。

北の国からコーディング　冬

運良く参加が決まった勉強会、当日は猛吹雪だったわけで。やっとのことで会場の入り口にたどり着き、ふと顔を上げると、よく見知った女性が背筋をピシィッ！と伸ばして立っていました。これほど世界が狭いと思ったことはありません。結局、私を除いた参加者4名のうち、知っている方が2名、初めてお会いする方が2名という状況でした。講師の大杉さんには初めてお会いしましたが、噂どおりの凄い方でした。風貌は見事で、第一印象は「武士」だなと思いました。スペシャルゲストとして大藤さん、スペシャルサポーターにはハムさんという強力な布陣。向かうところ敵なしの方々です。ちょっと緊張しました。

少しですが、今回のコーディングハンズオン勉強会で学んだことを整理してみます。

先読みのスライス

当日は実践形式のハンズオン！ということで、FireworksとDreamweaverを使い、デザインデータのスライスから始めました。一枚のページデザインをパーツに切り分ける作業ですが、この時点からコーディングはスタートしているといっても過言ではありません。これから組むことになるHTMLとCSSを最適化するために、頭の中で完成形を仮想し、スライスを行います。HTMLの構成、CSSのプロパティや値を、頭の中で先に思い浮かべておきます。この先読みは、次のポイントにつながります。

手戻りを無くす

先読みを意識したスライスが上手く行えていれば、続く工程が格段に楽になります。「あれを使おう、いや、やっぱりあれにしよう、うわ、なんか相性悪いから前のに戻そう」なんて事態、防ぎたいですよね。ボタンのロールオーバーにしても、背景の繰り返しにしても、ボックスの分け方にしても、共通して言えます。勉強会では手戻りを無くすテクニックとして、Dreamweaverのコードヒントカスタマイズや、繰り返し使えそうなCSSのパーツ化、意外に融通の利くpositionレイアウトなどが取り上げられました。こういうところで質もスピードも差が出てくると、つくづく思いました。

おわりに

あと私が個人的に知りたかったのは、「コーディングの途中経過」でした。コーディングの結果は、HTMLやCSSとして形に表れますが、制作の手順や過程は知ることはできません。なので、作業途中少しでも疑問を感じたら質問をし、あわよくば質問した内容以上のテクニックを聞き出そうと必死になってました（笑）。優しく丁寧に教えてくれた大杉さん、ハムさん、本当にありがとうございました。大藤さんの温かくて鋭い視線も、良い緊張感を与えてくれました。

なんかコーディングも皆でわいわい話しながらすると楽しいですね。

一週間前に開催された、コーディングハンズオン勉強会。今更で恐縮ですが、記事に残したいと思います。

ウェブサイト制作において大切な行程の一つに「コーディング」という作業があります。
皆さんがインターネットでよく見るウェブサイトは、英語や記号で書かれたコードに日本語を組み合わせることで作られています。コードを書くことで、文章を表現したり、クリックできるようにしたり、表を作ったり、お問い合わせフォームを作ったりすることができます。

コーディングには決められたルールがあり、そのルールに基づいて書くと様々なメリットを享受することができます。例えば、インターネットに公開されたときに、YahooやGoogleといった検索エンジンに読み取ってもらいやすくなったり、ウェブサイトの構造とデザインの分離、作業の効率化、データ容量の節約・・などなど、至れり尽くせりです。ところが、この「ルールに従って正しく書く」というのが難しい。コーディングは例えるならスポーツに近いと思う。何日も、何ヶ月も、何年も鍛錬を積み重ね、たゆまぬ努力によって実るものです。

そんなコーディングのハンズオン（実践形式）勉強会が開催されました。主催は、札幌のコーディング専門会社、牧野工房さん。その道のプロフェッショナルです。定員は五名で、応募多数の場合は「抽選」というシステムでした。開催が発表されてすぐに応募しましたが、私は落選してしまいました！一方、同じように応募していたうちの社長、見事当選。こんなこともあるよね、と思っていたら、参加の権利を譲渡してくれました。（もちろん開催側の許可をいただいた上です。）思わぬお恵みに、心の中で何かが踊りだしました。

紆余曲折を経て、運良く（本当は運が悪かったのですが）勉強会に参加することが決定しました。当日の様子や、感想などは次回のブログで。ひっぱってすみません。

牧野工房：コーディングハンズオン勉強会第2回を開催しました