20130211

こんにちは、西田です。

今日は5時起きで母親とばあちゃん家へGO!です
ばあちゃん家そんな遠くないのに!


0おっさん目
 ・発想法
   ・KJ法
   ・NM法
   ・なぜなぜ5回
   ・ブレインストーミング
   ・シックスハット法
   ・PREP法
   ・希望点列挙法
   ・欠点列挙法
 ・HTML&CSS

1~2おっさん目
 ・幼馴染の話
 ・園長が求める人材

(3おっさん目はお菓子食べて日報書いてました)

4おっさん目
 ・HTML&CSS

5おっさん目
 ・HTML&CSS

6おっさん目
 ・缶詰弁当
 ・HTML&CSS

7おっさん目
 ・HTML&CSS

8おっさん目
 ・HTML&CSS

                  • 8<----------8<----------

0おっさん目

・発想法

ばあちゃん家に着いてMBAさんを起動
そういえばMBAさんに
マインドマップのアプリ入れてないなあと思って
入れようと思うけど、他の発想法を試してみたいと思って探してみる

(アイデア発想法=>
http://ideatool.jp/index.php?%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E7%99%BA%E6%83%B3%E6%B3%95)


KJ法
KJ法ってこんぶさんが学生時代に
研究室の壁にペタペタしてたやつですよね
あれ一回居候達でお題決めてやってみたいです
突発的なアイデアが浮かんで面白そう


・NM法
GGJでやりま…した?
GGJでやったのはKJ法…?
「キーワード」というよりかは
マジカルバナナみたいな感じでしたが


・なぜなぜ5回
かなり論理的、でもこれ面白そう
物事を順序立てて考えることや、
問題の理由を「なぜ?」と問いただして繰り返すことは
プログラム書く上で必要になってくることだと思う


・ブレインストーミング
読んだ瞬間に思った
あ、これだ、GGJでやったやつ!
自由に発言できて批判しないというルールは重要だと思う
人の意見を気にして自分の意見を言えずに
会議の時間が無駄になることはよくあるよくある(経験済み)


・シックスハット法
これ保育園のHPを作る際に無意識にやってた方法だ!
いろんな人の目線で物事を考えることで
本当に必要なものを選出できるし、一人でもできるし
この方法は重宝してます


・PREP法
Point
=>テーマに関して思いついたアイデアのポイントについて文章で書く。
Reason
=>なぜ思いついたアイデアがいいアイデアなのか理由を文章で書く。
Example
=>思いついたアイデアはどのように使えるのか、具体的な例を文章で書く。
Point
=>思いついたアイデアを別の言葉に代えて文章を書く。
の順番で考える方法
アイデアを考えてそのアイデアが「いい!」と思う理由を説明できないのは
私の悪いクセです(自覚はしてる)


・希望点列挙法
これはどこでも使われてる方法(多分)
「◯◯ってこうなればいいのになあ、って思うことを挙げてみよう」
みたいなことを小学校で何回も話し合った記憶がある


・欠点列挙法
希望点列挙法と同じく、
「◯◯の悪いとこ、直したいとこを挙げ改善案を出そう」
みたいなことを小学校d(ry
私の小学校の担任が特殊だったのかな

            • 紹介はここまで-----


個人的に取り入れたいなと思ったのは
なぜなぜ5回、ブレインストーミング法、
シックスハット法、PREP法 かなあ

もっと自分の意見について理由を言えるようになりたいし
いろんな目線で物事を見れるようになりたいと思います

                                                        • -


・HTML&CSS

昨日は一日コードに触れてなかったので今日こそ!
(ドットインストールについては家に帰ってからするつもり)

ぱっと以前から問題が解決されてなかった
「画像自体の大きさが変わらない問題」
codaを立ち上げてサンプルを見た瞬間…
わあ!画像の大きさが変わってる!←
ロードがしっかりされてなかっただけらしいです

                  • 8<----------8<----------


1~2おっさん目

・幼馴染の話

さてはて0おっさん目は画像が変わってるのを確認して
大きさ調整の最中でお昼ご飯(ハヤシソースオムライス)をいただき
続きをしようとしたら一つ下の幼馴染の話になりました

私の幼馴染はそりゃもう大きいツンデレワンコで
(確か190cmぐらいって言ってた、こんぶさんより大きい
並んだらもう…自分が悲しくなってくる(いつものことですが))
頭もよく、運動もできてイケメンな男の子なのですが
大学では「宇宙工学」を学びたいんだそうです
九州大学に浪人覚悟で受験したらしい(結果は聞いてない)

ここで奥様トークで
「別に浪人してまで宇宙工学にこだわらなくても…」
みたいな話をしていたのでつい一言

「本人がやりたいことに口出しするのも文句言うのも
お母さんとおばあちゃんらしくないね」

というのも、
姉が高校にスポ薦で入学する際も
私の高校、大学に進学する際も
「後悔しないようにするなら自分の考えを通しなさい」
と言ってくれた母親と祖母の言葉が自分の支えになっていたからです

「別に技術的なことなんかランクが下の方の大学でも独学でも
自分のやる気さえあればどこでも学べるから、っていう気持ちはわかるけど
本人が本当に行きたいからって頑張ってるのに
それを否定する発言はよろしくないんじゃないかな
それに比べて政治家はランクの高い大学に進学することさえ頑張ってれば
大学の名前だけで売れるから羨ましいよねー」

「あんたがそんな発言するとは思わんかった」とは言われたものの
確かに否定するのはよくないね、頑張って欲しいねと考えなおしてくれて安心

幼馴染くん、大学受かってたらいいなあ

                                                      • -


・園長が求める人材

幼馴染の話が終わってからそろそろ帰ろうか、となって帰路につくことに
電車の中で母(この人が園長です)と保育園のお遊戯会の話に
なんでも、今度のお遊戯会は
「浦島太郎」と「アリとキリギリス」の話を混合させた劇をするそうで。
でもどうやって話をうまく混ぜ込むかというのに悩んでるらしい

母「こういう意見はどうですか?とか
この案を取り入れてほしいです!っていう提案をしてくれる先生がいないんだよね
だからあんた(私です)のいつも送ってくる書類はいろんな案が生まれてて面白い
新年度からは学生上がりの子を雇おうかなって思ってるんだけど
『自分の意見』とか『こだわり』とか『新しい考え方』を持ってる子が欲しいなあ
私が求めてる人材は大抵起業しちゃって、その下に『指示待ち人間』が集まって
世の中面白くないよなあ」

確かに。

母「私はあんたを自分の意見を言える子に育てたつもりなんよー?」

私「自分の意見を一直線に伝えるから相手を怒らせることがよくある
もっと相手の意見を聞き入れれて、色んな目線でものを見れるようにしたいな」

母「そうやって自覚してるから近いうちには直せるよ
あんたが保育園に働きに来てくれたらなあ」

私「私自身はお母さんみたいな、
トップでも下の人達と一緒に働いてる人の下に就きたいと思うなあ
ほら、剣道でも練習してるときにスーツで道場に入ってきて
ああだこうだ指導してくる人はむかつくだけじゃない
自分と同じ目線になってくれて、一緒に悩んでるトップは素晴らしいと思う」

母「逆にトップと同じ目線になってくれる人はいないんだけどね!」


うーん、
マネージャーとしての目線でならまだなれるんだけど
トップの人の考え方とかこだわりとか、
そういうのちゃんと理解してないうちはトップ目線になるのは難しいかな

『指示待ち人間』のことについては大きく頷くしかなかった
自分で自分のすることがわからなくて指示を待ち続ける人にはなりたくないなあ

トップに求める人材としては上記のことと
わからないことはわからない、って認めて
下の人とかに素直に聞いてくれる人かなって思ったり。

                  • 8<----------8<----------


4おっさん目

・HTML&CSS

母に0おっさん目で書いてた発想法の話をして
お遊戯会の劇でのヒントを与えることに成功
(でももうちょっと考えてみるって言ってた)

溜めてた日報も書き終えたので勉強を!
(あと20分しかないけど)

                  • 8<----------8<----------


5おっさん目

・HTML&CSS

4おっさん目の続き
サンプルをずっといじってても面白くないので
コピペしてpxを%に置換しつつ新しく書きなおす作業

ul,li{
margin: 0%
padding: 0%;
}

paddingが赤くなってる…なんで?
「;」を付け忘れるという初歩的ミス
こんぶさんの教えてくれた「クソコード選手権」が気になってきた
「全文大文字」でワロタ
ちゃうねん、現実戻ってこい

ところで「!important」の使い所がわからない
リファレンスによると、
優先させたいスタイルに「!important」というキーワードを指定しておくと
前述の優先度を変更することができるらしい
「こいつを最優先してくれ!」というファイルに使えばいいのかな?

font-familyで指定できるフォントの種類のところに
あんどるのはてブの「diary of andrew」と書いてあるフォントと
そっくりなやつ見つけてちょっとテンション上がった
(caflisch script)

リファレンスを腕で抑えながらキーボード叩くのって難しい

                  • 8<----------8<----------


6おっさん目

・缶詰弁当

RSS消化しようと思って一番気になったもの
『「5年保存可能な非常食にピッタリ無洗米「旬米新缶」』
(http://gigazine.net/news/20132011-shunmai-shinkan-rice/)

もうこれさえあれば避難所生活の時に
「びっくり!缶詰開けたらそこにはお弁当が!」も夢じゃない
(美味しいかは別として)

                                                        • -


・HTML&CSS

先ほどの続き
リファレンス片手にまだまだ打ち込んでいく

文字フォントの色を変えただけなのに
フォントの設定も変わるから面白い(けどなんで変わるかわからない

ところで
.box1{
background: #88CFFF url(../image/menu1.png) no-repeat right top;
box-shadow: 0% 0% 15% 0% #48abdb inset,0% 3% 7% 0% #999;
}

.box2{
background-color: #ffdfc3;
box-shadow: 0% 0% 15% 0% #ed8c93 inset,0% 3% 7% 0% #999;
background-image: url(../image/menu2.png);
background-repeat: no-repeat;
background-position: right top;
}

なんでbox1とbox2って書く量が増えるの?

気付けば7おっさん目でした

                  • 8<----------8<----------


7おっさん目

・HTML&CSS

試しにbox3はbox1の真似して書いてみた

.box3{
background: #c0e9a9 url(../image/menu3.png) no-repeat right top;
box-shadow: 0px 0px 20px 0px #95d86f inset,0px 3px 7px 0px #999;
}

普通にbox1と同じように表示された
こういう書き方もあるよってことでいいのかな

box2の方が確かに初心者にはわかりやすいけど
スッキリしてる方が私は好きなのでbox2も同様に変えておく
(一つだけ違うというのも好きじゃない)

「box-shadow」を6おっさん目の時は%で書いたんだけど
プレビューを見てみたら反映されていないのでpxに戻してみる
すると反映されたので、ここはpxじゃないといけないのか、と納得


background-attachmentを使ってみる

box1{
background-attachment: #88CFFF url(../image/menu1.png) no-repeat right top;
box-shadow: 0% 0% 15% 0% #48abdb inset,0% 3% 7% 0% #999;
}

面白いことに真ん中が透明になり、
box-shadowで指定しているところだけ半透明になった
そして指定しているのに画像が表示されていない
これはこれで面白いっていうか綺麗に見える
画像を指定したあとに付け足すと

background-attachment: scroll;
背景画像を文章の内容とともにスクロールさせる
(画面をスクロールしたときについてくるという解釈をした)

background-attachment: fixed;
背景画像をブラウザの表示領域に固定
(スクロールしてもついてこないと解釈した)

らしい。
ここらの知識は右サブメニューになるであろう場所で使うだろうからメモ


カバー画像がちゃんとした位置に表示されない

                  • 8<----------8<----------


8おっさん目

・HTML&CSS

珍しくお腹が空いてないので晩御飯を断り続行
後でホワイトデーのお返しのときに渡すお菓子を試作予定


カバー画像のことはさておき、
下地の大きさが気に食わないので調整を試みる

li{
list-style-type: none;
display: block;
position: relative;
float: left;
margin-right: 10%;
height: 50%;
width: 50%;
}

まず「display: block;」の意味がわからないのでdisplayを調べてみる
その前にIMEの設定がなぜか変わってるので修正してこよう
ひいいっ、文字入力する度にいらいらするうううっ

直ったので「display」についてまとめてみた

display: inline;

  • でくくったものが横に並んで表示される

    display: block;
    ブロックレベルの要素になる
    (htmlでの色なしtableって覚えた)

    display: inline-block;
    blockに色がついてる(htmlでの色付きtableって覚えた)

    display: list-item;
    list化する(箇条書きにする)

    display: none;
    指定した要素を表示しないようにする
    (必要性がいまいちよくわからない…)

    自分なりに解釈してるので誤認があれば教えて下さい


    displayを調べてる間に閃いたので
    カバー画像を調整しているところをいじってみる、成功!!
    ただ、やっぱり下地の大きさが気に喰わないので
    アニメーションを加えてからもう一度下地をいじることにします

    書いたコードと画像をぺいっしとくので
    指摘があれば!ぜひ!

                      • 8<----------8<----------

    今からお菓子作るよー\(^p^)/


    http://blog-imgs-43.fc2.com/k/3/9/k396/menu.css
    http://blog-imgs-43.fc2.com/k/3/9/k396/menu.png