カテゴリー:web関連記事

リスト表示へ

CSS Nite LP9にて、第2回コーディングコンテスト開催決定。

2010年2月21日 23:09

コーディングコンテストデザインサンプル

表題通り、4/17に開催される CSS Nite LP9 にて、コーディングコンテスト が開催されることになりました。

あらかじめ用意されている PSD データを基に、自分の考えに基づいてコーディングを行い、テクニック、デザイン再現性、メンテナンス性の高さを競うものです。

さらに今回のコンテストはなんと、HTML5+CSS3 でのコーディングとなります。
HTML5 とか CSS3 まだ使ったことないんだよなーという人も、この機会に参加してみてはいかがでしょうか。いちおう自分も参加するつもりでおります。

しかも発表は、CSS Nite LP9 イベント当日に行われるそうです。いくつかの賞が用意されているようで、最優秀賞作品はシックス・アパート公式サイトで公開されるようです。(デザインサンプルの提供がシックス・アパートで、コンテスト対象のデザインも MT5 のページ 1 ページをコーディングする、というものです)

対象ブラウザも Firefox3.6 と Safari4 と、かなり思い切ったものなので、思う様 CSS3 を書くチャンスですw
なかなか実務で使うことが難しい CSS3 ですが、たまに CSS3 のサンプルを書くとあまりにも楽なセレクタや表現の幅の広がりに涙が出そうになります。
そういった CSS3 の素晴らしさを知る、という意味でも参加してみると面白いと思います。

Coding Contest #02 - HTML5 + CSS3

Firefox3.5で新しく対応したCSS3セレクタ

2009年7月 2日 15:07

Firefox3.5 ロゴ

いよいよ Firefox3.5 がリリースされましたね。n

このバージョンアップにより、かなりの CSS3 セレクタに対応しました。
これで、Firefox, Safari, Google Chrome, Opera でほとんどの CSS セレクタに対応したことになります。(IE は相変わらず・・)n

取り立てて大幅にレイアウトが崩れる、という状況でなければ、積極的に使っていっていいのではないでしょうか。n

今回、Firefox3.5 が新しく対応した CSS3 セレクタを紹介します。(ちなみに、CSS3.info というサイトのチェックを参考にしました)
詳しい CSS セレクタの説明は CSSセレクタまとめ1CSSセレクタまとめ2CSSセレクタまとめ3 を参照ください。n

新しく対応した CSS3 セレクタ

  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type()
  • :nth-last-of-type()

余談

タイトルバーのところのアイコンも変わったみたいですが、なんか以前のより安っぽくなったような気がするのは自分の気のせいでしょうか・・w
Firefox3.5 ウィンドウタイトルアイコン

Firefox の過去バージョン

ちなみに、過去のバージョンと共存させたい、なんていう方は、過去のバージョン置き場 からインストールしたいバージョンのセットアップファイルをダウンロードしてください。n

【要感染確認】GENOウイルスに注意!

2009年5月24日 20:29

4月あたりから、GENOウィルスというのが猛威をふるっていたそう。
現在は小休止状態みたいですが、大手サイトも感染していたとかで注意が必要です。
感染すると、以下のような症状が出るよう。n

  1. 動作が超重くなる
  2. パソコンが起動しなくなる
  3. 個人情報がもれる

それ以外にも、感染したパソコンで FTP に接続すると、ID/PW が盗まれて、自分が管理しているサイトにも感染させるためのスクリプトを埋め込む、というようなこともあるらしいので、サイト運営者や、FTP 接続をしている人は特に注意したほうがいいかもしれません。n

感染の確認方法や、詳細については以下のサイトが参考になりそうです。n

参考サイト

IE6で透過PNGを手軽に使えるJavascriptライブラリ「DD_belatedPNG」

2009年2月12日 23:47

site_DD_belatedPNG.jpg

今回はサイト製作に便利な JavaScript ライブラリの紹介です。

DD_belatedPNG

IE6 では透過 PNG(PNG-24 PNG-32 の間違いでした;)を使えません。
いちおう画像を表示することはできますが、透過部分が反映されません。

しかし、代替処理として「AlphaImageLoader」という CSS の filter を使うことで使うことが可能です。
ですがこれ、ActiveXの問題なのか、指定している透過PNG画像のドメインが違うとうまく反映されませんでした。

しかし今回紹介するJavascriptライブラリは、VMLという技術を使ってPNG画像の透過を実現します。

そのため、ドメインなどの問題もなく、しかも指定も楽でimg要素、CSSともに使用できるためとても便利です。

しかしながら、やはりこちらも使用には何点か注意点があります。
CSSの背景にPNG画像を指定した場合は問題ありませんが、img要素に(つまり通常の画像として)指定した場合、いくつかのライブラリで実装する、フェードアウトやフェードインの視覚的効果が実行されません。

推測では、filter 機能が使えないために透明度が変更できないのだと思います。
なので、もしこのライブラリを使う場合は CSS の背景として使うのが無難です。
簡単にデモを作ってみたので見てみてください。

使い方

スクリプトファイルを読み込んだあと、「DD_belatedPNG.fix('.png_bg');」で透過 PNG を使用している要素を指定します。
指定の仕方は簡単で、CSS セレクタと同じように指定ができます。
複数指定する場合は、やはり CSS と同じようにカンマ区切りで列挙します。

