茶鏡のブログ

駆け出しのWebデザイナーが文句ばっかりぐちぐちぐちぐち言う日記です。

Bootstrap(Ver.3) のこまかーいこわざ覚書 

かなりお久しぶりです。

Bootstrapも、もうVer4ですけれども、えーいこちとらIE8対応せにゃあかんのじゃーということで、案件で使った本当に細かい小技を覚書としてご紹介します。

BootstrapのいいところはJavascriptが強力で、説明書にないことしたくなってもある程度対応できるところですねぇ。また思い出したら書きたいとおもいます。


リンク先の特定タブを開かせる

なんだか日本語になっておりませんが、「このリンクおした時だけ、hogeページにある(初期状態は#TabAがアクティブな)タブ#Tabの#TabBをアクティブにしたい」というときに使います。

HTML リンクを設置するページに
<a href="hoge.html#TabB">TabBひらいて!</a>
JS タブ#Tabが設置されたhogeページに書きます
$(function(){
    var TargetTab = location.hash;
    if (TargetTab == "#TabB"){
        $("#Tab a[href='#TabB']").tab('show');
        location.hash = '';
    }
        else{return false;}
});

ドロップダウンメニューが開いている時だけ周りを暗くしたい

これはメガドロップダウンメニューを使う時であるかもしれません。

HTML ページの下の方に設置
<div id="Cover" class="CoverBg"></div>
CSS
.CoverBg {
    width: 100%;
    height: 100%;
    /*背景画像の設定はおこのみで*/
    background: transparent url("img/bg_cmn_dropdown.png") repeat scroll center center;
    /*他のJSやCSSの設定に応じてz-indexを設定してください。*/
    z-index: 200;
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
}
JS
$(.dropdown').on('shown.bs.dropdown',function(){
    var BodyHeight = $("body").height(); //Get Header Height
    $("#Cover").css("height",BodyHeight);
    $("#Cover").stop().show();
});
$('.dropdown').on('hidden.bs.dropdown',function(){
    $("#Cover").stop().hide();
});
$("#Cover").click(function(){
    $('.dropdown-toggle').dropdown();
});

Bootstrapで印刷対応する(ざっくり編)

そんなむちゃくちゃな…という話ですが、ざっくりと紹介します。というよりは、gistの紹介ですねぇ〜^^。

Bootstrapのプリントの設定を外す

デフォルトのままでは白地に黒になってしまうので外します。これはBootstrap-Sassを使っているとやり方によって違うのですが、ダウンロードしてつかう場合は「Customize」のところで「Print media styles」を外すと行ける気がします。

印刷用CSSを作る

私は下記gistを参考にしました。「small表示の時の状態でプリントする」設定です。
パソコン表示にしたかったので、これをほぼそのままコピペして、sm になっているところを md に変えます。
このgistはグリッドの設定ですので、サイドバーを非表示にするなどは、よしなにしてくださいませ。

Render Bootstrap as "small" layout when printing

OSXにrbenv入れようとして半日以上潰した話

※このポストに書かれている解決法は、自分が忘れないようにうろ覚えで書いているため、重要なことが抜けていたりする可能性があります。
思い出したりもう一度試した時に加筆していきます。

あらまし

「試験前になってしまうと掃除がしたくなるあれ」になってしまったようで、コーディングをはじめなければならないのに、環境をいじくってしまい半日以上潰してしまいました。

半日以上潰した罪状をここに書き遺します。

ここでおすすめ本!

Development Environments for Web Designers

この本は本当にありがたい本。また感想を記事にしたいくらい、むっちゃおすすめです!

Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方…という、こもりまさあきさんの本です。(まだまだ、執筆中とのこと!)とても簡単に言うと、ウェブデザイナーのための黒い画面とその周りのツールの指南書です。

なにがすごいかというと、UNIXの基本的なコマンドから始まり、Web制作で「よくわからないけど何故か登場してしまう」「気になるけど難しそう」なツールの使い方やインストール方法を網羅しています。

このポストで「Bundlerってなんじゃい!」となってますが、他のツールを使うためによくわからないままなんとなく導入している、ということはあまり健全ではないです。とはいうものの調べようとすると開発者向けの記事にたどり着き、結局ツールの魅力や骨子がわからなかったりします。 知識がいい加減な私にとっては「あ〜〜〜そういうことだったのね」が満載であります。 電子書籍ですが、iPadKindleを持っていなくても読めます。

