作品タイトル
伊丹の梅の木はどこに消えた？
Who moved our trees of plum in Itami?
コンセプト、ポイント
- あくまで課題なのでHTML5/CSS3の技術の実験と確認
- 写真を中心に使って、梅のウィルス（ウメ輪紋ウイルス）問題、地元の緑ヶ丘公園を知ってもらう
- 作成を通して知らなかった地元の事を勉強しよう
- タイトル文字ロゴはSVGを使用。タイトル背景の共通トップイメージはクリックスライド式表示。
サイトマップと内容
01.TOP-伊丹の緑ヶ丘公園梅林のウィルス対策のための伐採についてメインに以前の梅写真。
記事01.事件の概要。->01-01:事件の詳細ページへ
記事02:過去の梅林概要。->01-02:過去の梅林詳細ページへ
記事03:現在の梅林概要。->01-03:現在の梅林詳細ページへ
01-01:事件の詳細ページ
写真と記事
01-02:過去の詳細ページ
写真ギャラリーと記事
01-03:現在の詳細ページ
写真ギャラリーと記事
02.About
本サイトについて
著者について：自己紹介
03.プラムボックスウィルス（ウメ輪紋ウイルス）について
プラムポックスウィルス（ウメ輪紋ウイルス）についての記事
対策についてについての記事
日本での最初の例（青梅？）ついての記事
04.過去の梅林と現在の様子比較
過去（2015年2月）の写真と現在（2015年4月）の写真の違いを表示
過去と現在の様子の比較の説明文
05.Map：緑ヶ丘公園の紹介
緑ヶ丘公園の紹介と地図
鴻臚館（こうろかん）について
賞月亭（しょうげつてい）について
06.他紹介サイト、リンク
他のウイルス問題紹介サイトのリンク等
07.お問い合わせ
問い合わせメールフォーム
aside01-ポトマック川の桜の木の台木は伊丹の桜
aside02-陛下の生誕記念植樹の石碑発見
aside03-緑ヶ丘公園は桜で満開だった
aside04-伊丹と園芸について
aside05-緑ヶ丘神社について
aside06-鴻臚館について
aside07-伊丹の歴史
aside08-いたみホール（伊丹市立文化会館）について
aside09-市民プールの思い出について
aside10-取材中にゃんこと遭遇
難しかった点、工夫した点
h1のタイトル文字を当初英文のみWeb Fontにしていたが、Illustratorでアウトライン化することで
SVGファイルにして日本語文もあわせてベクトル画像化。
しかし、Safariでimgタグで表示するとドロップシャドウが消えてしまう。
objectタグで表示するとaタグでリンクがきかない。直すにはdivで囲んでdisplay: inline-block;して
objectタグにpointer-events: none;で解決したがIE9は非対応。そこでテキストのh1をopacity:0;で上に重ねておいた。
フォーム画面のTableも以外に苦労した。フォーム画面にChromeのバグ発生。Naviメニューのtrasitionが
おかしくなった。テーブル、セルの幅が中のinputの幅で変わってしまうのでお尻が揃わない。
ブラウザ毎にinputの幅も違うようで、テーブルのサイズが異なってしまう。
tableをborder-collapse: collapse;にするとborder-raiusが効かない。separateにするとレイアウトが
変わってしまう。そこでdivのborder-raiusでoverflow:hidden;で解決。
姓とセイ、名とメイの幅揃えがセル分割すると余分なborderができてしまうのでdivでスペーシング。
IEだけtextareaで背景にアイコンを表示できず、SVGが悪いのかとか半日近く悩んだが、positionをright
だったのでデフォルト表示の右側のスクロールバーの裏に隠れただけだった。overflow: auto;でスクロール消し解決。