昨日、CSS Holic 第3回勉強会に参加してきました。

サンプルのデザインをもとに、5名くらいでサイト構成やページのマークアップ方法などをグループディスカッションをしながら検討し、最後に発表という内容でした。自分では当たり前だと思っていたことが実はマイノリティだったことを知ったりしてともて有意義な時間を過ごせました。皆さん、お疲れさまでした。

さて、グループディスカッション終了後に、参加者の方からこんなことしたいんだけどどうするよ？と質問にあがった内容が、なかなか面白かったです。

質問内容

上図が質問にあがった内容のスクリーンショットです。ポイントは以下の2つですね。

• 右下に表示されている矢印は、マウスオーバー時に右下にずれるような感じ
• テキストの左側にある枠線ですが、テキストが複数行になった時でも1行目分の高さである

右下の矢印

サンプルを見る限り、枠線や矢印部分も含め、このエリア全体がクリッカブルなリンクとなるような感じですね。というわけで、この矢印はa要素なり、要素が足りないようであればa要素の中にさらにspan要素を入れ込むなどして、そいつにdisplay: block;を指定してやったあとに背景画像として表示してあげればOKでしょう。

左上を基点にして背景の位置を考えてしいますと、テキスト量によって高さが変化する部分ですので、矢印の位置が一定になりません。背景画像は要素の右下に表示し、マウスオーバー時の右下にずれるような感じは、余白までを含めて画像を切り出してしまうことで解決可能です。

テキストの左側にある枠線

次に、テキストの左側にある枠線です。枠線ということでCSSのborderプロパティが考えられますが、テキストが複数業になった場合にも1行目分の高さが保たれるというのが曲者ですね。inline要素のborderとした場合にも、テキストの左側を縦あわせしないとですので、なかなか難しいことになります（できるかどうか試してません）。

画像を埋め込んで解決しました

というわけでどうしたものかと悩んだのですが、img要素で画像を埋め込んでしまえばすんなり行きました。文字サイズが拡大された時に、画像の大きさもそれに追随してくれるように、画像の高さをCSSでem指定します。指定する値はテキストのline-height分の高さを指定してあげればOKでしょう。

その他、floatの指定などを細かく行いましたが、実際に指定を行ってみたサンプルを用意しましたので、ご興味がありましたらご確認ください。

僕以外の回答例

@debiruさんの回答：CSS Holic / sample1_rev2

address要素について

また、当日はaddress要素に関しましても若干議論がありました。改めてHTML4.01の邦訳を参照してみますと、以下のようにあります。

ADDRESS要素は、文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先を示すのに用いられる。 たいてい、文書の冒頭か末尾に現れる。

こちらを読む限り、たいていの場合はサイト所有者の連絡先をマークアップするのに用いられるのがaddress要素ということになりますね。例外としましては、サイト所有者と違う組織・団体の方などの文書がサイト内にある場合などでしょう。そういった場合にはその違う組織・団体の方などの連絡先をaddress要素でマークアップすることになるということですね。

「ユーザーがその連絡先にサイトのミスを指摘すると編集を迅速に行えるのかどうか？」などが出ましたが、仕様にないことを考えだすとキリがなくなって来てしまいますので、仕様として決まっていることをそのままに受け止め、その情報が「文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先」なのかどうか？だけを判断すればそれほど難しいことはないのではないでしょうか。

仕様書回りのことに関しましては、同日に開催された『日本ウェブ協会アカデミックプログラム Vol.7「HTML仕様書を読む」』の動画が公開されています。太田さんの話術だけでも結構おもしろいですので、一度ご覧になってみると良いと思います。

許容できないくらいHTMLのエラーが出ていますのでもろもろご注意ください。

CSS Nite LP9 連動 第2回コーディングコンテストが開催されています。僕も応募しましたのですが、取り組んだ際の反省などを。

いろいろデカイこと言ってすみません

えーっといきなり謝ってしまいますが、「賞を狙っているんですよー」などと大きなことを言ってしまいすみませんでした。何名かの、すでに応募作品を公開されているを見る限り「あー、ここはこうやれば良かったのか」などなど反省点がわんさかありまして、柄にもなく自信をなくしました。

