* You are viewing the archive for 4月, 2011

CSS2.0で画像を使わず角を丸くする方法


CSS3.0に対応したブラウザが登場して「border-radius」プロパティを使えば簡単に角丸を表現できるようになってきましたが、Web制作の現場ではまだまだIE6対応の案件などがけっこうあるのが実情です。
そこで、画像を使わずにCSS2.0のみで角を丸くする方法を紹介します。

HTMLソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="kado">
  <div class="kado1"></div>
  <div class="kado2"></div>
  <div class="kado3"></div>
  <div class="kado4"></div>
</div>
<div class="mainArea">
<!-- ここに内容を記載 -->
</div>
<div class="kado">
  <div class="kado4"></div>
  <div class="kado3"></div>
  <div class="kado2"></div>
  <div class="kado1"></div>
</div>

CSSソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.kado {
  background-color: #FFF; /* 背景色 */
}
.kado div {
  height: 1px;
  overflow: hidden;
  background-color: #F7941D; /* 角丸BOXの背景色 */
}
.kado1 {
  margin: 0 5px;
}
.kado2 {
  margin: 0 3px;
}
.kado3 {
  margin: 0 2px;
}
.kado4 {
  margin: 0 1px;
  height: 2px;
}
.mainArea {
  background-color: #F7941D; /* 角丸BOXの背景色 */
}

画像を使わずに古いバージョンのブラウザでもCSSのみで角丸の表現が出来るので、クロスブラウザには有効かもしれませんが、div要素の中が空になってしまうので、文法的にはあまり良くないかもしれません。
ソースを綺麗に書きたい人は画像を使った方法がいいと思いますが、手っ取り早くCSSのみで実装したい場合はおすすめです。
また、CSS3.0では「border-radius」というプロパティで簡単に角丸を表現出来るので、早くCSS3.0が標準になってほしいです。

Apple TVがソフトウェアアップデートされました


Apple TV (2nd generation)のソフトウェアアップデートが開始されています。
Apple TVはiOSが搭載されているのですが、4.2.1へのアップデートとなります。

アップデートでは下記の問題が修正されています。

  • 一部の古いテレビで、画面がちらつく、またはディスプレイで色が正しく表示されないことがある問題の修正
  • Apple TV がスリープ状態から解除されないことがある問題の修正
  • 一部のモデルのテレビで、入力を切り替えた後オーディオが聞こえなくなる問題の修正
  • 安定性やパフォーマンスの問題の修正

また、新しい機能として

  • MLB.TVでメジャーリーグの試合を観戦
  • iOS 4.3 を実行する iPhone、iPad、および iPod touch で、AirPlay を使うよう設定している iOS アプリケーションおよび Web サイトからビデオをワイヤレスでストリーミング再生
  • スクラップブック、フォトモビール、ホリデーモビールなど新しいテーマのスライドショーを利用できる
  • オンスクリーンキーボードの改善

などが追加されています。

今回の修正でオンスクリーンキーボードの改善がされていたのですが、日本語入力に対応していなかったのが残念です。
あと、やはりAppleTVを有効に使うにはiPad,iPhoneなどのapple製品は必須ですね。他のapple製品と合わせて使って初めて便利さを実感できる感じです。
今は、AppleTVをいまいち有効に使えてないのですが今後もアップデートはありそうなので新しい機能に期待です。