もう、SP用のWebデザインを倍の解像度で作るのをやめよう
デザイナーがコーディングできるべきかという議論がSNS上で白熱していますが個人的にはあまり興味がなく、コーディング経験の有無に関係なくWebに適したデザインデータを作ってもらえたらあとはフロントエンドの領分であると思っています。 とはいえ、Webに適したデザインデータをつくれないデザイナーが多いのでああいった議論が白熱するのではないかとも思っています。 Webに適していないデザインデータとはどういったものかというと、古くから言われているものではPhotoshopの『乗算』を使うとCSSで表現できないためダメというものがあったりします。 CSSでもmix-blend-modeという機能で対応できるけどブラウザの対応状況を鑑みるに、よほどの理由がないかぎりPhotoshopの『乗算』を使っていはいけないのが今の現実です。 参考：mix-blend-mode - CSS: カスケーディングスタイ
Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！
Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元 ： Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元の記事にはいくつか疑問に思われる点があるので私で調べた内容をまとめておきます。 前置きとしてデバイスフォントの話となり環境によって異なる結果がでる可能性があることを前提に読んでください。 font-familyで「游ゴシック」を指定した場合に採用されるフォント まずは以下の箇所 そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。 WWW WATCHさんで指摘(Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる)されている通りこれが事実ならW
ユーザーがページのどこをクリックしたか解析するツール[to-R]
ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか？ 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず
![ユーザーがページのどこをクリックしたか解析するツール[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0330939009a892e86a58d7eebfca00c0ecd1fe43/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20070820_01.jpg)
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
透過PNGの罠の解決法
透過PNGの罠の解決法 AUSGANG SOFTさんが透過PNGの罠としてAlphaImageLoaderフィルターの問題点を指摘されています。 ブロックレベル要素に対してAlphaImageLoaderフィルターを使用した場合、内包するa要素のハイパーリンクが押せなくなるようです。 目から鱗ですね。 そんな問題点があるのは全く知らなかったです。 解決方法をいろいろ模索してみたのですが、AlphaImageLoaderフィルターを指定している要素内のa要素のposition属性にrelativeを指定すれば解決できます。 ボクが配布しているalphafilter.jsはハイパーリンクに対応済みなのでぜひ使ってみてください。 ついでにimg要素のalign属性にも対応しておきました。 ライセンスもMITライセンスに変更しました。 関連エントリー アルファ画像を扱うalphafilter.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
