CSS-EBLOG

web creators vol.96で1記事執筆しました

2009-11-08T11:39:00Z

web creators vol.96で、「最新WEB配色トレンド2010」という特集の中で 1 記事、執筆しました。

今回はこのブログとはちょっと内容が異なりますが、最新配色トレンド、ということで色に関する記事を執筆しました。
あまりデザイン部分にフォーカスした記事は書かないのですごく緊張しましたが、とてもいい経験になりました。

まだ想定くらいですが、ちょっと素材を配布するようなサイトを立ち上げようかなーなんて思ってます。
その中では Adobe 系のツールの使い方とか、素材の作り方なんかも配信しようかなって思っているので、合わせてデザイン部分にフォーカスした記事も書いていくかもしれませんｗ

web制作勉強会で発表しました

2009-11-01T13:16:00Z

mixi の「ＷＥＢサイト制作勉強会」というコミュで勉強会に参加してきました。
そこでちょっと発表をしたのでそれを公開したいと思います。

といっても、それほど大きい規模のものではないので（参加者 7 人くらい）大したものではありませんがｗ

発表内容は「CSS3で行える面白いこと～ webkitを応援しよう！」です。
個人的に WebKit(Google Chrome, Safari) が大好きなのでもっとみんなで使って広めようぜ！っていうのが趣旨ですｗ

いちおうそのときの様子を web カメラで撮影し、ストリーミング放送をしていたのでそれの録画動画もあるのでよかったら見てみてください。

それから、この勉強会コミュの非公式ブログがあるので、そちらに勉強会時に使用した資料やサンプルなどもあるのでぜひ参考にしてみてください。⇒ 10月17日(土) 勉強会資料 | WEBサイト制作勉強会

感想

こういう勉強会への参加が今回で初めて（かつ発表も初めて）だったんですが、なかなか楽しいもんですねｗ
もともとこういう発表やセミナーなんかはやってみたいなーと常々思っているので、色んな意味で勉強になりました。

ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー

2009-09-30T09:11:00Z

最近紹介ばかりな感じがしますが・・。
ちょっとテクニックの発想に感動したので、解説も踏まえて紹介したいと思います。
ちなみにこのテクニックの元になったのはこちらの CSS Play で紹介されているものです。

まず最初に、概念図を見せます。（クリックで拡大）

クリーン HTML のプルダウンメニューデモ

http://css-eblog.com/eblog_sample/0909/cleanPulldown/

サンプルダウンロード

http://css-eblog.com/eblog_sample/0909/cleanPulldown/download.zip

ネガティブマージンとパディングで余白を相殺

概念図を見てもらうと分かりますが、通常のメニューに対して margin-top にネガティブマージンを、 IE6 で対応している数値いっぱいに設定し、かつ同様の値を padding-top にも設定します。
"モダンブラウザの場合はこれはなくても大丈夫なのですが、IE6 の場合、隠れているプルダウンメニュー部分が隣の要素と重なる、という不具合があるのでこれで解消しています。"

メニューに固定幅と overflow: hidden を設定

そしてリスト要素に対して表示させたい固定幅を指定しつつ、overflow: hiddenではみ出した部分を非表示にします。ここがまずポイント 1 です。

メニューとプルダウンメニューを float で配置

続いて、リスト内の a 要素を左に float させ、プルダウンでマウスオーバー時に表示させたい要素も左に float させます。
これで、なにもしていなければ、単純に最初の a 要素とリスト要素が横に並ぶ状態になります。

ここでポイント 1 が生きてきます。固定幅と overflow: hidden によって、float で並んだ要素のうち、a 要素のみが表示されます。2 カラムのサイトで、右カラムだけ overflow: hiddne で隠れているのを想像すると分かりやすいと思います。（イメージはこんな感じ↓）

:hover でボックスのサイズを変更

ここがポイント 2 です。そして秀逸。
:hover 擬似クラスは IE6 の場合、a 要素以外には対応していません。
無理やり対応させる方法がなくはありませんが、その場合は HTML 的に invalid になってしまいます。
しかし、今回はタイトルの通りクリーンな HTML 実装されているため、しっかりと a 要素に :hover 擬似クラスを使います。

