★テキストサンプル（引用）
Part5 - TOP Harvest Restaurant home concept menu info CONCEPT MENU INFORMATION HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】TOP | Harvest Restaurant</title> <link rel="stylesheet" href="css/top.css"> </link></meta></meta></head></html>
Part5 - INFO INFO INFO 山の中にひっそり佇む 隠れ家レストラン 駅からはちょっぴり遠いですが、 たまには遠回りしてみませんか？ Access Capybaland Mt.Sunny 1-2-3 in Capyzou farm 「サニー山駅」から車で10分 [OPEN]10:00-22:00 [CLOSE]Monday Garelly …
Part5 - MENU MENU MENU 旬の野菜と食材を 手軽に味わえる 自家農園の食材のため、リーズナブルにご提供 季節ごとにサラダ/メインメニューは変わります Salad Main Pasta HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】MENU | Harvest Restaurant</title> </meta></meta></head></html>
Part5 - CONCEPT CONCEPT CONCEPT 口に入れた瞬間 カラダが喜ぶ 自家農園で太陽の光をたっぷり浴びた 採れたて・無農薬のお野菜をふんだんに使っています Fresh カラフルサラダでしっかりビタミンをチャージ。 朝採れ野菜のパリッとした食感と自家製ドレッシ…
Part5 - 複数ページのサイト テキスト P.208 全体を俯瞰して作りやすところから始めます Webサイト制作の流れ 企画・要件定義 サイト設計 制作 Webデザインの基本 揃える 差をつける グループ化 繰り返し Webの特性を考慮したデザイン 操作できること 閲覧環…
position: sticky position: sticky スクロールすると、navも動き最上部で固定される <header class="header"> <div class="container"> <h1> <img src="img/hero_text.png" srcset="img/hero_text.png 1x, img/hero_text@2x.png 2x" alt="Welcome to Our Wedding Party"> </h1> <p class="scroll">Scroll<br></p></div></header>
form フォーム記述例 <main class="main-content"> <section class="msgSec"> </section> <section class="dateSec"> </section> <section class="form-section"> <div class="container"> <h2>RSVP</h2> <form action="#" method="post" class="rsvp"> </form></div></section></main>
::before, ::after HTML記述例 class名は、似通った名前が設定されているので、どのブロックを指すのかを意識しながら記述します モバイルファーストの記述とformのマークアップは、次の段階で行います <main class="main-content"> <section class="msgSec"> <h2>Message</h2> <p>この度、カピぞうとカピ子は<br> ウェディング</p></section></main>…
WebFont header WebFontsを読み込み <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Wedding Party Invitation</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <…</link></link></meta></meta></head></html>
MarkUp ユーザーは上から順にコンテンツを見るため、順番をよく考えて情報設計をすることが大切です PC版とスマートフォン版の例のギャップも少ないため、レスポンシブWebデザインと相性のよいレイアウトです HTMLの構造 デザインカンプ「design.png」を見な…
form フォーム記述例 <main class="main-content"> <section class="msgSec"> </section> <section class="dateSec"> </section> <section class="form-section"> <div class="container"> <h2>RSVP</h2> <form action="#" method="post" class="rsvp"> </form></div></section></main>
::before, ::after HTML記述例 class名は、似通った名前が設定されているので、どのブロックを指すのかを意識しながら記述します モバイルファーストの記述とformのマークアップは、次の段階で行います <main class="main-content"> <section class="msgSec"> <h2>Message</h2> <p>この度、カピぞうとカピ子は<br> ウェディング</p></section></main>…
Part３ - ２カラムページ（CSS ） テキストとは別のワークフローで記述してみる CSSはresetも含めて１ファイルで記述 読み込みファイル数を少なくする <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】FARM CAPYZOU</title> <link rel="stylesheet" href="css/style.css"> </head> reset CSS @c…</html>
Part３ - ２カラムページ（マークアップ） マークアップ HTMLで文書構造を作成 テキスト内容のアウトラインを見ると以下のようになります aside部内のnav要素内の「h2」は「h3」として判断されています ※asideにnavタグ使用は適切ではないため、divタグに変…
