1. トップ
  2. CSS

カテゴリ:CSS

デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」

サイトを制作する際、最初にブラウザ初期値のCSSをリセットする方も多いと思います。様々なリセットCSSがありますが、ほぼすべての要素をリセットさせるものや、最近のHTML5に関するタグがないものもあります。

  • 続きを見る

  • Category:CSS
  • Date:2012年1月24日

IE6でiframeを使うときに注意すること

IE6とiframeというもうあまり使わなそうなこの2つですが、あることをしてしまうとiframe内のコンテンツがまったく表示されない現象があったので、その解決方法を調べました。

  • 続きを見る

  • Category:CSS
  • Date:2011年9月 1日

効率よく作るために私がしているCSSファイル分割方法

CSSレイアウトで組む事が一般的となった昨今、記述するCSSの量が増えてきたので複数のCSSファイルで管理することが多くなってきました。

どういう基準でファイルを分割するかはそれぞれですし、サイトを見ても様々なやり方があるようです。

  • 続きを見る

  • Category:CSS
  • Date:2011年7月20日

あのサイトが@ importを使わない理由

近頃いろんなサイトのHTMLソースを見ていて気づいたのですが、CSSを読み込む際の「@ import」がないサイトが多い事に気づきました。私はよく使っているので何で使ってないのかが気になったので調べてみました。

  • 続きを見る

  • Category:CSS
  • Date:2011年1月27日

Flashでz-indexを扱う時に気をつけること

こういうケースがよくあるかどうかは分かりませんが、Flashの中のボタンをクリックした時にz-indexの値を変えて HTMLコンテンツの前後に出し入れを実装する時のメモです。

  • 続きを見る

  • Category:CSS
  • Date:2010年8月26日

アンカーリンクをしたときに便利な:target擬似クラス

ページが長い場合などに、ページ内リンクをよく設置するかと思います。

ただリンクを押したらパッと移動してしまって、該当部分がどこなのかよくわららない時もあります。(最近はゆっくりスクロールしていくJSがついている事も多いですが)

そのときにこの:target擬似クラスを指定すると、その該当部分にCSSで装飾できます。

  • 続きを見る

  • Category:CSS
  • Date:2010年6月20日

どのブラウザでCSS3が使えるかがわかるチェックリスト

便利な指定ができるCSS3ですか、どれが対応しているのかわかりづらいと思います。

どのブラウザが対応しているかのブラウザ別CSS3対応表がありましたので、メモ。

  • 続きを見る

  • Category:CSS
  • Date:2010年6月17日

印刷した全てのページに不要な背景画像が入ってしまうとき

ホームページを印刷したときに、ブラウザで見るとページの一番上などに背景画像があるだけなのに、 いざ印刷してみたら印刷した全てのページに同じ背景画像が入っていたりします。

それで文章が読みづらくなければいいのですが、ヘッダーに帯で色をつけたの背景画像だと次の ページの文章とかぶってみえづらくなると思います。

これはbodyなど全体を覆っている要素の背景画像は印刷するとどのページにもその背景が印刷されてしますようです。 bodyの直下のdivなどでも全体を覆っているとアウト。

いろんなサイトが印刷してみるとこういう状態になっているようです。

  • 続きを見る

  • Category:CSS
  • Date:2010年5月20日

リンク先のファイルの拡張子によって、表示アイコンを自動で変える方法

リンク先がHTMLページではなく、何かのファイル(word・Excel・pdfなど)の時はそれを示すアイコンを表示することが多いかと思います。

  • 続きを見る

  • Category:CSS
  • Date:2010年3月26日

IE6でposition: fixed;を使う

IE6では絶対位置配置のposition: fixed;が使用できませんが、少し工夫することで擬似的に再現ができます。

  • 続きを見る

  • Category:CSS
  • Date:2010年3月20日

clearFixを使う

floatをクリアし、高さもとってくれる「clearFix」。いつも検索してコードを持ってくるのでここにメモです。 フロートしている親要素に指定します。

  • 続きを見る

  • Category:CSS
  • Date:2010年2月20日

background-position

背景に画像を指定した際の初期位置を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 8日

background-attachment

背景に画像を指定した際のウインドウをスクロールしても動かないように固定させるか移動させるかの指定をします。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 7日

background-repeat

背景に画像を指定した際の繰り返し方法を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 6日

background-image

背景画像を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 5日

background

下記の背景に関する指定を一括で指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 4日

color

テキストの色を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 3日

