Posts Tagged ‘css’

12月開催のセミナーのお知らせ

Thursday, October 15th, 2009

今月頭にお知らせしたデジタルスケープさんで11月に開催されるセミナー「WebディレクターのためのHTML+CSS基礎講座」がおかげさまで満員御礼になりまして、次回12月の開催も決定いたしました。

WebディレクターのためのHTML+CSS基礎講座
12/10、11開催 全2日 10時間 10:00~16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

http://blog.gaspanik.com/html-css-session-200911

と、前回の告知の時に、セミナーの内容についてはグダグダ書いてますので、そちらのページをご確認いただければ幸いです。

11月開催のセミナーのお知らせ

Friday, October 2nd, 2009

先日あまりにも近々でお知らせしたら既に満員御礼だったデジタルスケープさんでのセミナーですが、早速といってはなんですが次回の開催が決まったようでして、そのお知らせをさせていただきます。

WebディレクターのためのHTML+CSS基礎講座
11/19、20開催 全2日 10時間 10:00~16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

Webサイトのディレクションなどを担当される皆さんは、実際にあまり手を動かすことはないかもしれませんが、制作の現場がどういったことを考えて仕事しているのかを知らないというわけにはいきません。変化し続けるWebの世界の現状を把握しながら、今どういうことが求められていてどういったことに注意しておくべきか、実務にいかすにはどうしたらいいのかみたいな話とあわせて、Web制作の基本ともいえるHTMLとCSSの仕組みや考え方を押さえましょうといった内容になっております。

が、私の場合どちらかというと教科書でおしえてくれないこと(*1)を余談として口にする傾向にありまして、時間の許す限りHTMLとCSSに関することだけでなくFlashやモバイルの話、検索エンジンがどうしたこうしたとか、作業を楽にするツールを紹介したり、まだ日本では知られてないことなどもあれこれ喋るのではないかと。
※内容がそれない程度にですけど(笑)

興味のある方は是非この機会に(定期開催ではないものですから…)。

WebディレクターのためのHTML+CSS基礎講座

*1: 内容こそ違いますがたとえばこんなことだったりです。


(追記: 2009.10.15)
えー、告知をしてあまり日も経ってないのですが、おかげさまでまたまた満員御礼になったようです(ありがとうございます)。12月もひょっとしたらあるかもしれませんので、その際はまたあらためて…

CodeBurner for Firefox

Tuesday, July 28th, 2009

「The Ultimate CSS Reference」や「The Ultimate HTML Reference」の出版元でおなじみの(って洋書読まない人には関係ないか…)sitepointのWebサイトで「CodeBurner for Firefox」というFirefox用のアドオンが配布されてるようです。

もともとFirebugを一緒に使うものであったようですけど単体で独立したのかな? これをインストールしておけば、HTMLの要素だったりCSSのプロパティだったりを検索窓に入れてあげると、書籍の「The Ultimate CSS Reference」とかの表記と同じ感じでブラウザ毎の対応状況が表示されます(IE 7はBuggyとかね 笑)。

codeburner-for-firefox

インストールして下のアイコンをクリックするとこんな感じ。

「オレはもう完璧」って人はいらないと思いますけど、ボクみたいに「あれ?あのプロパティ名ってなんだっけ?」っていうような人は入れておくと便利でしょう(笑)。

CSS内部でブラウザ毎の値を切り替える、Conditional-CSS

Friday, March 13th, 2009

昨日ぼんやり海外のサイトのニュースを見ていたら、「Conditional-CSS」というサイトのリンクが載ってました。はて、それは何じゃらほい?と見てみると面白いことをされているじゃあーりませんか。

Web制作者の悩みの種といえば、ブラウザの種類が多いこと。
サイトの見え方を重要視した場合など、ターゲット次第ではCSSを切り替えたり、やれCSSハックだなんだと頭を抱えることにもなります。対応させるIEのバージョン次第ではコンディショナルコメントを使ったりされている方もいるのではないでしょうか(ボクはどちらもほとんど使わないのですが… 笑)。

そんなブラウザ毎に微妙に違う解釈を一つのCSSファイルで実現する方法として、このConditional-CSSってものが作られたようです。

これ、PHP版とかC版とかいろいろあるんですが、サイトの右側にあるコンパイラを使って必要なファイルを生成することができます。PHPならバージョンを選んで自分のCSSの名前を入れて「GO」ボタンを押せば、自動的に「c-css.php」なるファイルがダウンロードできます。

c-css-01

で、そのファイルをサーバにアップしてCSSの代わりにコイツを指示する、というのが基本的な導入方法のようです(サイトの説明ちゃんと読んでください 笑)。

Include the ‘c-css.php’ file as you would any CSS file on your web-pages using: @import “{path_to_}/c-css.php”; (or similar).

CSSの記述方法はサイトにも載ってますが、CSSの中にコンディショナルコメント的な書き方で適用させるブラウザ毎の値を入れておく感じです。

c-css-02

デモサイトをそれぞれのブラウザで見て、CSSの頭を見るとちゃんとそのブラウザ専用にCSSが生成されているようですね。そのオリジナルのCSSもサイトには用意されていますので、中を見てみると良いでしょう。

