takawo杯
ローンチ、セックスしよ #takawo杯
— fmmzk (@fmmzk) 2013, 8月 28大親友の彼女の連れ ITパスタ作ったお前 #takawo杯
— fmmzk (@fmmzk) 2013, 8月 28東京生まれHIPHOP育ち 悪そうなやつは大体コマ落ち #takawo杯
— fmmzk (@fmmzk) 2013, 8月 31takawo杯に参加しました。takawo杯というのは、リンク先を見てもらえればわかると思うんですけど、Twitterを使ったIT駄洒落コンテストで、#takawo杯というハッシュタグをつけてIT用語を織り交ぜたダジャレをつぶやくというもの。8月1日から31日までやっていて、今日（日付的には昨日）が最後ということで、主宰のtakawoさん（@takawo）がtakawo杯のラストを見届けるustというのをやっていたので、流しっぱなしにしていました。
別にそのustで最優秀作品が決まるというわけではなくて、ただtakawo杯というタグのついたものを見ていくだけだったのだけど、たのしかった。最後の方に3つpostしただけだったけど、参加したっていうのもあってたのしかった。
以前「ほうかご実験クラブ」というustをやられていたときに知ったおしこまんさん（@osicoman）がtakawo杯に参加されていたのは知ってて、まさか「レジェンド」と呼ばれていたとまでは知らなかったんだけど、なのでtakawo杯自体は始まったときから知ってたのですが、なんとなく敬遠していました。ほんとただなんとなく。強いて言えば知らんひとがいきなり参加するのは悪い気がして。最近ではそういう変な遠慮もなくなってしまった。いいことか悪いことかわかんないけど。
最近インターネットがおもしろいときちんと表明するひとをたくさん見るようになった気がする。もともとそういうひとたちはいて、単に自分のアンテナがそっちに向いてなかっただけなのかもしれないけど。そういうのを見るのはすがすがしいしたのしい。去年毎月鎖骨があるのを遠く九州の地からいいなーと思って見てたのだけど、あれもたのしかった。ほうかご実験クラブもたのしかったし、やっぱり僕もインターネットすきですってちゃんと態度に出したい。出そうと思う。
ustが終わったら9月1日になっていて、別にそこですぱっと季節が切り替わるわけじゃないけど、夏の終わりを体感した気がした。たのしかったです。来年もまたあるのを期待してます。
生姜焼き（タモリ流）
- 豚肉 300〜400g
- 玉ねぎ 半分
- 小麦粉 適量
- しょうが 1欠け（チューブなら大さじ2）
- しょう油 大さじ4
- 酒 大さじ4
- みりん 大さじ2
- 豚肉に小麦粉まぶす、油使わずに炒める
- 肉の色が変わったら玉ねぎいれて炒める
- たれ入れてとろみがついたら完成
Bootstrap 3.0 #06（アイコンの使い方）
- i要素のクラス指定
- 使えるアイコンはここ
- headでglyphiconsのCSSにリンクを貼るのは任意？（読み込ませなくても使えるの？）
- bootstrap.min.cssの中に全部書いてあるっぽい
- i class="glyphicon glyphicon-adjust"のような形で「.」を外して指定
<p> <i class="glyphicon glyphicon-thumbs-up"></i> <i class="glyphicon glyphicon-thumbs-down">よくないね！</i> </p>
Bootstrap 3.0 #05（ドロップダウンメニュー）
- btn-groupというdivを作る
- button要素のクラス指定
- toggle（トグル）…ON/OFFの切り替えの仕組みのこと
- caret（キャレット）…「^」の記号のこと、▼が表示される
- span要素…インラインレベルのグループ、divと似てるけどdivはブロックレベル
- button要素の指定ができれば、あとは作り方はパンくずとかといっしょ
- li class="divider"で仕切り線ができる
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Menu <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li class="divider"></li> <li><a href="">menu3</a></li> </ul> </div>
caret部分を独立させたいとき
<button class="btn btn-primary">Menu</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
Bootstrap 3.0 #04（ページのナビ）
ページネーション（paginetion）
- ul要素のクラス指定で作れる
- 作り方はパンくずリストと大体同じ
- laquo;で左矢印、raquo;で右矢印
- liのclass="active"でいまいるページ
- li class="disabled"でリンクがクリックできなくなる（a要素に書かない）
<ul class="pagination"> <li class="disabled"><a href="">«</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">»</a></li> </ul>
ページャー（pager）
- 「前へ」「次へ」とかいうやつ
- ul要素のクラス指定で作れる、いいかげん覚えてきた
- liのクラスをprevious（前へ）、next（次へ）で指定
<ul class="pager"> <li class="previous"><a href="">前の記事へ</a></li> <li class="next"><a href="">次の記事へ</a></li> </ul>
Bootstrap 3.0 #03（Navbar、パンくずリスト）
Navbar
- Navbarを作るときにはnavで囲む
- navbar-defaultでグレーっぽいやつ、navbar-inverseで黒っぽいやつ
- navbar-fixed-topをつけることで、スクロールしても常に上部に配置される
- navbarのヘッダにはa要素にclass="navbar-brand"をつけないと変な表示になる
- navbarの中身はリスト表記で作れる
- navbar-rightで右端に表示される
<nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="">logo</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="">Home</a></li> <li><a href="">About</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="">Contact</a></li> </ul> </nav>
パンくずリスト（breadcrumb）
- ul要素のクラス指定で作れる
- ちなみにulとは「unordered list」（アンオーダードリスト：順不同リスト）の略
- ul class="breadcrumb"をつけるだけ
- いまいる階層には、li class="active"をつけてあげるとよい
<ul class="breadcrumb"> <li><a href="">Home</a></li> <li><a href="">Member</a></li> <li class="active"><a href="">Tanaka</a></li> </ul>
はてなブログの記事の幅を広げた
はてなブログのデザインは気に入っているのだけど表示幅が狭かったので広げた。「カスタマイズ」のデザインCSSに以下のように追加。
#container { width: 900px; margin: 0 auto; } #main { width: 800px; }
mainのwidthが記事の幅になる。margin: 0 auto;をつけないと左寄せになる。他にもcontent-innerとwrapperで指定してるやつとかも見つけたけど、これやったらデザイン自体が変になった。もしかしたらデザインによってクラスの指定が違うのかもしれないけど、めんどくさいから調べてない。
あと、いいかげんはてなブログでのソースコードの記述の仕方を覚えたい。いちいち検索したくない。なのでこの記事の中に書いとこうと思ったけどうまく表示されないので断念。暗記する。
Bootstrap 3.0 #02（グリッド）
- class="container"で中央寄せ
- 12のグリッドを分割するために、rowというクラスを作る
- rowで囲んだ中に合計12になるようなdivを作る
- rowで囲んだものを中央寄せしたいときには、全体を囲むdivを作ってclass="container"
レスポンシブデザイン
- デバイス幅に応じてレイアウトを変える
- col-**-*で指定
- lg…ラージ（1200px以上）md…ミディアム（992px以上）、sm…スモール（768px以上）、xs…エクストラスモール（768px未満）
- その後の数値で幅を指定
- hidden-**（隠す）やvisible-**（表示する）の指定も可能
<div id="header" class="container" style="background:red;">header</div> <div class="container"> <div class="row"> <div class="col-sm-3 hidden-xs" style="background:green;">Side1</div> <div class="col-sm-6 col-xs-6" style="background:blue;">Main</div> <div class="col-sm-3 col-xs-6" style="background:yellow;">Side2</div> </div> </div> <div id="footer" class="container" style="background:black;">footer</div>
