Web白描

Webデザインの勉強 - 演習

★実践演習

フォルダー構成

フォルダー構成 ディレクトリー制作ルール フォルダー構成は、目的・制作内容によって異なります 上位表示が目的の場合 複数人で引き継ぐ場合 効率よく管理する場合 それまで作っていた構成を活かしたまま管理したい(今回はこのケースです) 上位表示が目的…

Ascii Tree Generator

Ascii Tree Generator フォルダーのツリー構造をテキストで作成する Ascii Tree Generator VS Code拡張機能 見本テキスト 以下のテキストをフォーマットとして覚えさせる . └── Modules ├── Module A │ └── SubModuleA ├── Module B │ └── SubModuleB ├── Mo…

課題03 Recipe Diary

課題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 フォル…

課題11 - Flower Coffee

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…

課題 10 - MyStyle

Hero Header pixabay.com unsplash.com ワイヤーフレーム テキスト Hero Header Home About Shop News Staff Contact Welcome to MyStyle Infomation Hero Header Style 大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。 ランデ…

課題 9 - The Web Design

フルスクリーン - グラデーション girlydrop.com ワイヤーフレーム Google Fonts fonts.google.com テキスト ヒーローイメージ | The Web Design The Web Design Portfolio About Contact Portfolio &copy The Web Design HTMLコーディング <html lang="ja"> <head> <meta charset="UTF-8"> </meta></head></html>

課題 7 - GIRLY STYLE

ヒーローヘッダー フルスクリーン 「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>

課題 8 - 宅配料理

宅配料理トップページ作成 unsplash.com ワイヤーフレーム テキスト foodie. ホーム メニュー プラン 料金 店舗 朝は、 手軽で美味しい 朝食を プランを 1 つ選択し、配達時間を入力すると 、 家から出ることなくおいしい料理をお楽しみいただけます。 今す…

課題 6 - 旬の野菜便

旬の野菜便のページ作成 unsplash.com unsplash.com ワイヤーフレーム テキスト 旬の野菜便 旬の野菜便について お問い合わせ いつでもそばに 美味しい野菜を 取れたての新鮮な野菜 旬の野菜便はいつでも取れたての新鮮な野菜を配送。だから届いてもすぐにお…

課題 5 - スペインの魅力

スペインの魅力ページ作成 「スペイン観光ガイド」を応用 「section」の使い方を理解する 「dl (description list)」の使い方を理解する 「flex-direction: row-reverse;」の使い方を理解する ワイヤーフレーム 写真の選び方 文字を読んでもらえることが少な…

課題 4 - NEWS

NEWSページ作成 キービジュアルは、ブラウザ幅100% section幅は、960px(可変) h2(見出し)は、擬似要素で英語・日本語併記 ワイヤーフレーム 画像 unsplash.com テキスト The Code NEWS NEWS 2024.10.10 ホームページをリニューアルしました。 2024.10.1…

課題 3 - Recipe

レシピページを作成 ワイヤーフレーム 幅は、「header」「main」「footer」すべて 100% 余白は、適宜指定 画像 unsplash.com unsplash.com unsplash.com unsplash.com テキスト 画像のalt内容は割愛しています 日々の料理レシピをまとめている Recipe Diary…

課題 2 - ポートフォリオ

ポートフォリオページを作成 生成AIで作成したプロフィールを元に作成(詳細は、オリジナル作成) 名前:田中 景子 (たなか けいこ) 撮影ポリシー:自然の中に完全に溶け込み、長時間じっくりと被写体を観察することで、最高の一瞬を逃さずに捉えることがで…

課題設計

今後の課題設計 以下の、カメラマンの撮影した写真で構成するWebページ・Webサイトを作成することを前提とします(この設定は、適宜変更してください) 初期段階は、PC用の表示 次の段階は、マルチデバイス対応を目標としてブラッシュアップしていきます 画…

スペイン観光ガイド - header・footer

header部 ページ内容のテーマ及びタイトルが入る ページ全体のアイキャッチとして画像を利用する 「header」は、ページ内に複数可能なため「クラス名」を設定します header部のポイント 「h1」を背景画像の中央に配置(flex-box) 背景写真が明るい場合、文…

スペイン観光ガイド - 見出し・箇条書き

見出しの設定 中見出し 「h2」で設定 一般的に、h2がありその下部にテキストコンテンツがある場合、h2を含むテキストを「section」タグで囲みます 今回は、h2を含むテキストをmainタグで囲んでいるため「section」は、記述しなくても結果は同じになります ペ…

スペイン観光ガイド - conatiner

conatiner (コンテンツ全体) 全体のレイアウト構造 レイアウトブロック、クラス名「container」が body 全体の左右中央に配置 「.container」の最大幅は、「760px」(最大幅は、可変可能にする設定) 上下に「30px」の余白を設定 「.container」の内側に上…

スペイン観光ガイド - HTMLコーディング

HTMLコーディング ワイヤーフレームに沿ってマークアップ ポイント HTMLドキュメントには、header・main・footer タグの記述が必須 中央配置にするためのレイアウトブロック「div class="container"」で、header・main・footer タグ全体を囲む h1(ページテ…

課題 1 -スペイン観光ガイド

スペイン観光ガイドを作成 作成条件 最大幅 760px のコンテンツを中央配置 ブロック指定は、全体を .container で囲む .container 内に、header、main、footer を配置 背景色・文字色は、写真から適宜抽出(基本的に、補色の関係にある2色を選択) 文字サイ…