高さの異なるブロック要素をタイル状に隙間なく並べる

高さの異なるブロック要素を左上から右下へタイル状に隙間なく並べる方法を紹介します。

HTML

補足

• サンプルでは "album" という id 名を付けた div 要素内に、並べ替える元のリストを記述しています。

jQuery

補足

• function masonry(s, n) という関数で並べ替えます。引数の s には、元のリストを包む div 要素の id 名を指定し、引数の n には並べ替え後のカラム数を指定します。
• この関数では、引数で指定されたカラム数分の新しいリストを作成し、それを横並びにしたあと、各リストの中へ元リストの項目をコピーしながら振り分けています（元のリストは CSS で非表示にしています）。
• サンプルではウィンドウ幅を変えると、カラム数が変わるように指定しています。

CSS

補足

• jQuery の処理で並び変わる前に、一瞬元のリストが縦一列に表示されてしまうので、 CSS で非表示にしています。

サンプル

「高さの異なるブロック要素をタイル状に隙間なく並べる」のサンプル

画像の縦横比を維持したまま正方形内に表示

長方形の画像を縦横比を維持したまま正方形内に表示する方法を紹介します。

HTML

補足

• まず、「縦横比を維持したまま横幅いっぱいに画像を表示」で紹介した方法で画像を表示します。
• 次に画像を含むブロック要素（サンプルでは table 要素）に img-contain または img-cover クラスを付けます。

jQuery

補足

• img-contain または img-cover クラス内の .frame-img クラスを探し、その子要素の img 要素を非表示にしています。
• 次に img 要素に指定されている画像の url を .frame-img クラスの background-image に設定しています。

CSS

補足

• .frame-img クラスを正方形にするため、padding-top: 100% を指定しています。
• 画像を正方形内に、どう表示するかは、background-size の contain と cover で切り替えています。

サンプル

「画像の縦横比を維持したまま正方形内に表示」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに画像を表示

ブロック要素にアイコンバッジを表示

ブロック要素にアイコンバッジを表示する方法を紹介します。

HTML

補足

• データ属性（data-badge-top-left, data-badge-top-right, data-badge-bottom-left, data-badge-botton-right）で、バッジの位置と表示する文字を指定します。

CSS

サンプル

「ブロック要素にアイコンバッジを表示」のサンプル

関連記事

• ブロック要素にテキストでアイコンを表示

ブロック要素に画像でアイコンを表示

ブロック要素に画像を使ってアイコンを表示する方法を紹介します。アイコンは疑似要素の背景画像で表示しています。

HTML

補足

• アイコンの位置を data 属性（data-icon-pos）で指定します。
• 表示するアイコンの種類は data 属性（data-icon）で指定します。

CSS

補足

• アイコンは疑似要素の背景画像で表示しています。
• サンプルではサイズが 64px × 64px の画像を 24px × 24px のブロック要素の背景として表示しています。
• アイコンのサイズを変更する時は span 要素の padding や疑似要素の表示位置を調整する必要があります。

サンプル

「ブロック要素に画像でアイコンを表示」のサンプル

関連記事

• ブロック要素にテキストでアイコンを表示

ブロック要素にテキストでアイコンを表示

ブロック要素にテキストでアイコンを上下左右の指定位置に表示する方法を紹介します。アイコンは疑似要素で表示します。

HTML

補足

• span 要素にデータ属性（data-icon-left, data-icon-right, data-icon-top, data-icon-bottom）を付けてアイコンの表示位置と表示するテキストを指定します（span 要素はCSS でブロック要素化しています）。

CSS

サンプル

「ブロック要素にテキストでアイコンを表示」のサンプル

関連記事

• 文字列中にテキストでアイコンを表示

ゴシック体以外のフォントで表示

通常、ウェブページの文章はゴシック体で表示されますが、見出しなどにゴシック体以外のフォントを使いたい時があります。ここでは部分的にゴシック体以外のフォントを使う方法を紹介します。

HTML

補足

• font-mincho クラスを付けると明朝体で表示されます。但し、CSS で指定しているフォントがある場合で、無い時はゴシック体で表示されます。
• 同様に、英文専用ですが font-sans-seri, font-serif, font-monospace, font-fantasy, font-cursive クラスを付けると、それぞれの書体で表示されます。但し、CSS で指定しているフォントがある場合で、無い場合は同じ系統の書体で表示されます。それも無い場合はゴシック体で表示されるようです。

