HTML5やCSS3がそろそろ出てきそうなこの時期に今更感漂いますが、
現在多く使われているCSS2に関して、プロパティのまとめ書きについてまとめてみました。

まずは、フォント（Font）周りから。

タグ ：

CSS

CSS2.1

font

font-style

font-weight

font-variant

font-size

line-height

font-family

リファレンス

Googleさんからまたアドバイスがきました。



今回はCSSの中に読み込みに時間のかかっている奴がいて、そいつのせいで広告収入が落ちているとのこと。
いままでGoogleさんの言うことに間違いはなかったのでしらべてみると。。

タグ ：

CSS

google

AdSense

livedoor_Blog

ライブドアブログ

外部CSS

テンプレート

template.css

Googleさん

過去にはサイトデザインをプリントアウトしてお客様のところへもって行き、デザイン案をみてもらっていた時代もあったがさすがに今はそんなことはやらない。
仮サーバーを用意してそちらにデザインデータをアップ。直接、Web上で見てもらうのが主流。
まあ、どうしてもプリントアウトで見たいというお客様もいるにはいるのだが。。

で、Web上で見てもらうにしてもいろいろと問題点はあって、特に度々問合せが来るのが「更新されていないよ」という問合せ。
実はこれはキャッシュが悪さをしていることが殆ど。
キャッシュとは一度ダウンロードしたWebのデータ（画像、CSS等）を保管しておくスペース及びそのデータ。
同じサイトに再訪問した際、わざわざその度にインターネットからデータをダウンロードせず、一度ローカルに保存したデータを表示するというのが一般的なブラウザの仕様となっている。
そのために、たとえば画像の一部を修正したり、外部CSSの一部を修正したりした際に、更新されていないデータが表示されてしまうことがあるのだ。
で、そんなときはリロード（再読み込み）してくださいとお願いするのだがこれがちょくちょくあるのが悩みの種。

仮に、何とかしようと思っても、これはブラウザ側で設定する以外回避する方法はないのではないかと思っていた。
が、なんと、HTMLやCGI上でこれを回避するための記述があったらしい。

タグ ：

キャッシュ

リロード

再読み込み

ブラウザ

画像

CSS

JavaScript

html

Perl

php

行末の「。」が先頭にきてしまうことがあるのはChromeだけだったのかな？
で、さすがに気になったので調べてみると、CSS表記で解決できることがわかった。
ちなみに、行頭に「。」が来るのを禁止することを禁則処理といいます。

修正前の状態

タグ ：

Google_Chrome

Chrome

クロム

CSS

禁則

禁則処理

Web覚書

word-break

word-wrap

先日、CSSでセンタリングさせる方法を説明しました。
実は、この記事は今回の記事のための布石に過ぎなかったりします。

「absolute」（絶対位置指定）はデザインをする上で非常に便利です。
好きな場所にオブジェクト（タグ）を移動させることができますものね。
ただ、センタリングさせたデザインで、その配下にあるオブジェクト（タグ）に対して「absolute」（絶対位置指定）をするとHTML全体を基準にしてしまうため、画面を大きくしたときにレイアウトに崩れが起きてしまうことがあります。
今回説明するのはこれを解決させるための方法。

なんとも過去にはこんな記事も書いてました。
□プルダウンメニューを全体的にセンタリングさせる方法
これも、これから紹介する方法を使えばCSSだけで解決させることができます。

タグ ：

センタリング

position

relative

absolute

CSS

まあ、今さら感漂いますが一応自分に対しての覚書としてちゃんと残しておくことにしました。

僕の作るサイトは大概ウインドウがある程度大きくなるとセンタリングして表示させるようなデザインになっています。
いろいろ理由はありますが、スペースの無駄が嫌いなのと、シンメトリーが好きなのが主な理由。
かつてはTABLEタグでレイアウトして大本のTABLEタグに「align="center"」を入れれば済んだことなのですが今となってはTABLEでのレイアウトなんてありえない時代。
ただ、これをCSSで実現するにはちょっとコツがいります。
以下その方法を解説します。

タグ ：

CSS

センタリング

レイアウト

マージン

Web覚書

先日、アメブロを本格的に始めた旨を記事にしました。
その際は殆ど初期設定のままでブログを立ち上げたのですが、このたび、ちょっとだけカスタマイズしてみました。
ポイントにしたのは2点。

1. なるべく画面全体を使った見やすいレイアウトに変える。
2. アフィリエイトやアドセンス等を盛り込む。

