CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

こんにちは、@cappeeです。

最近はIEのアップデートによりCSS3で追加された疑似クラスも多用するようになってきたので、特にリスト系でよく使うものをいくつかメモしておきたいと思います。

間違いやすい疑似クラスや疑似要素に関してはこちらをご覧ください。
CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

要素の最初に適用する疑似クラス :first-child

:first-child は、ある要素内で最初に書かれている子要素にスタイルが適用されます。
ここでご紹介する疑似クラスの中では唯一CSS2から定義されていて、下記でご紹介する :nth-child(1) と同じ指定になります。

よくある使い方としては、お知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

border02 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

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

border04 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

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;
}

:first-child の間違いやすい記述に注意

例えばdivの中に見出しタグとpタグがあった場合、p:first-child と記述して最初のpタグにスタイルを適用したくても、最初の要素はhタグという認識になってしまいます。親要素の中の最初のセレクタはhタグだからです。

<div>
<h2>見出し</h2>
<p>スタイルを適用したいテキスト</p>
<p>スタイルを適用したくないテキスト</p>
</div>

この場合は下記でもご紹介する :nth-child(2) を使うか、兄弟関係にあるp要素の最初に適用する first-of-type か、疑似クラスではなく h2 + p のように隣接セレクタなどで対応する必要があります。

要素の最後に適用する疑似クラス :last-child

:last-child は、ある要素内で最後に書かれている子要素にスタイルが適用されます。
CSS3から定義されていて、下記でご紹介する :nth-last-child(1) と同じ指定になります。

よくある使い方としては、上記の :first-child と同じようにお知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

要素を繰り返し適用する疑似クラス :nth-child

奇数の要素に適用する場合

奇数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(odd){
background-color: #EEE;
}
li:nth-child(2n+1) {
background-color: #EEE;
}

偶数の要素に適用する場合

偶数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(even){
background-color: #EEE;
}
li:nth-child(2n+2) {
background-color: #EEE;
}

数を指定して繰り返し適用する場合

例えば3つおきに要素を指定する場合は、ユーザー一覧などでよく見るレイアウトにとても便利です。

nth child CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

.leftBox {
width: 200px;
padding: 10px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.leftBox:nth-child(3n+3) {
border-right:none;
}

nth-child(3n+3)とは、3つおきの3番目(最後)にスタイルを適用します。
nth-child(3n+2)は3つおきの2番目(真ん中)、nth-child(3n+1)は3つおきの1番目(最初)です。

最初の要素数個に適用する場合

最初の要素をいくつか指定して適用することもできます。下記では最初の3つを指定した場合です。

li:nth-child(-n+3){
background-color: #EEE;
}

親要素の最後から数える場合

nth-last-child(n) と記述すれば親要素の最後から数えた場合のスタイルが適用できます。nには数字を入れてください。

IEでの対応状況

上記で記述した疑似クラスは基本的にIE8以降からの対応となります。

対応策としては以前ご紹介したように IE9.js を追加すればIE7では問題なく表示されますのでぜひお試しください。

HTML5でコーディングする時に入れる魔法のJS【完全版】

Pocket
article clipper CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

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つ

box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

CSS3 の box-sizing プロパティがかなり便利です。

あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。

CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。

「あれ、なんで崩れるんだろ?」

「padding と border 分マイナスするの忘れてた~」

ってのがよくありました。(今もたまに。。)

それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。

これはものすごい効率化になりますね!

box-sizing の書き方

box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。

指定できるのはこちらの2種類です。

  • content-box … 【デフォルト値】padding と border を要素の幅と高さに含めない。
  • border-box … padding と border を要素の幅と高さに含める。

ベンダープレフィックスもつけて box-sizing を指定します。

.boxSizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

box-sizing の使い方

1)box-sizing 用のクラスをつくる

例えば「.boxSizing」というクラスをつくって、使いたい要素に都度指定するという使い方です。
このやり方が一番表示速度など考慮した方法になるかなと思います。

2)div などの主要なブロック要素のみ指定する