では使われているポイントを見てみましょう。

しっかりと a 要素に :hover 擬似クラスが使われています。
ここで指定されているmargin-right: 1pxは、プルダウンメニューの親（マウスオーバーしたらメニューが表示される部分）の右マージンを拡大する、という処理です。

ではなぜ、こんな処理をしているのでしょうか。
答えは、これを追加することによって、上で書いた overflow: hidden で隠れているリスト要素を "カラム落ちさせる" ことです。
ぴったりと計算したカラムの場合、1px でも width なり margin なりが違うとカラム落ちしてしまいますよね。
これを "あえて" 実行しているわけです。

さて、カラム落ちしたリストはどうなるでしょうか。
overflow: hidden で隠れるのは、幅の部分のみなので当然、カラム落ちしたリスト要素は、マウスオーバーした a 要素の下に来ます（カラム落ち）。

まさにプルダウンメニューが表示されたように見えますね。
しかし、これだけではリスト部分にマウスを移動した瞬間、a 要素のmargin-right: 1pxがなくなってしまうため、また元の位置に戻ってしまいます。

ここが秀逸な部分です。
リスト部分にマウスを持っていくと、当然その先もリンクになっています。
リンクということは a 要素ですよね。
そして、この a 要素にも同じようにボックスのサイズが変わる処理をしておきます。
こんな感じです↓

すると、親に当たる a 要素からマウスが離れても、今度は子要素に当たる a 要素の幅が変わるため、結果的にプルダウンで表示された部分にマウスを移動してもプルダウンしたままになる、というわけです。

さらに秀逸な点

さて、これでテクニックの肝は説明しましたが、このサンプルにはさらに秀逸な点があります。
それは "クリックしてプルダウンを固定することができる" ということです。

上の CSS を見て気づいている人もいるかもしれませんが、ul.sub a:focusやul.sub a:activeにもmargin-right: 1pxが設定されているため、クリックした際にも margin-right: 1px が反映されます。

そのため、クリックするとプルダウン状態が維持される、というわけです。
これを応用すると、クリックで表示させるメニューも簡単に作れそうですね。

注意点

このテクニックの注意点というか、対応できない点として、リストの幅が固定でないといけないため、2 階層以上あるようなプルダウンメニューは作成できません。そのため、ちょっとしたプルダウンなどに使うことが望ましいです。

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

iPhoneでページ最下部へ移動するブックマークレット

2009-09-11T03:23:26Z

iPhone のステータスバーをタップするとページ上部に移動するのは元々用意されているのですが、最下部へ行く方法がありません。（もしなにかやる方法があったら教えてください(;´д｀)）

なので、ちょっとめんどくさいですが自作のブックマークレットを活用しています。
twitter でそんなことが投稿されていたので、もしかしたら誰かの役に立つかなーと思ったので記事にしてみました。
ずばり、以下のスクリプトをブックマークして、それを最下部に移動したいページでブックマークから実行すると、ページの最下部に移動します。

iPhone からのブックマーク登録用リンク

ページ最下部へ

上記のリンクを、iPhone でブックマークして使ってください。

写真を手軽に編集できるWebアプリ - NAVERフォトエディター

2009-09-10T04:50:00Z

今回はちょっと趣旨を変更して、便利そうな Web アプリを紹介したいと思います。
その名も、"NAVERフォトエディター"。

実際に使ってみた感想は、「かなり使いやすい」でした。
レイヤー数に制限はあるものの、写真を編集する、という目的では十分だと思いす。
ちなみに "無料、登録なしで使える" のでとりあえずやってみることができるのでオススメです。

オンラインツールであるため、ブラウザさえあれば写真の編集ができるというのも強みかと。
クライアントで更新をしていく、というような案件の場合で、Photoshop などのツールはないよ、っていう場合なんかに教えてあげると、写真掲載のときなど少しでも見栄えをよくした上で公開できるので重宝するのではないでしょうか。

本家 Photoshop のオンライン版もありますが、こちらはどちらかというと自動補正ツール、というイメージが強いですね。あまり自分で細かくいじれない感じ。

直感的には、NAVER フォトエディターのほうが使いやすいと感じました。

