WebKit最新開発版に見るCSS3の「縦書き」 - builder by ZDNet Japan
論理プロパティでの実現という課題を残しつつも、CSS3でのサポートおよびEPUB3.0でのサポートが決まった「縦書き」ですが、そろそろビューワレベルでの対応（実装）も開始されました。その先陣を切るのが、SafariやGoogle Chromeに採用されているHTMLレンダリングエンジン「WebKit」です。 WebKitのブログ「Surfin' Safari」では特に触れられていませんが、先日公開された最新開発版（Nightly Build）から、縦書きのサポートが開始されています。まだ実装の初期段階ではありますが、EPUBの描画機能とは切っても切れないHTMLレンダリングエンジン分野における最新動向ということもあり、本連載で検証してみたいと思います。 CSS3の縦書き対応で最先端を行く「WebKit」 最初のテストは、とにかく「横書きを縦書きで表示する」ことにしました。H1タグなど見出し
CSS 3のアニメーション機能「Transitions」 - builder by ZDNet Japan
CSS 3のアニメーション機能を利用すれば、文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScriptが必要だった処理をCSSで実現できるようになる。 CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類が用意されており、いずれもCSSのプロパティ値を変化させることで動きを設定する。たとえば、background-colorプロパティの値を変化させれば、背景色が変化するアニメーションを設定できるというわけだ。 このとき、Transitionsでは動きの始点と終点の2つの値だけを指定する仕組みになっているのに対して、Animationsではキーフレームによる細かな指定ができるようになっている。 今回はこれらのうち、Transitionsの機能を利用したアニメーションを紹介したい。 なお、Transitionsの機能はW3C
iPhoneとPCのファイルの受渡トレンドはWebDAVで - builder by ZDNet Japan
SECCON2020レポート第二弾！ 名実ともに世界標準に！ 次の10年に向けたリファクタリング進行中 特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 部分最適だけではダメ DX実現のための最初の一歩 業務プロセスのデジタル化をサポート 未来のセキュリティイノベーターへ 初のオンライン開催となったSecHack365 20年度成果発表 から見えてきた新たな兆し セキュリティの今を知る 特集企画 ZDNet Japan Security Trend Spring 繋がる世界のデータセキュリティの最前線 連載！プロが語るストレージ戦略 第二回：DX時代のデータ活用とデータ運用 注目される階層型データ基盤のとは何か 明日からではもう遅い？！ クラウドファーストが当たり前の時代 いま直ぐに見直すべきセキュリティのあり方 いまさら聞けない「PPAP」 な
iPhoneを節電する簡単だけど気づかない3つの方法〜ふたつめ - builder by ZDNet Japan
iPhone 3Gにおける節電とは「ムダなく使うこと」ではなく、「連続使用時間の増大」が目的のはず。時間あたりの消費電力量を減らせば連続使用時間も延びるため、両者は矛盾しないが、ここにバッテリー寿命という要素を加えると話は変わってくる。一般的にバッテリーは、劣化が遅い≒容量が多く保たれるという図式が成り立つため、バッテリー性能を温存することが先ほど挙げた節電の趣旨にも適うのだ。 iPhone 3Gに搭載されているリチウムイオンバッテリーには、いくつかの特性がある。1つは、フル充電または完全放電すると、劣化が速く進むこと。残量が10%を下回ったあたりで充電を開始し、80〜90%程度に達したところで完了させる（短時間で充電を終わらせる）という使い方が、リチウムイオンバッテリーを長持ちさせるコツだ。 つまり、こまめにUSBポートへ接続して継ぎ足し充電を行い、急速充電が終わる約1時間で接続を解除す
文字にドロップシャドウの効果をつける--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
text-shadowプロパティを利用すると、文字に影をつけて表示することができる。これまではSafariが対応しているだけだったが、Firefox 3.1（アルファ版）とOpera 9.5が対応した。 また、Firefox 3.1（アルファ版）は本連載の「ボックスにドロップシャドウの効果をつける」で紹介したbox-shadowプロパティにも対応したので、それについても紹介したい。 文字に影をつけて表示する text-shadowはCSS 2で定義されたプロパティだが、CSS 2.1では削除され、CSS 3のTextで復活している。 text-shadowプロパティで文字に影をつけて表示するには、次のような形で4つの値を指定する。 text-shadow: ［横方向のオフセット］ ［縦方向のオフセット］ ［ぼかしの半径］ ［影の色］ たとえば、赤色の文字にグレーの影をつけると次のように表示
iPhoneにぴったり：YouTubeからH.264動画を再エンコードなしでゲットする方法 - builder by ZDNet Japan
iPhone OS X 2.0付属の「YouTube」は、ある程度ダウンロードしてから再生を始めること（バッファリング）が可能など、使う側の意を汲む"気の利いた"機能を備えている。自分で見て・聴いて楽しむだけでなく、iPhone 3Gを見せびらかす目的にもお誂えだ。 しかし、特定の映像のカテゴリや俳優、ミュージシャンを追いかけているファンにとって、ブックマークは中途半端な存在かもしれない。好みのコンテンツをいつでも快適に楽しめるのならば子細は問わず、ディスクスペースを犠牲にすることなど当たり前、これぞファン心理ではなかろうか。 そこで紹介したいテクが、以下に示す「H.264ムービーのダウンロード」。URLの末尾に「&fmt=18」を追加すると、デフォルトのFLVではなく高画質なH.264形式ムービーの再生が始まるので、それをダウンロードしてしまおう、という寸法だ。再エンコードは必要なし、i
文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
Safariのバージョン3では、スタイルシートを利用して文字のアウトラインを表示できるようになった。スタイルシートで文字をアウトライン化すれば、画像を使わずに文字のデザインの幅を広げることができる。「Safari 3.1でWebフォントを利用する」で紹介したWebフォントが普及すれば、文字のデザインに画像を使う必要は少なくなっていくだろう。 アウトラインのデザインを指定する 文字のアウトラインのデザインは、以下のような-webkit-text-stroke〜というプロパティで指定する。現在のところ、指定できるのはアウトラインの色と太さだ。 アウトラインのデザインを指定するプロパティ プロパティ機能
主要ブラウザの性能比較：IE、Firefox、Opera、Safari（前編） - builder by ZDNet Japan
Tim Berners-Lee氏がジュネーブに置かれた欧州合同原子核研究所（CERN）の各部門の間で情報の流れを促進することを目的に、CERNに対して世界初のブラウザであるWorldWideWebを提示した時には、これが情報時代の革命を引き起こすものになるとは少しも思わなかっただろう。今日では、ブラウザはおそらくもっとも広く使われているコンピュータアプリケーションだ。 しかし、ウェブブラウザによって実行されるタスクは大きく変わってきている。テキストと画像の表示に加え、現代のブラウザはJavaScript、DOM、JavaベースのプログラムのXMLなどの技術に対応する必要がある。Ajaxに馴染みがない人も、おそらくGoogle Maps、Google Mail、AjaxWriteなどでAjaxを使ったことがあるはずだ。あるいはFlickrやLast.fmなどのサイトもこの技術を徹底的に使って
フォームのインタフェースデザインを考える（1） - builder by ZDNet Japan
フォームのインターフェースデザイン フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。 CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxやSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。 ユーザーのアクションに応じてフォームのデザインを変更する :hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の３種類となっている。 :hover 項目にカーソル（マウスポインタ
オフトピック:あなたがプログラムを理解できない10の理由 - builder by ZDNet Japan
あなたがプログラムを理解できない10の理由：第5回 プログラムの学習には、曖昧な動機、上がらないモチベーション、多数のエラーなど、様々な障壁が存在する。しかしそれでも、ものを作ることは楽しいではないか。最後のメッセージは「楽しもう」だ。 2008-06-03 08:00:00 あなたがプログラムを理解できない10の理由：第4回 プログラムを概念的に学ぶのも大切だが「○○してみたい」という欲求がなければ身につかないものだ。ただし、あまりに実用的なプログラムを作ろうとすると、何が必要で何を学べば良いかも分からず、途方に暮れることになる。 2008-05-27 08:00:00
バナーのローテーション表示を JavaScript で！ - codess - builder by ZDNet Japan
アフィリエイトなどで利用するバナー広告は、通常、１つの広告枠（広告表示領域）に１つの広告しか表示できません。 （Flashバナーでは、この枠にとらわれないものもありますが） 「複数の商品のバナー広告を掲載したいんだけど、広告枠はこれ以上広げたくない！」 こんなときに役立つテクニックが、バナーのローテーション表示です。 簡単に説明すると、１つの広告枠に次々と色々な広告を表示していく方法です。 この方法はページスクロールが発生しない（させない構成の）ページにとても有効です。 狭い領域を有効に活用しましょう！ 簡単なサンプルを作成しましたので、参考にどうぞ。 実装は JavaScript (prototype.js利用) で行っています。 詳細についてはサンプルページのソースコードをご覧ください。 サンプルページ ※このエントリは builder メンバーにより投稿されたものです。シーネットネッ
Firefox 3が対応したdisplayプロパティの値（2） - builder by ZDNet Japan
今回はinline-blockボックスを利用して段組みのレイアウトと横組みのメニューを作成してみたい。なお、displayプロパティやinline-blockボックスについては、前回の記事を参照して欲しい。 inline-blockボックスを利用した段組みのレイアウト 「display: inline-block」と指定すると、HTML/XHTMLタグでマークアップした部分をinline-blockボックスで表示することができる。inline-blockボックスを利用すれば、floatやpositionプロパティを利用せずに段組みのレイアウトを作ることが可能だ。 段組みのレイアウトは、一般的には で構成したblockボックスを横に並べて作成する。しかし、blockボックスはそのままでは横に並べて表示することができないので、floatプロパティで回り込みを指定したり、positionプロパテ
Firefox 3が対応したdisplayプロパティの値（1） - builder by ZDNet Japan
Firefox 3は、displayプロパティの値である「inline-block」と「inline-table」に対応した。これで、CSS 2.1で定義されたdisplayプロパティの値に一通り対応したことになる。そこで今回は、displayプロパティの基本と「inline-block」について紹介していきたい。また、SafariやOpera、Internet Explorerの対応状況も紹介する。 displayプロパティと基本的なボックスの種類 displayはボックスの種類を指定するプロパティだ。まずは、基本的なボックスの種類を再確認しておこう。 HTML/XHTMLではタグでマークアップした部分が四角形のボックスとして扱われる。ボックスにはいくつかの種類があり、タグごとに標準でどのボックスになるかが定義されている。 基本となるボックスの種類は「block（ブロック）」と「inli
builderの歩き方 - builder by ZDNet Japan
builder by ZDNet Japanにようこそ。 ここではbuilderの概要と機能の使い方を説明します。builderについてわからないことがあればこの記事へのコメントなどの形でお知らせください。随時フォローアップさせていただきます。 以下の目次からアクセスしてみてください。 目次 builderとは？ builderが対象とする読者やbuilder上にある情報の説明です。 builderにコンテンツを掲載したい builderへの寄稿などについての説明です。 builderの機能―コンテンツの分類 タグをベースにしたbuilderコンテンツの分類について説明しています。 builderの機能―コミュニケーション builderでほかのメンバーと情報をやりとりする方法について説明しています。 builderの機能―FAQ 読者の皆様から寄せられたFAQです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mac OS Xに関する記事 - builder by ZDNet Japan