ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/10
NEW
【週刊ドットインストール】 レッスン制作の進捗、レッスン一覧リニューアルプロジェクト、Astroサイトが進化中
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】詳解CSS レスポンシブウェブデザイン編
画面サイズにあわせてレイアウトを切り替えていくことができるレスポンシブウェブデザインについて学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSS入門 メディアクエリー編
メディアクエリーを活用して、ビューポートの幅に応じたレイアウトを組み上げる手法について見ていきます。
0%
動画レッスン一覧
(8)
質問と回答
(47)
#01 レスポンシブウェブデザインを学ぼう
(02:54)
無料公開中
概要の説明
index.htmlの作成
styles.cssの作成
未完了
#02 viewportの設定をしよう
(02:33)
無料公開中
デベロッパーツールの起動
viewportの設定
未完了
#03 メディアクエリーを使ってみよう
(01:39)
メディアクエリー
動作確認
未完了
#04 実践的な設定方法を学ぼう
(02:21)
完成版の確認
条件の設定
未完了
#05 モバイルファーストで開発しよう
(02:02)
メディアクエリーの設定
モバイルファースト
未完了
#06 モバイルサイトのスタイルを作ろう
(01:52)
モバイルサイト向けのスタイル
動作確認
未完了
#07 要素を横並びにしよう
(02:14)
flexboxの設定
動作確認
未完了
#08 要素の表示/非表示を切り替えよう
(02:38)
中央揃えの設定
要素の表示/非表示の切り替え
未完了
#01 レスポンシブウェブデザインを学ぼう
デベロッパーツールでメディアクエリのスタイルを検索する方法はありますか?
2022年1月27日
VS Codeを空っぽにするには?
2022年1月27日
headの閉じタグがtemlになってしまうのですが...
2022年1月27日
ファイル名をindex.htmlにするのはなぜですか?
2022年1月27日
新しくファイルを作ったらコードに色がつかなくなりました
2022年1月27日
VS Codeの自動保存機能はどう設定するのですか?
2022年1月27日
#02 viewportの設定をしよう
「最初のズーム設定を等倍にしておきたいから」とは、デベロッパーツール上での表示のことを指していますか?
2022年1月27日
デベロッパーツールの倍率の右に Online の表記がありません
2022年1月27日
meta タグや link タグを head タグの中に書くのはなぜですか?
2022年1月27日
倍率 100% とはどういうことですか?
2022年1月27日
metaタグは複数書いてもいいですか?
2022年1月27日
initial-scale=1の“1”が示す意味は?
2022年1月27日
viewportの設定は入れておくべきですか?
2022年1月27日
viewportと@media screenはどう違うのか
2022年1月27日
#03 メディアクエリーを使ってみよう
メディアクエリの幅の指定はどのようにすべきですか?
2022年1月27日
別の教材ではメディアクエリの設定に @media screen and ~ { } と書いてあったのですが...
2022年1月27日
デベロッパーツールが右側に出ます
2022年1月27日
本文が折り返されないのですが、理由を教えてください
2022年1月27日
backgroundとbackground-colorの違いは何ですか?
2022年1月27日
skyblueに変化するときのブラウザ幅が動画と異なります
2022年1月27日
#05 モバイルファーストで開発しよう
モバイルファーストでは min-width を、デスクトップファーストでは max-width を使うのはなぜですか?
2022年1月27日
モバイルファーストで作成する場合、一番小さいデバイスを基準に作成していくべきですか?
2022年1月27日
なぜ一部のメディアクエリの条件を削ったのですか?
2022年1月27日
コメントで記載するスクリーンの大きさは必要でしょうか?
2022年1月27日
モバイルファーストの逆の発想、用語はありますか
2022年1月27日
画面幅が大きい順で書いていくこともできますか?
2022年1月27日
#06 モバイルサイトのスタイルを作ろう
パソコン用サイトから作りはじめてもよいのですか?
2022年1月27日
#07 要素を横並びにしよう
なぜ section で div を囲うのですか?
2022年2月16日
メディアクエリーのサイズは何 px にするのが妥当ですか?
2022年2月10日
inline-block と Flexbox の使い分けを教えてください
2022年1月27日
フレックスコンテナを作るためには .container クラスが必要なのですか?
2022年1月27日
600px以上で横並びになったときコンテンツの幅になってしまうのはなぜですか?
2022年1月27日
flexのあとの1は何ですか?
2022年1月27日
ソースコードをコピーしてもレスポンシブルがうまくいかない
2022年1月27日
bodyにdisplay:flexとしてはだめですか?
2022年1月27日
#08 要素の表示/非表示を切り替えよう
おすすめの学習方法を教えてください
2022年3月2日
display-block で aside が表示されるのはなぜですか?
2022年1月27日
動画と同じように実行していますが、<aside> の表示がうまくいきません
2022年1月27日
section は margin: 0 auto; ではなく margin: auto; でも大丈夫ですか?
2022年1月27日
margin: 0 auto; とするとコンテンツが中央揃えになるのはなぜですか?
2022年1月27日
display: flex を記述しなくても横並びになるのはなぜですか?
2022年1月27日
HTMLで画像サイズを設定されていたときは?
2022年3月28日
asideをdisplay:flex;でも同様の配置になりますが問題ありますか?
2022年1月27日
asideはdisplay: inlineにすべきでは?
2022年1月27日
「margin 0 auto」と「justify-content:center」は同じ意味ではないのですか?
2022年1月27日
asideのheightを設定していないのに100pxになるのはなぜですか?
2022年1月27日
なぜasideをblockにするとlarge screenになったときの表示になるのですか?
2022年1月27日
リリース情報(note)
『詳解CSS レスポンシブウェブデザイン編』をリリースしました
詳細情報
最終更新日
2019年12月5日
バージョン情報
Chrome 78.0 / Visual Studio Code 1.38.0