カテゴリ:CSS

CSS3 Media Queriesのブレイクポイントはどこが良いのか

CSS

CSS3 Media Queriesのブレイクポイントはどこが良いのか

最近はレスポンシブのサイトが一般的になってきたと思います。そのサイトではCSS3 Media Queriesを使って表示を切り替えると思いますが、これのブレイクポイントはどこが良いのかなというので調べてみました。

  • 続きを読む

iOS端末でoverflow-xが効かない場合

CSS

iOS端末でoverflow-xが効かない場合

スマホページを作成する際は、横スクロールを出さないようにすることが多いと思いますが、何かはみ出す要素があり、それをoverflow-xで横スクロールを出ないようにしようとした時に詰まったのでその時のメモです。

  • 続きを読む

floatで並べたリストをセンター寄せにするCSS

CSS

floatで並べたリストをセンター寄せにするCSS

このやり方を知らなかったので備忘録です。floatで並べたリストをセンター寄せにするCSS。

  • 続きを読む

CSSで背景画像・グラデーションを使用し、sizeも指定するときの注意

CSS

CSSで背景画像・グラデーションを使用し、sizeも指定するときの注意

一回覚えてしまえば気にする必要はないと思いますが、最初この状態になった時にしばらく調べていたのでメモしておこうと思います。

  • 続きを読む

あなたがコーディング初心者を脱する方法

CSS

あなたがコーディング初心者を脱する方法

比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。

ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。

  • 続きを読む

レスポンシブデザインにするための基本的な方法

CSS

レスポンシブデザインにするための基本的な方法

スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。
今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。

  • 続きを読む

要素を変化させる、CSS3「transform」のおさらい

CSS

要素を変化させる、CSS3「transform」のおさらい

今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。

  • 続きを読む

CSSアニメーションの初歩をおさらい

CSS

CSSアニメーションの初歩をおさらい

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。

今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。

  • 続きを読む

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

CSS

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

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

  • 続きを読む

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

CSS

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

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

  • 続きを読む

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

CSS

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

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

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

  • 続きを読む

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

CSS

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

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

  • 続きを読む

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

CSS

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

  • 続きを読む

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

CSS

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

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

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

  • 続きを読む

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

CSS

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

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

  • 続きを読む

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

CSS

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

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

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

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

  • 続きを読む

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

CSS

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

  • 続きを読む

IE6でposition: fixed;を使う

CSS

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

  • 続きを読む

clearFixを使う

CSS

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

  • 続きを読む

IE6・IE7用のcssハック

CSS

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

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

  • 続きを読む

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

CSS

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

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

  • 続きを読む

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

CSS

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

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

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

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

  • 続きを読む

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

CSS

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

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

  • 続きを読む

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

CSS

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

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

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

  • 続きを読む

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

CSS

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

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

text-indentを使う方法です。

  • 続きを読む