CSSだけでリストや横並びの区切り線を実現するパターン4つ

こういったリスト表示はそれぞれの内容がわかりやすいようにたいがい区切り線を使ってデザインしますよね。

縦にリスト表示する区切り線の例

  • お知らせの一覧
  • コメントの一覧

横並びで使用する区切り線の例

  • メニュー一覧
  • 評価項目などの一覧

CSSだけでリスト(一覧)表示や横並びの区切り線を実現する、よく使うデザインのパターン4つをメモしておきたいと思います。どれも特定の部分だけクラスを増やしたりはせず、CSS側の指定だけで実現するCSSです。

縦のリスト表示

外側に上下ボーダーがある区切り線

border01 CSSだけでリストや横並びの区切り線を実現するパターン4つ

ul でコーディングした場合、margin-top: -1px; を li に指定ます。これを指定しないと内側の線が太くなってしまいます。

li {
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}

左に日時があるお知らせのような一覧のコーディング方法は下記に詳しく書いてますのでぜひご覧ください。
リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

外側にボーダーがない区切り線

この区切り線だけでも方法は3つあります。

border02 CSSだけでリストや横並びの区切り線を実現するパターン4つ

ネガティブマージンを使う

こちらも margin-top: -1px; のようなネガティブマージンを利用して実現する方法です。

ul {
zoom: 1;
overflow: hidden;
}
li {
margin-top: -1px;
padding: 10px 5px;
border-top:1px solid #CCC;
}

擬似クラス:first-childか:last-childを使う

li には border-top のみを指定し、liの最初を擬似クラスの:first-childを使ってボーダーをなくす方法です。border-bottom を指定した場合は :last-child を使ってください。
IEは実質8から問題なく表示されるようです。(一応IE7も対応しているはずなんですが…)
IE7でも対応したい場合は下記を参考にjavascriptを追加すると大丈夫です。
HTML5でコーディングする時に入れる魔法のJS【完全版】

li {
padding: 10px 5px;
border-top:1px solid #CCC;
}
li:first-child{
border-top:none;
}

隣接セレクタを使う

li と li が隣接している場合のみスタイルを適用させる方法です。IE7から対応していますし、コードもとてもシンプルです。(2013.3.12追加)

li {
padding: 10px 5px;
}
li + li {
border-top:1px solid #CCC;
}

横並び

左右にボーダーがある区切り線

こういったメニューなど横並びの一覧表示は、ボーダーを「|」とテキストで入れてしまうと本来装飾であるボーダーをHTMLのテキストとして記述するわけなのであまりよろしくありません。

border03 CSSだけでリストや横並びの区切り線を実現するパターン4つ

border を使う

一番王道なのは li に border-right を指定し、ul に border-left を指定して実現する方法です。
li に inline-block を使うと余白ができてしまう可能性がありますが、HTMLで li 同士の改行をなくすか、CSSで letter-spacing を指定するとなくなります。
inline-blockの隙間をなくす方法2つ

ul {
border-left:1px solid #CCC;
padding-left:6px;
}
li {
border-right:1px solid #CCC;
padding-right:6px;
margin-right:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}

content と :before:after の擬似要素を使う

上記のように border で指定すると、line-height を指定した場合に区切り線が高くなりすぎたりしてデザイン的にあまりよろしくありません。
個人的によく使うのは content と :before:after の擬似要素を使う方法です。content はIE8からの対応になります。
CSS側で表示したい「|」のテキストを指定するので、サイズや色を変更することもできます。

