Webデザイン

css

[CSS、html5]css3やhtml5のブラウザ対応状況が確認できてベンダープレフィックスの有無も確認できるCan I Use…

以前も一度取り上げました「CanIUse...」ですが最近またググッてくだらないページにお越しいただいている方が見受けられますので、今更ですがしっかりまとめてみようかと思いますはい。CanIUse...とはCanIUse...とはcssのプ...
Compass

[Sass, mixin, css3, animation, keyframes]Sassでanimationプロパティを効率化するよ!

全国1000万人のanemationファンのみなさまこんにちは!好きなアニメはサイコパスとか攻殻機動隊とかカウボーイビバップのcssオタク(アニヲタ否定)のクールでシャイなアンチクショー下山です。とうとうanimationプロパティに手を出...
jQuery

[jQuery]jQueryを使って外部htmlを任意の場所に読み込む

お久しぶりの更新です。今回は表題の通り、珍しくjQueryとかやっちゃいます。なぜこんなことをすることになったか?事の発端の案件はこんな感じ。某団体様のWEBサイトの案件で、サーバーは既に用意されてありイマドキphpとかは動かない。スタティ...
css

[css、css3]cssで矢印を作る!コピペは卒業してちょっと解説を交えながら矢印自由自在!

タイトルの通りです。「css 矢印」とかでググると色んな矢印がコピペだけで作れてしまうけど、ちょっとカスタマイズしたいときにcssの意味が分かってなきゃっていうちょっとレベルアップして書いてみようかと思ったんだ。連休真っ只中に。なのでオーソ...
css

[css,css3,table]レスポンシブデザインでのテーブル(table)の扱いをまとめてみた

レスポンシブデザインで困るのがテーブル(table)ですよね。どう処理しようか迷うところです。今回はテーブル(table)を大きく3つの種類に分け、それぞれの対処法を紹介します。まずはどうなるかデモで確認してみてください。※画面を640px...
css

[CSS]背景にビデオを配置して全画面で表示するよ!

珍しくビデオネタです。と言ってもCSSネタなんですけど。という訳で、ビデオを背景に配置して全画面で表示するみたいな案件が来そうなので作ってみた。正確に言うと背景としてではなく普通に配置してposition:fixedしだけの代物でそれなりに...
css

[CSS]奇数とか偶数とかn番目とか忘れてしまうのでメモ。

tableで交互に色つけてーとかn番目の要素だけ背景色変えてーとか、よく忘れます・・・歳ですもん。てことで、今回は筆者の本当のメモです。すみません。歳には敵わないのです。奇数番目に色付ける要素:nth-child(odd){スタイル}See...
css

[jQuery CSS]jQueryで手っ取り早くドロップダウンメニュー作っちゃうよ!3階層目以降は対応しないよ!

新年あけましておめでとうございます。今年もよろしくお願い致します。さて宣言通り週一で更新していきますよ。新年一発目はみんな大好きjQuery!泣く子も黙るドロップダウンメニュー!デモSeethePenjWypXbbymitsukisagay...
css

[CSS3,影]よく使う影(box-shadow)をまとめてメモっとく ※オレ用に

css3のbox-shadowを使った影のつけかたいろいろ。
css

[CSS,CSS3]box-sizing(border-box)でborder、paddingを気にしないスローライフな生活を送ろう!

box-sizing(border-box)のありとなしとの違いとbox-sizing(border-box)を使ったサンプルを紹介。