#2013/09/19: 今日やったこと - review
サイト全体のhtmlとcssを見直して手直しした
特にリンク、急いで作って、自分で見辛いなあと思ったので改善した
このテキストページも変更してあるけど、アコーディオンメニューはjQueryを使うようにした
以下、ソース
$(function(){
$('#A').on('click', function(){ *1
$(this).next().slideToggle('fast'); *2
});
});
*1: 要素A をクリックしたらこうしなさい
*2: this この next 次の slideToggle 要素の表示非表示を切り替えなさい
といった感じかな？
slideToggle(★); この★には fast, slowなどの速度が指定できる (2000) などでms単位での指定も可能
jQueryこれ以外にもいろんな便利なことができて、javascriptで書くとちょっと面倒かなーってことも割りと簡単に書き終わるので
サイトのデザイン、UIにちょっとごにょごにょしたいなあって人は勉強するといいかも？
僕もまだ修行中です！
あとページ全体の日本語フォントを変えた、見やすいかどうかは知らない
個人的には結構好きな感じ
MigMixフォント
これを使いました
あとそうだなあ、トップページの更新履歴の部分をちょっと便利にしました
ボックス要素の左下、下、右下にマウスをもってくと、サイズが変更できるようになってます
これは jQuery UI のresizableというのを使うんだけど、割りと簡単なので、調べればすぐに導入できると思います
変更できる範囲も指定できて、更新履歴はy方向にのみ、変更が可能にしてある
あと、変更可能最小サイズも決めてある、最大サイズはなし、どこまでも伸びる
んで、誰得機能なんだけど、jquery uiのdraggableというのをつかって、トップページのボックス要素はすべてドラッグが可能になってます！
ちょっと動かしてみる
こんな感じに…
まあ面白半分で導入してみました
このサイトが死ぬほど嫌いなんだよ！！！！！って人はめちゃめちゃにしてってくださいっ☆
あと……web拍手待ってます……
おしまい…まただよっ
#2013/09/17: javascriptで要素を開閉だよっ☆ - review
さてさて、自分でやったことを書きながら復習していきたいと思います
お久しぶりの更新ついでに、サイトのデザインをちょっと変えたのです
お？復帰か？ なんて言ってくれた人もいて、ああ、よかった、完全なる幽霊部員にならなくて…とそう思いました
今回、サイトのデザインを変えるときに
この、今見てくれているテキストページの記事の開閉のjavascriptを書きました
書きました、って言っても、.js自体は4行程度なんですけどね
やったことを忘れないように( ..)φメモメモ
htmlには クリックすることでJavascriptを実行する 要素(A) と開閉の対象となる 要素(a) を用意
要素(a) の style には display: none; と指定してあらかじめ要素(a)が
非表示 の状態にしておく (別にそうじゃなくても問題はないよっ)
以下、javascript
function oc(id){
if(document.getElementById(id).style.display == "none"){ *1
document.getElementById(id).style.display = "block" *2
} else{document.getElementById(id).style.display = "none"}}; *3
*1: if もし 要素(a) の style の display が "none" と 同じ なら次の処理をしてねっ
*2: 要素(a) の style の display に "block" を代入っ (これで要素(a)をブロックレベルで表示)
*3: それ 以外 の場合は (今回はstyle.displayが"none"以外だった場合)
要素(a) の style の display に "none" を代入っ (これで要素(a)を非表示に)
これが今回やったこと
いつもjavascriptとかは、書き始める前に、どんなやり方があるかいろいろ調べます
でも結局自分なりにやってみたくなって、試行錯誤の末、書き上げる感じ
今回のはちょー簡単だからびゅびゅーんと書いたよっ
書き終わって、ブラウザで動作確認したときに
javascriptコンソールに赤文字がなかったときはｷﾗﾒｷ☆しちゃうよっ
<span id="title" onclick="oc('開閉したい要素 id')">タイトル</span>
<div id="開閉したい要素 id" style="display: none;">
中身
</div>
こんな感じで、思い通りに開閉できたよっ
アニメーションっていうか、ぬる～っと開閉させる方法もあるけど、今回は、やめたよっ
今回やったことは、簡単だし、ん～ぅちのｻｨﾄのﾃｷｽﾄどぅゃってまとめょ～＞＜
って思ってる人は、やってみてねっ
他にもやり方はあるだろうし、自分なりに工夫して書くと、面白いよっ
今回は、工夫してないよっ
あと、chromeは ctrl + shift + i で デベロッパーツール
ctrl + shift + j で javascriptコンソール が開けるから、便利だよっ
chrome以外のブラウザにもついてるよっ
今度はcss3とjavascriptで作った時計の復習をしようと思ってるよっ
これだよっ これ
じゃあ、おわるよっ
おしまい…まただよっ