Wednesday, February 17, 2010
CSSを学ぶためのおすすめ4冊
Wednesday, November 26, 2008
カテゴリー：CSS
CSSの勉強をする方法は、色々ありますね。
一番簡単な方法は、webを彷徨うことだと思います。生きてるソースを見て盗んだり、解説サイトを見たり…。
でも、やはり、書籍を読む事で基本的な情報を手に入れる事も大切だと思います。
そこで今回は、CSSデザインを勉強したい人から会得したい人におすすめの4冊を紹介します。
テーブルデザインから脱却したい人は…
今までテーブルデザインをしてきていて、CSSに挑戦したいと思っている人におすすめなのは、「スタイルシートスタイルブック」。
この本のいいところは、「本当に私なんかでもCSSデザイン、できちゃうのかしら？」という一抹の不安を優しく解消してくれるところです。
テーブルデザインしか知らなかった5年前の私が、CSSデザインのサイトを初めて作ることにした時、最初の一日目は、この本を読む事から始めました。
最初にCSSで何ができるのか、どういう効果が得られるのかを「CSS zen garden」などを紹介しつつ、わかりやすく解説してあります。
CSSすごい！なんでもできちゃう！というのを体感させた上で、CSSデザインの解説になるのですが、いきなりCSSだけのデザインに挑むのではなく、テーブルデザインも利用したハイブリッドデザインでの方法が詳しく記載されています。
いきなり全部は辛いけど一部だけなら…、ここができたから今度はこちらも…、とやっていくうちに最後はCSSだけでのデザインができるようになっているこの構成。素晴らしいです。いつの間にやら抵抗感がなくなり、なすがままになっちゃうマタタビのようです。
残念ながら、最近webの世界に来た人には、丁度テーブルデザインからCSSデザインに時代が移行し始めた頃の本なので、ハイブリッドデザイン以降のページは必要ないですね。
でも、とっかかりの本としては、敷居の低い良書と言えるでしょう。
CSSで一通りデザインはできるんだけど物足りないと思ってる人に…
CSSデザインにも一通りなれてきたものの、本当に自分のやり方でいいのだろうか？と疑問、不安を持っている人におすすめするのは、「ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))」。
前述の本の続編です。
CSSファイルを分割することでメンテナンス性を高める方法、ガイドラインを用いたCSSの書式の方法、主要なカラムデザイン別のCSSレイアウト法などが詳しく書かれています。
CSSを効率よく使う事を意識した時に読むと、確実に知識が身に付く本です。
リファレンスブックの決定版が欲しい人は…
正直仕様書を読めば、疑問も何もかも解消しちゃうんですけど、やっぱりまだまだ仕様書を読むという行為に慣れない、挑めない、挫折した人をはじめ、もちろん仕様書読んだけど、自分の解釈に不安のある方などなど、webのマークアップに関わるすべての人が一度目を通しておいた方がいいなと思うのは、「Web標準の教科書」です。
CSSだけのリファレンスブックやhtmlのリファレンスブックはあるのですが、両方を掲載していて、かつ現在のCSSデザインでの必要不可欠な内容を網羅している点がいいです。
DTD宣言、meta情報などDreamweaerが吐き出してくれるものが気になっている人は、この本を読めば大きく理解が進むと思います。ボックス要素かインライン要素かなどもわかりやすく書かれているので、作業でちょっと困った時に使える一冊です。
これ一冊あれば問題ない。
まあ色々今まで書いてきましたが、何冊も読むの面倒くさいですよね。それをこの一冊が解消します。
「現場のプロから学ぶXHTML＋CSS」。
９章にわたって基礎情報から始まり、トラブルシューティングまで、個別で書かれる事はあっても、一冊にまとまっていなかった内容がすべてこの一冊に凝縮されています。
これ以上の本は、早々出てこないんじゃないでしょうか。
個人的におすすめの章が、「第５章：CSSレイアウト」と「第８章：JavaScriptライブラリとCSS」の２章。
第５章は、レイアウト法だけではなく、視覚的に表現されていない部分のCSSの書き方や、リンク部分のクリッカブル範囲を広げておく方法など、アクセシビリティを視野においたマークアップに必要になってくる「気遣い」の部分もフォローされているところが素晴らしいです。
第８章は、デザイナが苦手としがちなJavaScriptを分かりやすく解説している点と、ライブラリーを利用することで簡単に動的なデザインを生む事ができるのを丁寧に書いていることで、苦手意識を低下させることができていると思います。
大阪で2009年1月17日（土）に開催される「CSS Nite Beginners」にご参加される方は、ぜひ一度目を通しておけば参加価値が一層アップするでしょう。
一応、基本的なことから書かれているのですが、本当のずぶの素人には、残念ながらちょっと敷居が高いと感じますので、CSSで何ができるのか？から始める人には、やはり一冊目の「スタイルシートスタイルブック」でCSSデザインの雰囲気を理解してから、この「現場のプロから学ぶXHTML＋CSS」を読めば問題ないんじゃないかな？って思います。
以上４冊をおすすめしてみましたが、結局のところ私が読んだ本って、上記と「ユニバーサルHTML/XHTML」、「スタイルシートサンプルブック」だけなので、数冊だけ読めばそこそこマークアップできますよ、ということで。
インクルーシブデザインワークショップが無事終了しました！
Saturday, November 22, 2008
先日19日、リクリと京都大学情報学研究科のインクルーシブデザインユニットとの共同主催で行ったイベント、「インクルーシブデザインワークショップ」が無事終了しました。
今回も快く会場を貸してくださった、デジタルハリウッド大阪校さんに感謝いたします。
インクルーシブ＝巻き込む
インクルーシブデザインとは何か？ですが、詳しくはインクルーシブデザインユニットの概要ページを参考にしてもらうとして、簡単に言うと、普段の身の回りに存在するデザインされた物・事の対象として、あまり積極的に取り入れられない障害者や高齢者、幼児の意見をメインストリームにインクルーシブ＝巻き込んでデザインすることです。
ユニバーサルデザインと一緒じゃないのか？って思ってたんですけど、ユニバーサルデザインは、ターゲットが誰かが明確でなくなり、具体的な解決が見つからなくなるとのことです。
ワークショップの流れ
ワークショップは、6~7人で作ったグループに分かれて作業します。それぞれにリードユーザとして障害をお持ちの方が入り、そして進行をつとめるファシリテータ、塩瀬先生の元で勉強をしてらっしゃる学生さんが入ります。
まずは、リードユーザさんにテーマに対しての質問をしていき、気になったことをどんどん付箋に書いていきます。
ある程度付箋がたまったら、アイデア出し。奇想天外でありえないと思えるアイデアでも、批判はしないことが大切とのことで、出て来たアイデアをイラストにしていきます。
次にイラストを基にプロトタイプを作成。プロトタイプは、できるだけ実物大で作成するのが大切だそうです。
そして最後に、プレゼンをするという流れです。
携帯電話をインクルーシブデザインする
今回はリクリとの共同主催ということで、webに近しい存在の携帯電話がテーマでした。
携帯のメニューやモバイルサイトをテーマにするのかな？と最初は思ったのですが、いきなりソフトの話をするよりも、まずは外側ということですね。
私のチームのリードユーザは、視覚障害をお持ちのS川さん［誰］。S川さんは普段から携帯電話をよく利用されていて、かつPCやwebなどにも詳しい、知識が豊富な方です。
目の前で初めて繰り出されるS川さんの携帯操作を目の当たりにして、我がチームは興味津々。
始めはどこに携帯を仕舞ってますか？という質問から始まったのですが、いつの間にやら、メールはどうやって？とかメニュー操作ってどうやってわかるの？…などなど、web人間らしくソフト面の話で盛り上がってしまい、脱線しまくり…。
残り時間あと１０分で、ようやくプロトタイプ作りに入ったのでした…。
イヤフォン内蔵なら良音質でいいんじゃない！
「イヤフォンなら雑踏でも聞こえやすいけど、わざわざ付けるのが面倒くさい」という点をフィーチャーして、それに耳に近い二の腕なら着信音が聞き取りやすいという意見も混ぜて、二の腕常時装着型イヤフォン内蔵携帯というなかなか近未来的？！な携帯電話になりました！
- 他にも電波の本数は音声読み上げされない→バイブレーションで分かるようにしよう
- 機種が変わったらその都度操作を覚えないといけない→任意のソフトがインストールできてカスタマイズできる
- 短縮電話はあまり使わない→動作のショートカットボタンに変えよう
という感じで、ソフト面も充実しております。
プロトタイプでは伝わりづらいですけど。
あとは、順次プレゼンをしていき、時間もオーバーしていたのでお開きに。どのチームも若干かぶるアイデアはあっても、まるっきり一緒ということもなく、個性あふれる携帯電話が誕生したのでした。
って正直に言うと、自分のチームの準備をギリギリまでしてしまい、大まかには聞いていたのですが、ちゃんと他のチームの発表を聞けてませんでした。すみません＞＜
やっぱり、ちゃんと時間通りにしないといけませんね…。
意識しないで会話できれば…
今回、初めて視覚障害の方とお話したり一緒に作業した感想は、目が見えないだけで何もかわらないんだなーと言う事でした。
まあ、当たり前じゃんと思うでしょうけど…。やはり実感しないとわからないものです。
ワークショップが始まる前に、塩瀬先生から「話に熱中するとコソアド言葉が多くなってしまうので、それだけは注意してください」と言われていたので、その点だけは注意して話していてもやっぱり、パーッ、ザーッなどの擬態語を使ってしまいました。難しい…。
でも！作業中、同じチームの西畑さんが、イヤフォンを耳に付ける動作と擬態語を使ったのですが、それまで一緒に会話をしていたことでS川さんにはちゃんと理解して頂けていたのが、一体感を感じれて嬉しかったです。
我がチームの学生さんK川さん［誰］と終了後お話したとき、どうやったら目の前のことを上手に伝えられるか意識してしまって上手に会話できなかったことを伝えたのですが、K川さんが意識してはいけない普通に喋りなさいっていつも言われるんですと仰っていたので、次回参加の際には上手に喋れたらいいな、と。
あと、他のチームの発表中もK川さんが、逐次他のプロトタイプの形状を言葉と携帯のモックをS川さんに持ってもらい説明していた姿が、印象深かったです。
自然とフォローできるってカッコいいですね。
次回は土日でwebサイト？
ワークショップというのは、自分から率先して動いてナンボなので、時間があっという間にすぎてしまい、もう終わっちゃった！もっとやりたい！という感覚でした。
今回は平日ということもあって、土日なら…という意見もあるとのことで…。なので、次回は土日にwebサイトのインクルーシブデザインワークショップができればいいなあ。頑張って協力していきますー。
ちゅーわけで、一仕事終えたので、のんきに渡米してきます。
CSSの書き方に注意していこう。
Monday, November 17, 2008
右図のようなページがあったとします。
id「nav」を付加しているdiv内にあるナビゲーションのリストを、どのようにcssで表現しますか？
大まかに４つの方法。
書き方は色々あると思いますが、以下の４つの方法に分けられると思います。
１、各liに対してidをつけることで、それぞれのリストを表現する
li#top {
color: #FFF;
}
２、idを付加したdivでulを囲み、各liにclassを付加する
div#menu ul li.top {
color: #FFF;
}
３、ulにidを、各liにclassを付加する
ul#menu li.top {
color: #FFF;
}
４、各liにclassを付加する
div#nav ul li.top {
color: #FFF;
}
４つの書き方の解説。
１、まず初歩的なやり方として、各liにidを付加するやり方。
この場合のhtmlはあまり汚れることがないのですが、idを利用していることで、ページ内で２度目の出現が許されないのが、難点です。
例えば、「div id="footer"」に見た目は違うけど、内容が同じナビゲーションをつけたいと思った場合、再度idもしくはclassを付加して表現しないといけなくなります。
２、cssに慣れてきた頃によくあるdivを作ってその中で展開してしまうパターン。
確かにdivで囲んでしまえば大概のことはできてしまいますが、divばかりが増えて、htmlが汚くなってしまうのが難点。
３、２の状態から少し進化した形。
htmlの要素に対して、idやclassを付加することに臆しなくなるとしめたものですね。
４、最後に外の大枠で括っているdivを利用して指定する方法。
「div id="nav"」内に２つのリストが必要な場合は、３の方法をとらざる得ないですが、もし「div id="nav"」内に１つのリストだけが存在する場合は、４の方法がよりhtmlを汚すことなく表現でき、かつ拡張性も高いので望ましい形と言えます。
以上４つのやり方を書きましたが、cssレイアウトをしていく中で、３か４の方法を身につけて行けばいいと思います。
メンタマ＋Altで、その他レイヤー非表示
Friday, November 14, 2008
昨夜Photoshopで作業していて、見つけたtipsをメモ。
レイヤーパネルのメンタマをAltキー（Macだとoptionキー）を押しながらクリックすると、該当レイヤー以外のレイヤーがすべて非表示に。
おおーと思ったけど、あんまり使うことなさそうな気がします…。
インクルーシブデザインワークショップ、いかがですか？
Wednesday, November 12, 2008
リクリのイベント情報でも書きましたが、来週、11月19日（水）に インクルーシブデザインワークショップ をデジタルハリウッド大阪校にて開催します。京大のインクルーシブデザインユニットさんと共同主催という形で今回は、「携帯電話」を障害をお持ちの方々と共にリデザインしようという企画です。
webをやってるとユーザビリティやアクセシビリティなどなどが気になってくる訳で、どんな人にでも快適にwebを利用してもらおうと頑張っちゃう訳ですが、実際自分以外の人がどうやってwebやらその他の物に触れているのか想像するだけで実感したことがないわけです。今回は、その実感ができる貴重な体験になること間違いないでしょう。
というわけで、平日の18時30分スタートというお仕事している人には、ちょいと時間の調整が難しいかもしれませんが、興味のある人は、ぜひともご参加いただけると嬉しいです。
参加申し込みは、cotocotoお申し込みページにて行っております。
自由変形時の単位を変更する
Monday, November 03, 2008
自分では普通に使用していたPhotoshopの機能を知らない人が周りにいたので、メモしておきます。
自由変形の際に高さと幅のデフォルトが%なので、それを他の単位にする場合は、入力欄で右クリックすることで、pixel、inch、cm、mm、point 、pica、%と単位を選択できるようになります。
昔からある機能だったと思うのですけれど…。
Ｍｙスニペット コメント編
Thursday, October 30, 2008
カテゴリー：CSS,Dreamwever,WEB
今回は、HTMLファイルやCSSファイル内でよく使うコメントのスニペットです。
DIVの終了タグ前に配置するコメント：IDセレクタ用
HTML内では多くのDIVが使用されるので、どのDIVの終了タグかをわかりやすくするために使用します。
コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。
<！-- / div#selector_name -->
DIVの終了タグ前に配置するコメント：CLASSセレクタ用
ID用と何が違うかって、divあとが「#」か「.」かだけなんですけどね。ちょっとしたことだけど、これで分かりやすくなります。
コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。
<！-- / div.selector_name -->
width（及びheight）のオリジナルサイズを記載しておく
%で指定してると必要ないんだけどね。そうじゃない場合も往々にしてあります。
paddingを使用した際に、想定していたwidthの値がpaddingにとられちゃいますね。で、もし再度paddingを設定し直すことがあったときに、わざわざ足し算したりするのが面倒くさいので、このコメントを入れておいてオリジナルサイズを分かりやすくしておきます。
/* original size = ***px */
主張したい説明を挿入する
長めの説明文を入れたいときに使います。
/*---------------------------------------------------
せつめいぶん
-----------------------------------------------------*/
プロパティを書く順序ヒント
プロパティを書く順序をサイト内で決めておけば、他人が触ることになったときに少しは見やすくなります。そのための順序アンチョコ。
/* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * */
CSSのコードの最後に表記しておく
Dreamweaverで1000行を超えるcssを書くと急にぶっ壊れる現象が起きたことがあって、どこまで読み込んでいるのかわからなくなったことがあったので、とりあえずここが最後ですよ、という目印をつけておきます。
/*EOC*/
好きなものと分かれる準備をしよう。
Wednesday, October 29, 2008
カテゴリー：その他
さて。リニューアルも終わったので、ようやくしようと思ってたことを。
今年いっぱいで会社を辞めることになりました。
2002年に入社したので6年ちょっと、そして出向になって今の現場で5年半働いてきました。
引き継ぎをちゃんとしないといけないのですが、予想外に日々が忙しすぎて、満足な引き継ぎなどができない状態で今に至ります。
残していくものに何ができるのか。
そう考えたときに、このblogを使って、普段実務でやっていること、主にコーディングをやっているので、CSSの書き方やルール、Dreamweaverの便利な使い方など、伝えられるものを可能な限り伝えようと考えました。
これからWebの技術を勉強しようと考えているスタッフもいます。そういう子たちに少しでも、Webを身近に感じてもらえるようになれば幸いです。
[書き忘れていたので、追加情報]
今年いっぱいなのは、いっぱいなのですが、有給を消化しないといけないので実務は11月7日をもって終了です。
リニューアルしました
Wednesday, October 29, 2008
カテゴリー：その他
ようやく、MTのデフォルトデザインから脱却しました！
はまえつ先生のおかげです。
ありがとうございました！
実はコメントがうまく作動してなかった！
んで。コメントしないでくださいー。
かけるようになりました！ぜひご利用ください！！
このブログを購読