CSSの最近のブログ記事
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」、「スタイルシートサンプルブック」だけなので、数冊だけ読めばそこそこマークアップできますよ、ということで。
coyummy
Monday, November 17, 2008
カテゴリー：CSS,WEB
右図のようなページがあったとします。
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レイアウトをしていく中で、３か４の方法を身につけて行けばいいと思います。
coyummy
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*/
coyummy
Tuesday, September 30, 2008
カテゴリー：CSS,Dreamwever,WEB
今回は、CSSのファイル用に登録しているスニペットを公開します。
使えそうなのがあれば、ご自分のスニペットに登録して、手間を省くと楽チンです。
自分はこんなのスニペットにしてますよ！ってのがあれば教えてください。
リセット設定用
/* RESET */
html,body,div,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
pre,form,p,blockquote,fieldset,input {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,
pre,code,address,caption,cite,code,em,th {
font-size: ***;/* 好みのフォントサイズを入力 */
font-weight: normal;
font-style: normal;
}
html {
overflow-y:scroll;
}
ul,ol {
list-style: none;
}
fieldset,img {
border: none;
}
caption,th {
text-align: left;
}
img,abbr {
border: 0;
}
clearfix
div {
zoom: 1;/*for IE 5.5-7*/
}
div:after {/*for modern browser*/
display: block;
visibility: hidden;
clear: both;
height: 0px;
line-height: 0;
font-size: 0em;
content: ".";
}
dtとddを横並び
dt,
dd {
margin-bottom: **px;
}
dt {
float: left;
}
dd {
margin-left: **px;
}
hrを装飾
hr {
border-top: 1px dotted #999;
border-right: none;
border-bottom:1px solid #FFF;
border-left: none;
width: **px;
margin: 0px auto;
}
min-height IE対応版
div {
min-height: 100px;
height: auto !important;
height: 100px;
}
coyummy
メインページ
|
Dreamwever »
このブログを購読