残念な点

• ページ上部の影ですが、body:afterなんかでやるのが一番スマートっぽいですね。気づかずにbodyにたいしてbox-shadow: insetを使ってます。さらにそうするとページの左右にもぼかしたぶんだけ影が出てしまったので強引に消したりしています。さらにその強引さがゆえに思いもかけないことが起こったりします。
• rgbaを利用する部分ですが、どの色をどれくらいの透明度にしたら思い通りの色になるのか良くわからなかったので、実際のデザインと比べると微妙に（大幅な部分もありますが）色が違ってたりします。
• HTML5からはtime要素があるんですね。知りませんでした。
• 一応メディアクエってiPhone用とか用意しておきましたが、僕のMacのiPhoneyではスクリーンサイズが大きいのでメディアクエった感じにはなりません。とりあえずスクリーン用のものを取り外して普通にlink要素でiPhone用を読み込んで調整しましたが、最終的にiPhoneでメディアクエリーが適用されているのかは未確認です。
• グローバルナビの四隅が若干ジャギっていますね。背景はすべてa要素に一括で指定しているのですが、liとaに分けた方が良かったのかなー。でもこの辺ってブラウザが悪いよねと思ってそのままに。

その他、マイクロフォーマットとか全然指定しないんですね、とかもあると思いますが、その辺は僕の仕様です。

結構気に入っている箇所

• Non JavaScript！つっても僕があまり得意ではないので使用していないだけなのですが。
• 画像拡大部分の「target-box」。Non JavaScriptということで拡大画像表示はtarget擬似クラスを利用してdisplayの値を切り替えています。ブラウザウィンドウが小さい方ですと、画像下部に配置した画像間のリンクと画像を閉じるリンクが見きれてしまいますので、画像自体にも画像を閉じるリンクを指定しています。で、最初はもっと一意な感じのIDを指定していたのですが、なんだかthickboxなんかに対抗するという意味でも、ライブラリみたいなクラス名を指定しておいたというのが自分的には一番グッと来ている部分だったりします。
• クリック出来る範囲は広い方が良いですよね。ということで、HTML5からaの中にいろいろ要素を持てますので、hnとpとかをまとめてaでククッている箇所が結構あります。便利だなーと思う反面、最後にNVDAで読み上げてみると、都度都度「リンク」と読み上げてから段落なんかが読み上げられるので、これはどうしたものかと今でも悩みどころでもあります。
  あ、クリック出来る範囲は広い方が良いですよねの精神のもと、お知らせセクションの「重要」などのアイコンっぽいのもaに入れてしまっているので、アイコンと後続の文字の間にもunderlineが引かれてたりしますが、デザイナーさんからダメだよ！って言われたらすぐに直します。
• Operaのスモールスクリーンモードが結構良い感じかなーと。ご確認ください。
• あ、あとIE用のCSSファイル名とか。IEさん、ごめんなさい。

こんな感じでしょう。最後に僕が応募したものを以下に置いておきます。

応募したもの

http://maboroshi.biz/clearskysource/cssnite-lp9-contest2/

注釈

サイト内検索を利用するとそのままsix apartさんのものを利用できるようになっていますのでご注意ください。

アクセス解析は当ブログのものを仕込んでいますが、応募したものではsix apartさんが利用しているサイトカタリストのものになっています。

昨日（2009/06/27）、CSS Nite LP, Disk 6「CMSリベンジ編」に参加してきました。音声や、スライド資料は後々公開されるということですので、個人的に思った感想をそれぞれ。

SOY CMS

管理画面が、HTMLを書き換えるだけで変更出来るというのが素晴らしいですね。CMSの裏側をいろいろと触れれば他のCMSでも可能だとは思いますが、やはりフロント側の人たちにとってはハードルが高いですよねー。
また、開発を行っている株式会社日本情報化農業研究所の古荘貴司社長がイケメンだというのもポイントの一つではないでしょうか。

WebRelease 2

朝から何も食べておらずあまりにもお腹がすいてしまったので、ご飯を食べにいってしまいました。
最後の事例（雑誌媒体をWebで展開したというもの）だけしか聞いていないですが、以前にも思いましたように、「そのサイトがなぜWebReleaseで作られたのか？」が良くわからなかった点は残念です。