web creators vol.94で7記事執筆しました

2009-08-30T01:46:16Z

web creators という雑誌の「CSSデザイン表現　最新最強テクニック」という特集の中で、7記事ほど執筆しました。

今回は表現テクニック、ということでCSSを使って "魅せる" テクニック満載です。CSS3 を使った最新テクニックや、ちょっとした小技で魅せるテクニックまで、色々なテクニックが揃っています。一読の価値あり！

こういう記事の執筆は初めてだったんですがなかなか楽しいものですねｗ

元々小説を書きたい、なんて思っていた時期もあるので文章を書くのが好きなのです(´ー｀)
できれば本とかも出してみたいけど・・それはきびしいかなぁｗ

ポップアップさせたレイヤーをキャンセルするスクリプト

2009-08-19T09:39:00Z

最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。

これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。

そこで、この "キャンセルだけ" を行うスクリプトを作ってみました。動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。

下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。

ポップアップさせたレイヤーをキャンセルするスクリプトデモ

http://css-eblog.com/eblog_sample/0908/coverobject/

JavaScript ファイルダウンロード

http://css-eblog.com/eblog_sample/0908/coverobject/coverobject.js

キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。

キャンセル用レイヤーの呼び出し

ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。

またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。

キャンセル用レイヤーの消去

上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするテクニック

2009-08-10T01:48:00Z

ドロップシャドウ。いまや web デザインにはなくてはならない要素ですよね。
Firefox や webkit 系ブラウザなんかでは box-shadow が実装されはじめていますが、ないブラウザの場合はどうしても画像で用意しないといけません。

しかしその場合、コンテンツの幅は影の幅を含んだものになってしまいます。
全体を覆う背景がそれであれば、ただ余白の数値を多めにすればいいだけですが、例えば影がある要素とない要素が縦に並んでいる場合、そのまま並べたのでは視覚的に影の分だけずれたように見えてしまいます。

↓こんな感じでずれが生じてしまいます。

今回はこの影の部分のずれを CSS で解消してデザイン通りの幅を確保するテクニックの紹介です。

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするデモ

http://css-eblog.com/eblog_sample/0908/dropshadow_ignore/

サンプルダウンロード

http://css-eblog.com/eblog_sample/0908/dropshadow_ignore/download.zip

テクニック詳細

ネガティブマージンを使う

このテクニックにはネガティブマージンを使います。
上記 CSS のmargin: 0 -8pxの部分です。

この -8px というのが影の部分の幅です。なので、影の具合によってこの数値は適宜変わることになります。
こうしてマイナス値のマージンを与えることで、（感覚的に）影の幅の分だけコンテンツ領域が縮小したことになります。

これにもともと想定していた（影の部分を加算しない）幅をボックスに与えてます。
float して左右に分けているマルチカラムでも、ネガティブマージンによってカラム落ちするのを防ぎます。

最後に、このままだとテキストなどのコンテンツ内容が影の部分にかぶってしまうので padding で適切に余白を取ることによってドロップシャドウを使ったデザインをすっきりと見せることができます。

このテクニックを使うことで、マルチカラムなどのデザインをする際にボックスを意識してあらかじめ小さくボックスを作る、というようなデザインを殺すことがなくなります。

IE 対策

IE の場合、ネガティブマージンを指定すると思ったような表示がされない場合があります。
その場合は "IE6で背景が表示されない際にチェックすること" で紹介している「背景が表示されない要素に「position: relative;」を指定」を利用します。

これで IE 含め、ドロップシャドウの部分だけを無視させてデザイン通りに表示することができるようになります。

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

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

2009-07-02T06:07:00Z

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

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

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

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

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

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

余談

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

Firefox の過去バージョン

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

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

Safariに搭載されているwebインスペクタで新規スタイルを適用する方法

2009-06-28T11:42:00Z

Safari や Google Chrome などの、webkit 系ブラウザに搭載されているwebインスペクタ。
Firefox のエクステンションである Firebug に比べると、やや使いづらいイメージがあります。（なんというか、直感的に使えない感じで。慣れの問題だとは思いますが）

さてこの webインスペクタ、Firebug みたいに閲覧中の CSS が追加できなくて不便だなーと思っていたんですが、どうやら CSS を追加することはできるようです。