box-sizing の使用頻度が多くなりそうなら主要なブロック要素にこんな感じで直接指定してしまえば楽ですね。
リセットCSSを指定しているところに追加しちゃうのも手だと思います。

div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

3)ユニバーサルセレクタで全指定する

もう全要素やったれ~い!っていう場合は、ユニバーサルセレクタ(全称セレクタ)でしょう。読み方はアスタリスクではないので注意!

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

ユニバーサルセレクタがいいのか、主要なタグを指定するタイプセレクタがいいのかは個人の考え方によりますが、box-sizing のみならどちらでも大きな影響はないかと思います。
ユニバーサルセレクタでリセットCSSを指定だとフォームまわりに影響がでるようですが、どこで調整するかデフォルトの指定のまま使うのかなど状況と考え方次第ですかね。

改めてユニバーサルセレクタについて調べていたら、色々まとまった記事があって面白かったです。
ユニバーサルセレクタ(全称セレクタ)が結局使いやすい。

box-sizing のブラウザ対応

IE7 では非対応ですが、それ以外のブラウザなら現状ほぼ問題なさそうです。(IE6のことは忘れましょう)

大枠のブロック要素に使う時に注意さえしていれば、多少崩れるくらいでコンテンツ自体が見えなくなるような致命的な問題はないと思うので、
個人的には積極的に使って行きたいなと思っています。

[参考サイト]
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか?

Pocket
article clipper box sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

OGPのog:typeでwebsiteやblogを設定するときの注意点とPHPでの振り分け方法

ただいまhead部分をコーディング中の@cappeeです。

OGPについては以前も何度か記事を書いてますが、今回は og:type についての注意点です。

前回の記事はこちらからどうぞ。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など
FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?
「Open Graph Pro」を今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

og:typeでwebsiteやblogを設定するときの注意点

OGPのog:typeの設定方法をみると、ウェブサイトには「website」と記述し、ブログには「blog」と記述するように書かてれいます。

ウェブサイトの場合

<meta property="og:type" content="website"/>

ブログの場合

<meta property="og:type" content="blog"/>

間違いではないのですが、これだけだと不十分なのです。

website や blog の指定は基本的にドメインのルート部分にのみ存在すべきで、トップページ以外は article と指定しましょう。

下層ページの場合

<meta property="og:type" content="article"/>

PHPでの振り分け方法

PHPを使用出来るサーバーやWordpressを使っている場合は、このようにトップページとそれ以外の下層ページで記述を振り分けます。

ウェブサイトの場合

<meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>website<?php } else { ?>article<?php }?>">

ブログの場合

<meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>blog<?php } else { ?>article<?php }?>">

この振り分けを応用すれば、タイトルの表示方法をトップページと下層ページで変えたりと便利ですよ。

【2016.11.20 追記】
コメントにてご指摘いただきました。
サーバ環境によって必ずしも”/”が帰ってくるとは限らない$_SERVER["REQUEST_URI"]で判断せず、以下のようにした方がよいとのことです。
ご指摘ありがとうございます。

if ( is_front_page() || is_home() ) {
echo '';
} else {
echo '';
}

【2017.07.06 追記】
さらにご指摘いただきました。
コメントをそのまま引用させていただきます。

