recently

notebook

review

Re: webclap

back

昨日書いたテキストの最後にweb拍手待ってるって書いたせいか
web拍手を何件かいただいた、更に、コメントまで！
いやはや、嬉しいです、感謝感激雨霰、巨人大鵬卵焼き、といったところですかね

ということで、しっかりお返事書かなくては！

> デザインすごくかっこいい！
> 真似したいくらいです。

嬉しすぎておにんにんおっきしちゃう(*´艸｀*)
ほんとにありがとうございます、webデザインで褒められたこと、今までなかったので
ほんとに嬉しいです！是非、真似してくださいっ
こんなものを、自分の復習用に作っています これ
chromeを使っているなら Ctrl + Shift + I でデベロッパーツールが開けます
それのElementsタブを見ながら、この要素はどうなってて、この要素はこうなってて…
と見ると真似が捗りますよっ

> メニューのnotebookがnotbookになってるよ！

ご指摘ありがとうございます！
危うく、一生 雑記じゃない場所 で 雑記 を書き続けるところですた…危ない危ない…
光の早さで修正しました！

> CSS3とかjQuery勉強方法教えてくだされー

これはなかなか難しいですよね、僕自身まだまだ 知識 として身についていなくって
なのでいつもやっている勉強方法を紹介します
(ドットインストールの回し者に思われそうですが、決してそうではありません
ほんとに便利なのっ)

*1: ドットインストールで一通り動画を見る こちら
　　例えば、css3を使ってみたいな～っと思ったら、css3のレッスン動画を
　　とりあえず全部見ていきます
　　僕は、一応テキストエディタは立ち上げてはいるけど、どちらかというと
　　しっかり話を聞いた方がいいかも
　　なるほどcss3はこういうことができるんだなーというのがわかれば十分

*2: あとはとにかく、ひたすら使う、いいなーっと思ったサイトのソースは絶対に見る
　　ん～こういうことがしたいなあっと思ったら調べてやってみる
　　あ、このサイトかっこいいなあ、好きな感じ、と思ったらソースを見てみる
　　ソースを見ていて「なんだこれ？」と思うような記述があったらそれを調べてみる
　　なるほどな～こういうことができるんだなあ……とわかれば十分

なんか全然あれでした、勉強じゃありませんでした…
とても難しいですよね、勉強方法
*1で紹介したドットインストールはすごくお世話になっています、が
言うても、動画1つ3分未満ですからね、それだけ見てもやっぱダメです
やってみたいことが湧いたら、それを実現するための言語はなんだろう、と考えて
こうすりゃできるかな？と妄想して、実際に調べながら自分で組み立てていく
という感じでしょうか
ドットインストールで この言語はこういうことができる というのを知っているだけで
勉強の効率がかなり上がると思いますよ！
あと必ず、例えばjQueryを使うならjQueryのAPIドキュメンテーションなどは見るようにしています こちら

といった具合で、コメントへのお返事をさせていただきました
ほんとに嬉しいです、コメントくれた方々にこの場をかりて、どうもありがとうっ

おしまい…まただよっ

サイト全体の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拍手待ってます……

おしまい…まただよっ

さてさて、自分でやったことを書きながら復習していきたいと思います
お久しぶりの更新ついでに、サイトのデザインをちょっと変えたのです
お？復帰か？ なんて言ってくれた人もいて、ああ、よかった、完全なる幽霊部員にならなくて…とそう思いました

今回、サイトのデザインを変えるときに
この、今見てくれているテキストページの記事の開閉の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で作った時計の復習をしようと思ってるよっ
これだよっ これ

じゃあ、おわるよっ

おしまい…まただよっ

長いこと更新をしなかった
仕事が忙しいわけでもないし(そもそも仕事してないょ…)
病気で入院していたわけでもないし
書くことなくって… やっぱり、テキストサイトって維持する面でも難しいな、と再認識
そして、責任感のなさを反省…

基本毎日、勉強してるかゲームしてるかの生活
そんなに面白いことも身の回りで起きるわけでもなく
そりゃ書くことないわなあー…っと

テキストサイト としてちょっと怪しくなってしまいそうですが
今後は普段やっているweb制作関係の勉強の復習メモを書いていこうかなと思っています
修行中なので、全然大したことしてないですけど
基本を忘れないように、しっかり復習したいな

おしまい…まただよっ