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をいまいち有効に使えてないのですが今後もアップデートはありそうなので新しい機能に期待です。

Android版Firefox4インストールしてみた


Android版のFirefox4正式版が3月29日にリリースされたので、早速インストールしてみました。

先日PC版のFirefox4も正式版が公開されたばかりですが、Android版にもブラウザ環境同期機能「Firefox sync」が搭載されています。
Firefox syncではブックマークや入力したパスワード、さらに開いているタブの情報まで同期できてしまうので、PCでFirefoxをメインブラウザとして使用している人はかなり便利なのではないでしょうか?

アドオン対応

Android版もアドオン対応です。アドオンも続々追加されているようです。
Android版のForefox4は設定など機能的にはシンプルにまとめられているので、いろいろいじりたい私は今後のアドオンに期待です。
アドオンは下記からダウンロードできます。

MOBILE ADD-ONS

タブ、ブックマーク

タブは通常、画面外に隠れているのでスワイプすれば左にタブ一覧がサムネイルとして表示されます。
間違って消してしまったタブも復元可能で、タッチ操作のスマートフォンには使いやすい仕様になっています。

ブックマークはスワイプして右から出てきた★マークをクリックするだけです。
操作もシンプルにまとめられています。

対応機種、システム要件

対応機種

【ドコモ】

  • Samsung Galaxy S (SC-02B)
  • Samsung Galaxy Tab (SC-01C)
  • Sony Ericsson Xperia X10 (SO-01B)

【au】

  • HTC EVO 4G (ISW11HT)
  • Motorola Xoom (TBi11M)
  • Sharp IS03

【ソフトバンク】

  • Dell Streak (001DL)
  • HTC Desire (X06HT)
  • HTC Desire HD (001HT)

システム要件

  • Android OS 2.0 以上
  • 17 MB の空き領域もしくは SD カードストレージ
  • 512 MB の RAM

その他の対応機種等は下記のリンクから確認して下さい。

Android版Firefox対応機種

感想

私は、今までDolphinBrowserを使っていたのですが、Firefoxの方が表示速度は圧倒的に速いです。
また、HTML5、CSS3などにも対応しているので、新しいサイトなどもPCで見るのとほとんど同じように閲覧が可能でした。
DolphinBrowserや標準のブラウザではiframeに対応していなかったのですが、Firefoxではしっかり対応していてスクロールも可能でした。
あと、少し不満だった点は設定内容の少なさでしょうか。DolphinBrowserではUserAgentの設定なども出来たので、そのあたりはアドオンに期待という感じです。

FireFox4を試してみてAndroidの規定のブラウザはFirefoxにすることにしました。容量的にやはり大きいのでX06HTには少々きついですが、ほとんどのサイトをPCと同じように閲覧出来るというのは、かなり良いです。

アンドロイドマーケットでは下記のリンクからダウンロード可能です。

Firefox4 for Android – Androidマーケット

Dropboxのおかげでデータが蘇ったので、復元方法まとめ


オンラインストレージにDropboxを使っているのですが、Dropbboxにはファイルを復元してくれる履歴管理機能があります。
間違ってファイルを消してしまったり、上書きしてしまった場合に復元出来るのでとても便利です。

削除したファイルの復元

Dropboxのホーム画面を表示して画像赤枠の「Show Deleted files」をクリックする。


そうすると、削除したファイルが灰色で表示されるので、復元したいファイルをクリックしてプルダウンから「Undelete」を選択するとファイルが復元されます。

上書きしてしまったファイルの復元

My Dropboxのフォルダから復元したいファイルを右クリックして、表示されたメニューの中から「Dropbox」→「View Previous Versions…」をクリックする。


するとブラウザで、復元したいファイルの過去の変更履歴が表示されるので復元したいポイントを選択して「Restore」をクリックで復元されます。


私は、頻繁に「Ctrl+S」で保存するクセがついてしまっているので間違えて上書き保存してしまうことがよくあります。
そんな時、復元機能はかなり便利ですね。重要なファイルはバックアップのことなども考えるとDropboxに置いて作業するのがよさそうです。

Photoshopで奇麗なfaviconを作る方法


ガドウェブのファビコンをPhotoshopで作ったので作り方を紹介します。

ファビコン(favicon)とは、ブラウザのアドレスバーやブックマークしたときに表示される小さいアイコンのことです。
ほとんどのブラウザが対応しているので、ファビコンがあるとブックマークの一覧で見つけやすかったり、サイトのイメージも印象づけられるので是非とも奇麗なファビコンを表示したいですね。

