タグ

webデザインとレスポンシブに関するmoyashigotoのブックマーク (2)

  • CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム

    どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案(Editor’s Draft)を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案(Last Call Working Draft)が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

    CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
  • iframe要素(Youtubeなど)のレスポンシブ対応

    レスポンシブWebデザインを導入したサイトにYoutube(iframe要素)を埋め込むと自動リサイズされず、スマホで閲覧した際に画面からはみ出ることがないでしょうか?(下記キャプチャ参照) エントリーでは、iframe要素をレスポンシブ対応にする方法をご紹介します。 iframe要素のレスポンシブ対応デモ 当社サイトの下記ページをご覧ください。 画面サイズに応じてYoutube(iframe要素)を自動リサイズしています。 http://www.informarc.co.jp/business/future/ 基的な仕組み(ポイント) iframe要素をdiv要素でラップ <div class="iframeWrap"> <iframe width="320" height="180" src="http://www.youtube.com/embed/xxxxxx"></ifram

    moyashigoto
    moyashigoto 2016/05/12
    “iframe”iframeのレスポンシブル対応に関する記事
  • 1