CSS

CSS

3D効果を利用したCSSアニメーションでフォトギャラリー

CSS3の3D効果を使って動きのあるフォトギャラリーを作ってみたいと思います。現状ChromeやSafariなどのwebkit系ブラウザでのみの対応なのでなかなか実装できるシーンは少ないかもしれません...
CSS

要素を上下左右でセンタリングする方法

要素をページの中央に配置したい場合は、「margin:0 auto;」 で対応できますが、縦方向の中央配置に関しては「vertical:middle; 」では対応してくれません。そこで、上下左右ともに...
CSS

background-blend-modeプロパティによるCSSグラデーションの可能性が今後広がるかも…

背景パターンを作成する際、今まではIllustratorやPhotoshopを用いて背景となるパターン画像を作成し、backgroundとしてリピートさせていましたが、CSS3の新たなプロパティである...
CSS

CSSで描画表現を指定できるブレンドモード

PhotoShopなどに搭載されている機能のひとつである「描画モード」ですが、多くの方がこの機能を利用しているのではないでしょうか。その便利な「描画モード」がCSSで表現できるようになりました。CSS...
CSS

CSSの優先度について…

CSSでは、ある特定の要素のセレクタに複数のスタイル指定ができますが、同じセレクタに別々の指定がされた場合は「個別性」の高いスタイルが優先して適用されます。 (adsbygoogle = window...
CSS

CSSで長い文章を段組みで見せるcolumnプロパティの使い方

文書を読んでもらいたいマガジン系のサイトなどで、長文を1ページ内で表示したい場合、いくつかのボックスに分けて段組みレイアウトにするなどして、視覚的に読みやすい配慮が必要になってきます。その際に、複数の...
CSS

cssにおけるidやclassを命名するとき気を付けること…

Webサイト構築の際、それぞれの要素にidやclass名を付けて作成していきますが、汎用性の高いid名やclass名を要素ごとにわかりやすくリスト化しておくと毎度名前を考えたり煩雑にならずに構築してい...
CSS

marginの相殺について…

ある決まった条件において、隣接する要素同士の垂直方向のmarginが結合されてしまうことを「marginの相殺」と呼ばれています。どのような状況において相殺されてしまうのかを確認しておきましょう。 通...
CSS

CSSのみで星の輝く夜空を背景にする方法

サイトの背景を星の輝く夜空のようなイメージにしたい場合、今までは星が点滅するようなGIF画像などを背景に繰り返し配置などをして表現することがありましたが、より自然な星空を css のみで表現可能になり...
CSS

リストやテーブルなどで擬似クラス:nth-child(n)を使って一定の規則に従い背景色などを変える

リストやテーブルのセルの可視性を良くするために、li,tr,th,tdなどの背景色を交互に変える手法がありますが、CSSの擬似クラスである「:nth-child(n)」を利用してそれを実現することがで...
CSS

検索フォームをCSSでカスタマイズする

サイト内検索フォームなどを実装する際に、画像ボタンを配置したり、アイコンを添えてシンプルに見せたりとCSSでちょっとしたデザイン変更をする方法をメモしておきます。検索フォームは、「テキストを入力し送信...
CSS

ol,liなどの番号やマークの下までborderを表示したいとき…

ol,liタグで並べたリストに対し、区切り線を入れたいときに通常の指定では、リストマークの後ろから最後までのをリスト内容と認識し、左端がズレて区切り線が表示されてしまいます。こういった場合に、リストの...
CSS

IE8以下でメディアクエリが効かないとき…

レスポンシブデザインを制作する際に「Media Queries(メディアクエリ)」を使用してCSSの表示を切り替えますが、IE8以下ではこの「Media Queries」に標準対応していません。そこで...
CSS

display:noneとvisibility:hiddenの違い

基本的なことかもしれませんが、今一度「display:none」と「visibility:hidden」の違いについてメモしておきます。display:noneコード自体は存在したままで、要素自体は表...