ファビコンのファイルについてですが、「.ico」とう拡張子のファビコン専用ファイルです。画像編集ソフトなどで作成出来るのですが、この「.ico」というファイル型式に対応しているソフトがかなり少ないです。
ファビコン専用の作成ツールで作るか、jpegなどのファイルを変換ツールで変換して作ることが出来るのですが、画像編集機能が少なかったり変換が奇麗に出来なかったりと、美しいファビコンを作るのは難しいです。

そこで、今回紹介するのはPhotoshopで「.ico」ファイルを開いたり、保存したり出来るプラグインです。
画像編集機能の豊富なPhotoshopなら奇麗なファビコンが作れますし、透過などの処理も奇麗に行えます。

ICO (WINDOWS ICON) FORMAT

インストール方法

上記のサイトからダウンロードしたICOFormatのファイルをPhotoshopを起動していない状態で「Program File/Adobe/Adobe Photoshop CS*/Plug-ins/File Formats」に置いて(※インストールするOS、Photoshopのバージョンによって、フォルダ名、階層などが違う場合があります)Photoshopを起動するだけです。起動したらメニューのヘルプから「プラグインについて」を確認し、ICO(Windows Icon)Formatがあればインストール完了です。

ファビコンの作成、保存

ファビコンはブラウザで表示される時は16px四方での表示なので見やすさを考慮してオブジェクトは四方のいっぱいに配置した方が良いです。
表示は16px四方ですが、作業時は作業しにくいので広いカンバスで作って後から縮小しましょう。
ファビコンではアルファチャンネルを使用した透過も可能なので、Photoshopで作成の場合、背景を透明にしていれば透過されます。
デザインが済んだら32px四方に縮小し、保存します。
縮小は、メニューの「イメージ」から「画像解像度」を選択し、幅と高さを32pxに指定して縮小して下さい。また、縮小方法は「バイキュービック法-シャープ」が縮小にはお勧めです。
保存は、メニューの「ファイル」から「保存」を選択し、ファイル形式は「ICO Windows Icon」を選択して下さい。(保存しようとする画像の1辺が256pxを超えている場合は「ICO Windows Icon」の形式が一覧に出ません。)
そして、「favicon.ico」というファイル名で保存して下さい。

ファイルのアップロードと設定

先ほど保存した「favicon.ico」のファイルをサーバーにアップロードしたら、ファビコンを表示したいhtmlファイルのhead要素に以下のlink要素のコードを追加して下さい。

<link rel="shortcut icon" type="image/x-icon" href="favicon.icoのURL" />

WordPressで簡単にファビコンを表示出来るプラグイン

Favicon Manager

Digital Ramble » Favicon Manager WordPress Plugin

テーマのhead内に直接先ほどのコードを書き込んでも良いのですが、テーマを変更した場合などに書き直す手間が省けるのでプラグインを使うのも便利です。

Firefox4を使ってみてのまとめ


Firefox4の正式版がリリースされたので、早速アップデートしました。

次世代ブラウザ Firefox – 高速・安全・カスタマイズ自在な無料ブラウザ

perf-chart

・新UI

Firefox3.6よりも6倍以上の高速化を実現!とのことですが、実際に使用してみたところそこまでの高速化は感じられませんでした。たしかに、前バージョンよりは早くなっているのですがリンクをクリックした後の一瞬のタイムラグがChromeより遅く感じられます。
また、ユーザーインターフェイスが新しくなり、タブが最上部に移動され、メニューバーの代わりに「Firefoxボタン」になりました。

タブの位置については、メニューの「表示」→「ツールバー」→「タブを上部に表示」のチェックを外すことで前バージョンと同じ位置に戻すことも可能です。
Firefoxボタンについてですが、windowsXPでアップデートするとデフォルトの状態ではメニューバーになっていましたが、メニューの「表示」→「ツールバー」→「メニューバー」のチェックをはずせばメニューバーが消えて「Firefoxボタン」が出てきます。
また、メニューバーが非表示の状態でも「Altキー」を押すことで一時的にメニューバーを表示する事が出来ます。

・タブをグループに分けて管理

タブグループ

新しい機能として「Firefox Panorama」というタブをグループ分けして管理できる機能が追加されました。
多くのタブを同時に開いて作業する人にはとても便利な機能だと思います。
ただ、使ってみたのですがUIが自由すぎて逆に使いにくい感じが…。フォルダでドラッグ&ドロップで移動させたりドラッグしてフォルダのサイズを変えたりできるのですが、動作が若干もっさりしているせいかあまり使いやすいとは感じませんでした。。

