★レスポンシブWebデザイン
フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ヒーローイメージ</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></link></meta></meta></head></html>
ヘッダーパーツ - ナビゲーション nav要素のレイアウト nav <nav class="gnav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス案内</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> /* ---------------------------------- nav ---------------------------------- */ .gnav ul { display: flex; gap: 40px; colo…
演習 - Codestep Recipe Diary code-step.com モバイルファーストで記述 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】Recipe Diary</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
レスポンシブWebデザイン - 演習 デザインの基本4原則 デザインの基本は以下の4原則に沿ってレイアウト・デザインする事が大切です。 整列 ページ上のものはすべて意識して配置しなければいけません。すべての要素配置が視覚的につながりを持つように意識し…
レスポンシブWebデザイン入門 ascii.jp HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>トップ|allWeb 豆はカラダにイイ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <h1></h1></header></body></html>
レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です alistapart.com レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変…
画面サイズ PCの推奨サイズ 推奨サイズは「1920*1080」 gs.statcounter.comシェア率の高いデバイスの等倍サイズ 実際には、デスクトップ全体にブラウザを使用することは少ないと思われるので「1280pxまたは1440px」で作成します スマートフォンの推奨サイズ …
マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…
