小粒だけどピリリと〆るHTML/CSS/XHTML/スクリプト 第4弾

「HTML」「XHTML」「CSS」に「JavaScript」「PHP」「Python」「Ruby」と、Webサイトをクールに見せる便利なテクニックや解説ページを紹介する企画の第4弾です。
今回は、「Ascii」様より集めてきました。

「Ascii」様と云えば…拙著ブログ「Amazonの「この商品を買った人はこんな商品を買っています」を実現させる from Ascii」は、タイトルにもあるように「Ascii」様が引用元となっています。

Amazonの「この商品を買った人はこんな商品を買っています」を実現させる from Ascii
(http://affilie-blog.blogspot.com/2008/09/amazon-from-ascii.html)

上述の「Amazonの「この商品を買った人はこんな商品を買っています」を実現させる from Ascii」は、「Ascii」様の記事を読むと、「29分でできる！ あのサイトの“技”を盗め」の第4回目とされていました。
となれば、「第1回目～第3回目までも在るハズ…」と思い、探し出してきました。
今回は、「29分でできる！ あのサイトの“技”を盗め」のトップページも見つかりましたので、アップデートされても探す時は苦労しなくて済む…と思います。

• TOP:29分でできる！ あのサイトの“技”を盗め
  (http://ascii.jp/elem/000/000/170/170212/)
  「29分でできる！ あのサイトの“技”を盗め」のトップページらしい…
• 第1回:チッちゃい画像にはデッカいツールチップを！
  (http://ascii.jp/elem/000/000/162/162972/)
  「サムネイル画像にマウスを重ねるとツールチップ(画像情報等)を表示させる」
• 第2回:ステーキ丼をJavaScriptで美味しく拡大
  (http://ascii.jp/elem/000/000/168/168772/)
  「画像の一部を拡大表示…かつてのルーペかな」
• 第3回:asahi.comの開閉パネルをJavaScriptで再現
  (http://ascii.jp/elem/000/000/171/171566/)
  「一覧を開いたり、畳んだりします」
• 第4回:jQueryで作る“Amazon風”インターフェイス
  (http://ascii.jp/elem/000/000/173/173575/)
  既出ですが、「Amazonの「この商品を買った人はこんな商品を買っています」を実現させる」です。

さて、少々番外となりますが、便利ツールやサイトも紹介されていましたので記載しておきます。

• IE8でWebサイト運営者は4回うれしい
  (http://ascii.jp/elem/000/000/168/168168/)
  W3Cを無視し続けてきた曲者IEが、8になってCSS2.1に準拠します。
  これによりIE向けのチェックをしなくても済むのは良いのですが、IE8に移行していない場合は…やっぱ苦労だねぇ
  それよりも、2ページ目に記載されいているIE8の新機能「Web Slices」の仕掛け方が超参考だ
• Webデザイナー悩ますIEのCSS崩れを事前確認
  (http://ascii.jp/elem/000/000/172/172073/)
  IE5.5～IE8b2までに対応しているIE表示専用チェッカーソフトの「IETester」が紹介されています
  これを使うとIEの表示をまとめてチェックできるそうだ…IEはバージョンによって挙動が異なる…真の曲者
• 総数2万枚！ すべて無料の写真素材サイトまとめ
  (http://ascii.jp/elem/000/000/170/170162/)
  日本語で公開されている「無料写真素材」サイトが紹介されています
  自分のサイトで使うイメージ写真で困った時のお助け素材になるだろう

ちなみにですが、この程度のスクリプトはコピペしちゃ～いかんょ。
法的な理由ではなく、勉強という視点からです。
諺らしきものに「急がばまわれ…」というのがありますが、この程度のスクリプトは真にソレです。
時間と効果に追われ、ついついコピペしてしまう気持ちはわかりますが、それでは「考え方」「論理」「応用」が身につきません。
言語系や開発系が苦手なaffilieですが、「Ascii」様で紹介されている程度のスクリプトは確実に「手打ち」です。
ROM-BASICの頃からの習慣ともなっていますが、「手打ち」しながら「PAD」や「フローチャート」を思い描くようにしています。
こうすることにより、少ない時間で「プログラムの組み方」を習得できると思います。
affilieと同様に言語系や開発系が苦手だけど、最近の動的Webで苦労している方にはオススメする方法です。
「零から創る」ことは出来なくとも、「改良」する程度は身につくと思いますょ。
今でも発行されているかどうかは判りませんが、電波新聞社「Basic マガジン」に記載されていた膨大な行のソースを「手打ち」しながら学習した経験ですので参考にしてみてください。

それにしても、IE8はCSS2.1ですかぁ～
Amazonあたりで「XHTML+CSS2.1」の書籍でも物触してきますかねぇ。
オンラインでCSSを解説しているサイトは、有名処を含めて沢山あるけど、表現の仕方がaffilieにはシックリきません。
やはり、紙面の持つインパクトかな…って紙に頼る旧世代になるのかなぁ～凹。

このシリーズも第4弾となりました。
今までの情報蓄積と公開したペースを勘案すると、ホボ週刊です。
また1週間かけて情報を蓄積してきますので、来週をお楽しみに～って来週も発行できるかは微妙かな。

この記事は、Windows Live Writer で記載し、投稿しています。

週末雑貨 affilie
(http://affilie.ntym.net/)