こんなのです。 方法 ご自身でお好みのアイコンを使いましょう。 fontawesome.com <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p> htmlはこんな感じ /* PAGE_TOP_BTN */ #pageTop { position: fixed; bottom: 20px; right: 20px; z-index: 999; } #pageTop i { padding-top: 7px; } #pageTop a { display:…

実現するもの HPによくある定休日が色付けされていたり、予約時間が書かれているカレンダーです。 Googleカレンダーと連携しているので、Google側で予定が追加されたり、削除されたりするとHPのカレンダーもすぐにその情報が反映されます。どのように反映さ…

実現すること FullcalenderとGoogleカレンダーの連携の際、GoogleカレンダーAPIのキーなどを設定するのにJavascriptを使います。 そこでAPIのキーをgithubなどで公開しないように、環境変数に隠す方法のメモ。 調べてみたら結構簡単でした。 calender.js $(d…

実現すること ↑こんなの 方法 まずはざっとHTMLを書いていきます。 <div class="wrapper grid"> <div class="item img-fade-up'"> <img src="image_1.jpg"> </div> <div class="item img-fade-up'"> <img src="image_2.jpg"> </div> <div class="item img-fade-up'"> <img src="image_3.jpg"> </div> <div class="item img-fade-up'"> </div></div>