nDiki : Bootstrap

Boostrap

Bootstrapモバイルファーストでレスポンシブな Web サイトを構築するための HTMLCSSJavaScript フレームワークです。

メモ

Bootstrap 3 で画像を右寄せにし、テキストを回りこませる方法

Bootstrap 3 で画像に float: right を指定してテキストを回りこませるようにするには pull-right クラスを使います。

スポンサード リンク

2012年6月20日 (水)

今日のさえずり: 前回カートリッジ交換した時に RTM 登録してなかったのでオーバーしてるくさい

2012年06月20日

  • 08:02 あーダイヤ乱れてるのか。
  • 09:54 電車ちょい狂ってた。 (@ 株式会社ミクシィ (mixi, Inc.)) http://t.co/ntNXXb9s
  • 15:03 新バージョンに「new ほにゃらら」という名前にしたい欲望(絶対あとで公開する)。
  • 19:48 半日 Bootstrap してた。
  • 19:49 もうちょっとタイトだといいな。
  • 19:57 RT @thisistanaka: 話題のコンパクトカメラソニーのRX100ですが、レンズが…うーむ…期待していたほどで、なかった、う゛ぅぅぅ(ファーストインプレッション)。いいところがいっぱいある魅力的カメラではあるのですが、レンズ描写がイマイチものたりなかったです。
  • 21:17 たいきん。
  • 21:41 前回浄水器カートリッジ交換した時に RTM 登録してなかったのでオーバーしてるくさい。
  • 23:05 WBMA-7SN 送料無料な普通の通販サイト。
[ 6月20日全て ]

2012年9月5日 (水)

今日のさえずり: そろそろ非破壊検査行ってきます

2012年09月05日

[ 9月5日全て ]

2013年1月6日 (日)

【日記】冬休み最終日

今年は1月4日が特別おやすみになったため年明け側が長いパターンの9連休となった。これだけ長く休んだのはゴールデンウィーク含め何年ぶりだったかなあ。

連休中は、ウィラ大井へ行って朝マックへ行って年末年始の買い出しして初詣行ってIKEA船橋行ったって感じ。

計算機系はここの Bootstrap 化したいなと思ってたんだけれど、その前の CVS リポジトリGit リポジトリ化まで。こちらはちょっとずつ進めるかな。

あとはポモドーロテクニックのプライベートでやってみるのをちょっと始めてみたぐらい。それと冬休みに入ってから日記他1日1記事を復活。今のところ継続中。

それぞれ大きな事は無かったけれど充実した冬休みだったな。

[ 1月6日全て ]

2013年2月4日 (月)

今日のさえずり: デスクの上に片方土足を置いていたので「これは大物だ!」と思っていた

2013年02月04日

  • 07:38 “お前このサブネットでも同じ事言えんの? - 知らないけどきっとそう。” http://t.co/w3c4pLf1
  • 09:24 @y_aki 今後は Bootstrap あたりを使って、どのデバイスでも見やすくなるようにはしたいです。サイドバーは他人の Blog 見てる時に無意識に脳内フィルタリングしてるのでいらないかなあと。
  • 09:48 福は内。 (@ 株式会社ミクシィ (mixi, Inc.)) http://t.co/grL7yVGi
  • 10:07 いつもバッグに入っているクレジットカードと折り畳みバッグを今日は忘れた。帰りにスーパー寄る予定があるのに。
  • 10:12 今日は体調不良で2人お休み。昨日豆をまかなかったに違いない。
  • 15:37 いただきもののブランチに add 忘れられているものがあるっぽい。
  • 15:40 「個人の端末で無線 LAN を使えますか?」を「故人の端末で無線 LAN を使えますか?」と書き間違えていた。
  • 19:12 渋谷区2Fのポールンロボ。 / “花粉プロジェクト - ウェザーニュース” http://t.co/0Fx21bLs
  • 19:12 JASGAガイドライン及び運営体制基準を策定。 / “JASGA自主規制の概要” http://t.co/sSSAbllv
  • 19:27 Perl やっててよかったー。 / “Perlの食えない事情 - 演算子編 - アリ” http://t.co/i7pyFIPD
  • 19:27 “そりゃそうだ! iOS版公式『Tumblr』アプリのレーティングが17歳以上になる | NANOKAMO BLOG” http://t.co/TGRtlycg
  • 20:16 2月1日に入社した人がデスクの上に片方土足を置いていたので「これは大物だ!」と思っていたのだけれど、今日よく見たら靴型のペンケースだった。
  • 20:17 っていうか降る前に靴欲しい。
  • 20:42 “『Twitterカード』を設定してサイトへの流入数を「若干」増やそう!1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。” http://t.co/m1ZjsLQV
  • 21:29 @py0n 誕生日おめでどうございます!
  • 21:37 今日帰りにレジ袋を買わなければならないのか、口惜しい……。