CSS

サンプル

「ゴシック体以外のフォントで表示」のサンプル

関連記事

• おすすめのフォントファミリー（font-family）の指定【2016年12月現在】

１行に収まらない長い文字列の文末を折り返さず "…" で表示

１行に収まらない長い文字列の文末を折り返さず "…" で表示する方法を紹介します。

HTML

補足

• 長い文字列を折り返したくない場合は、ブロック要素に text-tail-cut クラスを付けます。

CSS

サンプル

「１行に収まらない長い文字列の文末を折り返さず "…" で表示」のサンプル

リストマーカーを指定したテキストで表示

リストマーカーを指定したテキストで表示する方法を紹介します。リストマーカーは疑似要素とデータ属性で表示します。

HTML

補足

• ul 要素に list-marker クラスを付けます。
• li 要素にデータ属性（ data-marker ）を付け、リストマークとして表示するテキストを指定します。

CSS

補足

• まず、list-style-type: none で本来のリストマークを削除します。
• リストマークは各 li 要素の疑似要素 before で表示します。
• データ属性（ data-marker ）で指定されたテキストを疑似要素 before の content として表示します。
• 尚、リスト項目が１行に収まらない場合、２行目以降はリストマーカーの下へ改行されます。リストマーカーを避けるには別途対策が必要です。

サンプル

「リストマーカーを指定したテキストで表示」のサンプル

関連記事

• 文字列中にテキストでアイコンを表示

ノート風の罫線を CSS で表示

ノート風の罫線を、画像を使わずに CSS で表示する方法を紹介します。

HTML

補足

• notebook-border クラスを付けたブロック要素の背景に罫線が表示されます。

CSS

補足

• repeating-linear-gradient で罫線を表示しています。
• font-size × line-height が１行の高さになります（サンプルでは 24px ）。
• repeating-linear-gradient で、透明色（サンプルでは rgba(255,255,255,0) の部分）と１ドットの罫線（サンプルでは #ccc の部分）を交互に表示しています。
• 従って font-size と line-height がサンプルと異なる時は、指定する値の調整が必要です（ 23px と 24px の部分）。
• 加えて p 要素の下マージンの値も罫線に重ならないよう変更してください（ 24px の部分）。

サンプル

「ノート風の罫線を CSS で表示」のサンプル

文字列中にテキストでアイコンを表示

文字列の途中（先頭または末尾も可）に、テキストでアイコンを表示する方法を紹介します。サンプルでは記号文字 "★" をアイコンとして表示しています。

HTML

補足

• アイコンとして表示したいテキストを span タグで挟み、inline-text-icon クラスを付けます。

CSS

補足

• inline-text-icon クラスでは span 要素をインライン・ブロック化したあと、アイコンとしての装飾を設定しています。

サンプル

「文字列中にテキストでアイコンを表示」のサンプル

疑似要素の背景画像で写真にフィルターをかける

疑似要素の背景画像で写真にフィルターをかける方法を紹介します。写真は 縦横比を維持したまま横幅いっぱいに画像を表示 で表示します。

HTML

補足

• span 要素に frame-img とフィルターのクラス（stripe, dot, border）を併記しています。

CSS

補足

• span.frame-img の疑似要素 before でフィルター用のブロック要素を作っています。
• stripe, dot, border クラスで、そのブロック要素の背景画像を設定しています。
• ここでは透明な背景に黒のドットまたは縞模様の PNG 画像を背景画像に設定しています。

サンプル

「疑似要素の背景画像で写真にフィルターをかける」のサンプル

疑似要素で画像にキャプションを付ける

画像にキャプションを付ける では em 要素を使ってキャプションを付けましたが、ここでは疑似要素を使った方法を紹介します（画像の下にキャプションを付ける場合は、素直に em 要素を使ったほうがよいと思います）。

HTML

補足

• キャプションの文字列は span.frame-img 要素の独自データ属性 data-caption で指定します（img 要素には疑似要素を付けられないようなので、ここで指定しています）。

CSS

補足

• 疑似要素 after のcontent プロパティの値に、独自データ属性 data-caption を指定しています。

サンプル

「疑似要素で画像にキャプションを付ける」のサンプル

関連記事

• 縦横比を維持したまま横幅いっぱいに画像を表示