CSS(スタイルシート) Archive

CSS Nite in Osaka行ってきました。

今回は、
Fireworksで効率的カンプ作成／竹内 聡
使いやすさのための色の識別／坂本 邦夫
SEOからSMO（Social Media Optimization）へ／住 太陽
の３セッション。

Fireworksで効率的カンプ作成／竹内 聡

僕はカンプ作成にFireworksだけを使うので、参考になりました。
クオリティ上げるためにはIllustratorとかPhotoshopも使った方が良さそう。
Adobe CS3では各ソフト同士の連携もとりやすくなっているみたいなので、はやいとこ手に入れたいです。

使いやすさのための色の識別／坂本 邦夫

今までデザインの勉強ってまともにしたことがなくて、感覚だけでWebデザインやってたので、言葉にして整理されると、とてもスッキリしました。
明日から実践というわけにはいかないかもしれませんが、意識は出来そう。

SEOからSMO（Social Media Optimization）へ／住 太陽

このセッションは社内外の人達に聞かせたい内容でした。
中途半端に知識のある人は「SEO!SEO!」とうるさく、そこにかなりの時間を費やします。
HTMLのソースのレベルで検索エンジンの上位にヒットさせることは困難だと思いますし、それが出来た所で本当に意味があるのか疑問でした。

後半部分で住さんが言っていた「忙しさは敵」という言葉、僕は逆に「暇は敵」だとも思ったり。今日も明日も暇となると、やること先延ばしにしてしまいそう。。。
計画性のある人なら有意義に時間を使うことができるんでしょうが、僕にとっては「暇過ぎること」も敵かと。

次回は10月だそうです。
個人的にはヤスヒサさんのプレゼンが聞きたいです。

今回、じゃんけんで最後まで残りまして、本を頂きました。
まさか自分が残るとは思わなかったので、汗をダラダラかいてしまいましたが、買う気満々の本だったので、かなり嬉しかったです。
帰りの電車で半分程読みましたが、いろんな立場の人がウェブについて語っていて、非常に興味深い内容です。

変革期のウェブ ~5つのキーワードから読み解くウェブとビジネスのこれから~ (マイコミ新書)

今回も参考になるプレゼンばかりで、とても楽しかったです。

特にヤスヒサさんの「Microformatsで上質コーディング」は非常に参考になりました。
以前からMicroformatsには興味があったのですが、実際それがどういったものなのか、どういう使い方が出来るのか理解出来ずにいたので、それまでのモヤモヤが一気に吹き飛んだ感じがしました。
このブログはWordPressを使っているのですが、紹介されていたプラグインを導入してみようと思います。

前回も感じたのですが、このCSS Niteというイベント、デザインよりのイベントと思われがちですが、デザイナー以外の方にも参加してもらいたいイベントだと思います。プログラマーも、コーダーも、デザイナーも、営業担当の方にも、Web関係の仕事をされている全ての方にとって参考になるイベントだと思います。

名村晋治さんの「転ばぬ先のWeディレクション」はブランディングに関する話題でしたし、伊東美沙貴さんの「ECサイトにおけるWeb制作」も、デザイナーだけのための話題ではなかったと思います。

CSS Niteという名前なので、デザイン関係に偏ったイベントと思われがちなのかもしれませんが、もっと多くの職種の方に参加してもらいたいと思いました。

残念だったのが、僕の引っ込み思案の性格のせいで、あまり名刺交換や、色んな人との交流が出来なかったという点。。。

屋外でバーベキューでもしながら、交流がメインのイベントなんてどうでしょう？人数的に無理があるかな・・・？

ともあれ、次回も是非参加させてもらいます。

仕事を早めに切り上げて行ってきました。

今日プレゼンされていた５名の中でも、鷹野さんと益子さんのプレゼンは、さすがといった感じでした。

益子さんは「Webリテラシー」について、鷹野さんは「プレゼンテーション」そのものについてのプレゼンで、僕自身プレゼンテーションをすることは今の所ないのですが、ライフハック的な要素も入っていて、参考になりました。

明日はCSS Nite in Osaka本編。
今回も１人参加で寂しいですが、楽しみです。

今月24日はCSS Nite in OSAKA 2007春の陣です。
昨年11月にも行われたこのセミナー。東京では定期的に開催されているのですが、大阪は今回で二回目。

CSS Niteというくらいだから、CSSのことばかりのセミナーだと思われるかもしれませんが、CSS以外のプレゼンなんかもあって、前回は非常に勉強になりました。今回は前回よりも長めなので、沢山のプレゼンが聞けるということでかなり期待しています。

先日京都で行われた「中小企業のためのホームページコンテスト」の表彰式に行ってきたのですが、そのときプレゼンされていたヤスヒサさんが今回も大阪にやってきます。ホームページコンテストの時はWebブランディングについて話されていたのですが、今回はMicroformatsについて話されるそうです。Microformatsについては、以前から言葉だけしか知らなくて、気になっていたので非常に楽しみです。