CMS Designer

マークアップに興味を持っている自分としては、XML+XSLTで管理されているというのがとても魅力的ですね。デモを見ていると、「それCMSオリジナルの機能にしなくてもXSLTで実現出来るんじゃないかなー」と思った点がありましたが、XSLTの機能自体は全て使えるということですし、XSLTで実装するよりも確かにその方が楽かも！とも思いました。まずは自分でも触ってみたいと思います。

RCMS

セッション開始時にご紹介いただいたように、僕が押し込んだセッションということもありまして、ちょっと熱く。
これを使うと、あらゆることが一般企業のWeb担当者でも実現できてしまうということで、僕たちWeb制作者側の需要が無くなってしまうのではないか？ということを感じた方も少なくないと思います。が、しかーし。

セッションで加藤さんがおっしゃっていましたように、僕たちよりも企業のWeb担当者さんの方が自社のコンテンツに詳しいというのは当たり前ですよね。というか、僕たちはどれだけ頑張ってみても費用や時間の関係で、その会社さんの全てを理解することは出来ないわけです。

Webで情報を発信するにあたって、

• Webで最適に情報を発信するにはどのようなプラットホームが必要なのか？
• どのように表現していけば、コンテンツが魅力的に伝わるのか？
• そもそもWebを使って、どうすれば企業価値や、企業利益を最大限に引き出せるのか？

あたりに、時間をかけていきたいんだけど、実装にコストがかかってしまってそこまで出来ないよ！という方も多いのではないでしょうか？RCMSの機能の豊富さは、このようなことを思う方には救世主となるんじゃないかなーと思います。

a-blog cms

僕は細かいことまで聞かないと理解することができない、という性格もありまいして、このCMSがどのようなことに強みを持っているのか？が、あまり分からなかったです。その点は、7月１０日にa-blog cms紹介セミナー東京がありますので、その時にお伺い出来ればと思います。
※タブメニューを真似たスライドはとても見やすく、今度真似したいなーと思いましたね。

bingo!CMS

はじめにDTPの考え方をもとにCMSを作ったー、というようなことをおっしゃられて、いやーDTPとWebは違うものだしダメだろーと思ったのですが、それをめちゃめちぇ良い意味で裏切っていただいたものでした。ともて直感的にWebを実装／編集できますね！

Jimdo

小規模や、PCにそれほど詳しくない方が運営されていくサイトなどにターゲットを絞ったCMS。出せても10万円だよー、というような案件もありますので、そんな時には率先的に提案して、企画自体に力を注ぐための味方になるのかなーという印象です。

Power CMS for MT

MTを使う、という前提の上では、もはや語ることもなく最強なプラグインですね。
野田さんがおっしゃていたように、「今までの経験をいかしせばいいじゃん／学習コストも結構高くつきますよ」（的なこと）というのも確かに納得。

ということで、CMSは国内だけを見てもさまざまありますが、案件の性質ごとに使い分けが出来ると素晴らしいなーと思いました。

2009年6月27日（土）にCSS Nite LP, Disk 6「CMSリベンジ編」が開催されます。

昨年末には、Movable TypeからWordPressへの移行が話題になったり、最近ではSOY CMSが話題に上がるなど、Movable Type以外の選択肢に視野が広がりつつあります。

そんな状況を踏まえ、WebRelease 2、a-blog cms、SOY CMS、CMS Designer、RCMSの5つの国産CMSにスポットを当て、それぞれの可能性を検証するイベントを企画しました。

とありますように、いろんな制作会社の方とお話をすると、ちょっとした案件でCSMと言えばMovable TypeもしくはWordpressというのが定着した感がありますね。しかし、国産のCMSにも優れたものがたくさんあります。制作／提案の幅を広げる良い機会になるのではないでしょうか。

先日「創る心とおもてなし―　第1回 Webエンジニア料理対決」に参加してきました。もともと料理が好きと言うこともありますし、毎日のようにお世話になっているクックパッドの本社が会場ということで、いろいろと楽しみにしながらの参加でした。