まずは新規スタイルを適用したい要素をピックアップ

やり方は、ちょっと分かりづらいんですが、まずはinspect（）ボタンで CSS を変更したい要素を選択します。（このボタンが搭載されているのは Safari4, Google Chrome2 以上のようです。それ以外の ver では、調べたい要素上で右クリックして出てくるメニューの "要素の検証" を選ぶことですぐに調べたい要素がクローズアップされるようです）

適用されているスタイルを確認する

選択すると右側に適用されているスタイルの一覧が表示されます。スタイル一覧の中で、class セレクタや ID セレクタで指定されているスタイルのオン・オフができます。

スタイルを修正する

このプロパティの部分をダブルクリックすると編集状態になります。ここで値を変更すると内容が書き変わるわけですね。ただ、これではすでに指定されているものを変更するだけにしかなりません。

ここが肝心、新規スタイルを追加する

しかし、そこは "1 行の CSS エディタだ"、と思って見ると分かりますが、セミコロン;の後に続けて他のプロパティを指定し、Enter キーを押すと、そこで記述した内容が追加されるのです。

色々調べても、新規で追加する方法が見つからなくて諦めていたのですが、これでずいぶんと Safari などでのチェックが楽になりました。

Firebug のように、完全に新規で追加できるわけではないものの、大体の場合において class セレクタか ID セレクタから継承を受けているので指定に困ることは少ないと思います。

IE6でも簡単に角丸ボックスが作れるJavaScript - 「curvyCorners」

2009-06-26T03:05:00Z

今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」

このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。

指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。

導入の仕方

導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。

イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。

また、指定する要素には CSS セレクタのように指定します。（ただし、+ や ~ などの複雑なセレクタには対応していないようです）
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。

複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。（ex. #test1, #test2）

各ブラウザで先行実装しているCSS3プロパティまとめ

2009-06-22T06:35:00Z

色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。

漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。

webkit 系

(*) は CSS3 で定義された値

項目をクリックすると、詳細が表示されます。

-webkit-background-size

[使い方] -webkit-background-size: 40px 20px;

背景画像のサイズを指定します。横縦の順で記述します。
-webkit-background-origin
[使い方] -webkit-background-origin: padding;

上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。
- border （ボーダーまで含めたボックスサイズで算出）
- padding （パッディング領域まで含めたボックスサイズで算出）
- content （コンテンツ領域のみのボックスサイズで算出
-webkit-background-clip
[使い方] -webkit-background-clip: padding;

背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。
- border （ボーダーまで含めたボックスサイズで背景画像を描画）
- padding （パッディング領域まで含めたボックスサイズで背景画像を描画）
multiple background

[使い方] backgorund-image: url(sample.png), url(sample2.png)...;

CSS3 では背景画像を複数指定することができるようになりました。
カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。（それぞれ書かれた位置が画像と対応します）
-webkit-border-image

[使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];
-webkit-border-radius
[使い方] -webkit-border-radius: 5px;

ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
- -webkit-border-top-left-radius: 5px;
- -webkit-border-top-right-radius: 5px;
- -webkit-border-bottom-left-radius: 5px;
- -webkit-border-bottom-right-radius: 5px;
-webkit-box^*

[使い方] display: -webkit-box;

この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。
-webkit-box-flex

[使い方] -webkit-box-flex: 1;

display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。
-webkit-box-ordinal-group

[使い方] -webkit-box-ordinal-group: 1;

display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）
-webkit-box-shadow

[使い方] -webkit-box-shadow: 2px 2px 5px black;

左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
text-shadow

[使い方] text-shadow: 2px 2px 5px black;

左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。
-webkit-text-stroke
[使い方] -webkit-text-stroke: 2px blue;

テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。
- -webkit-text-stroke-width
- -webkit-text-stroke-color
-webkit-text-fill-color

[使い方] -webkit-text-fill-color: white;

テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。
-webkit-box-sizing

[使い方] -webkit-box-sizing: content-box [,border-box];

ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。
-webkit-transition-property

[使い方] -webkit-transition-property: color, background-color;

transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。
-webkit-transition-duration