[ 2月4日全て ]

2013年12月1日 (日)

Bootstrap 3 に移行して Web 日記を延命

この Web 日記(nDiki)がスマートフォンで見にくいのがずっと気になっていたので、さくっと Bootstrap 3 に移行した。CSSBootstrap 3.0.2 のものに変えて、navbar を使うようにコードをちょっと変更程度の軽い対応。

もともと tDiary テーマ CSS 用の HTML 構造を生成していたんだけれど、そのあたりが問題で崩れることはなく BootstrapCSS を当てることができた。もともと Wiki 記法で書いたソースドキュメントを HTML に変換しているので、変な構造の HTML は吐かないようになっていたというのもサクっといけた点かな。

細かいところういうと画像の回り込みに対応させなければならなかったり、テーブルなど適宜 Bootstrap のクラスを指定した方がいいところがあるけれど、まあ追い追いで。

あとそもそも iPhoneAndroid などのスマートフォンで見にくかったのは CSS の問題というよりは、viewport の指定がなかったからだった。Bootstrap に差し替えただけではやはりスマートフォンでは見にくくて、Bootstrap の Getting started の通り、

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

と書いたら文字サイズなど見易くなった。

2004年2月22日にハイパー日記システム(hns)から自作の DiKicker移行してからもうすぐで10年。そういえば2004年2月22日は奇しくも mixi がプレオープンした日だっとはなあ。何かの縁か。

[ 12月1日全て ]

2013年12月3日 (火)

Bootstrap 3 での画像横へのテキスト回り込みと画像のレスポンシブ化

Bootstrap 3 で画像を float: right; するには

 class="pull-right"

を指定。あとスマーフォンのブラウザでの表示時に、端末の画面の横幅より大きい画像がはみださないようにするには

 class="img-responsive"

を指定する。max-width: 100%; と height: auto; がかかるようになる。

ということで、ここの Bootstrap 3 対応作業の続きでコンテンツ中の画像には適宜上のクラス(片方あるいは両方)が指定されるように HTML 生成を修正。画像まわりがいい感じになった。 Bootstrap お手軽。

[ 12月3日全て ]

2013年12月31日 (火)

2013年日記まとめ

mixi日記2013年の月毎のふりかえりを書いている人がいていいなあと思ったので日記まとめという形で今年の1年をふりかえり

1月 再び毎日日記を書こう

naney:8358153206

再び毎日日記を書こうということで数年前まではほぼ欠かさず1日1記事書いていた Web 日記を毎日書くことにした。結果継続成功! 来年も続ける。

正月休みは3年ぶりに IKEA行って、ダイニングテーブルを新調。ちょっと高さが高いかなという声もあるけれど結構満足している。IKEA は11月にも行って今年2度。

仕事始めは氷川神社への初詣からスタート。今年は本厄だからというわけではないけれど厄除け含めて結構ちょくちょく神社へ行った感じがする。なんか落ち着くんだよね。

