レスポンシブ対応についての動画リスト
この再生リストでは、レスポンシブ対応について学び、さまざまなデバイスや画面サイズに適応するウェブデザインを実現する方法を習得します。
まずは、レスポンシブデザインの基本概念と目的を理解します。デバイスの種類や画面サイズが多様化する現代のウェブ環境において、ユーザーに最適な表示を提供するための重要な手法です。
次に、再生リストでは、レスポンシブデザインの実現に欠かせないメディアクエリについて学びます。CSSのメディアクエリを利用して、画面サイズやデバイスの種類に応じたスタイルの適用を行います。
さらに、再生リストでは、パフォーマンスやアクセシビリティに配慮したレスポンシブデザインのポイントも紹介します。これにより、より使いやすく、効率的なウェブサイトを構築することができます。
再生リストを活用して、レスポンシブ対応のスキルを身につけ、あらゆるデバイスや画面サイズで適切な表示を提供できるウェブデザイナー・開発者になりましょう。
-
18:32
レスポンシブ対応の基礎。スマホやタブレットに対応させましょう。
CSSのメディアクエリ(media query)を使って、レスポンシブ対応のサイト作りの基礎を学びましょう。一体どうやったら対応できるのか。なぜこんなコーディングの仕方なのか?を解説しています。具体…
-
22:49
レスポンシブ対応・応用編!メディアクエリーをより深く知って、様々な大きさのスマホ・タブレットなどに対応していく方法を紹介します。
サイトによっては、スマホ・PCに限らずタブレット用のデザインも必要になります。そうすると、かなり複雑な構造なCSSを書いていかなければなりません。この動画では複数の条件を一度に指定する方法から、実際…
-
10:47
pictureタグとsourceタグについて解説!メディアクエリではなくて、HTMLタグで画像を切り替えてみましょう!
この動画では、比較的新しいタグである・picture(ピクチャー)タグ・source(ソース)タグについて説明しています。sourceタグに記述することができる・media属性・type属性について…
-
08:54
要素の最大値・最小値を設定できる、max-width, min-width, max-height, min-height などについて学びましょう!
この動画では、画像や動画などにも使用できる、サイズの最小値・最大値が設定できるプロパティについて説明しています。- max-width- min-width- max-height- min-hei…
-
13:37
CSSの便利な単位 vw, vh, vmin, vmax 解説!
CSSでも比較的新しい単位 vw, vh, vmin, vmax を紹介しています。今までJSを使わないと計算できなかった面倒な処理をCSSのこの単位を使えば簡単に実装することができます。是非覚えて…
-
21:59
CSSの便利な関数 min, max, clamp(クランプ) 解説!
これまでメディアクエリ(@media)を細かく指定しないとできなかったり、max-width, min-widthなどを組み合わせないと出来なかった処理を簡単にできるようになりました。- min関数…
-
08:45
CSSの便利なプロパティ max-content, min-content, fit-content 解説!
内包する文字列に応じたサイズが指定できる3つのプロパティを紹介しています。- max-content- min-content- fit-content今まではHTMLを増やすなどで対応していたのを…
-
11:03
CSSだけで、子要素が親要素をはみ出す方法!右側だけや左側だけはみ出す方法も!
Web制作をしていると、どうしても途中ではみ出せたいことがあります。この動画ではCSSだけで特殊な計算をすることで、それを実現する方法を紹介しています!
-
06:23
メディアクエリーのhoverについて解説!マウスがホバーできるデバイスでのみアニメーションさせる方法!
マウスを乗せることができるPCなどのデバイスでのみ、CSSのhoverの指定をしないと、スマホなどではタップした瞬間にアニメーションが動いてしまいます。今回の動画では、そういったことを防ぐための書き…
-
09:44
レスポンシブ対応(スマホや大きな画面に対応)したスライダーをSwiper(スワイパー)で作る方法!
スライダーを扱っていると画面幅に応じて要素数を増減させたり、見せ方を変えたくなることがあります。この動画では。スワイパーのオプションを使って要素数を変更したり、余白を変更する方法を紹介しています。S…
-
54:48
【実践!サイト模写コーディング!超初心者向け】解説しながらHTML/CSSを書いていきます!レスポンシブ(スマホ)対応まで!
模写の注意点や準備はこちらhttps://factory-programming-mv.com/video/一緒にサイト制作の練習をしましょう!今回、私が数年前に作成した非常にシンプルなサイトを基に…
-
01:23:54
【実践!サイト模写コーディング!初心者向け】 記事の一覧が並ぶサイトの作り方!解説しながらHTML/CSSを書いていきます!レスポンシブ(スマホ)対応まで!
サイトを1から作る練習を一緒にやっていきましょう!1回目の模写動画よりも少し複座なサイトを解説しながら模写しています(ただし、今回も前に私が作ったサイトです)実践的な為、分からないことがあれば下のH…
-
01:12:11
【実践!サイト模写コーディング!初心者向け】 解説しながら初心者向けにHTML/CSSを書いていきます!レスポンシブ(スマホ)対応まで!
サイトを1から作る練習を一緒にやっていきましょう!今回は第三弾です前回のサイトで模写したサイトの下層ページを作っていきます。実践的な為、分からないことがあれば下のHTML/CSS再生リストを見て復習…