会場に入りますと、ホワイトボードにクックパッドの活躍ぶりとか支持されているレシピたちの絵が書いてあったり、飲み放題のアルコールたちが置いてあったりと、とても楽しそうな職場でしたね。あ、その前に写真はありませんが、クックパッドさんが入っているビルがあまりにもオシャレすぎて本当にここなんですか！？と驚いたりもしました。

で、いざ各チームの料理が始まってみますと、ただ料理を作っているのを見ているのはどうかなー？と思っていましたが、先の飲み放題のアルコールたちの活躍もありまして、結構楽しく見ていられました。Yahoo!チームはコチュジャンベースのオムライス、リクルートチームはタコス、クックパッドチームは餃子を作っていましたが、個人的にはYahoo!チームが優勝でしたね。
その後、Yahoo!／リクルート／クックパッドの方々からのプレゼンもありまして、「おもてなし」ということ軸にしっかりとお勉強のお時間に。
お酒も楽しみ、料理も楽しみ、しっかりとお勉強もしてとても充実した時間でした！

以下ページにて当日のレポートが掲載されています。

• 創る心とおもてなし―第1回Webエンジニア料理対決フォト＆動画レポート（その1）
• 創る心とおもてなし―第1回Webエンジニア料理対決フォト＆動画レポート（その2）

最後に、最近クックパッドを参考に作った料理をいくつか。

2009年04月18日(土)に行われる、WCAN x CSS Nite 2009 SPRINGに出演します。

内容は、2009年2月19日に開催したCSS Nite in Ginza, Vol.31の『CSSレイアウト：IE 6対応のかんどころ』の再演です。2月19日は、若干言葉足らずで伝えきれなかった部分もありましたので、その辺を補おうと思っています。

僕以外にも、「ブランディング」「コーディングワークフロー」「CSS3／jQuery」と、幅広広い内容となっています。ご興味ある方は是非ご参加ください！

2009年4月5日（日）13:00-17:00で行われるSwapSKills 2009　vol.2「次に求められる　Webサイト制作の技術」でお話をさせていただきます。

僕は14:15~15:15で「はじめてのXSLT」として、XSLTに関することを話させていただきます。XSLTが次に求められるWebサイト制作の技術なのかどうかはなんとも言えないというか、実現性は無いかもとも思いますが、XHTML/CSSをある程度こなせるようになったら、次に勉強する技術ということであれば結構しっくりくるのかなと思っています。

また僕自身がXSLTに対する理解が乏しいこともありまして、まさに「はじめてのXSLT」です。すでにゴリゴリ書けますよという方にとってはつまらないものになってしまうと思います。

僕以外の方がお話される内容も結構濃い内容だと思いますので、ご興味ある方は是非ご参加ください！

昨日（2009/02/19）行われたCSS Nite in Ginza, Vol.31でお話をさせていただきました。「IE 6対応のかんどころ」として、技術的な内容でした。

時間が押してしまい最後のほうがしどろもどろになってしまったのですが、それなりにご満足いただけたようで安心しました。

また、結構思い切ってXHTMLを採用する際に、XML宣言を書かないようにということを言ってしまいましたので、もしかしたら反響もあるかと思います。僕の場合は、まぁ書いた方が仕様にそったものであるのは分かっているのですが、作業工数があがってしまうのはクライアントさん的にどうかなーということもありまして、デメリットを説明した上で、書かないということがほとんどです。せっかくCSSレイアウトになって作業効率の向上が実現されたということもありまして、それならば楽出来る部分は一層楽しましょうよということで…。

とは言え、書くのがいけないとはまったく思っていませんので、対応するのはキツいけど、書いた方がメリットあるじゃん！という方は積極的に書いてください！

その後、一ヶ月に1刷のペースで増刷を続けておりまして、現在は4刷となりました！

11/1に行われるCSS Nite ビギナーズの連動書籍が完成しました。

「現場のプロから学ぶXHTML+CSS」というタイトルですが、どんな本なのか？を一言で行ってしまえば、「XHTML+CSSで知りたいことを全部乗せで」という内容になったと思います。

本書の対象読者

• これからWebサイト制作をはじめたい入門者
• サイト制作をはじめて間もない初級者
• CSSスキルをアップデートしたい中級者

