CSSのレイアウトテクニックです。

レイアウト

特定のブラウザでレイアウトが崩れる

特定のブラウザでレイアウトが崩れる場合はCSSハックを利用します。
ただし、最近のCSSハックはidとclassに対してしか指定できないようです。
CSSハックについて
Chromeのみ、Firefoxのみに適用させるCSSハック
IE11のみをCSSハックする方法

特定のページだけレイアウトが崩れる

特定のページだけレイアウトが崩れる場合は、そのページだけHTMLにstyleを指定すると解決できます。

<head>
<style>要素 {スタイル}</style>
</head>

IE10以降のフォント調整

IE10以降だとフォントが他のブラウザと異なりますが、これを調整する方法です。
基本的には以下のようにIE用のCSSハックを使用しますが、赤字の部分は各自の環境に合わせて修正してください。

@media all and (-ms-high-contrast:none){#container {font-family:"MS Pゴシック";font-size:99%;}}

簡単に実現できるカラムレイアウト

従来ではfloatやpositionを利用してカラムレイアウトを行っていましたが、Flexboxを利用する事でより簡単に実現する事ができます。
カラムレイアウト

文字表示

Chromeで文字化けする

Chromeで表示した時だけ文字化けする場合は、HTMLのヘッダで文字コードを指定してください。

<meta charset="UTF-8">

文字の高さ合わせ

line-heightは行の高さを指定するものですが、ここの値をheightと同じにすると縦の中央寄せになります。

要素 {line-height:heightと同じ数値にする;}

Sans Serifの指定が反映されない

フォントファミリーで「Sans Serif」を指定すると正常に反映されない場合の対処法です。
CSSハックを利用して対象のブラウザのフォントファミリーだけ「Verdana」を指定してやると見た目が近いものになります。
Chromeで以前にこの不具合が存在していましたが、現在は修正されているようです。

  1. フォントサイズの調整:CSSハック {要素 {font-size:フォントサイズを指定;}}
  2. フォントファミリーの調整:CSSハック {要素 {font-family:Verdana;}}

背景表示

背景画像のサイズ

背景画像のサイズを指定する方法です。
HTMLクイックリファレンス(background-size)

自動算出:body {background-size:auto;}
最大サイズに合わせて自動調整(縦横比保持):body {background-size:contain;}
最小サイズに合わせて自動調整(縦横比保持):body {background-size:cover;}
背景画像のサイズを指定(autoとの組み合わせも可能):body {background-size:?px ?px ?px ?px;}
背景画像のサイズを%で指定(autoとの組み合わせも可能):body {background-size:?% ?%;}

背景画像の表示位置

背景画像の表示位置を指定する方法です。

background-position:横方向 縦方向

  1. 横方向:left、center、right
  2. 縦方向:top、center、bottom

スクロール時の背景表示

画面をスクロールする際に背景画像をどのように表示するかと言うものです。
HTMLクイックリファレンス(background-attachment)

スクロールしても背景は固定:body {background-attachment:fixed;}
スクロールで背景も動く:body {background-attachment:scroll;}

ページの背景に覗き窓を作る

ページ上(main1とmain2の間)に覗き窓を作り、bodyの背景を覗けるようにする方法です。
覗き窓はスクロールと逆方向に移動するので最初はページ下部に配置すると良いかもしれません。

htmlの書式

ページの背景に覗き窓を作るためのHTML書式です。

<body>
<div id="container">
<div id="main1"></div>
<div id="main2"></div>
</div>
</body>

CSSの書式

ページの背景に覗き窓を作るためのCSS書式です。

body {background;に背景を設定する、background-attachment:fixed;で背景を固定する}
container {background;を削除する}
#main1 {background;に背景を設定する}
#main2 {background;に背景を設定する、margin-top;などでスペースを空ける}

ボックス周り

ボックスからはみ出る時の対処法

ボックスからはみ出る時の対処法にはbox-sizingが効果的です。
box-sizingを指定するとボックスにpaddingとborderのサイズも含めて計算するようになるので、うまく使えばこうした問題に対処できる場合があります。
CSS3リファレンス(box-sizing)

要素 {box-sizing:border-box;}

ボックススペースの非表示方法

ユーザー側が非表示にした際に、不要なボックススペースを自動的に非表示にする方法です。
これにはdisplay:inlineを使っても可能ですが、ボックスのサイズにautoを指定すると簡単に実現できます。

要素 {width:auto; height:auto;}

中央寄せ

インラインの中央寄せ

インラインの中央寄せは、以下のように記述すると可能です。
効いてないと思ったら、強制的にインライン要素にする事で対応できると思います。
要素を上下左右に中央寄せする色々な方法

  1. 要素 {text-align:center;}
  2. 要素 {display:inline; text-align:center;}(強制的にインライン要素にする)

ブロックの中央寄せ

ブロックの中央寄せは、以下のよう記述すると可能です。
効いてないと思ったら、強制的にブロック要素にする事で対応できると思います。

  1. 要素 {margin:0 auto;}
  2. 要素 {display:block; margin:0 auto;}(強制的にブロック要素にする)

テーブルの中央寄せ

テーブルの中央寄せは、以下のように記述すると可能です。

table {margin-left:auto; margin-right:auto;}

自動付加

文字列の自動付加

contentとbefore擬似要素やafter疑似要素を組み合わせると、要素の前後に文字や画像を自動付加できます。
beforeは行頭に付加が可能で、afterは行末に付加が可能です。
もしも記号を利用して文字化けする場合は、リンク先にある変換スクリプトを利用してください。
それとIEで反映されない場合は、HTML宣言文を以下のようにURLを含めて正確に書いてください。
要素の前後に内容を追加する
CSSの「疑似要素」の書き方 再入門(CSS3対応版)

  1. 効果:行頭に付加(beforeを利用)、行末に付加(after)
  2. CSSの書式:要素:before {content:"文字列";}
  3. HTML宣言文:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. 文字化け対策:16進数値文字参照 変換スクリプト

リンクのアウトライン

リンクをクリックした時に出るアウトライン(点線)は、ほとんどの人が不要だと思います。
これを消す方法は以下のようにリンクのスタイルを指定するだけです。

a:link {outline:none;}

半角英数字の自動改行

連続した半角英数字は改行されずに枠幅を飛び出しますが、これを回避する方法です。
以下のようにCSSに記述すれば、対象の要素の枠幅で自動的に改行されます。

要素 {word-break:break-all;}

サイズ調整

縦幅の自動調整

vhはブラウザの高さに対する割合を指定する事ができます。
100なら自動的に100%になるので、縦幅の最小値を指定するよりも効果的です。

要素 {height:100vh;}

縦幅の最小値を指定

各要素の縦幅(高さ)の最小値を指定する方法です。
ページの高さを内容に関係なく、一定以上に設定する事ができます。
また、何らかの理由でmin-heightが利用できない場合は、heightでページの高さを指定する事で対処できます。

要素 {min-height:縦幅の最小値;}
要素 {height:縦幅の固定値;}

画像の縦横比を保ってサイズ変更

画像の縦横比を保ちながらのサイズ変更する方法です。

画像要素 {max-width:横幅;height:auto;width:auto;max-height:縦幅;}

オンラインPC館
TOPページテクニックネット → CSSレイアウト