1月には久しぶりに東京タワー上った。昔ながらの土産店も健在だったので嬉しい。来年はまだ行っていないスカイツリーに行きたい。

2月 20年の時を経てソバアレルギー無罪判決

naney:8457649052

20年の時を経てソバアレルギー無罪判決ソバアレルギーだと思ってずっと生きてきたのだけれど実は違ったことが判明! 残りの人生で蕎麦を食べられるようになった。でも今年数回しか食べてないな。ずっと食べてこなかったから口が欲しがらないというのもあるんだよね。来年はおいしい蕎麦を食べてみたい。

それから仕事で使うキーボードHappy Hacking Keyboard Lite から ThinkPad USB トラックポイントキーボード(英語)に交換。打鍵のストレスが減ったので良かった。今年はワイヤレス版が出でるのでずっと欲しいと思っているのだけれどちと高いんだよね。50%オフになるのをずっと待っている(40%オフまではセールになることがある)。

2月にはチームに優秀なエンジニアが join。ハイパフォーマー。

3月 煙霧

naney:8545735187

税務署で初めて確定申告。3月10日には大騒ぎになった煙霧。東京生活長いけれどこんなの初めて。

あと3月末にはサントリーホールオープンハウスへ。なかなか上がる機会のないステージに上がった。年に1回あるので来年もぜひ。

年末から取り入れていたポモドーロテクニックは3月中旬に止めることにした。学ぶことはあったけれども、自分のワークスタイルには合わなかった。

Android日本語入力は3月に ATOK から Google 日本語入力変えた。入力補正が秀逸でとても捗る。iPod touch 5th を8月に買ったんだけれど、やっぱり日本語入力環境は圧倒的に Android の方が上。

ツールといえば WorkFlowy というオンラインアウトライナーサービスを使い始めた。その後ずっと使っていて、今年出会った当たりサービス。お薦め。

3月29日には PerlCasual に参加。今年行った勉強会系は YAPC::Asia Tokyo 2013 以外だと

あたり。

4月 宇宙戦艦ヤマト2199テレビ放送開始

naney:8688132001

4月6日で Twitter使い始めて6年。一番気楽。ただフィードバックは mixi > Facebook > Twitter > Google+ な印象。 アイコンを近影に変更した

4月7日(日)から宇宙戦艦ヤマト2199のテレビ放送が開始。週末の楽しみとなった。やっぱり宇宙戦艦ヤマトいいわー。来年はオリジナルの宇宙戦艦ヤマトDVD レンタルして全話観るぞ。

4月16日にはミクシィ3年目突入

レジャー的にはゴールデンウィーク国立科学博物館附属自然教育園へ。穴場スポット。新緑の季節にまた行きたい。

5月 フレッツ光へ

naney:8708789759

ゴールデンウィーク風邪をひいてしまったのでパズドラとケリ姫スイーツをやり始めた。これがきっかけで今年はスマートフォンゲームアプリをちょこちょこやるように。長続きしているのはチェインクロニクルモンスターストライクチェインクロニクルはストーリーと世界観がしっかりしていてロールプレイングゲームらしいゲームで非常に良くできている。モンスターストライクはマルチプレイができる点が新しくまだまだ伸びそう。

5月4日には国立科学博物館。1回じゃ全然みきれない。何度もリピートする必要あり。

自宅ネットワーク的にはようやくフレッツ・ADSL からフレッツ光へ変更。ワイヤレスブロードバントルータも10年以上ぶりに新しいものにかえて YouTube がストレスなく快適に見られるようになった。素敵。

新調と言えば今年は NEX-5N 用としてEマウント用広角パンケーキレンズ E 20mm F2.8 SEL20F28買った。今年買ったレンズはこれ1本。NEX-5N につけると気軽に持ち出せるようになるので、結構重宝している。手ブレ補正まで入っていれば夜も持ち出せるんだけどね。

6月 15年ぶりの東京ディズニーランド