[使い方] -webkit-transition-duration: 0.5s;

transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。
-webkit-transition-timing-function
[使い方] -webkit-transition-timing-function: ease-in-out;

transition の変化の具合を設定します。指定できる値は以下の通りです。
- default
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier() 4つの数字をカンマ区切りで指定
-webkit-gradient()^*

[使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )
-webkit-box-reflect

[使い方] -webkit-box-reflect: below [0px -webkit-gradient()];

生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。

指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。
-webkit-mask-box-image

[使い方] -webkit-mask-box-image: url(mask.png);

透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。

-webkit-transform

[使い方] -webkit-transform: rotate(45deg);

生成されたボックスを変形(transform)させます。
指定できる値は次の通り。

rotate(deg)	回転（deg で指定。30deg など）
rotateX(deg) rotateY(deg)	横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。（deg で指定。30deg など）
scale(xy[x,y])	拡大・縮小（数値を指定。1 や 0.5 など）
skew(deg)	スキュー(シアー)（degで指定。30deg など）
translate(xy[x,y])	移動（px で指定。30px など）
perspective(deg)	遠近感（数値で指定）

-webkit-transform-style
[使い方] -webkit-transform: preserve;

上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
指定できる値は次の通り。
- flat （2D 表示）
- preserve-3d （3D 表示）
-webkit-transform-origin

[使い方] -webkit-transform-origin: X Y Z;

transform の基準点を指定します。
-webkit-backface-visibility

[使い方] -webkit-backface-visibility: hidden;

rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。
@font-face

[使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');

サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
※使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります。

Mozilla 系

-moz-max-content(etc.)
[使い方] width: -moz-max-content

幅（width）の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。
- -moz-max-content （コンテンツが取り得る最大幅）
- -moz-min-content （コンテンツが取り得る最小幅）
- -moz-available （表示に利用可能な幅）
- -moz-fit-content （内容にフィットさせた幅）
-moz-border-radius
[使い方] -moz-border-radius: 5px;

ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。（webkit 系と指定方法が異なるので注意）
- -moz-border-radius-topleft: 5px;
- -moz-border-radius-topright: 5px;
- -moz-border-radius-bottomleft: 5px;
- -moz-border-radius-bottomright: 5px;
-moz-background-inline-policy
[使い方] -moz-background-inline-policy: bounding-box;

インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。
- bounding-box （インライン要素全体に対して背景画像を繰り返し表示する）
- each-box （行ごとに背景画像を繰り返して表示する）
- continuous （前の行の繰り返しを引き継いで背景画像を表示する）
-moz-box^*

[使い方] display: -moz-box;

この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。
-moz-box-flex

[使い方] -moz-box-flex: 1;

display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。
-moz-box-ordinal-group

[使い方] -moz-box-ordinal-group: 1;

display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）
-moz-box-sizing

[使い方] -moz-box-sizing: content-box [,border-box];

ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。
-moz-transform

[使い方] -moz-transform: rotate(45deg);

詳細については -webkit-transform を参照してください。
-moz-transform-origin

[使い方] -moz-transform-origin: X Y;

transform の基準点を指定します。

Opera 系

-o-background-size

[使い方] -o-background-size: 50% 50%;

背景画像のサイズを指定します。横縦の順で記述します。
text-shadow

[使い方] text-shadow: 2px 2px 5px black;

左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

その他

rgba

[使い方] background-color: rgba( 0,0,0,0.5 );

透明度を持った色を設定します。左から RGB 値を指定し、最後に 0～1 の間で透明度を指定します。（0 で完全な透明になります）

参考にした記事

builder by ZDNet Japan より

The Art of Web より

CSS: Transition Timing Functions

装飾用divを劇的に減らせるCSS3プロパティとテクニック

2009-06-20T00:55:46Z

以前の記事の HTML5で組んでみたに続いてサンプルがまったく一緒ですがｗ
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素（主に div）を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]

結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。（一概に減らせばいい、というものでもありませんが）

※ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系（Safari や Google Chrome など）のみということもあり、正常に表示されるのは webkit 系だけとなってます。

無駄なHTML要素がどこまで減らせるか実験してみたデモ

