rails 独学して軽くにちゃんまとめつくる

読者です 読者をやめる 読者になる 読者になる

rails独学して軽く2ちゃんまとめビルダーをつくる。

rails tutorial読破→2chまとめビルダー作成→アメリカでインターンシップ→恋活SNSを作成・・・・・→音で感触をつくり感触をあつめたライブラリをつくる

bootstrap で "thumbnail" を使わないほうがいい理由

bootstrap ではブロックリンクをつくるときに thumbnail という便利なクラス名があります。これを使うと

f:id:mooooooooooriiiiii:20170414133240p:plain

こんな感じに四角形の中に写真やリンクをいれてきれいにまとめることができます。とくにインデックスページをつくるときに重宝します。もしこれでもいいやと思う人向けにこの html を書いておきます。

【コピペでそのまま利用可】

<div class="row">
    <div class="col-sm-6">
      <div class="thumbnail">
        <p class="img-responsive"><%= link_to image_tag(article.pic), article %></p>
        <div class="caption text-center">
          <a><h4>タイトル</h4></a>
          <p>サイト名</p>
          <p>ディスクリプション</p>
        </div>
      </div>      
    </div>
  
    <div class="col-sm-6">
      <div class="thumbnail">
        <p class="img-responsive"><%= link_to image_tag(article.pic), article %></p>
        <div class="caption text-center">
          <a><h4>タイトル</h4></a>
          <p>サイト名</p>
          <p>ディスクリプション</p>
        </div>
      </div>      
    </div> 
</div>

ただこれでは制限がいろいろとあります。 まず画像とテキストに左右のマージンができてしまいます。もちろん imge-responsive というクラス名を取り除いて自分で css で調整すればいいのでしょうが、それだと thumbnail をつかうメリットがありません。

つぎに文字の上下にできるマージンです。 p で文字を区切った場合こんな広さの空白ができてしまいます。だだっ広すぎてなんだか不格好になってしまいます。ブロックリンクに記述する情報量が2~3行である場合、ならthumbnail をつかってもいいかもしれませんが、複数行になる場合は使わないほうがいいでしょう。 f:id:mooooooooooriiiiii:20170414133240p:plain

col-sm-12 でかつ記述量がすくないときこうなる。

f:id:mooooooooooriiiiii:20170414134706p:plain

ボックスリンクの改行の場所でへんなズレが起こってしまいます。もちろんこれはボックスリンクの height を一定にすれば大丈夫なのですが、こうすることで先ほど説明したように文字の隙間がひろくなり不格好になってしまいます。

f:id:mooooooooooriiiiii:20170414134345p:plain