css

印刷用CSSスタイルシートをデバッグしたい

印刷用のスタイルシートを修正したいとき、修正箇所などを確認する方法。

Google Chromeで簡単に確認できるのを知りました。

1)デベロッパーツールを開く

2)右側のXの横にあるメニューをクリックして、More tools > Renderingを選択

3)Renderingが開くので、「Emulate CSS Media」にチェックを入れ、[print]が選択

4)そうすると、ブラウザの表示が印刷プレビュー時と同じになります。
※デベロッパーツールを閉じると、元のスクリーン表示に戻ります。

今更学んだ「テキスト変換する前の文字が見えない」原因

お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。

フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?

原因は、CSSの設定でした。

「::selection」というセレクタで文字の色をホワイトにしていたから。

「::selection」というセレクタは変換前の文字だけでなく、テキスト選択した箇所のハイライトカラーも変更できるみたいです。

こんな感じでベンダープリフィックスを指定します。

対応するブラウザは

  • Google Chrome
  • Safari
  • Firefox
  • Opera
  • IE9+

設定する時は背景の色と同じ色を指定しないように気をつけましょ

センタリング(中央揃え)のまとめ

テキストや要素をセンタリングするのにちょっくら迷ったのでこの機会にまとめておくことに。

text-align:centerを使う

最もカンタンと思われる方法。
但し、インライン要素にしか効かない。
なんで効かないんだろうと思ったらdisplay:blockをしてされていたってことが。。。

marginを使う

横幅が決まっている要素ならコレでも良い。
margin:0 auto;

positionを使う

これも(縦横)中央揃えする要素のサイズが決まっている時に有効です。
width:200px height:100pxの要素をセンタリングするには

* position:fixedでもいけます。

要素のサイズがわからない場合

擬似要素を使う。

 

[CSS]サイズが分からない要素を真ん中に配置するテクニック
http://coliss.com/articles/build-websites/operation/css/css-centering-in-the-unknown-by-css-tricks.html

floatさせた要素をセンタリングする

listを使ったナビゲーションをセンタリングしたいときなどに。

リスト全体(ul)を右に50%ずらし、各リスト(li)をネガディブマージンで左に50%戻す。

センタリング DEMO

floatで並べたリストのセンタリング
http://hail2u.net/blog/webdesign/centering-floated-list.html

中央揃えでもいろいろなテクニックがありますね。

:first-child の使い方を勘違いした

:first-child擬似クラスは、IE7から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。

正しくない例1

css

articleの最初の子要素は「h2」なので適用されません。

【解決方法1】 隣接セレクタを使う

DEMO

【解決方法2】 :first-of-typeを使う

:first-of-type疑似クラスとは、指定した種類の最初の要素に適用される。
対応しているのはIE9以降なのでそこ注意

css

DEMO

間違った例:2

これは全くの勘違い。親要素に:first-childをつっくければ、その最初の子要素に自動的にスタイルが適用されると思っていたという恥ずかしい話。

間違ったcss

正しくは

DEMO

レスポンシブデザインのテーブルレイアウト

レスポンシブデザイン時のテーブルレイアウトの一つの参考。

600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。

幅600pxのテーブル

見出しA 見出しB 見出しC 見出しD
コンテンツA コンテンツA コンテンツAコンテンツA コンテンツAコンテンツAコンテンツA
コンテンツBコンテンツB コンテンツB コンテンツBコンテンツBコンテンツB コンテンツBコンテンツB
コンテンツCコンテンツCコンテンツC コンテンツCコンテンツCコンテンツCコンテンツC コンテンツCコンテンツC コンテンツCコンテンツCコンテンツC

HTML

CSS

tableを囲んだdivに

を入れると、PCでは横スクロール、スマホなどでは左右にスワイプできます。

cssで作るふきだしサンプル

たまに使う時になると思い出すのが大変なので、備忘録としてサンプルとともに。

共通css

 

ふきだし下付

ふきだし1

html

css

 

ふきだし上付

ふきだし2

html

css

 

ふきだし右付

ふきだし3

css

 

ふきだし左付

ふきだし4

html

css

 

ボーダー付ふきだし

ふきだし5

html

css

吹き出しDEMO

background-size の使い方&サンプル

レスポンシブデザインが増えるにつれ使用頻度の多くなったbackground-size。
背景画像をレスポンシブ対応するときに活躍します。
今までぼんやりとした知識しかなかったので、ここらで勉強し直します。

元の画像

dummy360240

width 360px / height 240pxの写真を参考に。
縦横のサイズが違う方が、分かりやすいので。

background-size のIE対応

background-sizeプロパティはIE9以降対応です。

IE8は未対応。

background-sizeの値

auto(初期値):
background-sizeを指定しない場合などは、画像の縦横の値を算出する

長さ(数値):
pxなどで指定する。横幅の値だけの指定も可能。

パーセント(%):
背景領域に対する背景画像の割合

cover :
背景領域を最小サイズで覆い尽くす(縦横比は保持)

contain:
背景領域を最大サイズで覆い尽くす(縦横比は保持)

background-size サンプル

基本css

基本html

background-size:auto(初期値)

Backgroundプロパティ1

背景画像のサイズは実サイズの横360px、縦240pxなので、200px四方のボックスは覆いかくされる。左上が基点。

値で指定する