naney:8987108074

15年ぶり東京ディズニーランド健歩大会さまさま。トムソーヤ島が探検ぽくて意外と面白かった。来年はディズニーシーへ行くぞ。

久しぶりに献血をしようと思ったところなんと貧血で見送り。以前からではあるけれども、秋の健康診断でも「貧血疑 要経過観察」となっていたので引き続き注意。あとなんと「左腎結石(症) 要経過観察」という診断結果もセットで出たのでより健康には注意しなくちゃ。

あと生活的にはXperia Aスマートフォンデビューしたというのが大きな変化。spモードメールにかえて LINE で連絡を取るようになったり Google カレンダーの共有を果たしたりといろいろ便利になった(自分的に)。

7月 隅田川花火大会大波乱

naney:9281038482

Haskellやりかけたけどすぐ飽きた。

「おさわり探偵 なめこ栽培キット」を始めたのも7月。最近は起動するとたいがい枯れてる。

7月中旬にはコンタクトセンター・アワード 2013 全申請発表会を見に。ビューティフル・ドリーマーの話が印象に残っている。

7月のお祭は、桜新道盆踊り大会。今年初めて行ってきた。あとは行かなかったけれど今年の隅田川花火大会土砂降りで大波乱だったねー。

8月 iPod touch 5th 購入

naney:9426414843

8月中旬からチームにインターンやってきた。最初にさわったのが Windows XP という。想像以上に飲み込みがはやく優秀だった。青春の夏休みに我々のインターンシップを選んでくれてありがとう!

8月のお祭りは天祖・諏訪神社巡行だけじゃなくて夜のお参りも済ませた。今年はちょっとずついろいろやれることが増えてきたなー。あと大井どんたく例年通り

iPod touch 5th を買ったのも8月。iOS アプリをいろいろ試せるようになったのは収穫(iPad 2 しか持っていなかったので)。Android 端末より電池がよくもつのでサブ機としていいんじゃないかな。チェインクロニクル始めたのは iPod touch 5th を買ったせい。今は iPad 2 と2台でやっている。

ネットサービスとしては TeamGantt を使い始めたのだけれど、使い勝手はまずまずなのだけれどフルに使うわけでもなかったので解約。もうちょっと安ければ維持してもとは思ったんだけれども。

月末には初めてららぽーと豊洲へ行った。「らーらぽーと」のサウンドロゴは昔の音程の高いのが好き。

9月 よこはまコスモワールド

naney:9754213855

iPod touch で QWERTY 配列だと小さくて厳しいのでフリック入力練習し始めるも習得ならず。今も QWERTY。

9月の外出はよこはまコスモワールド。ファミリー・バナナ・コースターライド

あと YAPC::Asia Tokyo 2013 は例年通り参加。

10月 大井競馬場

naney:10268741013

雨で行きそびれていた東京シティ競馬のトゥインクルレースをようやく見に行けた。すごくロマンチックで興奮した。

それと10月はキャッシュカード・クレジットカード暗証番号一斉変更。 IC チップ付きのカードの暗証番号変更は要返却というの結構ネック。

11月 Remember The Milk から Google Tasks

naney:10643286184

ネルフからエンジニアが配属された。今年は CS 開発はエンジニア2増1減。来年もさらにチーム力を高めて一丸となって CS 向上に取り組んでいきたい。

アイテム的には今年後半バンナイズに注目。301プラスはスマートフォンを持ち歩くのにばっちりで重宝している。

個人的にはタスク管理ツールを Remember The Milk から Google Tasks変更したのも大きな出来事。やはりサブタスクが使えるとブレークダウンするのに便利。Remember The Milk がサブタスクをサポートしないかなあ。

レジャー的には久しぶりのプラネタリウム五反田文化センタープラネタリウム星空投影を鑑賞。リーズナブルなのが嬉しい。

12月 喜正を呑む

