css[CSS]googleマップをレスポンシブに表示したい
気付けば4月。今月また歳を取ります。というわけで書こうと思ってて忘れていたネタを2年越しに思い出したので書きます。「今?!」というツッコミは大歓迎。レスポンシブデザインのサイトが当たり前になり早有余年、アクセスマップページなどに貼り付けてる...
css
css css[CSS]displayをまとめてみたらやっぱりinline-block一択だなと思った件
displayプロパティってよく使いますよね。blockとか特に。でも今回は「要素の横並び」についてまとめてみましたので、誰かの役に立てば幸いです。まず今回はdisplayプロパティについてなのでfloatは無視して進めていきます。disp...
css[CSS、html5]css3やhtml5のブラウザ対応状況が確認できてベンダープレフィックスの有無も確認できるCan I Use…
以前も一度取り上げました「CanIUse...」ですが最近またググッてくだらないページにお越しいただいている方が見受けられますので、今更ですがしっかりまとめてみようかと思いますはい。CanIUse...とはCanIUse...とはcssのプ...
Compass[Sass, mixin, css3, animation, keyframes]Sassでanimationプロパティを効率化するよ！
全国1000万人のanemationファンのみなさまこんにちは！好きなアニメはサイコパスとか攻殻機動隊とかカウボーイビバップのcssオタク(アニヲタ否定)のクールでシャイなアンチクショー下山です。とうとうanimationプロパティに手を出...
css[css、css3]cssで矢印を作る！コピペは卒業してちょっと解説を交えながら矢印自由自在！
タイトルの通りです。「css 矢印」とかでググると色んな矢印がコピペだけで作れてしまうけど、ちょっとカスタマイズしたいときにcssの意味が分かってなきゃっていうちょっとレベルアップして書いてみようかと思ったんだ。連休真っ只中に。なのでオーソ...
css[css,css3,table]レスポンシブデザインでのテーブル(table)の扱いをまとめてみた
レスポンシブデザインで困るのがテーブル(table)ですよね。どう処理しようか迷うところです。今回はテーブル(table)を大きく3つの種類に分け、それぞれの対処法を紹介します。まずはどうなるかデモで確認してみてください。※画面を640px...
Compass[CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。
remと聞くとレム睡眠しか思い浮かびません。体は眠っているのに脳は活発に稼働しているだなんてニンゲンの神秘を感じてしまいますが、今回はそういう話でなくて、ただの単位です。単位としてのremです。remってなに？rem(roomem)とはro...
Compass[Sass,@extend]Sassの@extendの使い方。セレクタの継承ってことだけども・・・
今回はSass行くよ！@extend行くよ！@mixinとどう区別したらいいのか分からない！って人もヒントになればいいと思うよ！てか答えはまとめに書いたよ！@extendの基本的な使い方そもそも@extendっていうのはセレクタの継承が目的...
css[CSS]背景にビデオを配置して全画面で表示するよ！
珍しくビデオネタです。と言ってもCSSネタなんですけど。という訳で、ビデオを背景に配置して全画面で表示するみたいな案件が来そうなので作ってみた。正確に言うと背景としてではなく普通に配置してposition:fixedしだけの代物でそれなりに...
Compass[sass,css,メディアクエリ]sassでメディアクエリを書くときに簡単だなって思った方法
スマホ対応、タブレット対応のWEBを作るときに使われるレスポンシブWEBデザイン。これはメディアクエリが必須となっています。ボクは日頃レスポンシブWEBデザインは使用しません。なぜなら面倒くさいし、ボクの技量ではデザインが限られてくるからw...