スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

様々なレイアウト問題を解決する8つの1行CSSテクニック

8 Premium One Line Css Tips | Css Globe
[情報元:いろいろな問題を解決する1行のスタイルシート集 (コリス)]

様々なレイアウト上の問題を解決してくれる8種類の1行で済むCSSテクニックです。ものによっては若干応用が必要かもしれませんが、それほど難しくないはずなので覚えておくと便利です。

以下、ほとんどリンク先のコピペに近い解説。コードが分かりやすいように改行していますが、もちろん改行せず1行で記述してもOKです。

縦方向のセンタリング

高さが固定されている場合、「line-height」を使用して縦方向のセンタリングが実装できます。例えば、あるブロック要素の高さが100pxなら、そのブロック要素の中にある要素のline-heightも100pxにします。説明するより「デモページ」を見るほうがよく分かると思います。

line-height:24px;

はみだす箇所を隠す

floatを指定した要素の横幅よりも大きい画像などを配置した場合、はみ出してしまう部分を隠します。「詳細ページ」にて設定しない場合(Example 1)と設定した場合(Example 2)の例が見られます。

#main{
	overflow:hidden;
}

リンクが複数行になるのを避ける

指定箇所(以下の記述だとa要素)の自動改行を禁止します。ただし、強制的に一行になるので、テキストが長すぎるとレイアウトが崩れる可能性があるので注意が必要です。

a{
	white-space:nowrap;
}

Firefoxの縦方向のスクロールバーを常に表示させる

Firefoxのデフォルトでは縦方向のスクロールバーを表示しないため、それを表示させます。かなり神経質な人向けのような気がします…。

html{
	overflow:-moz-scrollbars-vertical;
}

水平方向のセンタリング

全てのモダンブラウザ用に、ブロック要素を水平方向のセンタリングに配置します。モダンブラウザ用なので、IE6以下ではこの指定では水平方向にセンタリングされません(IE7はOK)。

margin:0 auto;

IEのtextareaの縦のスクロールバーを消す

Internet Explorerのデフォルトでは、textareaの縦方向にスクロールバーを表示します。これを取り除きます。

textarea{
	overflow:auto;
}

印刷時の改ページを指定する

ページを印刷する際、改ページ箇所を指定します。印刷を想定しているようなページ向けでしょうか。印刷用CSSと併せて使うときれいに印刷できそうです。

h2{
	page-break-before:always;
}

リンクのボーダーを削除する

リンクのアクティブ・フォーカス時のボーダーを削除します。

a:active, a:focus{
	outline:none;
}

ちなみに「リンクのアクティブ」はリンクをクリックしたときのこと、「リンクのフォーカス」は名前のとおりですが、例えばWebページ上でTabキーを押すと、リンクのあるところに次々フォーカスが移りますが、そのときの状態のことです。このときリンクの周囲に点線が表示されるのがデフォルトですが、これを削除します。

▼スポンサードリンク

Posted at 2008年03月16日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
1つ後の記事:春をイメージさせる植物等が描けるIllustrator用ブラシ
1つ前の記事:きらめく星や惑星、星雲を描けるPhotoshopブラシ














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/235-f245c74e
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。