naney:11235583524 この Web 日記(nDiki) を Bootstrap 3 ベースに変更。スマートフォンでも見やすくなったし更新するモチベーションもアップ。

自分の名前と同じ綴りの酒をついに買って呑んだ。マジめでたいので正月にも呑もう。

今年のイルミネーション鑑賞は目黒川で。夜桜を楽しんだ

ツールとしては pandoc に出会ったMarkdown で書いえ reveal.jsプレゼンテーションHTML5 ファイル生成できる。発表系はしばらくこれを使いたい。

まとめのまとめ

年末にざざっとまとめをすると、どうしても行ったところとかまとめやすいのに偏るね。あと後半力尽き気味。(HootSuite + IFTTT の話題のような)数カ月に渡るものや、じっくり考え直す系のものは取り上げそびれた。

あとまとめていると「やはり書いていないことはふりかえり対象にもあがってこず記憶から薄れていく/消されていく」という背筋の寒さを感じる。プライベートや仕事での出来事や思いなど、Web 日記には載せないことをどう書き留めていくか最近考えている。今年は Web 日記継続の習慣が復活できたので、来年はそちらにも力を入れたいな。

なにはともあれ今年一年も良い年でした。ありがとうございました。

[ 12月31日全て ]

2015年2月22日 (日)

nDikiBootstrap 3 CSS を調整

Bootstrap 3 を使っているんだけれど見出しが本文とちょっと区別がつきにくいなどちょっと気になる点があったので修正。

  • 見出しが目立つように h2 h3 h4 に "font-weight: bold;" を追加。
  • フォントファミリを指定していなかったので body, h1, h2, h3, h4, h5, h6 に "font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;" を追加。
  • 段落が詰まった感じなので p に "line-height: 1.7;" を追加。
  • 短いセクションに "float: right;" 画像があるとその高さまで文章の無い空白ができて、間延びするので h4 に自分で設定していた "clear: both;" を削除。
  • 前記の h4 の "clear:both;" 指定で各セクションの "float: right;" な画像が同じ段にならないようにしていたのだけれど、これを消したことで画像が階段状に並んでしまうケースが出ることになるので img に "clear: both;" を追加。
[ 2月22日全て ]

2015年3月13日 (金)

サイト訪問者と運営者とのチャットを簡単に設置できる Zopim が面白い

Zopim

最近はチャットユーザーサポートを提供しているサービスが増えてきている。自分も過去チャットのサポートで解決が迅速に進んだ経験があってチャットサポートについては肯定的である。最近のチャットサポートはどうなっているのだろうと自分でも試してみたいと思い、人気が高そうな Zopim を実際に設置して試してみることにした。なお Zopim はカスタマーサービス・プラットフォームを提供する Zendesk に去年買収されている。

簡単に登録と設置ができた

実際にこのサイトのページの右下に出ているのがそれ。

上記のページの「SIGN UP」か「TRY ZOPIM」ボタンで登録ページへ。Name (後で変更できる) と、Email Address (後で変更できる)を入力してサインアップ。メールアドレス確認メールが届いたらそこのリンクから残りの登録ステップ済ませる。

あとはダッシュボードの「ウィジェット」のところにある HTML コードをページの HEAD 要素の中に追加すれば設置 OK。

HTML コードは PC 向けサイトでもスーマートフォン向けサイトでもどちらでも使えるのでサイト側では意識しなくて良い。 Bootstrap を使ってデザインした両対応しているページでも、Zopim もアクセスしてきたブラウザに合わせて機能してくれる。日本語も問題なく使えている。

「設置してみたのでテストしてみて」と言ったら一気に5人チャットがきて、慌てて返信してみたりした。実際にはリラックスして訪問者とやりとりするのが良さそう。

