アプリ開発のこと。WEBのこと。IT体験談などいろいろ書いていきます。
お久しぶりですsu-sanです。
長すぎる文章だったり、補足項目だったりにちょっとした部分に折りたたみ（アコーディオン）が欲しい時ってありますよね？
今回はHTMLの記述のみでそうしたちょっとした部分にアコーディオンを追加する方法を書いていきたいと思います。
|
1 2 3 4 5 6 |
<details> <summary>ここが開くよ</summary> <div> この要素が出ますよ </div> </details> |
下記が実行結果。
いかがでしょうか？かなり簡単にアコーディオンの実装ができたのではないでしょうか。
の部分で矢印がデフォルトで出てしまいますがcssに下記記述をすれば消すことができます。
|
1 2 3 4 5 6 |
details summary { color: transparent; } details summary span { color: #000; } |
以上！良いWEBライフを！
どうもsu-sanです。
webページを作成している際、グロナビ周りやfooterに追加の変更があった場合いちいちコピペして回るのは面倒くさいですよね？
今回はCodeIgniter、CakePHPを始めとしたCMSを使用せずにheaderやfooterをパーツ化して管理する方法を書いていきたいと思います！
まずは共通化したい部分が記述されたhtmlを作成します！ファイルネームはheader.htmlで・・・
|
1 2 3 4 5 6 |
<div id="glovalnav"> <ul> <li>サプライド</li> <li>サプライド</li> </ul> </div> |
次に読み込ませたいhtmlのheadでjqueryを読み込みます。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
その直下に下記を記述します。header.htmlのglobalnavというidのdiv要素を取得して、div#navに展開する。という感じです。
|
1 2 3 |
$(function(){ $("#nav").load("header.html #globalnav"); }) |
読み込ませたいhtmlに
|
1 2 3 |
<div id="nav"> <!--ここに挿入されます--> </div> |
こう記述すれば完了！
これだけで簡単に共通化することができます。
皆さんも試して見てはいかがでしょうか？
どうも
ご無沙汰してますsu-sanです。
webページ制作でスクロールされた時にやってほしいことを書きたい時ありますよね！
スクロールされたらメニューバーを表示させたりボタンを表示させたり。。。
それができるのが下記のコードです！！
以下の関数の中に行いたい処理を書くとスクロール時に実行されます！
$(window).scroll(function(){
〜行いたい処理〜
});
今回はwindowのscrollでイベントを追加してみたいと思います。
|
1 2 3 |
$(function(){ $(window).scroll(function(){ $hoge.addClass(hogehoge); }); }); |
ここでクラスを指定して色を変えたり何かを表示させたりなどできます！
上の例ではスクロール時にhogeクラスにhogehogeクラスを追加していますー
$(window)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!
以上、「ページがスクロールされたらやってほしい処理を書く方法」でした！
どうも！su-sanです
特定のアニメーションの後に関数を走らせたい時ってありますよね？
今回は簡単にアニメーションの後に関数を走らせる方法を紹介したいと思います。
アニメーションの中にはキーフレームとイベントがあって、キーフレームが視覚的な動きの部分、そしてイベントはアニメーションの中にその名の通りイベントを設定することができます。
どうも！su-sanです
今回はUnityでビルドしたIOSアプリのアーキテクチャの設定を使用した簡単なサイズダウンの方法について書きたいと思います。
ItunesConnectにアップロードする際やipaファイルを作成する際
実機でテストしたサイズよりはるかに大きくなってしまうという問題解決の一助となれれば幸いです！
まずはUnity側の設定です。下図の通りに設定します。
続いてXcode側の設定を下図のarm64（Iphone5s以降のアーキテクチャ）に設定します。
これだけで劇的にアプリサイズが軽くなります！
自分たちの開発していたアプリではこれを使用することで約８０MBの削減に成功しました！
もしこれでErrorが出てしまう際は一度下図のBuildを試したのちArchiveを使用すればエラーは消えるので試して見たらいかがでしょうか
以上！su-sanでした〜