- このサイトについて
-
RWD対応：768pxをブレイクポイントとするレスポンシブWebデザインを採用。
W3CのWeb標準規格に準拠：
CSS Validation Service によるCSSファイルの検証、Markup Validation Service と Another HTML-lint によるHTMLファイルの検証を行ない、W3CのWeb標準規格に完全準拠するサイトを目指した。
タイルレイアウト：DTPのページではプラグイン jquery.vgrid.min.js を使って、画像をタイルレイアウトで配置した。
モーダルウィンドウ：DTP作例の画像拡大には、jQueryプラグインのLightbox2を使用した。
- 使用言語、ライブラリー
-
使用言語：
HTML5, CSS3, JavaScript
使用ライブラリー、スクリプト：
jQuery, Bootstrap, Lightbox2, jquery.vgrid.min.js
使用ソフト：
Photoshop, Illustrator, Brackets
制作期間：
2019年9月6日〜2019年11月16日
- 直面した不具合
-
スマホ縦表示で過大に拡大：DTP作例の画像拡大には、最初、jQueryを使わない軽量スクリプト・Luminousを使用した。しかし、Androidのスマートフォン(Android4.4.2)、iPhone 7(iOS 12.1.4)の縦表示でDTP作例をクリックした際に、スクロールが必要なほど過大に拡大されてしまう。現状のスキルでは原因究明ができないため、jQueryプラグインのLightbox2に変更した。
ブラウザの「戻る」ボタンでの挙動：ページ内リンクでの移動に応じてURLを変更する実装はできたが、ブラウザの「戻る」ボタンで移動すると、実際の表示とURL表示との間にずれが生じてしまう。chrome/firefox/safari/edgeいずれでも、ずれが確認された。ブラウザーの仕様であるかどうかも含め、原因・解決方法はわからず未解決。(2019.11.4)
- 更新記録
-
SSL：サイトの常時SSL化（常時HTTPS化）を実施した。(2019.10.15)
現在位置の表示：ページ内リンクで飛んだ現在位置に対応するトップナビゲーションの、li要素の色を変える処理をjQueryで実装した。(2019.10.22)
lightbox2に変更：画像拡大のスクリプトをLuminousからLightbox2に変更した。(2019.10.27)
ページ遷移：ナビゲーションのメニューからページ内リンクで移動した時に、遷移先に応じたハッシュ値をURLに追記する処理をjQueryで実装した。(2019.11.3)
ナビゲーションの非表示：リンク先選択の操作後、スマホでの閲覧時にはナビゲーションのモーダルウィンドウを非表示にするよう、jQueryで実装した。(2019.11.7)
プロダクトロゴ：WordPress, Vue.js, Laravelのプロダクトロゴ表示を追加。(2019.11.11)
ナビゲーション調整：iPad、iPhone、androidスマートフォンによる実機テストで、ナビゲーション回りのCSSを微調整。(2019.11.16)
aタグに rel="noopener" を追加：web作例などを別ウィンドウで開くため、target="_blank" を付与したaタグに、セキュリティー上の観点から rel="noopener" を追加した。(2019.11.26)
語学・web関連資格
SNS / Github