縦横指定した場合(#demo2)は縦横比は無視される。

Backgroundプロパティ5

 

横だけを指定した場合(#demo2-2)は、background-size:100px auto;と同じ意味になる。縦横比は保持される。

Backgroundプロパティ2

 

%で指定する

この場合も値を指定したときと同じような結果に。サンプルが悪かったかね

縦横指定した場合(#demo3)は縦横比は無視される。
背景領域w200px,h200pxの縦横50%に
Backgroundプロパティ5

background-size:cover

背景画像の最小サイズ、この写真の場合は高さを背景領域の高さいっぱい迄拡大する、高さよりサイズの大きい横幅は切り取られる
Backgroundプロパティ3

 

background-size:contain

 

 

 

背景画像の最大サイズを背景領域いっぱいに拡大する。この場合は横幅をボックスの横いっぱいに。縦横比は保持されるので横幅よりサイズが小さい高さは同じ比率で拡大されただけなので、下に余白ができます。
Backgroundプロパティ4

DEMO

 

参考:★CSS3リファレンス
http://www.htmq.com/css3/background-size.shtml

footer コンテンツがあまりないときでもフッターを下にくっつけるcssとjavascript

ヘッダーやコンテンツ、フッターがあるサイトでコンテンツの中身が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせの送信完了ページとか。

そんな数行しか無いコンテンツページでも、フッターを下にくっつけて表示させる方法。by cssとjavascriptで。

基本HTML

CSS

見た目はこんな感じに

footerフッターを下付きに 2015-06-17 10-28-23_s

cssでフッターを下付きにする

ポイントは、

  • html,bodyをheight:100%
  • ラップする#containerに高さheight:100%,min-height:100%のほか、ブラウザを縮めた時にコンテンツの高さまできたら自動的に止まるようにheight:auto!important;を指定
  • #footerでposition:absolute;を使うため、position:relativeを設定
  • #footerはposition:absolute; でbottom:0;に
  • position:absoluteを指定するとwidthがクリアされてしまうのでwidth:100%;を指定
  • #contentにフッターの高さ分の余白を指定

完成

footerフッターを下付きに 2015-06-17 10-39-38_s

demo

javascript でフッターを下部に固定する

CSSがめんどくさいな~という場合は、javascriptもありました。
こちらもとっても便利です。

footerをウィンドウ下部に固定する『footerFixed.js』
http://blog.webcreativepark.net/2007/11/16-012253.html

javascriptを読み込んで、固定したい要素に#footerをつけるだけ。

 

状況によって使い分けたいと思います!

position:fixed 利用時のアンカーの位置がずれるのを解決

ヘッダーにナビゲーションなどを固定するスタイルは最近良くみかけますよね。
私自身も何回か制作しました。
その時にちょっと手こずったのが、アンカーの位置がずれてしまうこと。

ページ内の#content1にリンクさせるときは
<a href=”#content1″>コンテンツ</a>としますが、それだと
ページ内の特定のアンカー位置に飛ばしたいのに、固定されている要素分だけずれてしまって、見えなくなる。。。

解決してくれるサイトがありました。

LIG INC.  Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと
http://liginc.co.jp/web/js/jquery/80140

固定したヘッダーの高さ分のネガティブマージンと、打ち消し用のパッディングを設定します。

でもこれだけでは解決しないことが。
IE11,Firefoxでは大丈夫なのに、Chromeでは効いていない。。。

javascript で調整するも・・・ダメ

 
下記サイトを参考にしてdisplay:inline-blockを追記。

これでchromeでもOKになったけれど、display:inline-blockのおかげで60px分の余白が・・・
この解決方法はまだ未確認です。。。

wordpress固定ヘッダーメニュー時の、別ページアンカーリンクではまったメモ
http://www9377uo.sakura.ne.jp/sakura/wordpress%E5%9B%BA%E5%AE%9A%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E6%99%82%E3%81%AE%E3%80%81%E5%88%A5%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%A2/

ヘッダを固定するときは、アンカー位置ズレに要注意です。

よく使う(と思われる)CSSセレクタ、要素のIE対応状況

この要素ってIE7から対応だったけ?IE8からだっけ?
と迷うことがよくあるので個人的に良く使うcss要素とセレクタのIE対応を一覧にしてみました。個人的メモ。

A > B Aの直下の子セレクタに適用する。子供セレクタとか直下セレクタとか呼ばれる IE7
A + B 隣接セレクタ(Aに隣接するB)に適用する IE7
A ~ B 間接セレクタ。同じ親要素で兄弟関係の弟に適用される。兄弟の間に他の要素が入っていても適用される IE7
A:first-child first-child擬似クラス。指定した親要素の一番目の子要素Aに適用する。通常は親要素と一緒に指定する。 IE7
A[属性名] 属性名が一致するAに適用する IE7
A[属性名=”属性値”] 属性名と属性値が一致する要素Aに適用する
input[type=”submit”]
IE7
A[属性名~=”属性値”] 属性名と属性値が一致する要素Aに適用する+スペースで区切られた複数の属性値に対応している IE77
A[属性名|=”属性値”] 属性名と属性値が一致する要素Aに適用する。ハイフン( – )で区切られた属性値に対応。ハイフンより前の文字列に一致するえば適用される IE7
max-width,max-height,min-width,min-height width,heightの最大値、最小値 IE7
border-spacing table内で隣接するセルのborderの間隔 IE8
A:before、A:after :before疑似要素、:after疑似要素 IE8 ::before,::after はIE9
display:table,table-cell,inline-block display関連。 IE8