is_front_pageとかはwordpressの関数ですな。
あと、ifとかで振り分けるのは若干冗長かも。
$_SERVER['REDIRECT_URL'] は確かに返ってくる値が違うので
http://xxxxx.jp/
http://xxxxx.jp/index.php
だと違う結果になります。
上記踏まえて、私は
echo(($_SERVER['REDIRECT_URL']==”/” || $_SERVER['REDIRECT_URL']==”")?”website”:”article”);
こげな感じです。
Pocket
article clipper OGPのog:typeでwebsiteやblogを設定するときの注意点とPHPでの振り分け方法

Dreamweaver CS6 でオススメの拡張まとめ

【お知らせ】Dreamweaver CC の設定についてはこちらをご覧ください。
Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

こんにちは、@cappeeです。

リカバリ後、後回しにしていたDreamweaverの拡張機能のことを思い出して色々と調べてみました。

調べたところたくさん記事はあるのですがDreamweaverの対応しているバージョンが古かったり、CS6にはすでにデフォルトで機能があったりと整理が必要そうだったので、Dreamweaver CS6 でオススメの拡張を自分なりにまとめました。他にオススメがあればぜひ教えてください!

コーディング効率化:Zen-Coding

なにわともあれまずZen-Codingは入れておかないと始まらないですね。コーディングの効率化には必須の拡張です。

下記の一覧より「Zen Coding for Dreamweaver(バーション)」をダウンロードし、mxpファイルをダブルクリックすると「Adobe Extension Manager」が開くので、承諾してインストールすればOKです。

Zen Coding for Dreamweaver をダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

さらなる効率化のために以前Zen-Codingの展開後のコードをカスタマイズした記事も私の方で公開しているのでぜひそちらもご覧ください。

Zen-Codingを自分なりにカスタマイズしてさらに効率化できた

 Dreamweaver CS6 でオススメの拡張まとめ

文字列からリストを作成

文字列からリストを作成するコマンドです。
原稿があって後からulやolなどのリストタグを追加したい時にとても便利です。

上で紹介したzen-cordingでも簡単にリストを作成出来ますのでzen-cordingを使っていない方はどうぞ。(でも使うことをオススメします!)
ちなみにzen-cordingでリストタグを追加するには、文字列のどこでもいのでマウスを置くかドラッグで選択し、「ul>li*」で展開すれば文字の行毎にliタグが付きます。

コマンドの方に話を戻すと、こちらはmxpファイルではなく、直接コマンドフォルダに下記よりダウンロードしたhtmファイルを追加します。

リストを作成.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

htmファイルは下記の場所、コマンドフォルダに入れてください。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Commands

画像サイズをリセット

imgタグの画像サイズを簡単に挿入してくれるコマンドです。
プロパティからも画像サイズはリセットできますが、ソースコードを選択すれば部分的にや一括でリセットしてくれるのがとても便利です。

上記と同じくコマンドフォルダにダウンロードしたhtmファイルを入れてください。

画像サイズをリセット.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

画像サイズを半分にリサイズしてRetina対応

imgタグの画像サイズを半分にリサイズしてくれるコマンドです。
スマホサイトの制作でRetina対応する場合、画像を倍で制作してソースコードにその半分のサイズで記載する必要があるので非常に便利です。

上記と同じくコマンドフォルダにダウンロードしたhtmファイルを入れてください。ファイル名が「image_reset_half.htm」となってますので、わかりやすく「画像サイズを半分(Retina).htm」などと変えてしまっても大丈夫です。

image_reset_half.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

閉じタグコメントを生成&挿入:End comment

コードの量が多くなるとミスを防ぐためにも閉じタグにどのIDまたはClassの閉じタグかをコメントしておくとわかりやすくなります。そんな閉じタグのコメントを挿入し、自動でIDまたはClass名を入力してくれる拡張機能です。

End_commentをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

閉じタグ漏れを防ぐ:Close Tags

上記の閉じタグコメントでもどうにもならなくなった時に使う拡張機能です。閉じタグがなかくてデザインが崩れたりした経験はみんなありますよね。その閉じタグ漏れを防ぐいでくれます。

ダウンロードにはAdobe ID が必要です。下記の黄色い「Download」ボタンよりダウンロードし、Zen-Codingと同じくmxpファイルを開いてインストールしてください。

Close Tags をダウンロード

機種依存文字・全角半角変換:character.mxp

以前はフィーチャーフォンの携帯サイト制作でカタカナ→カタカナに変換するために重宝された拡張ですが、それ以外にもWindows用の機種依存文字をMacで文字化けしないように別の文字に置き換えたり、全角数字を半角に変換(もちろん逆も可)したりとても便利です。

Dreamweaver CS3と記載されていますが、CS6でも問題なく使うことができます。ただし、「コマンド」の「その他」に追加されるのでご注意ください。また、色んな拡張を追加していくと表示されなくなる場合がありますので、再度インストールしなおせば大丈夫です。

機種依存文字・全角半角変換をダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

外部リンクのチェック:External Link Checker

外部リンクが有効かをチェックしてくれる拡張機能です。インストールするとコマンドにこれでもかというほど項目が追加されるので注意してください。。使い勝手もあまり良くないので、改善してもらえるとありがたいのですが。

External Link Checkerをダウンロード

ちなみに上記までのオススメの拡張を入れると、Dreamweaverのコマンドにこのように表示されますので、拡張を使うときはコマンドから選択するか、ショートカットを設定してください。

dw extension1 300x281 Dreamweaver CS6 でオススメの拡張まとめ

WordPress用のコードヒント:WordPressCodeHints

私はWordPressをよく使用するのでこのコードヒントはありがたいですね。phpファイルでCtrl+スペースを押すとコードヒントが表示されます。

WordPressCodeHintsをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

MovableType用のコードヒントはこちら。

Movable Type タグライブラリ for Dreamweaverをダウンロード

CSSコードヒントのカスタマイズ

こちらは拡張機能というよりは、DreamweaverのデフォルトであるCSSのコードヒント(CodeHints.xml)をカスタマイズしてコーディングをより効率化するというものです。

例えば、デフォルトだと「w」を入力するとよく使う「width」プロパティを出して欲しいのに「windows」がでちゃうので、そういったのを防いでよく使うプロパティが表示されるようにカスタマイズします。

すでにカスタマイズ済みのCSSコードヒントがないか調べてみると、「widowsプロパティの誤入力を防ぐCodeHints.xml|カラクリエイト」がよく紹介されているのですが2006年公開と古かったので、CS6対応のものを探していたらちょうど公開されたばかりのものがありました。ありがたいですね。

下記よりCSSのコードヒント(CodeHints.xml)をダウンロードしてください。

DreamweaverのCodeHints.xmlをカスタムして入力しやすくする

 Dreamweaver CS6 でオススメの拡張まとめ

コードカラーリングのカスタマイズ

ソースコードが一番見やすいカラーにカスタマイズします。ちなみに私は黒背景にSublime Text2と同じ配色で設定しています。
最初は違和感があるかもしれませんが、色が明確でわかりやすいです。

Dreamweaverのコードカラーリングをカスタマイズする

 Dreamweaver CS6 でオススメの拡張まとめ

スニペットのカスタマイズ

コーディングを効率化させるにはzen-cording+スニペットのショートカットを使うのが一番早いです。HTMLやCSSでよく使うコードを登録しておきます。

私のは配布できるほど整理できてないので、今のところは下記などを参考にしてください。

Dwでコーディングがちょこっと早くなる小技
Dreamweaverのスニペットに登録して作業効率が上がるCSS3まとめ

コード表示のフォント

環境設定を見るとデフォルトでは「MS ゴシック」になっているかと思いますが、最近公開されたAdobeのコード用フォント「Source Code Pro」や「Miguフォント」などに変更してもいいと思います。

個人的には「Source Code Pro」だと見やすいのですが日本語を変更する際の挙動が少しおかしかったり、「Miguフォント」だと少し太く感じだので結局デフォルトに戻してます。。

ただ、試してみる価値はあると思うので下記などを参考にしてみてください。

[速報] ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開
コーディング用フォント

ちなみにCS6で追加しなかった拡張

  • HTML5のタグを表示する拡張(HTML5非対応のCS4以前用のため):html5_tag_suites
  • iPhone向けサイトのテンプレート(最新のiPhone非対応のため):iPhone site extension for Dreamweaver CS4/5
  • CSS3コードヒント(デフォルトのコードヒントもCSS3の規約に伴いアップデートされているため):CSS3_CodeHints

以上になります。

コーディングはスピードが命ですので拡張をうまく利用して効率化したいですね!

Pocket
article clipper Dreamweaver CS6 でオススメの拡張まとめ

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

@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)