(X)HTML やCSSのスキルは、Webサイト制作のもっとも基本となる知識ですが、ノウハウがたくさん蓄積されているぶん、却って体系的に学ぶのが難しい状況にあります。また、ここ数年でCSSデザインがかなり複雑になったことで、ゼロから学ぶにはハードルが高くなってしまった面もあります。
そこで本書は、本格的にXHTML+CSSによるWeb制作を習得したい方から、すでに習得しているけれども「現状の最新スキル」にアップデートしたい方までを対象にして、「現在制作現場で求められる最良のスキルを」「現場・実用からの目線で」「順序よく」「効率的に」習得できるように構成してあります。

本書の効能

• XHTMLとCSSについて、「基本から」きっちりわかります。

  それが実際の制作や実務にどう関わってくるのかをともに知ることで、「生きた」知識として習得できます。

• 「現在必要な」最新かつ最良の知識と、実用なテクニックがわかります。

  CSSのファイル設計や効率的なスタイリング、レイアウトテクニック、トラブル解決などのベーシックな部分を、実務的な観点からもう一度振り返って考えたり、JavaScriptライブラリの活用法なども併せて解説することで、実戦力に直結するスキルが手に入ります。

• 「これから必要になる」Google Chromeなど最新ブラウザへの対応方法や、iPhoneなどPC以外のデバイス用のサイト制作に関する情報も充実しています。

  iPhone/iPod touch、Nitendo Wii、PlayStation Portableなど、ここ1~2年でPC以外のデバイスからWebを閲覧する人口が増えています。さまざまなデバイスにWebサイトを対応させるノウハウは、今後ますます必要とされるでしょう。
  また、ブラウザの新しいバージョンが次々とリリースされたり、Google Chromeなどの新しいブラウザが登場しています。そのような新しいブラウザを射程に入れることも、必要になってくるでしょう。

本書はそのように、「必ず知っておきたいこと」と「今後必要とされること」を現場からの目線で集約したカリキュラムとなっています。

私は、第５章「CSS レイアウト」を担当させていただきました。
書店に並ぶのはもうちょっと先だと思いますが、見かけた際にはお手にとっていただければ幸いです。

Designer meets Designers 04に行ってきました。
セッション内容は以下でした。

1. 「そのサイトがそのデザインである理由」坂本貴史（ネットイヤーグループ（株））
2. 「企業サイト制作時に押さえておきたいデザイン手法」黒須信宏（（株）クロスデザイン）
3. 「企業サイトリニューアルの実践ノウハウ」木下謙一（（株）ラナデザインアソシエイツ）／ 太田伸志（（株）ラナエクストラクティブ）
4. 「企業サイト制作最前線」西野敦彦 （ユナイティア（株））

企業サイト制作のノウハウを入手したい人必見!
近年のトレンドやデザイン、企画、ワークフローなど
知識とテクニックの両面から
Web業界の第一線のゲストがわかりやすく解説します!

ということで、Webサイト構築における上流のお話がほとんどでした。

全体としてはSESSION 1／SESSION 2がとても面白かったです。
それぞれの内容はもちろん面白かったのですが、内容以上に、坂本／黒須さんのプレゼン口調が非常に勉強になりました。
というのも、お互いめっちゃ自信を持って言い切るんですね。
「〜と思います」なんて口調ですと、オーディエンス側としては「えっ、どちらなんですか？」と戸惑ってしまうこともあるのですが、しっかりと言い切っていただけると、聞く側としても頭に入ってきやすいです。

後日の自社案件の打ち合わせにおいても、「言い切る」ことを意識してのぞんだらすごくスムーズに打ち合わせが進みまして、「言い切る」ことの力を実感しましたね。

また、「言い切る」ことというのは、自分の中で自信を持っていないとなかなかできないことです。
自信を持つと言うのはしっかりと知るということでもあり、常に言い切ろうという意識をもつことは、学ぶ姿勢にも変化が出てくるんですよね。

次の日の資料作りなど、タスクが結構残っていた中で強行参加したのですが、とても良い経験ができたセミナーになりました。

今後のalWebクリエーター塾や、CSS Nite ビギナーズでは、「言い切る」ことを心がけようと思います。