です。

【PR】
Amebaでブログやろうよ! 2010-11年版
著者：株式会社デジカル
販売元：ソフトバンククリエイティブ
発売日：2010-02-24
レビューを見る

タグ ：

アメブロ

カスタマイズ

アドセンス

3カラム

CSS

デザインリニューアル最終章として、トップページにプルダウンメニューを設置しました。
狙いは直帰率を下げること。
ある程度時期を見て、トップ以外のページにも最終的には配置しようと思ってます。

【PR】
視覚マーケティング実践講座 ブログデザインで自分ブランドを魅せる
著者：ウジトモコ
販売元：インプレスジャパン
発売日：2009-09-10
おすすめ度：
レビューを見る

タグ ：

プルダウンメニュー

デザイン

jQuery

CSS

このブログ

ブログデザインリニューアルに伴い、弱者排除の方針で「Internet Explorer 6」対策をしていなかったのですが、いまだに2割も「Internet Explorer 6」を使っている人がいることを知ってできれば何とかしたいと思っていたところ、ツイッターでこんな記事を見かけた。

□IE 6で泣かないための、9つのCSSハック（1/3） - ＠IT

現場のプロから学ぶXHTML+CSS
著者：益子 貴寛
販売元：毎日コミュニケーションズ
発売日：2008-11-11
おすすめ度：
レビューを見る

タグ ：

Internet_Explorer_6

IE6

CSS

CSSハック

バグ

携帯サイト作成に関するすばらしい記事を見つけました。

□モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-

Tips 1. XHTMLで作成する。
Tips 2. キャリアごとの仕様の差は外部CSSで。
Tips 3. 文字サイズを小さくするには
Tips 4. ロゴ画像のサイズは横240ピクセル
Tips 5. 流れる文字はDIVタグで
Tips 6. 反転文字
Tips 7. 色つき水平線
Tips 8. 右寄せ
Tips 9. 画像の回り込み
Tips 10. 携帯サイトは文字でデザインする！
Tips 11. フッターは最後に。そして質素に。
Tips 12. 絵文字のちょっとしたテクニック

タグ ：

携帯サイト

モバイルサイト

XHTML

CSS

作り方

以前話題にしたクリックジャッキングを実際行なっているサイトを見つけた。
まずは、デモを見てから行ってみたほうがいいと思う。
□YouTube - Webcam ClickJacking（デモ）
□Camera ClickJacking - The Game（実際のサイト）
上記動画とサイトのソースを見てみると、なんとなくクリックジャッキングの仕組みがわかってきた。
もちろん、それだけじゃないんだろうけど気づいたことを説明する。

タグ ：

クリックジャッキング

iframe

透明

CSS

透明ボタン

Dream Weaver（ドリームウィーバー）CS3を導入後、ホームページを作っていて問題が発生した。
FireFox3を導入したために最も使われている、IE（Internet Explorer）での動作確認を怠ったことも原因の一つだが、FireFox3では全く問題なく表示されているのに、IEでCSSが反映されないというトラブルが起きたのだ。

タグ ：

DreamWeaverCS3

CSS

ユニコード

以前、携帯サイト（i-modeサイト）でCSSを使う方法を説明しましたが、
加えてサイト内のデザイン方法もメモしておくことにしました。
前回の記事が一部必要の無いところまで解説してしまっているので、そちらの指摘も兼ねています。
それは「XML宣言」です。
記述がXHTMLになっていれば（もっと言うと拡張子がxhtmlになっていれば）「XML宣言」なくとも問題ありませんでした。
せっかくなのでトラックバックを送りつつそのままにしておこうと思っています。

タグ ：

携帯サイト

XHTML

CSS

スタイルシート

DIV

携帯サイト（モバイルサイト）でCSSを使う方法です。
以前、「モバイルサイトを本格的に始めよう」で書いたようにDoCoMoが基準になります。
DoCoMo以外が対象だったらこんなことしなくても大体OKなハズ。

タグ ：

携帯サイト

CSS

XHTML

XML

デザイン

昨日何かあったみたいですが新年度だし気にせず気分一新がんばります。

まずは、一日遅れのヒットキーワード及びヒットページ
かつてはこのページ自体が上位に入ることがたびたびありましたが、
アクセス数が増えてそういうことはなくなりました。

タグ ：

P905i

Flash

ブラック企業

メモリが

CSS