★レスポンシブWebデザイン
お問合せフォーム - Google フォーム Googleフォーム作成 Googleドライブ - Googleフォーム お名前（記述式）：必須 メールアドレス（記述式）：必須 お問い合わせ内容（段落） 新規スプレッドシートとリンクする お問い合わせ内容を記録しておく Googleフォ…
お問合せフォーム HTMLフォームを作成 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"> </head> <body> <div class="container"> <h1>お問い合わせ</h1> <p>お気軽にお問い合わせください。</p> </div></body></html>
モバイルファースト - header例 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Menu</title> <link rel="stylesheet" href="css/menu.css"> </head> <body> <header class="header"> <div class="container"> </div></header></body></html>
レスポンシブ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>
1段組の可変レイアウト 要素の可変 <div class="container"> <p>木曾路はすべて山の中である。<br>あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東</p></div>…
レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です alistapart.com レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変…
画面サイズ PCの推奨サイズ 推奨サイズは「1920*1080」 gs.statcounter.comシェア率の高いデバイスの等倍サイズ 実際には、デスクトップ全体にブラウザを使用することは少ないと思われるので「1280pxまたは1440px」で作成します スマートフォンの推奨サイズ …
マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…
フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する 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>
モバイルファースト - ハンバーガーメニュー HTML記述例 ナビゲーションは「モバイル用」と「PC用」と作成し、ボタンイベントで表示を切り替える <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】CASABLANCA</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ナビビゲーションを position で設定
ヘッダーパーツ - ナビゲーション 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…
ヘッダーパーツ ロゴとグローバルナビゲーション ロゴ作成 適宜作成 font-awesome CDN cdnjs.com マークアップ button要素でクリックできる要素とする（a要素で作成も可） 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ヘッダーのパーツ</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
