CSS3の機能を試してみる

Push Your Web Design Into The Future With CSS3という記事を参考に、実際に帆船堂サイトへCSS3の機能を適用してみました。

  • [border-radius]四角いBoxをまーるく収めまっせー、という機能です。

     

    border-radius 左:IE7、右Firefox3.0.5

  • [border-image]一枚の画像を元にBoxを囲む機能です。 ここからWebデザインの新たな技法が出て来そうな予感です。

     

    border-image 左:IE7、右:Google Chrome

  • 文章やBoxに影を付加することが出来ます。 文章に影を落とす事で、より自由な背景の組み合わせが行えるようになるでしょう。 多分。

     

    text-shadow box-shadow 左:IE7、右:Safari(Win)

  • [rgbaとopacity]opacityは現在も比較的良く使われている機能で、要素を透過することができます。 rgbaも透過機能なんですが、こちらはrgbをaします。 colorで指定したものを透過させるときに使うようです。

     

    rgba opacity 左:IE7、右:Firefox3.0.5

あと、記事にはfontの機能も紹介されていますが、うまく実験をまとめられなかったので割愛しました。 もう少し手軽に埋め込み用のフォントを作ることが出来るようになれば非常に強力な機能になるとおもわれます。 Webサイトだけではなくフォント関連は色々と課題がありそうです。
(2009.1.14 一覧画像に説明を追記しました。)


Share

ネットサーフィン

  1. 圧力鍋で炊飯をしている。
    分量や炊き方などは自分用に合わせて適当である。 最初に一般的な説明を読んで以来、鍋底を焦がしながら覚えた。 つまり、鍋が変わるとうまく炊飯できないとおもわれる。 なんとなくアプリケーション依存型の制作が思い浮かんだ。
  2. キーボードの調子がよくない。
    FILCOのFKB86Eという製品で、左手の親指でDeleteキーを押す事が出来るのがお気に入りである。 使い勝手が良いのでよく持ち歩いていたら、そういうのはモバイルとはいわないのではと言われるほどであった。
    ここ最近、スペースキーとカーソルキーの下が、5回に1回くらいの割合でしか反応しなくなってきた。 最近と変換しようとしても1回で変換できず何度か押しているうちに細菌になるのでとても哀しい。 そして、上記の鍋と同じく、キーボードが替わるとうまく入力できなかったりするのであった。
  3. ネットサーフィン
    結局のところネットサーフィンという言葉は一般的に浸透したのだろうかなどとおもいつつ意識的にネットサーフィンを行ってみたところ、いくつか興味深いサイトを発見した。
    • http://jp.youtube.com/experiencewii
      Youtubeの動画の一つだが、見ているうちに何かの異変に気付くはずである。 必見といえよう。
    • 前向きなエントリを
      ブログヘラルドというサイトの記事で、ブログの記事を読むことについて書かれている。 深呼吸するという表現は個人的にもよく使うのでなるほどとおもった。 言葉の与える印象は感じ取るものである
    • desero.net
      全面的にAjaxを使用したサイトで、いくつも面白い仕掛けがある。 Webサイトクリエイタとして参考にすべきサイトであるとおもった。 そして、ちょっとなんかくやしいなあともおもった。

Share

【アナログ】

CSS HappyLifeの記事が楽しかったのでWordPress用のプラグインにする実験をしてみました。
当サイトをインターネットエクスプローラー6で見ると、右上にアナログという表記が現れます。

こういったものをきっかけにIE以外のブラウザを試してみる方が増えれば、今後の技術の加速へと繋がるんではなかろうかなという気がします。

ちなみに、最近までOperaは有料ブラウザだとおもってました。
実はもうとっくに無料になっていたのでした。


Share

昼食付

昨今の世界的経済不況とは関係なく、個人的経済不況なのでアルバイトを探しているところなのであった。
なかなかすんなりと決まるものでもないなあとおもう。
ハローワークインターネットサービス
には【ただいまの求人総数は437168件です。】と表示されている。
こんな感じなのだろーか。
【事業者】>希望<【求職者】

そして、不況柄昼食付き等の文句に惹かれてしまうのがちょっと恥ずかしい。


Share

ダイジェスト表示

startstop-sliderというJavaScriptを使って商品のダイジェスト表示をおこなってみました。
設置例(hc707.com)

商品のタイトルと説明と写真を用意するだけでOKなので、既存のサイトに少し動きを追加したい時などにちょうどよさそうです。 また、写真付きブログの新着記事表示用にも使えそうな感じでした。

ところで、ダイジェストの意味について、いまいちハッキリと把握できていなかったので改めて調べてみました
こういう感じの言葉は、うっかり使ってしまって後でドキドキすることが多いです。


Share

すみません、テレビは無いです

最近引っ越したと噂の高いShow-web氏とのはぐれかがわSOHO会コンビ談合会談を行う。
途中、商売と儲けについて議論しようと試みるが特に盛り上がらず食が進んだだけであった。
売り上げに繋がる話はほとんど無かったが、WordPress普及に関するイベントを主催してみましょうという話になった。
また、会談の中で、お年玉くじ付き年賀ハガキでWiiが当選したとしてもテレビを持っていなければ使えないという重大な事実に気が付くというとても意義のある1日だったといえる。


Share

WordPressのギャラリー表示を素敵にしたい

WordPressのプラグインlightbox-galleryを参考に、ギャラリー表示をそこはかとなく素敵にする実験をしてみました。
プラグインの機能を使用しているページを特定して、そのページにだけCSSやJavaScriptを読み込ませるというのが難しい感じです。 ひとまず今回は頭痛にならない範囲で切り上げました。 ゆくゆくはdonation wareとして公開して大繁盛の大儲けで欧州に別荘を構えてのんびり暮らしたいなあとおもったりしました。

写真は去年の暮れに開催されていた『パリと京都の読書時間』という展示の模様です。
(2009.1.8追記:画像の一覧表示に鏡面処理を施してみました。)


Share