この度、遠隔居住者見守りサービス「ikitell」を公開しました。
「ikitell」はメールとWEBページを利用した見守りサービスです。
つまり、大切な人に「生きてるよ！」と伝えてもらうサービスです。
読み方は「イキテル」です。
現在新しいWEBサービスを立ち上げようとしていますが、その開発工程を管理するためRedmineを使用しようと思っていました。
ところがリモートのサーバーにRedmineをインストールできず困り果てて、サードパーティー製のRedmineを探していたところ、「plan.io」というサービスを見つけました。
このサービスはRedmineをカスタマイズして提供しており、１プロジェクトで２ユーザーであれば無料で使えます。
使い勝手もよかったので継続しようとおもっていましたら、ダッシュボードに「お試し期間が終わりました。このアカウントは近日中に閉鎖されます」というメッセージが・・・
「あれ？無料で使えるのって試用期間中だけ？」と思ってサイトをあさっていると、ログイン後の左上にあるアカウントメニューから「Customar Account」からアクセスするページのヘッダーメニューに「プラン」というのがあり、そこでで無料プランの「Bronze」が選べるではないですか。
早速プラン変更しようとしましたが、なぜかリストボックス内のBronzeが選べません。
途方に暮れること数十分。はたと気が付きました。
実はplan.ioのアカウント取得時、すでにデフォルトのプロジェクトが一つ作成されていたのです。
私はなぜかそのプロジェクトを「サンプル」と勘違いして、自分で新たなプロジェクトを作ってしまいました。
そのためプロジェクトが２つになってしまい、Bronzeの「１プロジェクト」という枠からはずれてしまったのです。
いや～、早とちりは困ったもんですね～
レスポンシブWEBデザインを手軽に実現できるツールとして、BootStrapは大変助かってます。
あれだけ少ないコードの量で済むので、作業がとても楽なのです。
まぁ、ソース全体でみれば、bootstrapのライブラリ分があるので、サイトの重さ的には変わらないと思いますが。
さて、そこでデザインの話に行くわけですが、レスポンシブは基本可変グリッドを使うわけですけども、その際bootstrapでは、containerというクラスを使うと、ページの左右に余白を作ることができます。ただ、私としてはもう少し余白が欲しかったので、レスポンシブを維持したまま、PCビューの際は固定レイアウトのように、左右の余白を大きめに取れないかなと、色々調べてみたところ、container-fluidというクラスを使えば、要件が実現できることを知りました。
＜使い方＞
まず、現在「container」クラスを使っているところを、「container-fluid」に変更します。
そして、CSSで下記のように「container-fluid」を定義します。
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 900px; //例えば
}
＜参考サイト＞
以上、どうぞお試しあれ。
スタイルシートを利用してデザインしていると、画像の下の方に妙な隙間ができることがある。
imgタグのmarginやpaddingを0にしても隙間が消えず、「なんじゃこりゃ」と思って色々探していると、どうやら「vertical-align」というものが悪さをしているようだ。いや、悪意はないんだろうけど。
この「vertical-align」というのは、行内における垂直方向に位置なんだそうだ。
たとえば「g」や「y」など、足が出るアルファベットが、ベースラインから足を突き出して表示するか、足までベースライン上に出すかを指定するものだ。
しかし、今回は画像のみで文字列は入力していないのだが、他に方法もないので、imgタグのスタイルに「vertical-align」を「bottom」にしてみた。
すると、隙間が消えた。
理由は不明だ。