スマホ版作成中5:最終回
ようやく☆music.BBSトップの新しいスマホ版を書き替えました!
テストと言うか、練習を数百回繰り返したので何の問題も無く一発で決まりましたよンw
о^∇^)/ ヨッシャー!
ちょっと間が空いたのでUI:ユーザーインターフェース(下部ボタン)のアクションとか、ちょっとこだわって改良を加えました(先ほど作成したこのブログで実験したUIに更なる改良を試みた)。
カテゴリページやBBSのUIも変更したいと思うくらい良い出来だった、、(今更ムリなんですがw)
たった2行のJavaScriptと数行のCSSだけでテキストの開閉などスタイルの変更が可能になったのでJavaScriptファイルを使わず、追加CSSファイルも軽量化出来ました。
可能にしたのは、数年前から使っている...
function op(n) {var box = document.getElementById(n);box.className = 'op';}
function cl(n) {var box = document.getElementById(n);box.className = 'cl';}
※opとclは任意の値(名前)
..この2行の(クラス名を書き替える)JavaScriptと、、
セレクタ1,セレクタ2,セレクタ3{transition:all 0.2s;}
セレクタ1{font-size:100%;color:#000000;height:20em;line-height:100%;}
セレクタ1.cl{font-size:0;color:#ffffff;height:0;line-height:0;overflow:hidden;}
↑こんなカンジのCSSなどの組み合わせです!
下の例の様なボタンで指定IDのクラス名を書き替える事により、少ない記述でUIにいろんなアクションをつけることが出来るようになりました!
【例】
<要素 onClick="op('ID名');">
または、
<要素 onClick="cl('ID名');">
前までは、transitionプロパティーに all なんて値がある事を知らず、長〜〜いCSSやJavaScriptを記述していたので「こんな簡単なんでええんかいな?」ってカンジでやってみたのですが、いいカンジに仕上がってビックリしました!
┗Chromeさま様でんな(^-^;ハハハ..
まだまだ勉強が足りてないと痛感しましたヨw
いつの日かバラバラのサイト群をひとつのサイトで運用する時の為に「頑張って勉強せなアカンな〜」って思います。
宜しくお願いしま〜す!