CSS3 ちょっといじってみる。 Vol.1

2011.04.15 Fri

あんまりCSS3をいじったことがなかったので、この機会にちょっといじってみました。角丸を表現できるborder-radiusとグラデーションを表現できるgradientです。

border-radius <角丸>

.kadomaru {
  width: 250px;
  height: 50px;
  background: #0066cc;
  border-radius: 10px;
}

値を1つ指定した時は、4つの角に対して同じ半径が適用されます。

また、値を2つ指定した時は、左上と右下で同じ半径、左下と右上で同じ半径が適用され、値を4つ指定した時は、左上の半径、右上の半径、右下の半径、左下の半径が別々に適用されます。

border-radius <正円>

.seien {
  width: 50px;
  height: 50px;
  background: #0066cc;
  border-radius: 25px;
}

widthとheightの半分の値をborder-radiusに指定すると正円にすることができます。

gradient <グラデーション>

グラデーションには線形グラデーションと円形グラデーションの2種類があります。

1.線形グラデーション <上から下へ>

.senkei_gradation {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(top, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

2.線形グラデーション <左から右へ>

.senkei_gradation_2 {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(left, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left top, right top, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

3.線形グラデーション <左下から右上へ>

.senkei_gradation_3 {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(left 45deg, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left bottom, right top, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

線形グラデーションはFirefoxとWebkit系のブラウザ(Safari、Google Chrome)で指定の方法が違います。

-moz-linear-gradient(開始位置と角度, 開始色, 終了色);

-webkit-gradient(linear, 開始位置, 終了位置, form(開始色), color-stop(位置, 途中色), to(終了色));

4.円形グラデーション <中心から外へ>

.enkei_gradation {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc);
  background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), to(#cccccc));
  border-radius: 10px;
}

5.円形グラデーション <位置を変更する>

.enkei_gradation_2 {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(10px 25px, circle, #0066cc, #cccccc);
  background: -webkit-gradient(radial, 10 25, 0, 10 25, 50, from(#0066cc), to(#cccccc));
  border-radius: 10px;
}

6.円形グラデーション <正円にする>

.enkei_gradation_3 {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc 24px, rgba(255, 255, 255, 0) 25px);
  background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), color-stop(49%, #cccccc), color-stop(50%, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
}

円形グラデーションも線形グラデーションと同じでFirefoxとWebkit系のブラウザ(Safari、Google Chrome)で指定の方法が違います。

-moz-radial-gradient(開始位置, 形状, 開始色, 終了色);

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色));

CSSだけでこれだけの表現ができるのはスゴいですね。
画像を作らなくてもある程度のものは作れるので、軽量化もできます。CSS3恐るべし。IEも早く対応してくれれば良いのになあ。

若干おかしい部分があるかもしれませんが、許してください。もしあれば教えてください。


IEに対する条件付きコメントを記述する。

2011.04.13 Wed

何かと問題となるIE(Internet Explorer)に対して、<head>内に条件付きコメントを記述して、対策をします。

例えば、下記のようなものです。

<!--[if IE]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

これは全てのバージョンのIEに対してscript要素を読み込むという記述で、読み込んでいるのはHTML5の新要素を使えるようにする「html5.js」です。
IEだけに対する記述なので、FirefoxやSafari、Google Chromeといった他のブラウザには適用されません。

他にも下記のような記述の方法があります。

<IE以外のブラウザ>
<!--[if !IE]> ~ <![endif]-->

<IE 8>
<!--[if IE 8]> ~ <![endif]-->

<IE 8 未満のバージョン → IE 7 , IE 6 など>
<!--[if lt IE 8]> ~ <![endif]-->

<IE 8 以下のバージョン → IE 8, IE 7 , IE 6 など>
<!--[if lte IE 8]> ~ <![endif]-->

<IE 8 より上のバージョン → IE 9>
<!--[if gt IE 8]> ~ <![endif]-->

<IE 8 以上のバージョン → IE 8, IE 9>
<!--[if gte IE 8]> ~ <![endif]-->

IE 8でなくてもIE 7、IE 6を指定することも可能です。

IE 6だと下記のようなものを見かけます。

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('img');</script>
<![endif]-->

これはIE 6で透明pngを表示させるための「DD_belatedPNG.js」を読み込むという記述です。

このように何かと問題となるIEに対して、<head>内に条件付きコメントを記述して、対策をすることができます。

javascriptではなくcssを読み込むことも可能です。

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all" />
<![endif]-->


iPhone ホーム画面用のアイコンを設定する。

2011.04.11 Mon

iPhoneのMobile Safariには「ホーム画面に追加」という項目があります。

これはiPhoneのホーム画面にWebサイトをブックマークする機能で、「Webクリップ」と呼ばれています。

普通であれば、Webサイトのスクリーンショットが表示されるんですが、アイコンの画像ファイルを設定することによって、そのアイコンが表示されるようになります。

1.ホーム画面用のアイコンをつくる。

アイコンの画像は縦114px×横114px以上のpng形式で、今回はicon.pngという名前で作成しました。

このアイコンにはiPhoneが自動的に角丸と光沢を付けてくれるので、あらかじめ画像データに角丸と光沢を付けておく必要はありません。

2.<head>内に下記を追加する。

<光沢あり>

<link rel="apple-touch-icon" href="img/icon.png" />

<光沢なし>

<link rel="apple-touch-icon-precomposed" href="img/icon.png" />

アイコンに光沢を付けるか付けないかを決めることができます。でも、角丸は必ず付けられてしまうので変更ができません。また、透明色は黒くなってしまうので使うことができません。

下の画像の左のアイコンが光沢ありで、右のアイコンが光沢なしです。

このようにiPhoneのホーム画面にWebサイトをブックマークするとアイコンが表示されるようにできます。


iPhoneでWordPressを更新する。

2011.04.09 Sat

iPhoneでWordPressの記事の投稿や修正、コメントのチェックなどができるアプリ『WordPress』があります。

このブログはWordPressで作っているので、僕にとってはとっても役立つアプリです。

1.WordPressの管理画面にある「設定」から「投稿設定」を表示する。

2.その中にある「リモート投稿」という項目のXML-RPC 「XML-RPC WordPress、Movable Type、MetaWeblog および Blogger XML-RPC 投稿プロトコルを有効にする。」にチェックをする。

3.アプリを起動して、一番下にある「Add self-hosted WordPress blog」をタップする。

4.URL(ブログのURL)、Username(ブログのユーザー名)、Password(ブログのパスワード)を入力して右上にある「Save」をタップする。

これでiPhoneでWordPressが更新できるようになります。

WordPress
http://itunes.apple.com/jp/app/wordpress/id335703880


CSS3 backgroundプロパティに複数の背景画像を指定する。

2011.04.08 Fri

下記のコードはこのブログで使っているCSSで、前回の新規ウインドウ target=”_blank” で開くリンクにアイコンを追加するのとリンクのマウスオーバー時に青い斜線を表示させるのを指定したものです。

a:hover.new_window {
  padding: 0 0 0 16px;
  background: url(img/new_window.png) no-repeat 2px center, url(img/a_hover.png) repeat;
}

このようにCSS3では、「,(コンマ)」で区切ることによってbackgroundプロパティに複数の背景画像を指定することができます。


page 2 of 3123