合わせて読むと役に立つかもなエントリー

Web Directions East開催!

2008年10月17日 00:09

世界最高峰のカンファレンスがついに来日!!
東京でアジア初開催!n

ってことで、web業界最先端のカンファレンスが開催されます。
このカンファレンスのことを知ったのは、CSS3のアニメーションの記事を書いたときにも少し触れた、CSS Reloadedというイベントのときでした。

このイベントで、CSS3のすごさを知り、かなり詳しくなったと思っていたCSSでこんなに驚かされるとは思っていませんでした。
こうしたイベントやセミナー、カンファレンスには、いくら自分で詳しくなったなぁと思っていても出てみるべきだなと実感してます。n

が!
このカンファレンスの日、あいにくと予定が入っていて参加できず・・。
というか、こういうカンファレンスとかセミナーがあって、しかも行って見たいなーって思うのに限って予定がかぶるというorz
なんか出てはいけない運命でもあるんだろうか・・。
まぁでも、それは置いておいても。n

Prototype.jsなどのライブラリをダウンロードせずに使えるGoogleサービス

2008年9月 1日 23:01

とある記事で見つけた画期的なGoogleサービスを紹介してみる。
今回紹介するのは以下のサービス。n

AJAX Libraries API

Prototype.jsやjQuery.jsなど、最近よく使われているJavascriptライブラリたち。
メインで使っているライブラリやそれのプラグインでは実現できない(あるいはちょっとめんどくさい)表現を、別のライブラリを使って実現しようとしたりすると、メインではないだけにどこに保存したか忘れていたり、まったく新規の場合はダウンロードサイトから落としてきて解凍してアップしたり・・。n

ライブラリは便利でも、ver違いがあったり読み込むファイルを変更したりが面倒になってくる。そこで活躍するのが上記サービス。

これはGoogleが提供しているサービスで、各verごとの有名なJSライブラリをGoogleのサイトから読み込ませる、というもの。
以下に利用するための簡単な説明を書きます。n

RSSより手軽な情報収集ツール - Googleアラート

2008年7月 4日 09:31

最近知った「Googleアラート」。
自分の興味のあるキーワードを設定しておくだけで、それに関連する記事をピックアップしてメールに届けてくれる機能です。n

キーワードには「CSS」や「html」、「javascript」などと記載して使っています。
届いたメールのサンプルはこんな感じ↓n

Googleアラートサンプル

設定には、キーワード以外に配信頻度が設定でき、「1日1回、その都度、1週間に1回」が選べます。
また、収集元をニュースやウェブ、グループとカテゴリを選択。(総合もある)
収集元で配信された記事から、設定したキーワードに関連する記事を届けてくれる、というものです。n

RSSより設定が簡単で、なにより自分が購読していないRSSなどの情報を届けてくれるため、RSSと合わせて使うとより情報収集力がアップすること間違いなしです!n

Safari3.0.4リリースされましたね

2007年11月21日 14:55

Safari3.0.4がリリースされましたね。今回のリリースで、フォームなどの日本語入力が可能になりました。ついに! って感じですねw

Safariのアンチエイリアスのきいたきれいな文字が好きで、さらに動作もはやいので
メインにしたいなーなんて思ってたんですが、日本語入力ができず断念していました。
(ブックマークレットを使った擬似日本語入力、みたいのはありましたがあんまり使い勝手がよくなく・・)

しかし今回のVerUPで日本語入力が普通にできるようになったのでさっそくメインとして使うよう始動。

と思ったんですが、マウスジェスチャーがなかったりと、Firefoxの拡張とかと比べてしまうと見劣りしてしまいますね・・。

ただ、閲覧する分には文字がきれいで小さめなので一気に情報を一覧できるので、調べ物なんかしてるときはいいかもですw

▼ちなみにこっからダウンロードできます。
Safariダウンロード

関連エントリー

完全フリーの画像を検索するサービス「PicFindr」

2007年3月19日 09:27

GIGAZINEさんのところで紹介されていた記事です。

⇒「PicFindr

商用利用も可能で、かつ特に連絡やコピーライトの表記もいらない画像を検索してくれるサービスのようです。
色々ほしい写真はあるのに、イメージ通りの写真が見つからない、もしくはクライアントの都合でお金が出せない、などの場合に利用してみるといいかもしれません。

今後はきっと色々お世話になりそうな予感のサイトです…w

これはすごい

2006年12月19日 21:19

PHPSPOT開発日誌 | 便利すぎて困る程のFireBug1.0

こんな記事を見つけた。
Firefoxのプラグインなのだが、閲覧しているサイトのあらゆるデータを覗き見れる感じ。
HTML、CSS、Javascript。
しかも、それら全部が編集可能だからすごい。(といっても、実際のサイトが修正されるわけではなく、見ている状態が変化するだけ。当たり前だけどw)

さらに、Javascriptのデバック機能までついてるからこれは便利。
早速明日、会社に行ったらインストールしてみよう。
・・・ただ、Mac版に対応しているかが不安だ・・・。

明日から、またコーディングが楽しくなりそうだw
1  2