記事詳細 1件表示

ニンテンドーDSブラウザーに対応したYahoo!検索

2006年8月21日 17:15

こんにちは。Yahoo!検索プロジェクト、制作の木村です。

Yahoo!検索では、8月16日に、ニンテンドーDSブラウザーや、携帯電話など、Operaをフルブラウザとしている端末でもレイアウトが綺麗に見えるように、CSSをリファインしました。

どのように見えるのか

ここでは、ニンテンドーDSブラウザーを例に説明します。

ニンテンドーDSブラウザーは「2画面モード」と「縦長モード」の2種類の画面表示方法があります。「2画面モード」は、PCと同じレイアウトで表示するモード、「縦長モード」は、携帯電話やPDAで表示するモードです。

「2画面モード」の場合は、このように見えます。

https://s.yimg.jp/images/search/blog/060818/01.gif

「縦長モード」の場合は、このように見えます。

https://s.yimg.jp/images/search/blog/060818/02.gif

どのように実現しているか

CSSを読み込む際に、メディアタイプを指定することにより、CSSの切り替えを実現しています。

<link rel="stylesheet" href="PC.CSS" media="screen">
<link rel="stylesheet" href="DS.CSS" media="handheld">

このように記述すると、

・PCで見る場合:PC.CSSを用いて表示
・DSブラウザーで見た場合:DS.CSSを用いて表示

という具合に使用するCSSを切り替えて表示させることができます。
また、次の一文を加えると、

<link rel="stylesheet" href="PRINT.CSS" media="print">
・印刷する場合(印刷プレビューで表示した場合):PRINT.CSSを用いて表示

このように、同じhtmlファイルを、端末別に最適化した状態でページを表示させることが可能です。

今回のリファインは「Web標準」の手法に準拠した方法なので、「Web標準」に対応したブラウザであれば、ニンテンドーDSブラウザーや、Opera以外のブラウザでも、最適化した状態で表示されると思います。

是非いろいろな環境で、Yahoo!検索をお試しください。

Operaの便利な機能

フルブラウザ用CSSの開発において、今回はPC版Operaを活用させていただきました。

最新のPC版Operaでは、簡単に携帯表示とPC表示を切り替えることができるようになっています。プルダウンメニューの「表示」から「スモールスクリーンで表示」メニューがそれにあたります。非常に便利な機能のため、ここで紹介させていただきました。

今後もこの機能を利用して、さまざまななービスを携帯フルブラウザ対応させていく予定です。

スタッフ募集

Yahoo!検索では、すべての検索系サービスをWeb標準に再構築すべく、現在スタッフを大募集中です。
Yahoo!検索のようなサービスを、一緒に作っていきませんか?

■Yahoo! JAPAN - スタッフ募集情報
https://about.yahoo.co.jp/hr/
職種は「ウェブデザイナー」になります。「希望サービス」欄に「Yahoo!検索希望」とご記入ください。

カテゴリー:Yahoo!検索

当ブログについて

Yahoo!検索スタッフブログは、Yahoo!検索の新しいサービスのお知らせ、検索データの分析レポート、検索関連の読み物コンテンツ情報などをお届けしています。

ブログ内を検索

ページのトップへ

ブログトップ > ニンテンドーDSブラウザーに対応したYahoo!検索