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

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

Category Archives: CSS

ひな形再考その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制作側でも対応をしなけりゃならん事が あるのかも知れません。 実際、iPh……(続きを読む)

IE8以下にHTML5をどうやって表示させるかの諸々

先日、いよいよというべきかHTML5での指定案件がありました。 Google ChromeやFirefox、Safariなどのいわゆるモダンブラウザは HTML5+CSS3への対応も早くてあまり支障もないのですが IE8ですらHTML5のタグが認識できない、というのは困りもの。 未だに使用されている事の多い、WindowsXPに至っては事実上IE8が最終バージョン。 となると、WindowsXPの人はごめんね!って事になってしまうのである。 そこで見つけたのがこのブログでした。 HTML5 & CSS3のクロスブラウザー対応方法まとめ (http://mae.chab.in/archives/1463) ここにはとてもわかりやすくまとめてありました。 まずはIE8以下にHTML5の新……(続きを読む)

 

« Feb 2019 March 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