「HTML5」カテゴリーアーカイブ

26/1/22 CodeUnion 活動報告

日誌担当者:久保 拓也
【今日の活動内容】

・ポスター作成

・スライド作成

・発表時に使用する紹介動画作成

【投稿担当者の作業内容】

・スライド作成

・発表時に使用する紹介動画作成

【残タスク、次回の作業内容】

・ポスター作成

・スライド作成

・発表時に使用する紹介動画作成

HTML5

作業担当者:鈴木 祥護
作業日  :1月22日

 

CSS構成の整理・再設計

  • CSSを以下の役割別ディレクトリ構成に整理
    • base:リセット・変数・基本設定
    • layout:header / background / screen 等のレイアウト管理
    • components:ボタン・テキスト演出・装飾要素
    • pages:TOP / CALENDAR / ABOUT 等のページ単位CSS

背景(黒ページ群)の統一

  • 黒1〜5ページの背景を統一(1ページ目の黒を基準)
  • 黒3ページ:画像を完全削除し、テキスト訴求用ページへ変更
  • 黒4ページ:ページ自体を削除
  • 背景CSSを css/layout/background.css に集約

カレンダー画面の再構築

■ 問題点

  • calendar.css 消失により日付が非表示
  • 月・年切替時にボタン位置が動く
  • レイアウト依存による再描画ズレ

■ 対応内容

  • calendar-wrapper を基準とした高さ固定設計に変更
  • 月表示(cal-month)に固定幅を設定
  • 年表示・タイトルエリアの高さを固定
  • 操作ボタン(月・年)を画面下部にabsolute固定配置
  • ボタンサイズを完全固定し、連続操作でも位置ズレなし

 

今後の予定(次フェーズ)

  • 月切替時のフェード+スライドアニメーション追加
  • TODAYセルの一瞬発光演出
  • FAQ画面:
    • 質問入力フォーム追加
    • 投稿内容をリアルタイム反映
  • オープニングアニメーション(5秒)導入

26/01/21 めがね2/3 活動報告

日誌担当者: 藤原創太


チームの活動内容

  • UIの調整
  • 使い方画面の追加
  • バグ修正
  • スライドの作成

投稿担当者の作業内容

  • 使い方画面の追加

残タスク・次回の作業内容

  • 恐竜ゲーム
  • スライドの作成
  • 作品ポスターの作成
  • あればゲームの調整

 

バグありました
引き続きいっぱいあそんでバグを見つけたり不満点をさがしたりします。

26/01/20 めがね2/3 活動報告

日誌担当者: 藤原創太


チームの活動内容

  • UIの調整
  • キーボードショートカットの追加
  • スライドの作成
  • 利用マニュアルの作成

投稿担当者の作業内容

  • スライドの作成

残タスク・次回の作業内容

  • 恐竜ゲーム
  • スライドの作成
  • 作品ポスターの作成
  • あればゲームの調整

 

バグは恐らくもう無くなり、利用マニュアルは完成しました
これからは基本スライドとポスター画像の作成で、
ゲームをちょこちょこ遊んでみての不満点を直していきます

html5

作業担当者:鈴木 祥護
作業日  :1月19日

■ 作業内容

  • EVENT CALENDAR 機能の修正・再構築対応

  • カレンダーが「日付縦一列表示」になる不具合の原因調査

  • HTML / CSS / JavaScript の切り分け確認

  • 画面レイアウト(.screen の flex 影響)の検証

  • カレンダー関連CSS・JS・HTMLの再確認

  • 表示崩れの根本原因を特定

今後の予定
・全画面骨組み見直し
・デザイン調整
・投稿フェーズの確認
・ログ機能調整

25/1/19 めがね2/3 活動報告

日誌担当者

松村知生

チームの活動内容
プレゼン資料の作成、モバイル画面の恐竜モード作成

投稿担当者の作業内容

モバイル画面の恐竜モード作成、音のバグ修正

残タスク、次回の作業内容
資料作成、恐竜モード作成

じゃんけんでその日の日報を書く人を決めていますが、毎回作業中の一番忙しい人が負けるというジンクスが確立されつつあります。面白い。あと少し頑張るぞーーーー

HTML5

作業担当者:鈴木 祥護
作業日  :1月16日

■ 作業概要

MIRABA サイトの ページ間背景の自然な接続調整 および
5ページ目「EVENT CALENDAR」画面の設計・実装作業 を実施。

■ 実施内容

1. ページ間背景の調整(1ページ目 → 2ページ目)

  • グラデーション境界が不自然に見える問題を検証

  • .screen 構造と背景指定の関係を整理

  • 疑似要素やブリッジ用グラデーションの影響を切り分け

  • 「二重線が見える」原因を CSS 構造レベルで把握

2. EVENT CALENDAR(5ページ目)設計

  • カレンダー画面のUI仕様を確定

    • タイトル:画面上部

    • 年表示:タイトル下

    • 月表示:左側・大きめフォント

    • 曜日:横並び(英語表記)

    • 日付:中央・グリッド配置

    • 操作ボタン:右下(前月/次月/前年/次年)

  • デザイン方針

    • Googleカレンダーを参考

    • 線・枠は「やさしいシルバー」

    • 高級感・主張しすぎないUI

3. カレンダー日付表示不具合の解決

  • 日付が縦1列になる問題を調査

  • 原因が HTML構造(.cal-date 未使用)+ JS生成方法 にあると特定

  • 正しい Grid 前提構造を整理

  • .cal-date を1日1要素として生成する JS ロジックを確立

  • 10日・20日に EVENT 表示を実装

次回作業予定

・サブリンク画面設計