http://css-eblog.com/eblog_sample/0906/css3_test/

今回の実験の説明

個人的にアツイと思った CSS3 プロパティ・値

border-image: ...
display: box
box-flex: 1
background: ...
box-shadow: ...
box-sizing: border-box

CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめでまとめています。

簡単に説明すると、

HTML5 の新要素により、div を使う機会が減った

まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。

border に画像が使用できる「border-image」

ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。

つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。

簡単にカラム同士の高さを揃えられる「display: box」

こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。

そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。

それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。

背景画像を複数指定できるようになった CSS3

現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。

上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。

これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。

100% の要素内でも固定幅を持ったように要素を配置するテクニック

ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。

このテクニックの肝は、float,position,marginの 3 つです。

設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。

こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。

最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。

つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。

今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。

まとめ

以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。

まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。

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

CSS Nite in Ginza, Vol.36に行ってきました

2009-06-19T00:49:07Z

昨日(06/18)は "CSS Nite in Ginza, Vol.36" に行ってきました。CSS Nite in Ginza, Vol.36 の詳細はこちら

今回のテーマは "インフォメーションアーキテクトの過去、現在、そして未来" というものでした。講師は "佐藤伸哉" さん。

セミナーで使用されたスライドは後日公開されるようですが、セミナーのスライドで紹介されたリスト化された項目をピックアップ。

一般的な IA のタスク

市場調査、競合調査、ユーザー分析
ペルソナ
ユースケース、ユーザフロー
フューチャー、コンテンツリスト
ハイレベルサイトマップ、コンセプトモデル
ワイヤーフレーム
詳細なサイトマップ
機能要件定義書、仕様書
ページデザイン（コンポーネント設計）

よくある問題点

スキルの問題
PM と IA の兼務は判断基準が不安定になるため望ましくない
- メイン：PM　サブ：IA の人はスケジュール重視になりがち
- メイン：IA　サブ：PM の人はクオリティ重視になりがち
チーム内で最も経験がある人が IA になると良い
規模に応じたアサインがされていない現状
案件が適切ではない

まとめ

IA には領域（情報アーキテクチャ）と役割（インフォメーションアーキテクト）がある。
IA の役割は時代とともに変化してきている
IA は情報設計だけではない
IA はユーザの経験を設計するのが目的
IA の対象は Web だけとは限らない
情報の表示された、その先の（設計という意味での）デザインも必要

アフターパーティにも参加してきました

セミナーの後、懇親会という感じでアフターパーティがあります。そこに参加してきました。
なかなか同じ立場の人と会ったり話したり、という機会がないのでとても楽しかったです。

そこで色々な人と名刺交換してきました。が。
名刺をたくさん持っていこうと思って用意しておいたのに、忘れてきたことに気づき・・。ほとんどの人に名刺を渡せませんでした(;´Д｀)（もらうばっかり・・）

次回参加するときはそれを肝に銘じてしっかりと名刺を持って行こうと思います(´･ω･｀)

アフターパーティでは、サイバーガーデンの益子さんもいらしていたんですが、話すきっかけが掴めず、結局一度も話せず・・orz

ちなみに、いまだにこれ以上の本を見たことがないのですが、自分のバイブルにしている "Web標準の教科書─XHTMLとCSSで作る“正しい”Webサイト" の著者です。

Web標準の教科書

余談

アフターパーティでは、Sugamo.css の主催者の Sig. さんとお知り合いになりました。
今度やるから参加しない？　と誘われたんですが、時間的に都合がつくか怪しい・・。
でもなかなか興味深いイベントです。
月 1 回くらいの頻度でやっているみたいなので、いずれは参加したいな。（第 4 回 Sugamo.css の様子）

余談2

ちなみに、こういったセミナーというか、イベントみたいのやるよーって言ったら参加したい人とかいたりするのかな・・ｗ

HTML5で組んでみた

2009-06-18T04:55:00Z

タイトル通り、HTML5 の勉強、ってことでこのブログのトップを HTML5 でテスト的に組んでみた。

組んだ感想。すげーやりやすい。

section など、div よりもより意味のあるタグが追加されたことで、視覚的にも分かりやすいし、section section {}のように入れ子を表現しても div のように変になりづらいというのも利点。

