★テキストサンプル（引用）
ハンバーガーメニュー - jQuery jQueryでクリックイベントを作成する場合 jQueryでクリックイベントを作成する場合 ボタンのアニメーションは、CSS3で設定 HTML記述例 <header class="header"> <h1><span>info</span></h1> <div class="menu"> <p id="btn"><span id="hum"></span></p> </div> <nav class="gnav"> <ul> <li><a href="../index.html">HOME</a></li> <li></li></ul></nav></header>
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」を見な…
Part３ - ２カラムページ（カスタマイズ ３） ハンバーメニューを追加 HTML記述例 <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"> </link></meta></meta></head></html>
Part３ - ２カラムページ（カスタマイズ ２） レイアウト（横並び） ２つを囲む外枠を指定する「container」 横並びのレイアウト指定は、「grid」「flex」の２種類のうちどちらかで指定します 「grid」は、可変の設定が簡単（幅指定なし） 「flex」は、幅指…
Part３ - ２カラムページ（カスタマイズ １） テキストとは別のワークフローで記述してみる モバイルファーストで記述します（スマートフォン対応） CSSはresetも含めて１ファイルで記述 読み込みファイル数を少なくする <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】FARM CAPY</title></meta></meta></head></html>…
Part３ - ２カラムページ（マークアップ） マークアップ HTMLで文書構造を作成 テキスト内容のアウトラインを見ると以下のようになります aside部内のnav要素内の「h2」は「h3」として判断されています ※asideにnavタグ使用は適切ではないため、divタグに変…
Part３ - ２カラムページ（文書構造） テキストP.096〜 文書構造（セマンティックなマークアップ） HTML Living Standard（日本語訳） セマンティックWeb テキストP.037 検索サイトに正確な情報を提示する Webアクセシビリティも考慮する Webサイトを構成す…
カスタマイズ マルチデバイス対応するためには、横幅（width）の記述は最小に留める レイアウト設計（クラス名付与）を、自分の考え方で進める テキストの指示は、外観のみを参考にする（デザインカンプからコーディングをする練習） カスタマイズ記述例 - …
SNSリンク集を作ってみよう テキストP.062〜 課題制作の目的 HTML+CSS基本の理解 サイト制作必須ツールの使い方（VS Code、デベロッパーツール） CSSの実践的な使い方 HTMLの入力 CSSファイルは、外部参照の記述をする 画像は、「img」フォルダーを作成して…