font-weight

フォントの太さを指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 2日

font-style

フォントの形を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年12月 1日

font-size

フォントのサイズを指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月30日

font-family

フォントの種類を指定します。そのフォントがインストールされていないパソコンではそのフォントは表示されず別のフォントが表示されます。カンマ「,」を使用することによって複数指定することができ、最初に書いたものから優先して表示され、そのフォントがユーザーのパソコンに入ってなかったら次のフォントというように適応されます。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月29日

text-transform

テキストの大文字小文字を変形させる。日本語では指定しても意味がありません。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月28日

word-spacing

単語の間隔を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月27日

text-indent

テキストのインデント位置を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月26日

text-decoration

テキストの装飾を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月25日

border

内容を覆っているボックスに線を指定します。幅、形、色を指定できます。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月24日

text-align

テキストの行揃えの位置を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月23日

visibility

指定された要素の表示・非表示を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月22日

overflow

指定した範囲からはみ出た内容の表示方法を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月21日

list-style-image

リストマークに画像を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月20日

list-style-type

リストマークの形を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月19日

list-style-position

リストマークの表示位置を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月18日

display

要素の表示の仕方を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月17日

position

要素の配置位置を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月16日

float

指定した要素を左か右に移動させます。指定された後の要素はその反対側に回り込みます。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月15日

clear

floatによる回り込みの指定を解除する。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月14日

max-height

要素の最大の高さを指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月13日

min-height

要素の最小の高さを指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月12日

max-width

要素の最大の横幅を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月11日

min-width

要素の最小の横幅を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月10日

padding

要素とボックス間の間隔を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 9日

margin

要素のボックス間の間隔を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 8日

letter-spacing

テキストの間隔を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 7日

z-index

要素の重なりの順番を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 6日

height

要素の高さを指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 4日

width

要素の横幅を指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 3日

line-height

行ボックスの高さを指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 2日

vertical-align

縦方向の位置を指定します。ブロック要素には適応されません。

またセル要素には「text-top」「text-bottom」「super」「sub」は適応されません。

  • 続きを見る

  • Category:CSS
  • Date:2009年11月 1日

IE6・IE7用のcssハック

いろいろと悩ましいIEですが、最近ひとつハックを覚えたのでメモ。

セレクタの前に「/(スラッシュ)」をつけることです。

  • 続きを見る

  • Category:CSS
  • Date:2009年10月28日

clearFixを使う

floatをクリアする方法「clearFix」。いつも検索してコードを持ってくるのでここにメモです。 フロートしている親要素に指定します。

  • 続きを見る

  • Category:CSS
  • Date:2009年3月25日

olのリストが消えて、なぜか出てこないとき

olで囲ったliにはだいたい1から数字(or印)が振られるのですが(順序を示すリストなので)
ある特定の状態だとなぜかそのリストの番号(or印)がIEで消えることがあります。marginやpaddingを使っても出てこない時は「なんで出てこないの?」と思います。

  • 続きを見る

  • Category:CSS
  • Date:2008年5月18日

印刷するページを変えたい時の対処法

印刷物とは違うWEBの世界ですが、いつもWEBサイトをディスプレイ上で見ているとは限りません。

目的地へ行くときは地図を印刷して持っていく方もいらっしゃるでしょう。普通に作成しただけだと、印刷したときに思わぬ場所で切れて次のページになってしまうこともあります。

この箇所で印刷するのを次のページに変えて欲しい!そんな時にはこういう風に記述しましょう。

  • 続きを見る

  • Category:CSS
  • Date:2008年3月18日

floatした時に画像とテキストの上辺がずれるとき

よく画像を左右どちらかに寄せてその横に文字を並べるレイアウトを見ると思います。 その時はfloatを使うことが多いです。

  • 続きを見る

  • Category:CSS
  • Date:2008年2月 8日

CSSで画像をロールオーバーする方法その2

javascriptを使わずにCSSで画像をロールオーバーする方法第2弾。

背景にマウスがのった状態の画像を置いておき、のっていない状態の画像を普通にimg要素で表示させる方法

  • 続きを見る

  • Category:CSS
  • Date:2008年1月27日

CSSで画像をロールオーバーする方法その1

Javascriptを使わずにCSSだけを使って画像をロールオーバーする方法はいくつかありますが、ここでは2つ紹介します。まずは1つめ。

text-indentを使う方法です。

  • 続きを見る

  • Category:CSS
  • Date:2008年1月23日