セレクタ – CSS2リファレンス
このページはあまりにも分かりやすい。私がはじめてCSSを勉強したサイトはどこか忘れたけど、セレクタについての説明も特になく、要素に直接styleで適用する感じだった。といっても、その時は将来本気でやろうとは思っていなかったから、別に見えれば良かったから問題なかったんですが。 Read more…
3カラムで表示され、ウィンドウのサイズに応じて中央部分だけが変化するページ。
3カラムで表示され、ウィンドウのサイズに応じて中央部分だけが変化するページの作成にGIGAZINEがとても参考になりました。
かなり難しい方法というか、私が考え付かないような方法で構成されており、とても勉強になりました。
icon を一枚の画像から抜き出すなど CSS で画像の一部を切り抜く方法。
アイコンなどをひとつずつ画像にして保存をしていると、管理がとても面倒になるし、なんていうタイトルを付けて良いかわからなくなります。
特に丸角テーブルがページ内にいくつもあるようなサイトでは、いろいろな種類の丸角部分を管理しなければいけないので、画像のタイトルにも気を使う必要が出てくるのではないでしょうか？
追記(2009/8/30): 一枚の画像にまとめることで、個別に画像を読み込まなくて良いので、結果的にページの表示にかかる時間が短くなります。
しかし、今回紹介する方法を使うことで、アイコンがまとまっているような画像集から部分的に画像を切り抜くことができます。 Read more…
CSSをこのように管理してはダメ！CSSの効率的な管理方法。
今回は私なりのCSSの非効率的な管理方法を紹介していきます。皆さんは絶対マネしないでくださいね。
CSSを直接ページに書きこむのはダメ
私がはじめてCSSに触れたのは、3年くらい前のこと。
HTMLタグに直接(<h1 style=”border-left: 4px #000 soild; padding: 4px 7px; margin: 15px 0; font-size: 16px; color: 000;”>見出し</h1>みたいな感じに)書きこんでいました。
当然、この場合は後々レイアウトの変更などがあった際に、1ページずつ手作業で修正していかなければならないので、この時点で終了です。
<head>?</head>内に記述する方法も同じです。<head>?</head>を修正するだけで済むかもしれませんが、わざわざレイアウトの更新をするために1ページずつ手作業で編集している時点で終了です。もっと簡単な方法が必ずあります。 Read more…
widthとpaddingを同時指定しても良い時がある。
ボックスのwidthとpaddingを同時指定すると、IE6の場合widthの中にpaddingが作られるので絶対にNGだと思っていましたが、特に見栄えが変わらない場合などは、特に気にする必要ないんだなってことを、WordPressのテンプレートを弄ってるときに気付きました。
プロのデザイナーさんが作ったようなテンプレートを弄ると、新しい発見やすごい技を見つけることができるので、すごく勉強になります。
要素に続いて大括弧で属性名・属性値に指定ができる。
要素に大括弧（[]）を用いて、属性名・属性値に指定ができます。
IE6には対応していませんが、将来的にはかなり使えます。
以下のページで詳しく解説がされています。
セレクタ（selector） CSS 前提知識
CSSでfontをまとめて指定する場合はスラッシュで区切る
CSSでfontをまとめて指定することができます。
まとめて指定する場合は、半角スペースやスラッシュ（/）などを活用して、正確に指定します。
以下、font CSS フォント（W3G）からの引用です。
指定方法は各プロパティの値を半角スペースで区切って続けて指定します。さらに各プロパティの値を示す順序が決まっており、1-3番目までは font-styleプロパティ, font-variantプロパティ, font-weightプロパティの各値を半角スペース区切りで順不同に記述できますが、4番目には font-sizeプロパティの値を指定し、スラッシュ（/）区切りで、5番目に line-heightプロパティの値を記述し、最後に半角スペースで区切って、font-familyプロパティの値を記述します。文字と行間部分については半角スペース区切りではなく、”font-sizeの値/line-heightの値” のようにスラッシュ（/）で区切って続けて指定することに注意してください。
CSSで指定できるフォントのサンプル一覧
CSSでフォントの表示を指定することができます。
通常は、ブラウザに設定を任せるのが良いとされていて、安易にこちら側で指定しない方が良いと聞いたことがあります。私は特にあまり指定しませんが、WordPressのテンプレートなどは指定されているものが多いです。
フォントの指定方法
1 | body { font-family: "Palatino", "Georgia", "Baskerville", arial; } |
こんな感じでフォントを指定します。複数の場合は、左から順に先に見つかったものが採用されます。しかし、ユーザーの環境に、ここで指定したフォントがすべて無かった場合は、ブラウザで設定されたデフォルトのフォントで表示されます。
指定できるフォント一覧
指定できるフォントにはいろいろあって、フォント表示サンプルというページがとても参考になるので、紹介します。
HTMLを書く上で役に立つページを紹介
今回は私がHTMLを書く上で良く訪れるページベスト3位を紹介します。
Read more…
paddingの指定について
paddingプロパティの指定の仕方や細かい情報についてメモしました。
Read more…