東広島Event Maps ～サイトデザイン～ 0710960099 小林 佑真 情報物理研究室
研究の目的
担当について 全体のHTMLとCSSの定義 デザイン設計
しかし、この色をトップに持ってくると… 重い！！ バランスが 悪い！！
CSS(ソースコード)① #topbar { top: 0; left: 0; width: 100%; height: 50px; background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221)); background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); background: -ms-linear-gradient(left, rgb(180,209,192), rgb(229,255,221)); /* IE10, opera12 */ padding-bottom: 5px; padding-top: 5px; box-shadow: 1px 1px 5px rgb(170, 170, 170); z-index: 9999; /* 最前面に表示 */ }
CSS3，backgroundグラデーションのブラウザ依存性 ～Internet Explorerでは…～
バージョン10では…
CSS(ソースコード)② ul > .cen { /* カンマは複数の記述を表すので、内包される意味で'>'を用いる */ width: 180px ; position: relative; display: inline-block; list-style-type: none; background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221)); background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); background: -ms-linear-gradient(left, rgb(180,209,192), rgb(229,255,221)); /* IE10, opera12 */ box-shadow: 1px 1px 5px #aaa; /* 左から、横方向のずれ、下方向のずれ、ぼかし具合、シャドウの色 */ border-color: 5px solid #000; padding-bottom: 5px; color: #2F4F4F; z-index: 9999; /* 最前面に表示 */ }
まとめ 今後の課題 東広島Event Maps ～サイトデザイン～ サイトデザインについて backgroundグラデーションのブラウザ依存性 Internet Explorer 7,8,9 … 非実装。 Internet Explorer 10 … 実装。グラデーショ ンが確認された。 今後の課題 Internet Explorer 10でのタブの見栄えが挙げ られる。 東広島Event Maps ～サイトデザイン～ 0710960099 小林 佑真 情報物理研究室
反省点・今後の課題 Internet Explorer 10の見栄えの改善 市章の色に関係なく、緑系統以外のグラデー ションも試したい。
Internet Explorerでのグラデーションについて バージョン9では、線形グラデーションを指 定する際に用いる、linear-gradientは非対応 だった。 (IT用語辞典バイナリBINARY、linear-gradientの解説)
Internet Explorer7,8,9の比較
Internet Explorer7,8,9の比較 の前に・・・
研究の目的(全体)
ブラウザの市場占有率(シェア) 日本 平成24年2月1日から1年間の市場占有率は、Internet Explorerが約半数である(図3)。 世界 Google Chromeと比べて、平成24年2月はInternet Explorer が約9%多かった。しかし、2月下旬から10月上旬まで、同数 またはInternet Explorerが減少した。10月中旬以降は完全 にGoogle Chromeが多くなり、両者の逆転を繰り返し、今年2 月1日にはGoogle Chromeより約4%が減った(図4)。
我が国の過去1年間の ブラウザ別の市場占有率(上 ) 世界の過去1年間の ブラウザ別の市場占有率(右 )
開発環境 TeraPad HTMLやCSSなどの編集に用いる。 GitHub TeraPadで更新したソースファイルをコミッ トして同期するときに用いる。 同期を行なうことで更新後のサイトを見る ことが出来る。
参考資料 http://css3.sophia- it.com/reference/%E7%B7%9A%E5%BD%A2%E3%82%B0%E3% 83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7% E3%83%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81% 99%E3%82%8B%E3%81%AB%E3%81%AF%EF%BC%9F (IT用語辞典バイナリBINARY、linear-gradientの解説)