カテゴリー別アーカイブ: レスポンシブWEBデザイン

エラスティックビデオの実装

エラスティックビデオとは, YouTubeなどの埋め込み動画のサイズをレスポンシブに変化させる実装のことです.

実装はCSSを設定するだけでできるので比較的簡単にできます.

以下のようにHTMLがあるとします.

 <div class="embed-container"><iframe src="//www.youtube.com/embed/dCvuBz1FYWg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

CSSは以下のように設定します.

.embed-container {
    // for elastic video
    position:relative;
    padding-bottom:56.25%;  // 315 / 560
    height:0px;
    overflow:hidden;

    // for elastic video
    iframe,
    object,
    embed {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    }
}

ポイントは, iframe (, object, embed) のスタイルと, 埋め込み動画のコンテナとなる要素 (.embed-container) の padding-bottomです.
iframe (, object, embed) を上記のように設定することで, ブラウザの幅に応じて埋め込み動画のサイズも変化します.
ただし, これだけだと, 高さが変化しないので, コンテナとなる要素に, padding-bottom を (動画のheight / 動画のwidth) の比率で設定しておきます.

jQuery $(window).innerWidthメソッドの注意点

jQueryの$(window).innerWidthメソッド (とinnerHeightメソッド) はてっきり, window,innerWidth / window.innerHeightプロパティのアクセッサメソッド (ゲッター / セッター) になっていると思っていたのですが, jQueryをのぞいてみると, 実はそうではなく,

document.documentElement.clientWidth;
document.documentElement.clientHeight;

上記2つのプロパティのアクセッサメソッドとなっていました…

レスポンシブサイトを作成しているときに, どうもメディアクエリの幅と$(window).innerWidthメソッドで取得した幅が合致しないのでバグなのかな ? と思っていたのですが, これで解決しました.

ちなみに, メディアクエリの値と合致するのは, window,innerWidth / window.innerHeightプロパティです. したがって, レスポンシブサイトの作成で, JSから画面幅などを取得するときにはjQueryのメソッドではなく, window,innerWidth / window.innerHeightプロパティを利用するようにしましょう.

Web Audio API 解説サイト レスポンシブレイアウトの変更

Web Audio API 解説サイトのスマートフォン (320px – 767px) / タブレット(768px – 1023px) のナビゲーションを変更しました.

ヘッダーにメニューアイコンを追加して, アイコンをタップするとグローバルナビゲーションが表示されるようにしました.

狭い画面で何を重視して見せる & PCサイトと同じようにユーザビリティを確保する…これは経験とアイデアを磨いていくしかないですね

メインサイトのリニューアル

自分のメインサイトのリニューアルが一応完了しました.

今風の, レスポンシブ・フラットデザインでリニューアルしました.

CSS3を駆使して, Designing in the browserのワークフローも実践してみました.

JavaScriptからメディアクエリを判定する

windowオブジェクトのmatchMediaメソッドを利用する. このメソッドはMediaQueryListオブジェクトを返す. このオブジェクトには, matchesというプロパティがあり, それを判定する

if (window.matchMedia('(min-width: 1024px)').matches) {
    //do something ...
}

また, MediaQueryListオブジェクトにはイベントリスナを設定したり, 削除したいすることが可能.

window.matchMedia('(min-width: 1024px)').addListener(function(){
    //対応するメディアクエリが有効になったときに実行される
});

メディアクエリに合致すればリスナに設定した処理が実行される.

レスポンシブデザインには利用場面が多いでしょう.

ソリッドレイアウトを含む場合のレスポンシブ対応

例えば, レスポンシブレイアウトなんだけど, 広告とか一部のブロックが固定幅のような場合…

例えば, 左側のブロックが固定, 右側のブロックがレスポンシブ名場合…

#right-block {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;

    float:right;

    padding-left:780px;  //隣の固定ブロックの幅だけpadding
    width:100%;
}

#left-block {float:left; margin-right:-780px;}

ポイントは, レスポンシブ側のブロックで, width:100%; padding-leftもしくはpadding-rightを固定ブロック側の幅に指定する.

このままだと, 100% + paddingになって, はみ出過ぎなレイアウトになるけど, box-sizingを指定することで, paddingを含めて, 100%の幅になる.

あとは, 固定側のブロックをfloatさせる.

もっとも, そのままだと, レスポンシブ側のブロックが既に幅いっぱいなので, その左か右に回り込んでしまうので, ネガティブマージンを利用して無理やりブロック内におさめるように移動させる.

これでめでたし.

Griddle.it

例えば, 320px幅を3カラム, 間の2つの余白を10pxに設定する場合,

以下のように, URLを入力してアクセスすると指定したグリッド用の背景画像が取得できます

http://griddle.it/320-3-10

さらに, クエリパラメータで縦方向のグリッドを指定することもできます.  例えば, 24pxごとに高さを揃える場合, 以下のURLでアクセスします.

http://griddle.it/320-3-10?horizontal=24

ちなみに, &num=falseとつければ, グリッドの数値を非表示にできます.

http://griddle.it/320-3-10?horizontal=24&num=false

これはすごく便利なツールですね.

 

レスポンシブWEBサイト + フラットデザイン

公開しているメインのサイトをリニューアルしたいな〜と思っていてなかなか手つかずでしたが, ようやく今日から着手.

今回のリニューアルでは, 1つのHTMLで様々なデバイスに対応できるように, レスポンシブなWEBサイトにチャレンジ.

あと, モダンな感じを出せるようにグラデーションなどを極力控えたフラットデザイン, モバイルファーストの考えを意識して作成していく.

さてさてどんな感じに完成するかは数日後のお楽しみということで…

レスポンシブWEBサイトの作成には便利なWEBツールがたくさんありますが, 今日はそのうちの1つ, VIEWPORT RESIZERの使い方を簡単に紹介しておきます.

  1. まずは, サイトにアクセス
  2. CLICK OR BOOKMARKのボタンをブラウザのブックマークバーにDrag & Drop
  3. 作成するサイトでブックマークにアクセス
  4. スマートフォン, タブレット, デスクトップなどデバイスや, ポートレート (縦向き) やランドスケープ (横向き) にも対応しています.

これはすごく便利です.