・まとめ

各ブラウザの良いところを集めて操作性はかなり向上したと思いますが、動作速度の点で少し残念でした。今後のバージョンアップでの改善を期待したいところです。

Gmailのフィルタリング機能「スマートラベル」使ってみた


Gmail Labsにメールの自動振り分けを行ってくれる「スマートラベル」という機能が追加されました。

送信元、件名などでフィルタを設定している人も多いと思いますが、この「スマートラベル」はメールの内容によって自動的にメールを振り分けてくれます。

振り分けられるカテゴリの種類は、

【一括】
広告、ニュースなど大量の人に一括で送信されてくるメール。受信トレイをスキップ(アーカイブ)して受信トレイには表示されません。
【通知】
知り合いではないが、自分宛に送られてくる重要な内容が含まれているメール。ネットショッピングでの確認メールや、登録確認の自動生成メールなど。
【フォーラム】
メーリングリスト、オンライン掲示板など、ユーザーが参加しているところからのメール。

このフィルタは今までに設定していたフィルタと併用可能です。
フィルタをしっかり設定して使用しているハードユーザーには、あまり必要ない機能かもしれませんが受信トレイにメールが増えてきてフィルタを設定しようと思っていたユーザーにはオススメの機能です。

私の場合、すでにフィルタは使用していたのですが、Amazon、楽天、Yahooなどからのニュースなどが多く、フィルタを設定するのも面倒だったのですが、すべて自動で【一括】に分類してくれて受信トレイにも表示されなくなったので整理がかなり楽になりました。
また、AndroidのスマートフォンでもGmailを利用しているのでニュースメールが送られて来る度に受信音が鳴っていたのですが、それも解消されたので、かなり快適になりました。

「スマートラベル」の使用方法はGoogle Labsから「スマートラベル」を有効にするだけです。
Gmailの設定からLabsを選択して検索で「スマートラベル」と入力すれば出てきますので、使ってない人はぜひ一度試して下さい。

vistaのwindowsフォトギャラリーの色がおかしいのを直す方法


windows vistaで画像ファイルをプレビューするwindowsフォトギャラリーというビューワですが、環境によって色がおかしくなる不具合があります。全体的に色が黄色くなるようです。

私も、この不具合が発生しました。と、いうことで直し方です。

まず「コントロールパネル」を開きます。次に下記の順でクリックしていきます。
「個人設定」

「画面の設定」

「詳細設定」

「色の管理」

そして開いたパネルの「このデバイスに自分の設定を使用する」にチェックを入れます。
すると、「このデバイスに関連するプロファイル」のプロファイルを選択することが出来ますので、プロファイルを選択して「削除」をクリックして下さい。(複数のモニタを使用している場合は複数プロファイルがあると思いますので、すべて削除して下さい。)

そして、windowsを再起動すれば正常に表示されると思います。

WordPressでテーマ編集時のコメントアウトの注意


WordPressにはフリーで使用できるテーマがたくさんありますが、配布されているテーマは汎用的に作られている場合が多いので、
少しカスタマイズしたいと思うことがあると思います。(改変が禁止されているフリーのテーマもあるので、注意)

カスタマイズする時、一部の要素を削除したい場合、コメントアウトを使うことが多いと思いますが、この際注意が必要です。

・HTMLコメントでのコメントアウトは危険

1
<!--<?php the_date(); ?>-->

上記で日付をコメントアウトで表示させないコードになっているのですが、問題点はソースコードを見られると内容が見えてしまうのと、
the_date()の出力にHTMLコメントアウトが含まれる場合があるということです。
HTMLコメントアウトは入れ子構造で記述できませんので、表示がくずれてしまいます。

ですので、コメントアウトしたい場合はif文を使うのが適当です。

1
2
3
<?php if(0) { ?>
この部分は出力しない
<?php } ?>

上記のように記述すれば、コメントアウトできます。
PHPコメントアウトの「//」を使ってもいいですが、<div>や<span>で要素を囲んでいる場合も多いので、複数行をまとめてコメントアウトしてしまえるif文でのコメントアウトが一番確実だと思います。

WordPressでブログ始めました


というわけで、WordPressでブログつくりました。

ちょっといろいろ情報発信してみたくなったのと、Twitterでは情報が流れていってしまうので、備忘録的なものがほしいと思ってブログにしました。
あと、WordPressを細かくいじってみたかったので。

とりあえず、必須っぽいプラグインをつっこんで立ち上げましたが、オリジナルのテーマも作成中なので
テーマ作成についての内容なども随時アップしていきたいと思います。