ページ

2014年1月22日水曜日

blogger(ブロガー)でSNSのシェアを見栄え良くする為のOGPタグの実装


最近になってやっと、まともにブログが起動し始めたので、
いつFBやTwitterでシェアされるかわからん!(妄想)という事で
自分の記事のシェアをテストしてみたところ、見栄えと内容がものすごくアレな事になってたので、BloggerにおけるOGPタグの設定を必死こいてやってみました。

 そもそも、OGPタグってなんぞや。という人はこちら
http://webdesignerwork.jp/web/facebookogp/

2014年1月21日火曜日

スマートフォンサイト制作で、要素と要素の繋ぎ目に謎の境界線が出来る場合の対応


※機種依存と開発手法を含む超レアなケースです

CSSで背景画像を使った領域を使った場合に、要素と要素の繋ぎ目に意味不明な境界線が発生した不具合でハマったので、原因(と思われる事)とその解決方法。
今回の現象はXperiaだけで発生(AndroidOSのバージョン関係無し)という非常に稀なケースでした。

2014年1月14日火曜日

CompassでSprite画像を生成する時に役立ったリンクまとめ

Compass(コンパス)でSprite画像を自動生成する仕組みはすでにネット上でかなり色々なノウハウが語られてるが、
現在のプロジェクトのディレクトリ構成で、Sprite化する元画像とSprite化した後の画像を別のディレクトリで管理しなくてはならなくなり、
その方法で色々ハマったので、参考にしたURLをとりあえず手当たりしだいに貼っておきます。

  何に詰まって、どうやって解決したかは後日まとめる予定。

2013年7月31日水曜日

iPhone用WEBサイトでヒラギノ角ゴW6(太字)を使用する方法



久しぶりに記事を書きます。

最近はスマホ向けのWEBサービス開発をやっているのですが、 iPhone(iOS)で表示する際に、太字であるヒラギノ角ゴW6を表現するときのCSSの指定の方法に罠があったので残しておきます。

とりあえず、iOSの場合は、font-weight:bold は効きませんので、 font-famiryをヒラギノ角ゴW6にしてあげる必要があります。



2011年6月4日土曜日

日本MSがWindowsPCの節電に関する実験データを公開したみたいです


5月10日の話なので、皆さんの中にはもうご存知の方も多いかもしれませんが、
マイクロソフトが、WindowsPCの節電に関する実験データを公開していたので、
少しご紹介したいと思います。

それによると、個人の設定変更や工夫によって、1台のPCあたり訳30%(16ワット)の節電が可能となるそうです。
まぁ、私は基本マックなので、あんまり関係ないんですけどね。

WindowsPC節電術(マイクロソフトHP)



2011年5月26日木曜日

CSS3 PIE(PIE.htc)の使い方と注意点まとめ


CSS3をIE6~8でも機能させる事が出来るbehaviorスクリプトの『CSS3 PIE』

CSS3 PIEを使用する事で、IE6〜8においても以下のスタイルを適用する事ができます。
  • border-radius(ボックスを角丸にする)
  • box-shadow(ボックスに影をつける)
  • border-image(境界線に画像を使用する)
  • multiple background images(背景に最大4つの画像を使う)
  •  linear-gradient as background image(背景にグラデーション)
ちなみに、opacitytext-shadowは使用出来ません。

1行追加するだけの簡単なコードで、IE6〜8にもCSS3が適用され、
他の似たような機能のスクリプトよりも対応しているスタイルが多い事で、人気のスクリプトですが、実際使用してみると思いのほか上手く行かない!なんて人も多いのではないでしょうか??

『CSS3が適用される』と言ううたい文句ではありますが、
実際には『"CSS3風"のスタイル表示がIEでも表現できます』という意味合いに近く
モダンブラウザでコーディングするように使用すると、意外な所で痛い目に合います。

かくいう私も、CSS3 PIEのおかげで半日程潰されました。。

「CSS3 PIE」で調べればいくらでも解説のサイトはありますが、
備忘録の意味も含めて、私もまとめをメモしておきます。
 
※11/06/17一部追記致しました。