★実践演習
フォルダー構成 ディレクトリー制作ルール フォルダー構成は、目的・制作内容によって異なります 上位表示が目的の場合 複数人で引き継ぐ場合 効率よく管理する場合 それまで作っていた構成を活かしたまま管理したい（今回はこのケースです） 上位表示が目的…
Ascii Tree Generator フォルダーのツリー構造をテキストで作成する Ascii Tree Generator VS Code拡張機能 見本テキスト 以下のテキストをフォーマットとして覚えさせる . └── Modules ├── Module A │ └── SubModuleA ├── Module B │ └── SubModuleB ├── Mo…
課題03 Recipe Diary 完成例 記述ポイント PC用では、brタグを使わずに「white-space: pre-line;」で見たままの改行を表示する メディアクエリを使って、文字の読みやすさを工夫する .copy > p { margin-bottom: 80px; line-height: 1.7; white-space: pre-l…
提出サイトのサムネイル作成 幅「800px」高さ「800px」の画像を作成 ウェブページ全体をスクリーンショット - FireShot Chromeの拡張機能をインストール 使用可能な状態にする ピンをブラウザのオプションバーに表示するために「ピンを有効化」する スクリー…
提出サイト制作 番号のついている課題は、以下のようにアップロード時点でサムネイルをクリックしたら閲覧可能な状態にする この段階では、シンプルなデザインで進めます まだ完成していない課題は、ダミーを入れておきます ダミー画像 placehold.jp フォル…
Flower Coffee 画像 ブログ画像は、「幅：700px」「高さ：350px」 ← logo.png（透過PNG） ← logo_white.png（透過PNG）unsplash.com unsplash.com unsplash.com unsplash.com unsplash.com unsplash.com unsplash.com unsplash.com テキスト Flower Coffee m…
Hero Header pixabay.com unsplash.com ワイヤーフレーム テキスト Hero Header Home About Shop News Staff Contact Welcome to MyStyle Infomation Hero Header Style 大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。 ランデ…
フルスクリーン - グラデーション girlydrop.com ワイヤーフレーム Google Fonts fonts.google.com テキスト ヒーローイメージ | The Web Design The Web Design Portfolio About Contact Portfolio © The Web Design HTMLコーディング <html lang="ja"> <head> <meta charset="UTF-8"> </meta></head></html>
ヒーローヘッダー フルスクリーン 「header」の背景に、画像がスクリーン全体に広がる方法（ヒーローヘッダー） 見出しは、画面の上下左右の中央に配置 girlydrop.com ワイヤーフレーム HTMLコーディング <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】GIRLY STYLE</title> </meta></meta></head></html>
宅配料理トップページ作成 unsplash.com ワイヤーフレーム テキスト foodie. ホーム メニュー プラン 料金 店舗 朝は、 手軽で美味しい 朝食を プランを 1 つ選択し、配達時間を入力すると 、 家から出ることなくおいしい料理をお楽しみいただけます。 今す…
旬の野菜便のページ作成 unsplash.com unsplash.com ワイヤーフレーム テキスト 旬の野菜便 旬の野菜便について お問い合わせ いつでもそばに 美味しい野菜を 取れたての新鮮な野菜 旬の野菜便はいつでも取れたての新鮮な野菜を配送。だから届いてもすぐにお…
スペインの魅力ページ作成 「スペイン観光ガイド」を応用 「section」の使い方を理解する 「dl (description list)」の使い方を理解する 「flex-direction: row-reverse;」の使い方を理解する ワイヤーフレーム 写真の選び方 文字を読んでもらえることが少な…
NEWSページ作成 キービジュアルは、ブラウザ幅100％ section幅は、960px（可変） h2（見出し）は、擬似要素で英語・日本語併記 ワイヤーフレーム 画像 unsplash.com テキスト The Code NEWS NEWS 2024.10.10 ホームページをリニューアルしました。 2024.10.1…
レシピページを作成 ワイヤーフレーム 幅は、「header」「main」「footer」すべて 100％ 余白は、適宜指定 画像 unsplash.com unsplash.com unsplash.com unsplash.com テキスト 画像のalt内容は割愛しています 日々の料理レシピをまとめている Recipe Diary…
ポートフォリオページを作成 生成AIで作成したプロフィールを元に作成（詳細は、オリジナル作成） 名前：田中 景子 (たなか けいこ) 撮影ポリシー：自然の中に完全に溶け込み、長時間じっくりと被写体を観察することで、最高の一瞬を逃さずに捉えることがで…
今後の課題設計 以下の、カメラマンの撮影した写真で構成するWebページ・Webサイトを作成することを前提とします（この設定は、適宜変更してください） 初期段階は、PC用の表示 次の段階は、マルチデバイス対応を目標としてブラッシュアップしていきます 画…
header部 ページ内容のテーマ及びタイトルが入る ページ全体のアイキャッチとして画像を利用する 「header」は、ページ内に複数可能なため「クラス名」を設定します header部のポイント 「h1」を背景画像の中央に配置（flex-box） 背景写真が明るい場合、文…
見出しの設定 中見出し 「h2」で設定 一般的に、h2がありその下部にテキストコンテンツがある場合、h2を含むテキストを「section」タグで囲みます 今回は、h2を含むテキストをmainタグで囲んでいるため「section」は、記述しなくても結果は同じになります ペ…
conatiner （コンテンツ全体） 全体のレイアウト構造 レイアウトブロック、クラス名「container」が body 全体の左右中央に配置 「.container」の最大幅は、「760px」（最大幅は、可変可能にする設定） 上下に「30px」の余白を設定 「.container」の内側に上…
HTMLコーディング ワイヤーフレームに沿ってマークアップ ポイント HTMLドキュメントには、header・main・footer タグの記述が必須 中央配置にするためのレイアウトブロック「div class="container"」で、header・main・footer タグ全体を囲む h1（ページテ…
スペイン観光ガイドを作成 作成条件 最大幅 760px のコンテンツを中央配置 ブロック指定は、全体を .container で囲む .container 内に、header、main、footer を配置 背景色・文字色は、写真から適宜抽出（基本的に、補色の関係にある2色を選択） 文字サイ…
