プログラミング

HTML・CSS

floatを使った子要素に合わせて親要素を高さを高くする(揃える)方法

子要素でfloatを使用していて、また子要素の高さもその時で変わるので親要素で高さを指定できず、親要素でボーダーを使うと思ったような高さが得られないことがあります。 上の画像のような表示になるサンプル <div class="border"...
jQuery・JS

画像(イメージ)を模造したスペースを作成する「holder.js」JavaScriptプラグイン

holder.jsは、画像を表示するのではなくダミーの画像スペースを作成するものです。 holder.jsの使い方 holder.jsをダウンロードして圧縮ファイルを解凍します。 サイト:holder.js または(Github) hold...
HTML・CSS

CSSで画像(の回り込み)とテキストを上で揃える

テキストと画像の上が揃わないときがあります。基本的にテキストは、pタグが使われるので上下にマージンが設定されているので無効にすることで上が揃います。 <p style="margin:0;">テキスト</p> 参考例 画像を左にフロートさせ...
HTML・CSS

Bootstrapでドロップダウンメニューを作成する

Bootstrapを利用すると、簡単にドロップダウンメニューを作成にすることができます。 参考ページ:Dropdowns 1.ドロップダウンするテキストにdata-toggle="dropdown"を追加 2.表示するメニューリスト(ul)...
HTML・CSS

Bootstrapでサムネイルを作成する

Bootstrapで比較的簡単にサムネイルを作ることができます。 参考ページ:Thumbnails imgタグを囲んだaタグ(リンクなしのときdiv)のclassに"thumbnail"を設定するとサムネイル風の表示になります。サイズの設定...