今回のCSS Nite in OSAKAに出演されるヤスヒサさんとWebディレクターの名村さんの対談がヤスヒサさんのポッドキャストinflame Castingで聴くことが出来ます。かなり聴きごたえのあるないようなので、是非聴いてみて下さい。Inflame Casting: IC #85 February 2 2007

このお二人は本も出されていて、内容も非常に興味深いです。
「ちゃんとCSSするためのスタイルガイド入門」は発売してすぐ購入したのですが、「Webブランディングの入門教科書―成功するサイトを構築するためのキーポイント、マーケティング、コミュニケーションと」は財政難のため、まだ読めていません。。。

とにかく今度のCSS Niteが待ち遠しい今日この頃です。

本屋さんで立ち読みしたのですが、非常に面白そうです。

CSS Nite in Osakaに参加してきました。

このセミナーは以前から気になっていたのですが、東京で行われていたので、参加出来ずにいたセミナーです。
８月にAdobe主催のFlashのセミナーに行った際に「CSS Nite大阪上陸」というフライヤーを貰い、mixiで正式に発表されてすぐに参加表明。会場のキャパは100名程度だったのですが、50名を超えるキャンセル待ちの方がいたそうです。

今回プレゼンをされたのは、サイバーガーデンの益子貴寛さん、スイッチの鷹野雅弘さん、そしてCouldの長谷川恭久さん。

まず益子さんは「ルールズ・オブ・スタイルシート」ということで、いかにしてわかりやすいコードを書くかということをルール化したものをプレゼンテーション。僕自身独学でCSSを学んで、いくつかのサイトをコーディングしていくうちに、自然といくつかのルールが出来ていたのですが、益子さんの言うルールと合致するものがあったり、「なるほど」と思うようなルールがあったり、非常に参考になりました。

次に長谷川さん。長谷川さんのプレゼンの内容は、技術的なものではなく、「エコなWebデザイナーになろう」というタイトルで、ソースコードをシンプルに、またリサイクル可能なコードはリサイクルして使うTipsを紹介。他にもWebをツールとして使うことによって、コミュニティを作り、そのコミュニティでみんなで賢くなろうという考え方、そしてそれを実現するためにインプット・アウトプットを行うことが重要であるということなどを紹介。インプットすることは雑誌や、それこそWebで情報収集すれば簡単に行えるけど、何かに関してブログでアウトプットしようと思っても、「自分より詳しい人は沢山いるし、自分の意見は間違っているかもしれない」と躊躇してしまい、アウトプットは難しいと考えていた僕にとって、このプレゼンテーションは、モチベーションをあげてくれるものでした。

３人目の鷹野さんは「Dreamweaverの作業効率を高める小技30発」。これは即活用出来る小技達でした。Dreamweaverはいつも使っているのですが、ほとんど「コーディングツール」としてしか使っていなかったので、今回の小技達を活用すれば、「CMSでサイトを構築するようにサイトを構築できる」と目からウロコでした。それと同時に、今までかなり効率の悪いコーディングをしていたということにショックを受けました。

その他にもスポンサーであるシックスアパートの新サービス「Vox」の紹介があったり、SEOのスペシャリスト住太陽さんのプレゼンがあったり、かなり参考になる情報を得ることが出来ました。

セミナー終了後に行われた懇親会には参加表明していたものの、結局参加出来ず。。。

次回はもっと大きな会場で３月に行われるとのことなので、是非参加したいと思います。

今日、右側にメニュー、左側にメインというシンプルなサイトのコーディングをしました。
全体の幅は800pxの左寄せ。
HTMLの書き方としては、やっぱり見出しがあって、その直下にメニューというのが好ましいと判断したので、まず見出し（h1）を書いて、その直下に右に来るメニューを書き、そのメニューの幅を200pxに指定して右側にフロート。そしてメインをdivでくるんで600pxに指定。

MacのIE、Opera、Firefox、NetScape、Safariでは問題なくレイアウトされました。
ところが問題はシェアNo.1のWin IE。。。

なぜかメニューの左側に回り込むはずのメインコンテンツがメニューの左下に。。。

「も〜！！なんでやねん！！」

メインコンテンツの中の幅600pxの画像を595pxにしたら左側に回り込む。この5pxは一体何者？？
もちろんimgにはborder:noneとしているので、ボーダーのせいではなさそうだし、特にmarginもpaddingも指定していない。

あれこれ考えているうちに、自然とWin IEのバグと回避方法を検索していました。
結局解決方法は見付からず、メインコンテンツを先に書いて、その下にメニュー。そしてメインコンテンツを左にfloat。
これでとりあえずは全てのブラウザで綺麗にレイアウトされたのですが、なんとも気持ちの悪いもので。。。ユーザーに優しくないし。。。