HTML5 で組んでみたのサンプル

http://css-eblog.com/eblog_sample/0906/html5_test/

そして全然関係ないけど、今回の HTML5 で組むことで、なんだかかなり色々なことに気づけたｗ（コーディングのノウハウ的なので）

IE で HTML5 を使う際の注意点

IE は正式に HTML5 には対応していないので、そのまま使用すると、CSS が反映されない。（section { display: block; }などとしても無視される）

なので IE 向けに HTML5 を使うにはちょっとした工夫が必要です。といっても大したことしないけどｗ
以下のように JavaScript を使用して、該当の（section などの）要素を生成することで CSS が反映されるよーになります。

今回使ってみた新要素

header
footer
section
nav

上記以外で使えそうなのとしては

article
dialog
audio
video
canvas

なんかがメインで使うものかなーなんて思ってます。
ただどれも、現在はまだ草案の段階なので仕様や実装が変わる恐れもあるので注意です。
HTML5 についてはこちらのサイトが詳しいです。

HTML4(と XHTML) との違い

まず大きな違いは DOCTYPE 宣言。HTML5 では<!DOCTYPE html>と書きます。システム識別子、公開識別子が取り払われてとてもシンプルになってますｗ

次に、今までは文字コードの設定は<meta http-equiv="content-type" content="text/html; charset="utf-8">を使っていましたが、HTML5 からは<meta charset="utf-8">となります。

余談

ちなみに上記のサンプルページ、IE6 で見るとちょっと面白いことに・・ｗ

CSS-EBLOG

web creators vol.96で1記事執筆しました

web制作勉強会で発表しました

感想

ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー

クリーン HTML のプルダウンメニュー デモ

サンプルダウンロード

ネガティブマージンとパディングで余白を相殺

メニューに固定幅と overflow: hidden を設定

メニューとプルダウンメニューを float で配置

:hover でボックスのサイズを変更

さらに秀逸な点

注意点

iPhoneでページ最下部へ移動するブックマークレット

iPhone からのブックマーク登録用リンク

写真を手軽に編集できるWebアプリ - NAVERフォトエディター

web creators vol.94で7記事執筆しました

ポップアップさせたレイヤーをキャンセルするスクリプト

ポップアップさせたレイヤーをキャンセルするスクリプトデモ

JavaScript ファイルダウンロード

キャンセル用レイヤーの呼び出し

キャンセル用レイヤーの消去

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするテクニック

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトする デモ

サンプルダウンロード

テクニック詳細

ネガティブマージンを使う

IE 対策

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

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

余談

Firefox の過去バージョン

Safariに搭載されているwebインスペクタで新規スタイルを適用する方法

まずは新規スタイルを適用したい要素をピックアップ

適用されているスタイルを確認する

スタイルを修正する

ここが肝心、新規スタイルを追加する

IE6でも簡単に角丸ボックスが作れるJavaScript - 「curvyCorners」

導入の仕方

各ブラウザで先行実装しているCSS3プロパティまとめ

webkit 系

Mozilla 系

Opera 系

その他

参考にした記事

builder by ZDNet Japan より

The Art of Web より

装飾用divを劇的に減らせるCSS3プロパティとテクニック

無駄なHTML要素がどこまで減らせるか実験してみた デモ

今回の実験の説明

個人的にアツイと思った CSS3 プロパティ・値

HTML5 の新要素により、div を使う機会が減った

border に画像が使用できる「border-image」

簡単にカラム同士の高さを揃えられる「display: box」

背景画像を複数指定できるようになった CSS3

100% の要素内でも固定幅を持ったように要素を配置するテクニック

まとめ

CSS Nite in Ginza, Vol.36に行ってきました

一般的な IA のタスク

よくある問題点

まとめ

アフターパーティにも参加してきました

余談

余談2

HTML5で組んでみた

HTML5 で組んでみたのサンプル

IE で HTML5 を使う際の注意点

今回使ってみた新要素

HTML4(と XHTML) との違い

余談

クリーン HTML のプルダウンメニューデモ

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするデモ

無駄なHTML要素がどこまで減らせるか実験してみたデモ