ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Category Archives: CSS

めくるめくCSS3のアニメーションの世界

WindowsXPとIE6のサポートが終わりを告げ、我々の様な制作者も あの悪夢のような日々から解放されるのか、という想いが少し流れる昨今。 もはやあの日々も思い返せば、それなりにいい想い出なのかも知れない。 「こうして俺のIE制作は終わりを告げた。思えばデバッグばかりしてた気がするなあ」と ときメモのエンディングの様にさらりと語れる日が来たのかも知れない。 【IE6】サポート終了、お世話になったバグを振り返ってみる http://c-brains.jp/blog/wsg/14/04/11-115200.php しかしそれは幻想。つかの間の平和。 常に新技術の足を引っ張るのはInternet Explorerその人なのだ。 まず、CSS3の対応状況はこちら。 http://fmbip.com……(続きを読む)

ひな形再考その2 – フォント周りをどうするのか

制作時のひな形の再考をしようという試みは未だに終わりが見えず 最近のトレンドを追うのが必死で検証すら出来ておりませんが 色々となるほど、と思った事をここにとりあえずまとめてみる。 自分が過去、作った物と今の機材の違いといえばやっぱりメイリオフォント。 Windows8.1にフォントが追加された、という記事を書いてから 「あ、そういえば」と気づいて色々と調べてみたらこのサイトを見つけました。 CSSのfont-family指定はこれで決まり!(2013春) http://d.hatena.ne.jp/n-yuji/20130225/p1 ちょいこの前までWindows XP環境だったせいか、 この辺の事をあんまり考えてなかったのですけども (メイリオは後からインストールはしていましたが) 20……(続きを読む)

レスポンシブデザイン対応フレームワーク「Layers CSS」

ポツポツとレスポンシブの案件もあるものの、イチから組むのはめんどくせえし 「あれ、これどのサイズまでで組んだっけww」と気を抜けば、一気にアホまっしぐらという 最近のおっさんぶりですが、基本的な枠組みだけなんかないですかいのう、と 探し回って「おっ」と思ったのがこのLayers CSS http://eiskis.net/layers/ サンプルはこれですけども、なかなかシンプルでよさげ。 レイアウトと流し込む中身が決まってるならこれを使う方が楽かも知れません。 ちゃんとテーブルとフォームも用意されてるのが嬉しい所です。 この膨大なクラスを頭に叩き込むのはなかなか大変でしょうけども サイトのトップページに図解入りで説明されてるので問題なさげ。 既存サイトのリニューアルにこいつを使ってみようか……(続きを読む)

横並びのリスト(ボックス)の両端をきっちりと揃える方法

商品一覧のサムネイル、そして簡単な説明文なんかを並べる時に liタグを使ってフロートさせるのは毎度よくある話でして。 大抵、その場合にはボックスの右側に10pxとかのマージンを設定するのだけど それだと一番右のボックス(3列なら3つめのボックス)の右側が空いてしまう。 それなら3つめのボックスだけにmargin-right:0を設定すりゃいいやん、と 思っていたんですけども、いちいちその為だけにクラス振るのも美しくない。 なのでこのリストの親ボックスにoverflow:hiddenを設定し、 リストにネガティヴマージンを設定してしまおう、というのが今回の狙い。 HTML CSS ※zoomとdisplay:inlineは今は亡きIE6さん用。 これだといちいち右端のボックスにクラスを振らなく……(続きを読む)

リセットCSSなど制作時のひな形を考えなおそうという試み

ぼつぼつと、いや今更ながらですがレスポンシブWebデザインの案件なども 受注するようになってきておりまして、IE6の亡霊ともそろそろ決別できるかな、と 思いつつある昨今ではございますが、今月中には 「製作時のひな形をまとめあげる」というのを一つの目標としたいと思っています。 思ってますじゃなくて、いつやるの?今(以下r 思えばこういうひな形の見つめなおしというのは 策定されてる物が代わる度に行ってきてはいるのですけれども、 レスポンシブWebデザインとWordpressが絡んできてからは 「おおおおあああ、わっけわかんねー」というまま、なんとか今まで生きながらえてる、 というのが現状でございまして・・・・・情けない話なんですが。 そもそも「一つのHTMLで対応する」というその概念は理解できる……(続きを読む)

Retinaディスプレイに対応させたCSS Sprite

YoutubeのCSSスプライトの例

コリスさんにおもしろい記事が載っていました。 Appleの最新機種に搭載されているRetinaディスプレイに対応させる為のCSS Spriteです。 Retinaディスプレイを考慮したCSSスプライトの実装方法 Macbook Proに搭載されたRetinaディスプレイの解像度は 2,880×1,800ピクセルもあるバケモノ。 しかし、それにわざわざ対応させるような事ってあんのかなあ、という疑問もありますが なんとGoogle Chromeは新バージョンでこのRetinaディスプレイに対応。 「Chrome」ブラウザ新版が「Retina」ディスプレイの解像度に対応 標準ブラウザ以外で対応してくるんなら、Web制作側でも対応をしなけりゃならん事が あるのかも知れません。 実際、iPhoneには……(続きを読む)

 

« Sep 2019 October 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31