li {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
ul:before,li:after {
	content:"  |  ";
	color:#999;
	font-size:11px;
}

左右にボーダーがない区切り線

border04 CSSだけでリストや横並びの区切り線を実現するパターン4つ

擬似クラス:first-childか:last-childを使う

こちらは上記の応用です。borderと:first-child:last-childの擬似クラスを使って記述します。
残念ながら content は :before:after の擬似要素をすでに使っているため、さらに :first-child:last-child といった複数の擬似クラスを指定することができません。

li {
border-left:1px solid #CCC;
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li:first-child{
border-left:none;
}

隣接セレクタを使う

こちらは上記の応用で、li と li が隣接している場合のみスタイルを適用させる方法です。IE7から対応していますし、コードもとてもシンプルです。(2013.3.12追加)

li {
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li + li {
border-left:1px solid #CCC;
}

他にもまだまだ色んなやり方があると思いますが、CSSって奥深いですね。

Pocket
article clipper CSSだけでリストや横並びの区切り線を実現するパターン4つ

ブラウザを狭めて横スクロールしたら背景が切れてしまうのを回避する

@cappeeです。

ブラウザを狭めて横スクロールしたらbodyやdivの横幅100%で指定していた背景が切れてしまうことがあります。

この現状はPCのブラウザを狭めた時以外にも、スマホで見た場合にも同じ現状が発生しますので、忘れがちですが必ずサイト制作した場合は最終チェックしたいところですね。

通常はbodyにmin-widthを指定して、コンテンツ幅を記述すればOKです。

body{
 min-width:950px;
}

ですが、コーディングの記述によってはこれだけで効かない場合もありました。bodyに背景を指定して、それ以外の大枠のdivに100%指定をしていなかった時です。

そういう場合は、100%のdivをひとつ追加すると背景が切れるのを回避できます。

body {
 min-width:950px;
}
#wrapper {
width:100%;
 background: url("/images/bg.jpg") no-repeat 100% 0;
}
Pocket
article clipper ブラウザを狭めて横スクロールしたら背景が切れてしまうのを回避する

フッターの背景をコンテンツが少なくてもブラウザの下まで表示する

@cappeeです。

フッターに背景色を指定していて、コンテンツの内容が少なかった場合、通常だとbodyで指定した色やデフォルトの白がフッター以降ブラウザの下まで表示されてしまいます。

これがイヤなので、背景色がブラウザの下まで続くように指定します。いたってシンプルですね。にゃるほど。

html {
 background: #000;  /*フッターの背景色*/
}
body {
 background: #fff;  /*全体の背景色*/
}

あと、コンテンツ部分にはCSSでmin-heightを指定しておくと、極端にコンテンツが少なくてブラウザの半分がフッターの背景色になってしまうなんてこともなくなります。

Pocket
article clipper フッターの背景をコンテンツが少なくてもブラウザの下まで表示する

inline-blockの隙間をなくす方法2つ

@cappeeです。

inline-block はとても便利なのでよく使うのですが、リストの間に隙間ができてしまいます。それを解消する方法2つです。

inline-blockの書き方

まずはinline-blockの記述方法です。下記のようにCSSハックを使えばIE6、7にも対応します。

.inlineBlock li {
 display: -moz-inline-box;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 }

inline-blockの隙間をなくす方法

HTMLを変更する

HTML側のタグの改行を削除するか改行をコメントアウトすると隙間がなくなります。

改行を削除

<ul class="inlineBlock">
<li>ボックス</li><li>ボックス</li><li>ボックス</li>
</ul>

改行をコメントアウト

<ul class="inlineBlock">
 <li>ボックス</li><!--
 --><li>ボックス</li><!--
 --><li>ボックス</li>
</ul>

CSSを変更する

CSS に letter-spacing を指定して隙間をなくします。

.inlineBlock {
 letter-spacing:-0.4em;
 }
 .inlineBlock li{
 letter-spacing:normal;
 display: -moz-inline-box;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 }
Pocket
article clipper inline blockの隙間をなくす方法2つ

CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

@cappeeです。

特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。

例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。

トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。

CSSだけで画像をトリミングする方法

overflow: hidden を使う

一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。
trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してください。

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="60"></p>

CSS

.trimming {
 width: 60px;
 height: 60px;
 overflow: hidden;
 }

元の画像が複数ありサイズが固定でない場合

横長と縦長の画像が混在していて、なるべく画像全体が見えるように縮小する場合は、HTMLの記述もかえる必要があります。横長なら下記と同じく width を指定し、 縦長なら height を指定します。

この方法だと横長の画像だった場合は右側が切り取られ、縦長の画像だと下が切り取られますので、画像を中央配置してトリミングすることはできません。

横長の元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

横長の画像デモ(画像の右を切り取る)

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

縦長の元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

縦長の画像デモ(画像の下を切り取る)

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

画像サイズが固定の場合

画像サイズが固定の場合の場合は、position を使用してセンタリングすることもできます。
枠が60px、画像が100×80pxだった場合、imgタグの top は【(画像の高さ-枠の高さ)/2】 を指定し、
left は【(画像の幅-枠の幅)/2】 を指定します。

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="100" height="80"  class="img"></p>

CSS

.trimming {
position:relative;
width: 60px;
height: 60px;
overflow: hidden;
}
. img{
position:absolute;
top:-10px;
left:-20px;
}

元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

センタリングのデモ

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clipプロパティを使う

要素の切り抜き領域を指定するclipプロパティでも画像の切り抜きが可能です。下記のように少しややこしいですが、clip: rect(上 右 下 左); と余白の長さを指定します。そのため、使用する画像が複数ある場合は、画像サイズが固定されている必要があります。

clip1 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

また、一緒に position: absolute; または position: fixed; を記述する必要があるため、

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="100" height="80"  class="img"></p>

CSS

.trimming {
position:relative;
height: 80px;
}
. img{
position:absolute;
clip: rect(10px 80px 70px 20px);
}

元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clipのデモ

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

完全に切り抜くには

デモを見ていただくとわかるかと思いますが、clipプロパティのみだと指定した余白がそのまま表示され”切り抜いた”とは言えない状態です。切り抜くには上記 overflow: hidden の「画像サイズが固定の場合」と同じ指定をする必要があります。勘の良い人はもうお分かりかもしれませんが、結局上記と同じ記述をするのであれば、わざわざclipプロパティを指定してコードを増やす必要がないんです。でも、こんなclipプロパティがCSS2から実装されていたんですね。私は今回調べて初めて知りました。完全に切り抜くか余白を残すかの指定までできると素敵なんですけどね。こんなプロパティあったんだ!と少し感動したのでご紹介しました。長々とすみません。

background で背景画像にする

システム案件の場合はCSSの方で背景画像として表示するのはちょっと考えますが、画像置換でも問題ない場合はこれが一番ラクかもしれませんね。これならセンタリングも簡単です。

HTML

<p class="trimming">ユーザー名</p>

CSS

.trimming {
 width: 60px;
 height: 0;
 padding-top: 60px;
 line-height: 60px;
 background: url("/image/user.jpg") no-repeat 50% 50%;
 overflow: hidden;
 }

jQueryを使う方法

面倒な計算をせずにjQueryとCSSだけでセンタリングさせた画像を切り抜くこともできます。もちろん複数画像がある場合、それぞれサイズが異なっても大丈夫ですので、JavaScriptを導入しても問題ない場合はこの方法が手っ取り早いです。

こちらのサイトで詳しい導入方法が記述されていますが、そちらを引用して記載したいと思います。

画像編集いらず!jQueryとCSSだけで画像をトリミング&センタリングする

[2013.2.28追記]
画像が表示枠よりも小さい場合は表示枠の中央に表示してくれればいいのですが、表示枠のブロック要素に text-align:center; を指定しても position を使っているためうまくいきません。
どなたか画像が小さかった場合のjavascriptを追加してくれると嬉しいな。

HTML

<p><img src="photo.jpg" id="thumb1"></p>

CSS

p.thumb{
 border: 1px solid #aaa;
 display:block;
 width:180px; /*トリミング後の横幅*/
 height:180px; /*トリミング後の縦幅*/
 overflow:hidden;
 position:relative;
 z-index:1;
 }
 p.thumb img{
 float:left;
 position:absolute;
 }

JavaScript

$(function( ) {
 $("#thumb1").on("load",function(){
 var iw, ih;
 var cw = 180; /*トリミング後の横幅*/
 var ch = 180; /*トリミング後の縦幅*/
 iw = ($(this).width() - cw) / 2;
 ih = ($(this).height() - ch) / 2;
 $(this).css("top", "-"+ih+"px");
 $(this).css("left", "-"+iw+"px");
 });
 });

コーディングしている案件によって最良の方法を選択したいと思います。

今回サンプル画像に使用したダミーイメージはURLを指定するだけで簡単に画像が表示されるのでとても便利です。詳細は以前投稿した下記をご覧ください。

ダミーイメージの生成ツールを目的別に使い分ける

Pocket
article clipper CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

フォームボタンをCSSで画像置換する時の注意点(IE7,Opera)

@cappeeです。

フォームボタンをCSSで画像置換する時に、ブラウザ毎で表示に癖があったのでメモしておきます。

フォームボタンをCSSで画像置換

HTML

フォームボタンのHTMLは下記です。

<input type="submit" value="送信する" class="btnSubmit">

HTML5だとbuttonタグでもOKです。

<button type="submit" class="btnSubmit">送信する</button>

CSS

私は下記のLIR(リーフィー/ラングリッジ式)という記述方法で通常画像置換を行なっています。

.btnSubmit{
display: block;
height: 0;
overflow: hidden;
width:158px;
padding-top:35px; 
line-height: 35px;
background:url("/images/btn_submit.png") top left no-repeat; 
cursor:pointer;
}

注意点

inputタグで記述した場合

~IE7ではボタンが表示されません。IE7にも対応する場合はCSSハックを使い、height を指定するようにします。

.btnSubmit{
display: block;
height: 0;
overflow: hidden;
width:158px;
padding-top:35px;
line-height: 35px;
background:url("/images/btn_submit.png") top left no-repeat;
cursor:pointer;
*padding-top:0;
*line-height:0;
*height:35px;
}

ただ、これだけだとボタンとvalueで記述したテキストがかぶっている状態です。Operaでも画像自体表示されるものの、IE7と同じようにボタンとテキストがかぶっています。こちらにも対応させる場合は、text-indent: -9999px; を追加します。

この text-indent でマイナスを指定して画像置換するPhark方式はSEO的にあまりよくない可能性があると一時期噂になってましたので、使うかの判断はお任せします。今まで主流だったやり方ですし、感覚的に使っても大きな影響はないとおもいます。(画像の文字とテキストが完全に違っているなどの悪質なSEO対策でない限り、です。)

.btnSubmit{
display: block;
height: 0;
overflow: hidden;
width:158px;
padding-top:35px;
line-height: 35px;
background:url("/images/btn_submit.png") top left no-repeat;
cursor:pointer;
*padding-top:0;
*line-height:0;
*height:35px;
text-indent: -9999px;
}

HTML5で記述した場合

buttonタグにclassを付けるとボタンが表示されません。下記のようにspanタグを追加し、そちらにclassを指定してください。

<button type="submit"><span class="btnSubmit">送信する</span></button>
Pocket
article clipper フォームボタンをCSSで画像置換する時の注意点(IE7,Opera)

IE9でCSSのグラデーションを表示させるSVGジェネレーターが便利すぎる

@cappeeです。

IE9でCSSのグラデーションを表示させるのはSVGで指定するのが楽ちんです。

SVGとは、XMLベースの2Dベクター画像記述言語で、簡単に言うと画像も文字列化して表現するものです。

下記のジェネレーターを使えばグラデーションのかかり方や色を指定するだけで、画像を作成しなくても出力されたコードをCSSに貼り付けるだけでIE9でもグラデーションが表示できます。

SVG Gradient Background Maker

SVGGradientBackgroundMaker IE9でCSSのグラデーションを表示させるSVGジェネレーターが便利すぎる

SVG Gradient Background Maker

Pocket
article clipper IE9でCSSのグラデーションを表示させるSVGジェネレーターが便利すぎる

CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

@cappeeです。

デザインで吹き出しを使う機会って多いですよね。

そんなデザイナーの強い味方、CSSで簡単に吹き出しをつくってくれるジェネレーターくんをご紹介します。

シンプルな吹き出しを直感的に作れる「CSS ARROW PLEASE!」

cssarrowplease CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

CSS ARROW PLEASE!

設定も簡単でシンプルな吹き出しをさくっとつくってくれるジェネレーターです。

複雑な指定が必要な吹き出しは「Grad3」

Grad3 CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

Grad3

ベンダープレフィックスの指定やシャドウまで一気に指定することができるのでとても便利です。

そもそもCSSでどうやって吹き出しをつくってるの?という方はこちらをご覧ください。

CSSだけで吹き出しを作ってみる 三角の作り方

Pocket
article clipper CSSで簡単に吹き出しをつくってくれるジェネレーターが便利すぎる

1つの要素にCSSだけで二重ボーダーをつける3つの方法

@cappeeです。

ひとつのdivに対して、CSSだけで簡単に二重のボーダーをつけることができます。

double border 1つの要素にCSSだけで二重ボーダーをつける3つの方法

box-shadow

CSS3の box-shadow を使えば1行で二重のボーダーをつけることができます。最初に内側のボーダー、次に外側のボーダーを指定します。外側のボーダーは内側を合わせた数値を記述してください。
対応ブラウザですが、~IE8は表示されません。ただ、もうIE6と7の需要は少ないですが、IE8をどこまで対応させるかの判断になると思います。あと、JavaScriptやPIEなどを使うか。

.doubleBorder {
 box-shadow: 0 0 0 3px #CCC, 0 0 0 4px #999;
}

CSS3の対応状況はこちらの「CSS3プロパティ&ブラウザ対応一覧」を参考にしてください。

borderとoutline

border と outline で二重ボーダーをつけます。
IE8にも対応しており、~IE7も border の方は正常に表示されるので背景色と同じ色でなければ一応枠線は見える状態ですし、こちらの方が安全といえば安全です。
また、二重のボーダーをつけてさらにボックスにシャドウもつけたい、なんてワガママもこちらの指定+ box-shadowで実現できます。

.doubleBorder{
 border: solid 3px #CCC;
 outline: solid 1px #999;
}

ひとつ注意ですが、もしoutlineを使った二重ボーダーの枠に、ポジションを使ってリボンなどのアイコンを配置する場合、Operaではz-indexを使ってもoutlineの方が優先されてアイコンと線がかぶってしまいます。そういった使い方をする場合は、box-shadowを使用し、IE6~8はCSSハックで1つのボーダーのみ表示させるなどの対応が必要になります。

疑似要素

:before や :after の擬似要素を使えば二重線だけでなく三重線も実現出来ます。
ただし、幅と高さを固定してpositionでボーダー分ずらすというやり方なので高さが可変の場合には不向きです。
(下でさらに擬似要素をつかった可変対応バージョンも紹介しています。)

.tripleBorder{
position: relative;
background: #FFF;
border: 1px solid #999;
width: 300px;
height: 300px;
}
.tripleBorder:before {
position: absolute;
content: '';
border: 1px solid #FFF;
width: 298px;
height: 298px;
}
.tripleBorder:after {
position: absolute;
top: 1px;
content: '';
border: 1px solid #CCC;
width: 296px;
height: 296px;
}

もうひとつ、高さが可変の場合でも使える擬似要素でのやり方があります。
こちらもpositionを使ってますがz-indexとmin-height:100%;の指定により高さを可変にしています。

.doubleBorder{
    border: 1px solid #CCC;
    position: relative;
    z-index: 1;
}
.doubleBorder:before{
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 1px solid #999;
    width: 500px;
    padding-bottom: 2px;
    min-height: 100%;
    z-index: 10;
}

(2013.3.1追加)

[参考サイト]
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 
Quick Tip: Multiple Borders with Simple CSS

Pocket
article clipper 1つの要素にCSSだけで二重ボーダーをつける3つの方法

リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

@cappeeです。コーディングの復習をしていたら朝になってしまいました。

liタグを使用したリストやdlを使用したお知らせ一覧など、一覧の上下にボーダーを引きたい場合のCSSの書き方をメモします。

普通にliタグやdt、ddタグに上下のボーダーを指定すると重なったところが太くなってしまいます。

border2 リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

今回はdlタグを使って上下ボーダーをCSSで指定したいと思います。

[2013.3.6追加]
こちら以外にも縦のリスト表示や横並びでボーダーを引きたい場合のCSSについてたくさん下記でご紹介していますのでぜひご覧ください。
CSSだけでリストや横並びの区切り線を実現するパターン4つ

上下にボーダーを引きたい場合のCSS

HTML

<dl class="info clearfix">
 <dt>2012.4.21 13:54</dt>
 <dd>お知らせですよ。</dd>
 <dt>2012.4.21 13:54</dt>
 <dd>お知らせですよ。</dd>
 </dl>

CSS

.list {
overflow: hidden;
}
.list dt {
width: 110px;
float: left;
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}
.list dd {
width: 580px;
float: left;
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}
.clearfix {
zoom:1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}

margin-top: -1px;を指定すれば下記のように1pxのきれいなボーダーにすることができます。

border リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

Pocket
article clipper リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS