CSSの最近のブログ記事

iOSで要素内をスクロールした際、ページ本体にスクロール対象が移ってしまうのを防ぐCSS

gravity-works (2025年3月13日 14:57)

iOSでは要素内でのスクロールを端まで行った後、続けてスクロールしようとするとスクロール対象がページ本体に移ってしまいます。

ハンバーガーナビやモーダルなどfixedさせている要素でこれが起こってしまうと都合が悪いのですが、対策するにはJSなどを使ってやや面倒な処理をする必要がありました。

しかし、iOS16（2022年9月～）からは「overscroll-behavior」が使えるようになったことで簡単に解決できるようになりました。

●使い方

overflow-y などを指定している要素に以下を指定。

overscroll-behavior: contain;
　

注意点として、内容が短くてスクロールが発生しない場合は有効になりません。

その場合は内容を1pxだけはみ出るような高さに設定することで有効にできます。

●デモ

https://blog.gravity-works.jp/css_blog/demo/overscroll_behavior/

外部SVGファイルの色をCSSで変更する

gravity-works (2024年11月19日 15:50)
imgタグでページに配置したSVGの色を、CSSで変更する方法です。
この方法は以下の条件を満たしている必要があります。

・SVG画像を黒一色で書き出せる
・指定した色と多少の誤差があってもよい

●手順
1. ページ内に配置するSVG画像は黒一色にしておく。

2. 以下のサイトにアクセスします。

3. 「Target color」に変更後のカラーを入力し、「Compute Filters」をクリック。

4. カラー変更用のCSS（filterプロパティ）が出力されるので、SVG画像に対して適用する。

filter: invert(57%) sepia(34%) saturate(6436%) hue-rotate(160deg) brightness(93%) contrast(101%);

以上でCSSによって色を変更することができます。

ただ、実際に変更後の色をカラーピッカーで取得してみると指定した色と多少誤差があるようでした。

※例えば、上記のCSSはTarget color「#00a4d6」で出力しているのですが、
　変更後の色は「#00a4d4」となっていました。
　微差なので厳密なカラー指定がなければ問題ないと思います。

●参考

親gridの行や列を引き継いだ子gridの作り方

gravity-works (2024年7月23日 15:40)
毎回忘れてしまうので見返せるようにメモします。

grid 内に grid を入れ子にしたとき、通常では子 grid は親 grid のグリッドラインに揃いませんが、subgrid を使うことで揃えることができます。

・grid の中に grid が入れ子になっている
・子 grid が親 grid のグリッドセルを複数個つかっている

上記のようなとき、子gridの grid-template-columns や grid-template-rows に "subgrid" を指定することで実装できます。

（例）
// 親
.parent {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
}
// 子
.child {
    grid-columns: span 2; // 親 grid のグリッドセル横2つ分のサイズ
    display: grid;
    grid-template-columns: subgrid;
}

CSSのプロパティの値を初期値に戻す

gravity-works (2024年6月18日 15:00)
CSSですでに指定されている値をリセットしたい場合、「initial」「revert」「inherit」「unset」を使用します。

例えば
font-size: 20px;
と指定されている要素に対し、
font-size: revert;
のように上書きすることで文字サイズを初期値に戻すことができます。

では上記4つのどれを使うかというと、
リセットしてどのような状態にしたいかによって変わってきます。

●initial
仕様で決められたプロパティ自体の初期値にリセット

●inherit
親要素からプロパティの値を継承

●revert
ブラウザのデフォルトスタイルにリセット

●unset
親要素の値を継承できるプロパティには「inherit」を適用、
そうでないプロパティには「initial」を適用

要素の幅を中身に合わせて変えられる width:fit-content

gravity-works (2024年3月18日 15:06)
div等のブロック要素は、そのままだと幅が横いっぱいまで広がってしまいます。
「width: fit-content;」を使用することで幅が中身に合わせて可変するようになります。

以前は「display: inline-block;」や「display: table;」などでやや無理やり実装することが多かったと思いますが、よりシンプルに実装できるようになりました。

IE11以上であれば対応しています。

●CSS property: width: fit-content

要素のアスペクト比を指定するaspect-ratio

gravity-works (2023年11月20日 10:52)
CSSプロパティの「aspect-ratio」を使うと、要素のアスペクト比を指定することができます。
IE11では使えませんが、モダンブラウザであれば基本的に対応しています。
レスポンシブ対応の際に便利。

aspect-ratio: 4 / 3;

上記のように指定すると、その要素のアスペクト比が4：3になります。

これまでもwidthに対して高さをpaddingで％指定することで同じようなことができましたが、それがよりストレートに指定できることになります。
また、paddingを使う方法だと高さから幅を決めることができませんが、aspect-ratioであれば普通にheightを指定すればaspect-ratioの比率に沿って幅が決まります。

ホバー可能なデバイスのみa要素のホバースタイルを有効にする

gravity-works (2023年10月10日 15:36)
通常、CSSで :hover スタイルを設定するとスマホでも有効になってしまい、
タップしたときにホバースタイルが有効になりつづけてしまう問題があります。

メディアクエリでPCサイズのみ効くようにすることもできますが、
ピクセルではなく以下のように書くことでホバー可能なデバイスのみホバーのスタイルを有効にすることができます。

@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

また、:any-link をつけることで href 属性の中身がある場合のみホバーを有効にすることができます。

@media (hover: hover) {
  a:any-link:hover {
    opacity: 0.7;
  }
}

●参考

スマホでスクロールした際にslick.jsの自動再生が止まる

gravity-works (2023年3月20日 09:41)
画像が自動で切り替わるだけ（操作なし）のスライドショーをslick.jsで実装したのですが、スマホでページをスクロールしたときに「スライドショー上で指を離すとslickの自動再生が止まってしまう」という現象がおきました。
スライドショー外をタップするとまた動き始めます。

動作的に以下のオプションが効いてしまっているような感じです。
（どちらもfalseに設定しており、PCではちゃんと効いています）

pauseOnHover ： マウスが乗ったりときに自動再生を止める
pauseOnFocus ： フォーカスされたときに自動再生を止める

●回避方法
スライドショーに対して以下のCSSを設定したところ回避することができました。

pointer-events: none;

ただし、上記はクリックやタップを無効にするスタイルなので
スライドショー画像にリンクをつけたい場合は使えないかと思います。

font-sizeをrem指定する際の数値まとめ

gravity-works (2023年1月23日 10:39)
ユーザー側で文字サイズを変更できるように制作する場合、単位をremで指定すると便利です。

●Can I use

すでにモダンブラウザで使用できるようになっているので、メモとしてpx毎の対応表をまとめておこうと思います。

●html要素に62.5%（10px）を指定している場合
10px　→　1rem
11px　→　1.1rem
12px　→　1.2rem
13px　→　1.3rem
14px　→　1.4rem
15px　→　1.5rem
　・
　・
　・

●html要素に81.25%（13px）を指定している場合
10px　→　0.7692rem
11px　→　0.8461rem
12px　→　0.9230rem
13px　→　1rem
14px　→　1.0769rem
15px　→　1.1538rem
16px　→　1.2308rem
17px　→　1.3077rem
18px　→　1.3846rem
19px　→　1.4615rem
20px　→　1.5385rem
21px　→　1.6154rem
22px　→　1.6923rem
23px　→　1.7692rem
24px　→　1.8461rem
25px　→　1.9231rem
26px　→　2rem
27px　→　2.0769rem
28px　→　2.1538rem
29px　→　2.2308rem
30px　→　2.3077rem

●html要素に87.5%（14px）を指定している場合
10px　→　0.7143rem
11px　→　0.7857rem
12px　→　0.8571rem
13px　→　0.9286rem
14px　→　1rem
15px　→　1.0714rem
16px　→　1.1429rem
17px　→　1.2143rem
18px　→　1.2857rem
19px　→　1.3571rem
20px　→　1.4286rem
21px　→　1.5rem
22px　→　1.5714rem
23px　→　1.6429rem
24px　→　1.7143rem
25px　→　1.7857rem
26px　→　1.8571rem
27px　→　1.9286rem
28px　→　2rem
29px　→　2.0714rem
30px　→　2.1429rem

●html要素に93.75%（15px）を指定している場合
10px　→　0.6667rem
11px　→　0.7333rem
12px　→　0.8rem
13px　→　0.8667rem
14px　→　0.9333rem
15px　→　1rem
16px　→　1.0667rem
17px　→　1.1333rem
18px　→　1.2rem
19px　→　1.2667rem
20px　→　1.3333rem
21px　→　1.4rem
22px　→　1.4667rem
23px　→　1.5333rem
24px　→　1.6rem
25px　→　1.6667rem
26px　→　1.7333rem
27px　→　1.8rem
28px　→　1.8667rem
29px　→　1.9333rem
30px　→　2rem

●html要素に100%（16px）を指定している場合
10px　→　0.625rem
11px　→　0.6875rem
12px　→　0.75rem
13px　→　0.8125rem
14px　→　0.875rem
15px　→　0.9375rem
16px　→　1rem
17px　→　1.0625rem
18px　→　1.125rem
19px　→　1.1875rem
20px　→　1.25rem
21px　→　1.3125rem
22px　→　1.375rem
23px　→　1.4375rem
24px　→　1.5rem
25px　→　1.5625rem
26px　→　1.625rem
27px　→　1.6875rem
28px　→　1.75rem
29px　→　1.8125rem
30px　→　1.875rem

CSSの「position: sticky」で要素を追従

gravity-works (2022年9月30日 19:13)

CSSの「position: sticky」を使うことで、特定の範囲内で要素を追従させることができます。

JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。

2022年の9月現在、モダンブラウザではサポートされています。
●使い方
使い方は簡単で、追従させたい要素（デモの黄色の要素）に以下のスタイルを当てます。
position: sticky;
top: 0;
top は追従する際の上部からの位置です。
20pxなど指定すると画面上部からその数値分空けた状態で追随します。
●注意点
・position: sticky を当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。
親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。
・top も指定しないと追随しません。
・親要素、または祖先要素にoverflow: hidden を指定していると追随しません。（追記：overflow: visible か clip 以外はすべてダメなようです）
・親要素に別方向のスクロール（例：縦に追随する場合は横のスクロール）があると追随しません。

スムーススクロールさせるCSS

gravity-works (2022年8月 8日 10:56)
アンカーリンクでスムーススクロールさせたい場合、以前はJavaScriptを使う必要がありましたが、2022年8月現在は以下のCSSだけで実装することができます。

html {
  scroll-behavior: smooth;
}

また、ヘッダー分スクロール位置をずらす場合も、
アンカーリンクの対象に以下を当てるだけで実装できます。

例）sectionにアンカーリンクで移動する際に80pxずらす場合
section {
  scroll-margin-top: 80px;
}

●対象ブラウザ
scroll-behavior

scroll-margin-top

クラス名指定にはnth-childを使用できない

gravity-works (2022年6月 6日 10:05)
x番目の要素にスタイルを当てる擬似クラス nth-child ですが、クラス名と合わせて使用すると思った通りの動きをしないことがあります。

<p>テキスト</p>
<p>テキスト</p>
<p class="style">テキスト</p>
<p class="style">テキスト</p>

例えば上記のようなhtmlがあったときに、.styleクラスを持った2番目の要素に色をつけようと、
以下のように指定しても色が付きません。

.style:nth-child(2){
  color: red;
}

この場合は「子要素の2番目が.styleクラスを持つ場合」という条件になるため、致する要素がなくスタイルが適用されません。

.style:nth-child(3){
  color: red;
}

上記のようにすると3番目の文字色が赤になります。

ちなみに、現在（2022年6月）ではまだほとんどのブラウザで使用できないのですが、新しい記述方法として以下のような指定が追加されたようです。

p:nth-child(2 of .style){
  color: red;
}

これがまさに上記でやろうとしていたことで、
.styleクラスを持った2番目の要素に色が付きます。
各ブラウザの実装に期待です。

●対応状況

ページ読み込み時に動かないはずのCSS transitionが動いてしまう

gravity-works (2020年11月25日 11:06)
CSSでtransitionを指定していると、スタイルが上書きされた際にアニメーションが発生します。
この処理はページ読み込み時点ですでに上書きされているスタイルに対しては適用されませんが、Google Chromeだと動いてしまう場合があります。

●対処法
外部CSS読み込み後に、何かしらのスクリプトを動作させる。

この問題は外部CSS読み込み後、DOM構築後までに何もスクリプトが実行されない場合に起きるそうです。
なので、

・JavaScriptを読み込んでいる場合は外部CSSよりも後に記述する

・見た目に影響のでないスクリプトを動かす
例）<script>console.log("");</script>

などの方法で回避することができます。

position: fixed がブラウザ基準にならない

gravity-works (2019年4月17日 10:41)
position: fixed と top、left を設定しているのに、なぜかブラウザ基準の位置になってくれない問題に遭遇したのでメモ。

原因としては、親要素に transform を設定していると小要素の position: fixed がブラウザ基準にならない仕様のためだったようです。


“レイアウトがCSSボックスモデルによって管理されている要素の場合、transformプロパティにnone以外の値を指定すると、その要素はすべての子孫に対して包含ブロックを確立します。そのパディングボックスは、すべての絶対位置の子孫、固定位置の子孫、および子孫の固定背景の添付ファイルのレイアウトに使用されます。”

※Google翻訳ママなのでちょっとアレですが...


今回の場合は演出のために親要素にアニメーションをつけていたのが問題だったようです。

今後使える（予定）の短いclearfix

gravity-works (2019年1月16日 10:49)
古いブラウザがなくなってきたことでどんどん簡単に記述できるようになってきたclearfix（flortを解除する記述）ですが、新しいスタイルによってさらに短く書けるようになるようです。
display に追加された flow-root を使うことで、flortを解除できるようです。
使い方は簡単で、親要素に

display:flow-root;

と書くだけです。

ただしまだ対応ブラウザが少ないようで、2019年1月現在、IE、Edge、Safari、iOSで対応していません。

今後対応していくブラウザが増えていけば、親要素に overflow: hidden; と書いていたところをまるまる置き換えられるくらい簡単な方法ですので、これからの対応に期待ですね。

CSS：フォントサイズのvw指定を少し楽にする書き方

gravity-works (2018年8月 1日 10:47)
CSSで指定できるフォントサイズの単位のひとつに、vw、vh があります。
viewportに応じてサイズが変わるのでレスポンシブなサイトで便利なのですが、指定が少しわかりづらいと思っていました。

●1vw　=　画面の横幅を 100％ としたときの 1％分の幅

たとえば横 640px のデザインラフ上で 30px の文字は何vwになるのか、パッとはわかりません。
計算すると 4.68vw くらいなのですが、毎回計算するのも大変ということで
CSS上で直接計算するようにしてみました。

● font-size: calc(100vw / ( 640 / 30 )); /*30px*/

640  が「デザインラフの横幅」、30 が「デザインラフ上でのフォントサイズ」になります。

フォントサイズを変えるときもわかりやすいし、計算も不要で楽なのではないでしょうか。

Google chromeで画像を縮小表示したときにぼける問題の回避方法

gravity-works (2018年3月14日 11:13)
＜2022/4/4 追記＞
現在であれば

image-rendering: -webkit-optimize-contrast;

というスタイルが使えるようです。
-webkit-backface-visibility: hidden; と比べて他のスタイルに影響されないため、こちらを使用するのが良さそうです。
■通常
120509_oshi_01.jpg

■image-rendering: -webkit-optimize-contrast; あり
120509_oshi_01.jpg

■image-rendering: -webkit-optimize-contrast; あり ＋ 角丸
120509_oshi_01.jpg

下で書いている角丸をつけた場合でも問題なく効いています。

＜追記ここまで＞


高解像度ディスプレイへの対応で、大きめの画像を縮小して使うことがあると思います。
これを Windows の Google chrome で表示するとかなりぼやけてしまうのですが、
その現象の回避方法としてimgに

-webkit-backface-visibility: hidden;

というスタイルを当てるものがあります。

が、自分のサイトの場合当ててみてもまったく変わらず・・
詳しく調べてみたところ、img に以下のスタイルを当てていると効かないようでした。

border-radius: ○px;

角丸ですね。
ちょっと不便ですが囲った div に当てるなどで対応できますので、
便利に使っていこうと思います。

もし他にも競合できないスタイルがあった場合は追記します！


■-webkit-backface-visibility: hidden; なし
120509_oshi_01.jpg

■-webkit-backface-visibility: hidden; あり
120509_oshi_01.jpg



CSSでのフェード時に要素がズレる

gravity-works (2017年5月10日 10:54)
新しめのブラウザ向けに制作する場合、マウスオーバー時のフェードなどに「transition」を使うことができますが、フェード時にgoogle chromeで1pxズレることがありました。

このような場合、下記のスタイルを当てることで解消できます。

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

transition を記述している要素に当てます。

縦中央に揃える最新のCSS

gravity-works (2016年10月25日 18:00)
これまでいろいろな方法で実装してきましたが、どれもそれなりに手間が掛かってしまっていた縦中央揃え。古いブラウザに対応しなくてよい場合のとても簡単な方法が紹介されていました。


タイトルにある通りIE9以上で使え、親と子どちらの高さも指定する必要なし。CSSの記述も簡潔です。


■HTML

<div class="sample">
<p>天地の中央に配置</p>
</div>


■CSS

.sample p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ベンダープレフィックスはつけておきます。

transform が使えなかった頃は子要素の高さの半分を数値で入れる必要がありましたが、IE8以下が減ってきたことでようやく実用的になってきたのかな、と思います。

iPhoneで画面を回転させたときに文字サイズが変わる

gravity-works (2016年8月31日 10:33)
iPhoneで画面を横に回転させると、文字サイズが拡大されてしまう場合があります。
これを無効にするには<body>タグに以下のように記述します。

body {
-webkit-text-size-adjust: 100%;
}

これだけで自動拡大を防ぐことができます。

ただ横向きにした場合は相対的に文字サイズが小さくなり、
バランスが悪くなってしまいがちなのも確かですので、
レイアウトが崩れてしまうような部分だけに指定する、というのもアリかもしれません。

計算式を使った幅指定

gravity-works (2016年7月13日 10:40)
width : calc(100% - 10px) ;

上記のような指定です。
SS3が出てきた頃、「計算式を使っての幅指定」がついに使えるようになるのか！と喜んだものの、実際にはブラウザの対応がまったくで使えるのは当分先になりそう...という残念な思いをしました。

下記のサイトが各ブラウザの対応状況をまとめてくださっているのですが、それを見る限り気を付ければ使って行けそうな感じ（スマホが若干心配ではあります）。



width : 98% ; /* 旧ブラウザ用 */
width : -webkit-calc(100% - 10px) ;
width : calc(100% - 10px) ;


現在（2016年7月）ではそろそろ必要ないかもしれませんが、念のためベンダープレフィックスとフォールバック用のスタイルを書いておくとよさそうです。