アクセスの多いサイトなんかだと、いちいちPHP呼び出して処理させるとどうかなぁ?と思ったりもしますが、ブラウザ毎に同じようなCSSを何枚も用意するよりは一個で完結できるのは制作者にとっては便利かもしれませんね。

ちなみに無駄に「font.css」だの「layout.css」だの複数のCSSを読み込んでいる場合(HTTP requestsの回数をあげるのが好きな方 謎)は、そのPHPの中の配列にCSSのファイル名を入れておけば良さそうですよ(ってことは、これを使えば統合できるんじゃないか?と思った)。

ま、面白そうだったのでお知らせまで。
使いたかったら、あとは皆さんが頭を使うだけです(笑)。

GoogleさんのChromeを使ってみたよ

Wednesday, September 3rd, 2008

福田さんの子供みたいな辞任会見でスタートした9月ですが(笑)、インターネッツな世界ではGoogleさんがブラウザを出すということで持ちきりでした。で、さっそく深夜にリリースされてたのでインスコローリングしてみました。今のところ何も考えないで、パッとインストールできるのはWindowsのみです(*1)。

さて、数ヶ月ぶりにVistaを起動した私はいろんなもののアップデートでまた時間を費やしたわけですが(んな私のこたどうでもいいですね 笑)、終わったとこでGoogleのChromeのページからインストーラをダウンロード。

※「エラーでインストーラが起動すらしない」って人は、インストールをネットワーク経由でおこなうのでアンチウィルスソフトによっては、そこでチェックが入って落ちてる可能性があります。オフにしてやってみましょう。

chrome-01

起動してみると極限までそぎ落とされたシンプルなインターフェイスが出てきます。ブラウザウィンドウ内に表示されるWebサイトなりアプリケーションだけを使えるような配慮でしょうね。今、英語モードにしてるので英語のメニューですけど、普通にインストールすれば日本語になりますのでご安心を。

HTML部分のレンダリングエンジンはWebkitってことなので、Safariとかと同じで表示も速いですし、普通に作ってあるWebサイトなら別に問題もなく表示されます。Web作ってる人たちの間で新しいブラウザがリリースされるとかいう話になると気になることでしょうが、某MSさんのアイツみたいな心配はいらないってことです(笑)。で、Webkitがベースということは「-webkit-border-radius」みたいな「-webkit-」付きのCSS3の先行実装みたいなプロパティが効くんでしょう(*2)。

一応インスペクタとかも搭載されてますが、まだResourcesのタブがうまく動いてないような…動いてた(笑)。Safariの開発メニューにあるものと同じような感じですね。

JavaScriptのエンジンの方は「v8」ってのになってるそうで、早速いろいろ試している方の話では、実行速度が速いとかIE用のBookmarkletとかも修正なしで動いてるとかそんな話もちらほら。

Chromeはいわゆるタブブラウザなのですが、それぞれのタブは独立して動くような設計になってるらしく、どれかのタブが固まって全部が落ちてしまうということはないようです。そのためか、メニューの中にはタスクマネージャなんてものが用意されています。試しにタスクを落としてみたら下のような画面が出てきました(笑)。

chrome-02

で、ついでなのでfacebook.comに繋いだらwww.facebook.comに飛ばされずこんな画面がでてきました(笑)。エラーの画面もシンプルです(笑)。

chrome-03

ちなみにURLとか検索キーワード入れる上の入力欄に「about:memory」っていれると使用量とかが出てくるのは使ってると気付くのですが、それ以外にも「about:」とか「about:cache」とかあるようです。

あと、ちょっと気になったカラーマネジメントあたりはどうだろうかとチェックしてみました。下の画面は、左がカラーマネジメントを有効にしたFirefox 3、右がChromeでAdobe RGBのプロファイルが埋め込まれたJPGを表示した例です。ご覧の通り色が違ってるので、カラーマネジメントの機能までは入ってないようです(笑)。

chrome-04

とまぁ早速入れてみたわけですが、Chromeはこれからどんどん形になっていくんでしょうね。表示とかその辺の心配もないでしょうし今後が楽しみであります。

*1: 元になってる「Chromium」についてはこちらにいろいろ書いてあるようです。テストでOS XとかLinuxでホゲホゲする人なんかはチェックしてみては?

*2: 後から気付いたのですが、Google ChromeのWeb開発者向けの情報はこちらのページに掲載されてます。良かったですね、珍しく日本語版があって(笑)。
また、Chromeやそれ以外のブラウザのサポートしているセレクタは、evotech.netの「Google Chrome Browser CSS Selector Support」という記事でさっそく表になって公開されています。


最後に全然関係ない冒頭の話ですが、誰かに何かをしてもらう(協力してもらう)ためには自分が人に対して真摯な姿勢で動いてないと…というか、人のことを思いやりながら生きていかないと誰も何もしてくれませんよ…。「あの人がやってくれなかった」とかなんとか子供みたいなこと言ってちゃね…、それは「自分がちゃんとしてなかった」ということですよ、元総理(笑)。愛と一緒で求めるだけじゃだめっす。


Performance Optimization WordPress Plugins by W3 EDGE