★モバイルファースト
PHOTO BOOK 記述例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】PHOTO BOOK</title> <link rel="icon" href="img/favicon.ico"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></link></meta></meta></head></html>
Profile CSSを、モバイルファーストで記述 グリッドレイアウトの基本概念 developer.mozilla.orgグリッド線によるレイアウト（profileブロック） モバイル PC（斜線部は、gapの値） 記述例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】Profile</title> </meta></meta></head></html>
Recipe Diary 記述例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>【コーディング練習】Recipe Diary</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="img/favicon.ico"> <link rel="preconnect" href="https://fonts.googleapis.com"> <…</link></link></meta></meta></head></html>
ポートフォリオ 記述例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】ポートフォリオ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> </div></body></html>
スペイン観光ガイド 記述例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】スペイン観光ガイド</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> </div></body></html>
モバイルファーストに特化するメリット 制作コストの減少 ページ読み込み速度の向上 検索エンジン最適化（SEO） モバイルファーストに特化したデザインのポイント 読み込みに負担をかけない 可読性に配慮する フォントサイズ：GoogleはPC、モバイルとも16px…
Responsive Web Design JP 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト responsive-jp.com sankoudesign.com