やりたいこと

本を参考にしつつ、 Mac OSX 10.6.8 (古い)に、rbenv (Rubyのバージョンを切り替える)を導入します。
マシン買ってほしいなぁ。

続きを読む

自分でもよくわかってない私の仕事について

こちら会社員 Advent Calendar 2014 の14日目です。
会社でWebの仕事ってどんなかかわりがあるのだろうと、ツイッターでウォッチングを告白したら、カナさんよりお誘いいただきました!ありがとうございます。

前日はnukusuさんです。大丈夫です、私なんて現職まで10年もフリーター\(^o^)/
会社員 Advent Calendar 2014 - Webそしてnukusu。

今回は、自分でもなにしてるのかよくわかってない、仕事についてづらづら書きます。わかってないがゆえ長いです。

続きを読む

Webサイトが立ち上がるワイヤーフレームと、コミュニケーションと。

地ら……コホン、大型案件でしんどい日々はまだまだ続いております。
それはそうとぼっちじゃなくなりました!やった!Gitのリモートリポジトリでコラボレーションなど、独りでできない試みも取り入れつつ、たくさん力になっていただいております!ありがたや!

例の大型案件ですが、当初わたしは、時間短縮のためにワイヤーフレーム(以下WF)を作って、カンプをつくらず、いきなりコーディングしてしまおうという作戦をとっていました。しかし、これ結局のところ失敗。最終的に一部のコーディングを外部の方にお願いすることになったので、慌ててカンプを作るという事態に陥ってしまいました。

いきなりコーディングは、デザインスタイルガイドがきっちりと設計されていてはじめて使えるのと、身にしみたことは、テキトーに書くWFでは、だれにも意図が伝わらないことです。

いや本人は真面目なんですけど、なんちゃってが書くWFなんてこんなもんすわ。諸事情でお見せできませんが。

この件で、すごくわくわくした動画があるのでご紹介します。

続きを読む

ゆるく好きになってもいいじゃない

【自分語り注意】
こういうのは増田で語るべきなのかしらとおもいつつ、やや感情的に筆を取ります。

自分の好きなものを信じて、好きだと言って、真剣に邁進して行く人。
ひとり、もしくはたくさんの人を好きになって、大切にできる人。
どちらも、尊敬に値するすばらしいことです。

続きを読む

ぼっちWeb担当が案件でミスやらかした際、Gitにちょっと助けられました。

大型案件でさらなる暗中模索の日々が続いておりますが、クライアント様のサイトに不具合発覚で、どうしょうもなく傷心…。あとまだペナルティー聞いてません…。

ミスはよくありません。ダメ絶対。

が、この件でGitがあってよかった〜と思ったことがありました。

「Git?? ぼっちだしやってることサイト更新だしいらないよね〜」とか、「プログラムよくわからん!できればさわりたくないけど、さわらないと…!」な方へ、失敗談から、バージョン管理取り入れると、いいよ!をお伝えしてみようかと。

Web専業さんとか開発者さんには常識かもしれません、わたくし是非御社の賢いやり方を知りたく存じます…。

もくじ

  • 罪状
  • わたしの状態
  • この件でGitに助けられたこと
  • 教訓
続きを読む

英国発、スポーツファンのためのSNS「Sportlobster」のあたらしさ

「世界中のスポーツファンのためのワンストップショップ」を掲げ、スポーツファンのためのSNSSportlobster」について、テキトーな解釈で紹介してみます。使い方や愉しみ方については言及しません。そもそも英語とスポーツがよくわからんので。なんで登録したんや…。

Sportlobsterは、2013年に英国でローンチされ、最近メジャーアップデートがかかりアプリもAndroid版もリリースされました。

創設者のアンディ・ミクル氏曰く「テニスが好き、チェルシーFCが好き、ハミルトンが好き、全ての体験をカバーすることができる

まずはこちらのトレイラー動画をご覧くださいませ。

この動画の最後に登場する男性が、2013年までF1で活動していたレーシングドライバーマーク・ウェバー
Twitter調べでは、一時期ガンガン投稿されていて、しかもこうして公式、しかもトレイラー動画に登場ってなんでかしらと調べてみたら、出資されてました!

スターのお金の使い方でスタートアップに投資って今風でカッコいい。

もくじ

  • サービスについてざっくり
  • ユーザーもジャーナリスト
  • 今後きっとおもしろくなる??
  • 参考資料(記事ソースリンク)
続きを読む