CSSでマウスオーバー半透明

gravity-works (2016年2月24日 10:44)
マウスオーバーすると半透明になる効果です。
最近はJSではなくCSSでやることが増えてきたためメモしておきます。

■CSS

.imgover {
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.imgover:hover {
filter:Alpha(opacity=70); /* 旧IE */
opacity: 0.7;
}


これだけ、簡単です。
あとは効果を付けたい要素に class="imgover" を付けるだけ！

transition を使っているためIE9以下の古いブラウザでは対応していませんが、
その場合もフェードはしないものの半透明にはなるので、
厳密に同じでなくても良い場合は使ってしまって良いと思います。

YouTubeの埋め込み動画を幅100%に対応させるCSS

gravity-works (2015年10月28日 10:14)
スマホ対応する案件が増えるに連れ、YouTubeを横幅100%に対応させることも増えてきました。
その度に検索しにいっているので残して置こうと思います。

いつも参考にさせていただいてるのはこちらの記事。



■HTML

<div class="movie">
    <iframe src="https://www.youtube.com/embed/XXXXXXXXXXX?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>


■CSS

.movie {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; /* 現プレイヤーでは不要？ */
    height: 0;
    overflow: hidden;
}
 
.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

上記で簡単に実装できます。


レスポンシブなサイトを作る場合、PC表示では決まった width・height に背景画像を敷くだけで良かったものが、SP表示では横幅に合わせて可変させなければならない、という場面は多いと思います。
背景画像に合わせて高さを可変させることはできませんが、この指定を応用することで実装可能です。
上記のソースの padding-bottom に背景画像の縦の比率を入れ、背景画像と背景サイズの指定を加えます。

.movie {
    position: relative;
    padding-bottom: XXX%;
    background: url(背景画像のパス);
    background-size: 100%;
    height: 0;
    overflow: hidden;
}

hrの余白

gravity-works (2015年1月21日 10:56)
最近はhr自体あまり使うことがありませんが、いざ使うとなるとブラウザ毎の余白の解釈の違いに苦戦することに・・
以前メモしておかなかったことが悔やまれます。

なんとか記憶から掘り起こした指定が以下。
150121_oshi.gif

これでこちらの環境ではうまくいくようです。

・Google Chrome
・Firefox
・Safari
・IE6～11

clearfix当社用

gravity-works (2015年1月14日 10:25)
150114_oshi_01.gif
要素をfloatさせると、高さに含まれなくなり上記のように親要素からはみ出てしまいます。

これを解決するには

・親要素に「overflow:hidden;」を指定する
・親要素にfloat解除のためのスタイルをまとめたclass（いわゆるclearfix）を当てる

の2つが一般的だと思います。

2つ目のclearfixはどこまでを対象ブラウザに含めるかによって内容が変わるのですが、
当社でテストしているブラウザに対応しているものは下記のようになります。

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

上記で

・最新Google Chrome
・最新Firefox
・最新Safari
・IE6～11

に対応できます。
IE6、7の記述は必要に応じて。

要素の内側にボーダーを付ける方法

gravity-works (2013年8月14日 10:35)
今まで使いドコロがなかったのが不思議なくらいですが、
要素の内側にボーダーを付けるというのを調べました。

aタグで囲った画像をマウスオーバーする際にボーダーを表示させる想定です。

■HTML

<a href="#"><img src="xxxxx.jpg" /></a>


■CSS

a {
  overflow: hidden;
  display: inline-block;
  *display: inline; /* ie6,7 */
  *zoom: 1; /* ie6,7 */
}

a:hover {
  border: 3px solid #000;
}
 
a:hover img {
  margin: -3px;
}

IE6から対応。
赤字部分はインライン表示の指定ですが、ブロック要素かつ横幅100%にならなければなんでも大丈夫です。
複数並べる場合は float でもいいし、display:block; を指定して横幅を決めた div などで囲ってもいいと思います。

aタグのサイズを指定する場合は、a:hover にボーダーを引いた分のサイズを指定しないとならないようです。

130814_oshi_01.jpg


Google Chromeで印刷に対応する

gravity-works (2013年4月23日 15:43)
WEBページを見栄え良く印刷させるためには
CSSでの調整が必要です。

とくに背景色や背景画像が印刷できないのが大きいと思いますが、
Google Chromeの場合、以下の処理だけで対応させることができます。

---------------------------------------------
@media print {
body {
-webkit-print-color-adjust: exact;
}
}

もしくは印刷用のCSSの中で

body {
-webkit-print-color-adjust: exact;
}
---------------------------------------------


inline-blockの手軽な書き方

gravity-works (2013年3月 6日 10:18)
inline-block要素はとても使い勝手がよいですが、
古いブラウザ向けの記述などが必要で少し面倒だったりします。
その中で、下記のものはかなり簡潔に書けるため前から愛用しています。
（ずっとメモしたものを使っていたため、引用元は失念してしまいました・・）

「divA」という要素をinline-block要素にする場合、

#divA {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

これだけでIE6まで対応できます。
何より、余計なdivや幅指定が必要ないのでとても使いやすいです。

ちなみにinline-block要素を並べると、ソース上の改行が
半角スペースになってしまうため要素間が開いてしまいます。

そういう場合は単に改行を取ってもいいですが、
divAの親要素に

font-size: 0;

を指定し、
divAに正しいフォントサイズを指定すると楽です。


●2013/4/9 追記
上記のフォントサイズの方法では、WindowsのSafariで上手くいかないようです。
（フォントサイズが0にならず空白が開いてしまう。）

ただ、Windows Safari のシェア数自体はそれほど多くないので、
多少余白が増えても問題ない場合は気にしなくていいかもしれません。

厳密に隙間なく並べる必要がある場合は改行をとってしまうか、

<div>aaaaaaa</div><!--
--><div>bbbbbbb</div>

上記のようにコメントアウトで改行を挟むことで
ある程度見やすさを保ちつつ実現できます。


IE6：div内の最後の要素が落ちてしまうときの対処法

gravity-works (2013年1月15日 19:17)
130115_oshi.gif

上記のように、
大枠（contents）にピッタリになるようにfloatを使って要素を並べたとき、
その内部の最後の要素が落ちてしまうバグの対処法です。

※テキストだと複製され、その分が落ちるようです。
　今回は画像だったためか落ちただけでした。

■余白を作る
上記の場合、contentsの横幅を少し大きく作ると（内部要素1つにつき1px？）
解消されるようです。

■コメントを入れる
余白が作れない場合、最後の要素（3つ目のblock）の後に適当な
コメントを入れると解消されます。
コメントなのでバグで複製されてしまっても見えません。


IEでposition指定の要素がズレる

gravity-works (2012年11月 6日 18:48)
position: relative を指定した要素Aがあり、
その中に position: absolute で位置を指定した要素Bがあるとします。

このとき要素Aに float を設定してしまうと、
IEでは要素Bの位置指定が上手くいかずにズレてしまうようです。
（IE6～8で起こりました。）

これは要素Aにきちんと width を指定することで回避できました！

スマホサイト向けの軽量reset.css

gravity-works (2012年8月29日 10:29)
各WEBブラウザのデフォルトCSSをリセットする手法として、
reset.cssというものがあります。
最初に読み込んでおくことでブラウザの初期CSSを統一し、
制作を楽にすることができます。

そのreset.cssですが、スマホサイトに用途を絞ることで
不要なスタイルを削除し、軽量化したものが配布されていました。


今のところはSafariとAndroidブラウザがほとんどのため
reset.cssはそこまで重要ではないかもしれませんが、
最近は他のブラウザもモバイル版を出してきています。

いずれPCサイトのように複数ブラウザを想定したコーディングが
必要になるかもしれないので、そのときはこちらの
軽量なreset.cssにお世話になりそうです。

CSSで印刷する要素を設定する

gravity-works (2012年8月22日 10:34)
「ページを印刷するとき、この部分は印刷させたくない」ということがあると思います。
印刷する要素の制御は、CSSで簡単に実装できます。

@media print {
#header { display:none; }
#footer { display:none; }
}

上記のように @media print で囲んだスタイルは、印刷時のみに適用されます。
印刷用のスタイルシートを用意する方法もありますが、
そこまで大掛かりでない場合などに。

印刷対応で気になったものは、

・float:left/right
・overflow:hidden

など。

どうやら float で並べながら、overflow で回り込みを解除するような
縦長のレイアウトだと、上手く印刷できないことが多いようです。

この辺りのスタイルも、@media print で上書き・調整すると
綺麗に印刷できると思います。

上下中央揃えでの落とし穴

gravity-works (2012年4月25日 10:45)
CSS で簡単に上下中央揃えを実現する

こちらの記事で紹介されている方法で、
よく中央揃えを実装します。

非常に便利なのですが、先日どうしても上手くいかず
かなりの時間悩んでしまったことがあったので、
忘れないようにメモを残しておきます。


● テキストテキスト
↑
text-indentでテキストを飛ばした背景画像

このような左右の2ブロックを中央揃えにしたのですが、
IE6でのみ中央揃えになりませんでした。

どうやらtext-indentが原因だったようで、
単純にimgタグで画像を設置したら問題なく中央揃えになりました。


他にも、並べる要素はブロック要素でなければ
ならなかったりするようです。
spanなどにdisplay:blockを指定しても上手くいかなかったので、
上記もimgタグをpタグで囲ったりしています。


テキストをボックスの縦中央に揃える

gravity-works (2011年12月20日 20:37)
テキストや画像などの要素を、ボックスの縦中央に揃える方法がこちらで紹介されています。


使用の条件としては
・ボックスが2つ以上横並びになっている
・そのボックスの width が決まっている
こんな感じになっていますが、CSSだけで（しかも短いコードで）実現できるのでとても使いやすいです。

対応ブラウザは以下の通り。

・Firefox 1, 2
・Netscape 6, 7.1
・Safari 2, 3
・Opera 9.2
・IE 5.01, 5.5, 6, 7


■使用方法

次のような複数のボックスを囲んだ div に対してクラスを当てます。
--------------------------------------------------------------
【HTML】
<div class="sample">
  <div>
    aaaa
  </div>
  <div>
    bbbb
  </div>
</div>
--------------------------------------------------------------
【CSS】
div.sample div{
display:table-cell;
width:100px;
vertical-align:middle;
}

* html div.sample div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample div{/* IE 7 */
display:inline;
zoom:1;
}
--------------------------------------------------------------

下はIE用のハックとなっています。

windowsでも綺麗に表示できる明朝

gravity-works (2011年7月13日 10:31)
webサイトで明朝を指定することはあまり多くないと思いますが、
それでもたまに明朝にしてほしいという希望がくるたびに
なんとかアンチエイリアスのかかったフォントを使えないものかと思っていました。

Macはヒラギノ明朝がありますが、Windowsは標準があれなので・・

他に標準搭載されている明朝フォントもないし・・と諦めかけていたところ、
こちらにとても参考になる記事がありました。

Creazy!
http://creazy.net/2007/08/windows_anti_alias.html

なんと、HG明朝E系は13pxからアンチエイリアスがかかるそうです。

OS標準ではありませんが、HG明朝はMicrosoft Officeが入っているPCならば
インストールされていますので、ほとんどの場合で表示できます。

少なくとも、指定しておく価値はあります。


これで今後は、明朝フォントも多少気軽に使えそうです。

div内でfloatを使うときの注意点2

gravity-works (2011年4月20日 10:28)
以前の記事、「div内でfloatを使うときの注意点」で書いた通り、
大枠の div の height を中身の要素（floatあり）に合わせて伸ばすには、
大枠の div に overflow:hidden; を指定するという方法があります。

しかし、これだけではIE6では上手くいかなことがあります。

前記事の例では自然に指定していましたが、
overflow の指定だけではなく、width の指定も必要だったようです。
（そうしないと、中身の要素が折り返される場合に計算ができないのだとか・・）

ということで、前記事の方法を使う場合は、

・overflow:hidden;
・width:○○○;

この2つを指定しましょう。

dlで表をつくる方法

gravity-works (2011年4月20日 10:28)
110420.gif

上図のような表をdlで作成する場合、
今まではdt、ddにきっちりwidthを指定し、
それぞれにborder-bottomを指定。
dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。
でも、「う」の段のように、ddのテキストの行数がdlよりも多いと
border-bottomがずれてしまいます。
ならborder-top指定すれば？と思いますが、
「え」の段のように、逆にdtのテキストの行数が多いと
「お」の段が回り込んでしまいます。
そうすると、一段ずつdlにするというような
何とも不細工なソースになってしまっていました。

調べてみると、下記の様にすればで崩れずソースもきれいなままです。
それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。
ddには、dtのwidth分のpadding-leftとborder-bottomを指定、floatとwidthの指定はナシ。

具体的にはこんな感じです。

--------------

dl{
width:500px;
list-style:none;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background:url(dtについている色を画像で指定) repeat-y left top;
overflow:auto;
}

dt{
clear:both;
width:100px;
float:left;
}

dd{
border-bottom: 1px solid #999999;
padding:0 0 0 100px（dtのwidth分）;
}

--------------

リストなどで頭の1文字を前に出す方法

gravity-works (2011年4月13日 10:28)
リストなどで1行が長くなってしまうと、

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜ストテキスト
｜※テキストテキストテキ

折り返されてこのようになってしまいます。
ですが、折り返されたあとは※ではなく文字の初め（テキストの"テ"）に
合わせたいということが殆どかと思います。

今まではpaddingと背景画像を使って再現していたのですが、
もっとずっと楽な方法があること知ったのでメモしておきます。

上の例がリストであるとして、ソースはこのようになっていると思います。

<ul>
<li>※テキストテキスト</li>
<li>※テキストテキストテキストテキストテキスト</li>
<li>※テキストテキストテキ</li>
</ul>

まず、この<li>タグに左paddingを指定します。
1文字分、と指定するのがいいと思いますが、崩れる場合もあるようなので
そのときはピクセルで。

padding-left:1em;　または　padding-left:12px;　など

これで一文字分、右にずれることになります。

｜　※テキストテキスト
｜　※テキストテキストテキストテ
｜　キストテキスト
｜　※テキストテキストテキ


次に、行の先頭だけ左にずらします。
  • タグにtext-indentを指定します。

    text-indent:-1em;

    これで頭だけ左にずれ、改行後の先頭はテキストに揃う形になります。

    ｜※テキストテキスト
    ｜※テキストテキストテキストテキ
    ｜　ストテキスト
    ｜※テキストテキストテキ


    それにしても、text-indentなんてまさにこういう用途のために
    用意されているようなクラスですよね・・
    もしくは先頭1文字下げるとか。

    普段、画像置き換えのために文字を吹っ飛ばすくらいしか
    使っていなかったので、目から鱗な気分です。

    • inline-block

    gravity-works (2010年3月 4日 10:28)
    最近、display:inline-block; を良く使っています。

    名前の通り display:inline; と display:block; の性質を持っていて、
    指定したタグの内側はblock要素、外側はinline要素になります。

    なので、
    ・ボックスが横並びになる
    ・vertical-align が使えるようになる
    ・（上の2つを）height を決めなくても使える
    というメリットがあります。

    ボックスを横にならべるのは float:left; でも問題ないのですが、
    繰り返し並べて自動改行される場合は
    height を合わせないとズレてしまうことがあります。


    使い方は以下のようになります。
    タグが1つ増えてしまうのが欠点でしょうか＾＾；


    ■CSS

    .sample {
    width: 200px;
    display: -moz-inline-box; /*FireFox2以下用*/
    display: inline-block;
    /display: inline; /*IE7以下用*/
    /zoom: 1; /*IE7以下用*/
    }

    .sample div{ /*FireFox2以下用*/
    width:200px;
    display:block;
    }


    ■HTML

    <div class="sample"><div>内容</div></div>

    いくつかのブラウザに対応させるために
    少し記述が多くなりますが、使う価値はあると思います。

    div内でfloatを使うときの注意点

    gravity-works (2009年8月11日 10:31)
    090811_02.gif

    ↑のように、大枠となる div の中に複数の div を入れ、
    float を使って並べるときの注意点です。
    続きを読む: div内でfloatを使うときの注意点

    【CSSトラブル】　marginが無視される2

    gravity-works (2009年8月10日 10:41)
    以前の記事 【CSSトラブル】　marginが無視される とはまた違う例です。

    ★HTML
    ＜div id="box1"＞
    ＜div id="box2"＞
    ＜/div＞
    ＜/div＞

    ★CSS
    #box1{
    　　　margin:40px;
    }

    #box2{
    　　 margin:20px;
    }

    としたときに、

    090810_01.gif

    上のように表示されるはずが、

    090810_02.gif

    このように、 box2 の上下部分の margin が無視されてしまいます。

    これも同じく margin を padding に変えるか、
    できるのなら外側の box1 に、width か height を指定することで
    解決することができます。

    div内で下揃え

    gravity-works (2009年8月 6日 10:17)
    div 内の要素を下揃えにする方法です。


    大枠の div を「A」、そのなかで下揃えにしたい要素を
    div で囲って「B」とします。

    ■ divA の設定
    ・height を指定する
    ・position:relative; と入れる

    ■ divB の設定
    ・position:absolute; と入れる
    ・bottom:0; と入れる（ピクセルで下からの高さを指定できます）


    これで、divA 内で divB を下揃えにすることができます。

    【CSSトラブル】　marginが無視される

    gravity-works (2009年7月16日 10:18)
    CSSでコーディングしている際、
    よく起こりうるトラブルとして、marginが無視される...

    ということがあります。

    例えば、

    ★HTML
    ＜div id="box1"＞
    ＜/div＞
    ＜div id="box2"＞
    ＜/div＞

    ★CSS
    #box1{
    　　　margin:40px;
    }

    #box2{
    　　 margin:20px;
    }

    としたときに、

    090716_01.jpg

    の、ように表示してほしいですが、

    090716_02.jpg

    実際は、このように、上部分のmarginが、無視されて、
    大きい方のmarginが優先されてしまいます。

    これは、よく起こる事ですが、CSSの仕様のようなものなので、
    あきらめるしかありません...。

    背景などをつかっていなければ、
    かわりにpaddingを使って、解決するといいと思います。


    ・似たような現象でこういうのもあります
    【CSSトラブル】　marginが無視される2

    フォントファミリーの指定

    gravity-works (2009年4月 7日 18:26)
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

    • 左から順番に参照し、条件にあったものが設定される。
    • フォントファミリ名にスペースが含まれる場合は、その名前を引用符で囲む必要がる。
    • 「ヒラギノ角ゴ Pro W3」と「Hiragino Kaku Gothic Pro」は同じフォントファミリーの指定だが、 Safariの場合日本語で指定した場合、無効になってしまうので両方で書く必要がある。
    メインページ | アーカイブ | HTML »

    このアーカイブについて

    このページには、過去に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

    次のカテゴリはHTMLです。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

    ​