テスターですが何か?

ホビープログラマ略してHPです

HTMLでメトロUIっぽい画面をつくってみた

with one comment

WindowsPhoneもWindows8ももってない自分がMetroUIを試すにはどうしたらいいのか…そう、HTMLであのUIを作ればいいんですよ。ということでHTMLでMetroUIっぽい画面を作ってみました。

「MetroUI」の定義をあまり細かく調べずに、見た目がそれっぽいのを作っています。なので「これがMetroUIだ!」というつもりはありませんし、「MetroUI」の定義から外れているかもしれません。「見た目がMetroUIっぽい画面」を作ってみたというだけです。

参考にしたサイト

「MetroUI」で検索すると、WindowsPhoneアプリかWindows8の解説しかでてこないんですよね。HTMLであのUIをつくろうとした人はほとんどいないみたいです。

強いて参考にするとしたら、この2つのサイトです。

日本マイクロソフト

開発時々日常

では実際に画面を作って行きましょう。

(1) タイルを並べる

正方形のタイルを3つ横に並べてみましょう。<canvas>タグで凝って作ったり、<table>タグを使ってレガシーに仕上げてもいいのですが、<div>タグで背景色を指定する方法が一番簡単でしょうか。HTMLソースはこんな感じです。「float: left」を指定して横に並べるのがポイントで他は難しい部分はないと思います。

<!DOCTYPE html>

<html>

<head>

    <title>MetrooUI HTML Sample Page</title>

    <style type="text/css">

            div.Tile

            {

                    position: relative;

                    height: 150px;

                    width: 150px;

                    background-color: #38A3DB;

                    margin: 10px;

                    float: left;

            }

    </style>

</head>

<body>

    <div id="Contents" style="width:100%">

        <div id="Div1" class="Tile"></div>

        <div id="Div2" class="Tile"></div>

        <div id="Div3" class="Tile"></div>

    </div>

</body>

</html>

 

ブラウザで表示するとこうなります。

image

素人目にはもうこれでメトロUIに見えてしまいます。

(2) コンテンツの表示

先ほどつくったタイルにコンテンツを載せてみましょう。画像を貼ってもいいのですが、とりあえず文字列を載せてみます。タイトルをタイルの左下に、コンテンツ文字列を上部に表示してみます。

タイトル … bottom:0, left:0でタイルの左下に文字列を表示しています。この指定を変更することで、左上や右上に表示することtもできます。

コンテンツ … topを指定してタイルの上部からどれだけ余白を取るか指定しています。30%くらいにするとちょうど真ん中に表示されると思います。

HTMLソースです。

<!DOCTYPE html>

<html>

<head>

    <title>MetrooUI HTML Sample Page</title>

    <style type="text/css">

            div.Tile

            {

                    position: relative;

                    height: 150px;

                    width: 150px;

                    background-color: #38A3DB;

                    margin: 10px;

                    float: left;

            }

           

            span.TileTitle

            {

                    position: absolute;

                    bottom: 0;

                    left: 0;

                    font-family: Meiryo UI;

                    font-size: 16pt;

                    color: White;

            }

       

            span.TileContents

            {

                    position: absolute;

                    padding: 10px;

                    top: 10%;

                    font-family: Meiryo UI;

                    font-size: 24pt;

                    color: White;

            }

    </style>

</head>

<body>

    <div id="Contents" style="width:100%">

        <div id="Div1" class="Tile"><span class="TileContents">コンテンツ</span><span class="TileTitle">タイトル1</span></div>

        <div id="Div2" class="Tile"><span class="TileContents">コンテンツ</span><span class="TileTitle">タイトル2</span></div>

        <div id="Div3" class="Tile"><span class="TileContents">コンテンツ</span><span class="TileTitle">タイトル3</span></div>

    </div>

</body>

</html>

 

ブラウザで表示してみます。

image

もう完璧です。個人的にはこの時点で満足ですが、もう一息行ってみましょう。

(3) マウスオーバーイベント

タイル上にマウスが来た場合にちょっとしたアニメーションが動くようにします、地味なものですが。

  • 丸矢印をタイルの右上に表示
  • 青色をやや透明に
  • タイルの大きさを1.1倍に

CSSの機能で:hoverを使用すると、jQueryのhoverと同じようなことができます。javascriptを記載せずに同等の機能を実現できるは便利ですね。タイルの拡大のtransformにはベンダープレフィクスが必要です。Chromeで動作確認しているので「-webkit-」をつけていますが、IEの場合は「-ms-」いなります。

はい、HTMLソースの全体です。

<!DOCTYPE html>

<html>

<head>

    <title>MetrooUI HTML Sample Page</title>

    <style type="text/css">

            div.Tile

            {

                    position: relative;

                    height: 150px;

                    width: 150px;

                    background-color: #38A3DB;

                    margin: 10px;

                    float: left;

            }

           

            div.Tile:hover

            {

                -webkit-transform: scale(1.1, 1.1);

                /* IEの場合は -ms-transform: scale(1.1, 1.1); */

                    background-image: url("white_vpvot.png");

                    background-repeat: no-repeat;

                    background-position: right top;

                    opacity: 0.75;

            }

       

            span.TileTitle

            {

                    position: absolute;

                    bottom: 0;

                    left: 0;

                    font-family: Meiryo UI;

                    font-size: 16pt;

                    color: White;

            }

       

            span.TileContents

            {

                    position: absolute;

                    padding: 10px;

                    top: 10%;

                    font-family: Meiryo UI;

                    font-size: 24pt;

                    color: White;

            }

    </style>

</head>

<body>

    <div id="Contents" style="width:100%">

        <div id="Div1" class="Tile"><span class="TileContents">コンテンツ</span><span class="TileTitle">タイトル1</span></div>

        <div id="Div2" class="Tile"><span class="TileContents">コンテンツ</span><span class="TileTitle">タイトル2</span></div>

        <div id="Div3" class="Tile"><span class="TileContents">コンテンツ</span><span class="TileTitle">タイトル3</span></div>

    </div>

</body>

</html>

 

 

ブラウザで表示します。

image

もう完璧です。個人的には満足なのでここで一旦終了します。HTMLでも「MetroUIっぽく」作ることができました。何かのお役に立てばと思います。

作成したソースは(ブログに貼ってありますが)こちらにアップしておきます。「MetroUIHTML.zip」をダウンロードして下さい。

Written by david9142

2012年1月18日 @ 1:40 AM

カテゴリー: HTML,javascript

Tagged with , ,

コメント / トラックバック1件

Subscribe to comments with RSS.

  1. 東京メトロUI で対抗してみました。
    http://www.moonmile.net/blog/archives/2907
    hover がないけど。

    moonmile

    2012年1月18日 at 4:36 PM


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。