Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる
Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという問題について、CSS の仕様を基に考えてみたいと思います。 Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。 Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ： Cherry Pie Web 要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Wi
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
勉強会スライド 「2015年の Web サイト制作界隈 その傾向と対策」
クライアント企業で実施した Web クリエイター向け社内勉強会用スライドを公開します。 本勉強会の対象者は Web サイト制作会社の営業担当者、ディレクタ－、デザイナー、コーダー / フロントエンドエンジニアの方々。Web サイト制作業界に関係する、近年から今年注目の傾向とその対策についての内容で、実際の発表時間は約 90分でした （質疑応答除く）。 2015年の Web サイト制作界隈 その傾向と対策 もともとは今年の 1月にやる予定のネタだったのが都合により 2月に伸びたもの。なのでタイトル的には年始感強いです。でもそのおかげで少しスライドに追記ができましたけど。 ちなみに、対象とした人がエンジニアさんだけではないので、あまり技術的な深い話とかはせず、さらっと傾向をなぞっているだけですので、そんなに目新しいことは言ってないかも。 ところで、今までセミナーとかやっても資料を公開したことあ
Dropbox の 2段階認証を Google Authenticator を使って設定する
2段階認証というと、SMS や音声通話でセキュリティコードを受け取るイメージがありますが、アプリでも可能で、さらに TOTP に対応したアプリであれば複数の Web サービスのセキュリティコードを 1つで管理できます。ここでは Dropbox の 2段階認証を Google Authenticator を使って設定する方法を紹介します。 皆さん、2段階認証使ってますか？ 2段階認証を突破する方法なんかも取りざたされたりしている昨今ではありますが、とはいえアカウントへの不正アクセスを防ぐためには有効にしておいた方がいい 2段階認証。 Google の 2段階認証はよく取り上げられますが、それ以外にも Apple、Amazon （AWS）、Dropbox、Evernote、Facebook、GitHub、Microsoft、Twitter、Yahoo! 等でもこの 2段階認証は使用できます。
HTML5 仕様 （WHATWG） に picture 要素が追加される
WHATWG 版の HTML5 仕様に、picture 要素が追加されました。picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比やサイズなどに応じた、複数イメージソースの出し分けが可能になります。 Simon Pieters 氏 （Opera Software） のツイート経由ですが、WHATWG 版の HTML5 仕様に、picture 要素が追加されたそうです。 picture 要素は、所謂レスポンシブ・イメージ （Responsive images） を実現するための要素で、picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比やサイズなど
5分でわかる Swarm の使い方と Foursquare の変更点
Foursquare がリニューアルし、従来のチェックイン機能などを新しいアプリ 「Swarm」 に分離。Foursquare はスポット検索に特化したアプリとなりました。ここでは 「Swarm」 アプリの使い方と Foursquare の変更点を解説しています。 ある場所への、所謂チェックインを共有するロケーションベースのソーシャル・ネットワーキング・サービスとして人気の Foursquare は日本でも使っている人が多いと思います。 今月 1日ですが、その Foursquare が大きな方向転換をし、Foursquare アプリから主要機能だったチェックイン機能を削除、この機能を独立したチェックイン専用アプリ 「Swarm」 に移行、従来の Foursquare アプリはクチコミによってお店やスポット情報を検索するツール （Yelp とか 30min. みたいな感じ） に特化すると発表
富士通アクセシビリティ・アシスタンスが提供終了。感謝と共に代替手段も紹介してみる
富士通さんが、2004年より無償ダウンロード提供していた視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群 「Fujitsu Accessibility Assistance （富士通アクセシビリティ・アシスタンス）」 が 2013年の 8月 20日をもって、無償提供を終了するそうです。 富士通、色覚障がい者のための診断ソフトウェア無償提供8月20日をもって終了：「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。 ： ＠IT 富士通アクセシビリティ・アシスタンス ： 富士通 富士通アクセシビリティ・アシスタンスは、2003年から公開されていた 「Web Inspector （ウェブインスペクタ）」 に、「Color Selector （カラーセレクター）」、「Color Doctor （カラードクター）」 を加えた、3つのソフトウェアからなる、アク
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
FTP の危険性に関して超簡単まとめ
今日話題になった Gumblar の亜種によって FFFTP の設定情報から FTP 情報が漏れる件で、FTP 自体の危険性と FFFTP 自体の特性、さらに Gumblar 対策という点で少し情報が混乱している状況が見受けられます。そこでその点を簡単にまとめてみました。 去年あたりから、「Gumblar （ガンブラー）」 に代表されるような、FTP のアカウント情報を何らかの手段で盗み出して Web サーバにアクセスし、Web サイトを改竄して被害を広めていくタイプのウィルスが問題になっていますが、今日になって広く利用されているフリーの FTP クライアントである 「FFFTP」 にアカウント情報漏洩の危険性が見つかったということで話題になっていました。 「FFFTP」のパスワードが"Gumblar"ウイルスにより抜き取られる問題が発生 ： 窓の杜 ただ、この問題で、FTP 自体の危険性
5分でわかる foursquare の始め方
最近一部で話題になっているロケーションベースのソーシャル・ネットワーキング・サービス 「foursquare」 の基本的な使い方を解説しています。 Foursquare がリニューアルし、チェックイン機能が新しいアプリ、「Swarm」 に移行するなど大きく変更されました。詳しくはこちらの記事で書いていますのでご確認ください。 百式さんで取り上げられたからというのもあると思いますが、ここ数日 foursquare が話題です。 foursquare はロケーションベースのソーシャル・ネットワーキング・サービスで、GPS 機能付きのモバイル機器の使用が前提（*）です。単なるSNSではなく、ゲーム性を取り入れたというところが面白いところで、色々な場所（お店中心だと思いますが）に訪れて「check-in （チェックイン）」することで、その回数などに応じてバッジがもらえます。（ちなみにアメリカではお
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
5分でわかる Tumblr の始め方
すでに使っている人には今更なんですが、これから始めるって人向けに簡単なまとめ。 Tumblr といってもその用途は人それぞれ。自分の Blog として使う人もいるでしょうし、情報（ネタ）収集のツールとして使いたい人もいるでしょう。今回は情報収集 & クリッピングツールとしての使い方に主眼を置いて紹介してみようと思います。 アカウントを取得する とりあえず他の人をフォローしまくる ダッシュボードをしばらく眺めてみよう Reblog と Like Tumblr をもっと便利に使う Firefox を使え アドオン ： Tombloo と Greasemonkey を入れる ユーザースクリプト ： AutoPagerize, LDRize （+ Minibuffer）, ReblogCommand, play on tumblr を入れる マイページなんて飾りです iPhone と Tumblr
常用中 Firefox 3 アドオンのまとめ
1年に 1回は書いているこのネタ、懲りずに私が個人的に日常利用している Firefox アドオン（+ Greasemonkey ユーザースクリプト）を挙げてみました。Firefox 3 対応のアドオンのみを集めています。 1年に 1回は書いているこのネタ、懲りずに私が個人的に日常利用している Firefox アドオン（+ Greasemonkey ユーザースクリプト）を挙げてみました。Firefox 3 対応のアドオンのみを集めています。 アドオンはあんまり数多くインストールすると結構重くなるので注意してくださいね。その場合は、インストールしても、使うとき以外は無効にしておくなど工夫しましょう。メモリてんこ盛り PC ならあまり気にならないと思いますが。 今回は数が多いので大まかにグループ分けして紹介してみます。あと、特定のアドオンに依存しているものもありますので、その辺はまとめています。
1つの DB で MT4 を複数インストール
共有タイプのレンタルサーバなどを使っていて、1契約につき、DB が 1つしか使えないような場合ってよくあると思いますが、そこに例えばバージョンが異なる複数の M... 共有タイプのレンタルサーバなどを使っていて、1契約につき、DB が 1つしか使えないような場合ってよくあると思いますが、そこに例えばバージョンが異なる複数の MT をインストールして別々に使いたいなんてこともあると思います。 SQLite は別として、MySQL、PostgreSQL を使用して 1つの DB に複数の MT をインストールしようとすれば、テーブル名が同じになるのですべての MT から同じデータしか参照できません。この場合は、各 MT が生成するテーブル名がかぶらないようにして変更あげればいいわけですが、その変更方法をメモがてら紹介してみようと思います。 MT は、インストール時に 「mt_」 という接頭辞
div要素をクロスフェード表示するJavaScript | WWW WATCH
結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。 Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 （じゃなくてもいいんですが） をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。 デモがこちらで公開されています。 必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。 <script type="text/javascript" src="/js/bsn.Crossfader.js"></scrip
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
