CSSのaspect-ratioで動画をレスポンシブ対応させる方法｜DAD UNION – エンジニア同盟
Webページをデザインする際、レスポンシブ対応は欠かせません。特に、画像や動画などのメディアコンテンツを扱う場合、様々なデバイスで適切に表示されるようにする必要があります。 今回は、CSSのaspect-ratioプロパティを使用して、videoタグで挿入された動画をレスポンシブ対応させる方法をご紹介します。 はじめに HTMLで画像を扱う場合、imgタグの幅（width）を指定すると、高さ（height）が自動的に調整されます。しかし、videoタグの場合、幅を指定しても高さが自動的に調整されないため、縦横比が崩れることがあります。これを解決するためにaspect-ratioプロパティを使用します。 aspect-ratioとは aspect-ratioプロパティは、要素の縦横比を指定するためのCSSプロパティです。このプロパティを使用することで、要素の幅が変更されても指定した縦横比を維
fancybox.jsを使ってタッチやレスポンシブ対応可能なlightboxモーダル表示方法【jQueryプラグイン】｜DAD UNION – エンジニア同盟
タッチやレスポンシブ対応可能なlightboxモーダル表示のCSS記述 ※jquery.fancybox.cssファイルを読み込みます。ギャラリー画像（a[data-fancybox] img）、モーダル表示時のcaption（.fancybox__caption）のCSS記述です。必要に応じて変更して下さい。 <style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 2em; padding-bottom: 20px; } a[data-fancybox] img { cursor: zoom-in; width: 150px; } .fancybox__caption
freewall.jsを使ったグリッドレイアウト方法【レスポンシブ対応】｜DAD UNION – エンジニア同盟
レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウトのCSS記述 ※グリッド表示エリア（free-wall）のCSS記述です。必要に応じて変更して下さい。 <style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 2em; padding-bottom: 20px; } .free-wall { margin: 15px; } </style> レスポンシブにも対応したfreewall.jsを使ったグリッドレイアウトのHTML記述 ※グリッド出力先エリア「id=”freewall”」を用意します。 <h1>freewall.jsを使ったグリッドレイアウト
Drawerでレスポンシブ対応のドロワーメニューを簡単に実装する方法【jQueryプラグイン】｜DAD UNION – エンジニア同盟
jQueryプラグインのDrawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装する方法をご紹介します。 Drawerはレスポンシブ対応サイトのスマホでドロワーメニューを簡単に実装できるプラグインです。 Drawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装する読込CSSファイル ※sandbox.css、drawer.min.cssファイルを読み込みます。 <link href="sandbox.css" rel="stylesheet"> <link href="./dist/css/drawer.min.css" rel="stylesheet"> Drawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装するHTMLの記述 ※今回左からドロワーメニューを表示させますが、上・右からメニュー表示も可能です。 <body class="drawer draw
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