使って感じた点

  • 設置
    • 簡単。
  • 訪問者に対して
    • スマートフォンからの訪問者ともチャットできるのが良い。
  • サイト運営者にとって
    • iOS アプリ・Android アプリがあって、どこでもチャットサポート対応ができる。スタートアップなサービスなど、いつでもユーザーのフォローを出来るようにしたいというフェーズに良さそう。
    • Google Analytics のリアルタイムのように、サイト訪問者の状況がリアルタイムに分かるのが面白い。
    • 1箇所からしかログインできない(Web 版とモバイルアプリで同時にはログインしておけない)という点は注意。

Zopim Lite パッケージは無料なので立ち上げたばかりのサービスや、Blog などに設置してみるのに良いと思う。

(画像https://zop.im/press-kit より。)

[ 3月13日全て ]

2016年12月9日 (金)

nDiki に貼る写真Flickr ではなく同じサーバに置く

この nDiki写真を載せる際は2005年から Flickr にアップロードしてそれを貼りつけるようにしています。これを今後は普通に画像ファイルを Web サーバ側に置くことにしました。

Flickr写真を置いておくメリットは以下があります。

一方デメリットとしては

  • Flickr にベンダーロックインされている。長期的には一抹の不安。
  • 一度画像URL が変わったタイミングで過去の写真が一部表示できなくなっている(記事側の URL を変更していく必要がある)。今後も同様の自体があり得る。

があります。

Flickr 利用で使い勝手的には問題が無いのですが、長期的に継続する Web 日記のコンテンツとしては他のサービスに依存しすぎないようにした方が良いということで、今後は普通に Web サーバに置くことにしました。

そうするとどのサイズの画像ファイルを用意するかを改めて考える必要が出てきました。

画像サイズ

今までは Flickr で生成されるから適当そうなもの(たいがい長辺 500px のもの)を選んで貼っていました。今後は自分で適切なファイルを作ってアップロードすることになるので画像サイズについてちょっと見直してみました。

Bootstrap 3 でのサイトの幅の見直してコンテナを 970px までに

Bootstrap 3 だと広くても幅 1140px (1170px - 30px) なので画像幅もこれだけあれば十分です。しかし考えてみると nDiki は1カラムなのでラージデバイス(≥1200px)向けのコンテナ 1170px はいささか広すぎます。ということでいったんミディアムデバイス向けのコンテナ 970px までしか広げないようにしました。

 @media (min-width: 1200px) {
     .container {
         width: 970px;
     }
 }

写真は基本 max-width: 100% の .img-responsive で表示しているので、これで最大 940px 幅で表示されることになります。

表示される写真の高さは最大 480px に

幅 940px だと 4:3 なら高さは 705px、3:2 なら高さは約 627px になります。13インチMacBook Pro 上の Google Chrome でこのサイズの写真を貼るとほぼ縦いっぱいになってしまいます。記事中の写真では 480px ぐらいまでかなという印象でした。ということで

 max-height: 480px;

としました。

これだと 4:3 なら 640x480px、3:2 だと 720x480px の画像サイズがあれば十分なことになります。縦位置だと 3:4 で 360x480px、 2:3 だと 320x480px です。

画像ファイルの画像サイズは長辺 1200px に

これで 640x480px (4:3) や 720x480px (3:2) にリサイズして Web サーバに置けば現時点では過不足ないということがわかりました。

ただこれだとデバイスの変化でサイトデザインを見直す時がきた時に解像度不足になってしまいます。Bootstrap のラージデバイス向けのコンテナサイズを考えていったん長辺 1200px で画像ファイルを用意することに決めました。

ついでに .pull-left と .pull-right の画像幅も調整

写真を左右に寄せた際に現状テキスト部分が狭くなりすぎることがあるのでこのあたりも合わせて今回調整しました。

 .img-responsive {
     display: inline-block !important;
     max-height: 480px;
 }

 @media (min-width: 768px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 992px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 1200px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }
[ 12月9日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィでマネージャー・プロダクトオーナーをしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

follow us in feedly

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス
Process Time: 1.051653s / load averages: 0.28, 0.49, 0.45
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker