More than 3 years have passed since last update.

独学でHTML/CSS/Javascriptを学んだ素人がもう一度1から学びなおす Part3

Posted at 2021-05-10

レスポンシブデザインについて

レスポンシブデザインについて学んだことを書き留める。実装方法はいくつかあるようだが、とりあえずはわかりやすかった方法で

◆サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StayWorld</title>
    <link rel="stylesheet" href="mobile.css">
    <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 600px)">

    
</head>
<body>
    <h1>Test</h1>
    
</body>
</html>

linkにmedia属性を付与する。
media="screen and (min-width: 600px)
screen：ブラウザを使う場合は基本これ
min(max)-width: スタイルを適用する条件（画面のサイズ）

cssはモバイルファースト

デスクトップからスタイルを設定したいところだが、PC画面のほうが往々にしてページが複雑化しやすい。モバイルのスタイルをベースとして、不足分にデスクトップのスタイルを適応するほうが冗長な記述が少なく済む。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up