YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
1分でわかるvideoタグでWebサイトに簡単に動画を表示する方法
videoタグとは 動画を埋め込むためのHTMLタグ。これを使用することで動画をWebサイト内に簡単に表示させることができる。 videoタグの使い方 基本的な使い方は画像のimgタグを似ており、まずwidthとheightでvideoタグ(動画)の高さと幅を指定する。 <video width="640" height="360"> </video> poster="rabbit.jpg"のように指定すると動画再生前のサムネイルを表示できるため、動画のサムネイル画像もあらかじめ用意しておく。 <video width="640" height="360" poster="rabbit.jpg"> </video> poster属性でサムネイル画像を表示しないと再生するまで何も表示されない。 さらにpreload="none"を付けて動画を再生ボタンを押すまで動画データを読み込まないように
Apple Watch（watchOS 5）向けのレスポンシブ対応についてのまとめ
現在ベータ版が公開されているwatchOS 5 から、メールとメッセージ・アプリでHTMLメールやリンク先のページがWebKitで表示されるようになるそうです（Safariは搭載されない）。ついに！ウェブコンテンツをApple Watchで見られるようになるんですね。 HTMLメールが見られたら便利だと思うことがしばしばあるのでwatchOS 5の公開が楽しみです。画面は小さいですけど、HTMLメールやウェブサイトの内容をサクッとチェックできたら便利だと思うんですよね。 ということで、そろそろHTMLメールやウェブサイトのApple Watch向けレスポンシブ対応を考えておいても良さそうですね。 以下は「Designing Web Content for watchOS 」というWWDC 2018の公式ビデオの内容を基にまとめたものです。実際の環境で確認したものではないので、watchOS
Responsive Web Design Patterns | This Is Responsive
Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern
[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。 Split Screen Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。 Pure CSS Masonry Layout Masonryは、カードやパネルをレンガ状に敷き詰めて
![[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/34869b288b480daff8b08b01332b82fbf33502fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017070301.png)
[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック
ページをレスポンシブ対応にする時、デスクトップでは空白スペースを多めにとり、スマホでは少なめにして、スクリーンサイズに適したマージンを与えたい時があります。 マージンの最小値と最大値を設定し、その間の値を変化させる、ビューポートの単位（vw, vh）を使って実装するスタイルシートのテクニックを紹介します。 デモページ 幅1200px, 800px, 480pxでデモページを表示したもので、上部のマージン（margin-top）が変化しているのが分かると思います。 マージンの最大値は15em、最小値は5em、その間の値はスクリーンサイズに応じて変化します。 実際の動きは、下記ページでご確認ください。
![[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/37ba897bfe36cfd2c74c23337ef086ec138cd07b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102006-01.png)
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
» FacebookのPage PluginでPCは小さく、スマホは100%にするレスポンシブ対応CSS｜今プラスブログ
FacebookページをWEBサイトに貼り付ける時に、使うpage plugin。 レスポンシブデザインにする場合、PCが500pxでタブレット、スマートフォンを100%にする場合は結構簡単なんですが、PCの時は240pxなど小さいサイズにしてスマートフォンの時は100%にする場合は少し工夫が必要です。 1.page pluginでは500pxで取得する Page PluginのページのWidthには500を入力して、最大サイズである500pxのコードを取得します。 参考リンク：Page Plugin 2.CSSで下記を指定する 今回はブレイクポイント(画面によってCSSが切り替わるポイント)を2つにしました。 641px以上又は641px以下かというポイントです。 @media screen and (min-width:641px) { .fb-page { width:240px !
地域の魅力を広げるデザイン事務所｜ローカルデザインなら包むデザイン
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ
http://2ndidea.com/css/equally-liquid-layout-css/
Responsive Sidebar Navigation | CodyHouse