っちゅうか、このバグを回避する為のハックがあったとしても、それを憶える必要はあるのだろうか・・・？
素直にHTMLとCSSを書いているのだから素直に表示されて欲しいものです。
ハックを憶えたってブラウザがWeb標準に準拠したものにアップデートして、それが主流になれば一生懸命憶えたハックなんて水の泡。しかもIE7はいつになったら正式にリリースされるのかもわからないし、リリースされてもそれが一気に普及するとは考えにくい。

う〜む。。。バグが多いくせにシェアNo.1のWin IE、しっかりしてくれよ！！タチが悪すぎる！！
そしてバグの少ないFirefox！高性能なんだからもっと頑張ってくれよ！

僕はMacユーザーなのでよく知りませんが、どのメーカーのPC買っても標準でついてくるのはWin IEなんですよね？
PCメーカーの皆さん、コーダー泣かせのIEなんかじゃなくてFirefoxを標準搭載して下さい。

同じ悩みを抱えていらっしゃる方、回避方法をご存知の方がいらっしゃいましたらコメントお待ちしております。

Firefoxの拡張機能に、Web Developerというのがあります。

この拡張機能、とても便利で重宝しているのですが、最もよく使う機能は「CSSの編集」です。

サイドバーに現在開いているページのCSSが表示され、リアルタイムで編集出来ます。CSSを手打ちで入力しなければいけないので、「CSSが全く解らない！」という方には不向きかもしれません。

僕の「CSSの編集」の主な使い方は二つ。

まず一つ目は自分のサイトを開いて、CSSを手打ちで編集していき、レイアウトが出来たらそのコードをそのままコピー。そしてDreamweaverなどのソフトを開き、コピーしたCSSをそのままペーストしてサーバにアップロードします。本来Dreamweaverで直接編集すればいいのですが、プレビュー画面があまり当てにならないということと、実際のブラウザで確認する作業も含めて作業出来るので非常に効率よく作業出来ます。またFirefoxはWeb標準に準拠したブラウザでもありますので、確実です。

もう一つは、人が作ったサイトのCSSを参考にする際に使っています。
巧みなCSSテクニックを使ったサイトを参考にする際、「ここをこうすればどうなるの？」という疑問が生じます。そんな時にWeb Developerの「CSSの編集」を使います。¥r¥nリアルタイムでレイアウトが変わっていくので、勝手にCSSを編集してテクニックを盗むことが可能です。¥r¥n¥r¥nまた、このWeb Developerという拡張機能には、ブロック要素を枠で囲んで表示する機能や、ボックスのサイズを表示する機能もついていますので、サイトの構造を知るのにとても便利です。

CSS(スタイルシート)を勉強するのに非常に参考になった書籍をご紹介します。
スタイルシート スタイルブックという本です。

表紙には「入門」と書かれていますが、少しでもCSSについて勉強された方向きの本かなと思います。とはいえ内容は非常に充実。

筆者が何故スタイルシートに興味を持ったのか、何故スタイルシートを使う必要があるのか、Webサイトのアクセシビリティなど、単なるスタイルシートの参考書には書かれていない情報も網羅しています。

スタイルシートだけでなく、今後のWebデザイナーのあり方が筆者なりの解釈で書かれていて「なるほど！」と納得してしまうようなことも書かれています。（この内容については同じ著者のWeb Designer 2.0 進歩し続けるWebデザイナーの考え方という本でさらに詳しく書かれています。）

スタイルシートの参考書には、実際にサイトの作成をしながら学んでいくタイプの書籍や、辞書的な使い方が出来るような書籍、実際のサイトの参照しながらその中身を種明かししていくタイプなど、色々な書籍があると思いますが、このスタイルシート スタイルブックは「実際のサイトの参照しながらその中身を種明かししていくタイプ」にあたると思います。

どうしても画像を多様する必要があるサイトのSEO対策なども取り上げられているので、あらゆる意味で非常に参考になります。

2004年発売の本なので、情報が古いのでは？と思われる方もいらっしゃるかと思いますが、まだまだ現役で使える書籍だと個人的には思います。Webデザイナーを目指す方には是非読んで頂きたい書籍です。

この本のサポートサイトもがあるのですが、このサイトもWordPressで作成されています。

以前友人に頼まれて三輪そうめんの藤商事さんのホームページのHTMLコーディングをやりました。

検索エンジンでヒットするようにしてほしいとのことだったので、テーブルレイアウトで複雑になったソースをCSS（スタイルシート）を使ってレイアウトしました。元々のデザインがあったので、それを崩さないために完全にはCSSレイアウトにせずにハイブリッドでレイアウトしました。

それにしても最近大分暖かくなってきましたね。そうめんの季節到来です。