Firefoxの開発ツールで色覚シミュレーターを有効にする方法
さまざまな色覚タイプの見え方をシミュレートする機能がFirefoxに搭載されていたのご存知でしたか？僕は知らなかったんですが、実はこの機能、デフォルトでは有効になっていないので設定の方法をメモっておきます。メモっておかないと忘れそうなんでw 以下、Mac版Firefox 76.0.1で確認をしました。 1. シミュレーション機能を有効にする アドレスバーに「about:config」と入力して「gfx.webrender.all」を検索します。設定値が「false」になっているので切り替えのアイコンをクリックして「true」にします。 ちなみに、「NVIDIA製GPUを搭載する一部のWindows環境で、『WebRender（Quantum Render）』がデフォルトで有効化された 」とのことで、gfx.webrender.allをtrueにしなくてもシミュレーション機能が使える場合があ
さくらのレンタルサーバー上のWordPressの常時SSL化でハマりまくったのでシェアしておきます
さくらのレンタルサーバーで無料SSL証明書が使えるようになったということで、このブログも常時SSL化してみました。やっぱりブラウザに緑のロックアイコンが表示されてると安心しますねw さくらのレンタルサーバーの無料SSL証明書の設定はすごく簡単で、説明通り にやればものの5分くらいで設定できちゃいました。設定後しばらくしたらすぐにhttpsでサイトにアクセスできるようになったので「お、楽勝か！？」と思ったのですが、そんなことはありませんでした。 このブログはWordPressを使ってるんですが、さくらサーバー特有の設定とかテーマのテンプレートに使っていた古い関数とか、けっこういろいろなところでハマったのでメモっておきます。 サーバー環境やWordPressについて 一応、ざっくり環境を書いておきます。 さくらのレンタルサーバーのスタンダードプランを独自ドメインで使ってます WordPress
iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
レスポンシブに対応できてCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい
ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応できて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に短し襷に長し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できるものは利用したい。 で、やっと「これなら！」というやつに出会いました。 Slider ProというjQueryのプラグインです。なかなか良さそうです。 ただ、使ってみてハマったところがいくつかあったので書き残しておきたいと思います。 「jQuery オワコン 」がうたわれる昨今ではありますが、今後、Slider Proを使ってスライダーやカルーセルを実装する方の参考になれば幸いです。 Slider P
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
モバイル対応でレスポンシブWebデザインとSEOが向かう先（前編）
かなり久々の投稿になってしまいましたが、今回はレスポンシブWebデザインとSEOについて、最近考えていることや調べていることを整理してみました。若干長めの文章ですが、久々にお付き合いください！前・後編の2回に分けて公開する予定です。 では、さっそく本題に入ります。 検索エンジンからのトラフィックの流入に収益を依存しているビジネスの場合は特に、SEOはビジネスの死活に関わる大きな問題です。80〜90%のトラフィック流入元がGoogleの自然検索というサイトも少なくないのではないでしょうか？現在、制作を手伝わせてもらっているサイトも自然検索からの流入が多いサイトで、モバイル対応にもUXへの影響だけでなく検索エンジンの評価への影響も考慮して、かなり慎重に進めています。 そこで、今回の投稿では、デスクトップ向けのウェブサイトをレスポンシブWebデザインでリニューアルする際、また、デスクトップにしか
レスポンシブな時代に必要なWebディレクターの7つの心得
先日、僕の恩師のウェブ制作会社で開催された勉強会で「レスポンシブWebデザインのワークフロー」についてお話させていただいたんですが、その際に「意思決定層との密なコミュニケーションをとり、スムーズに開発を進めていくために、苦労した点や工夫した点」について質問をいただきました。その回答をまとめたので、このブログでも共有したいと思います。今回まとめたものはレスポンシブWebデザインでの制作に特化した内容ではないですが、以下に挙げるようなWebディレクターとしての基礎知識やスキルが、レスポンシブWebデザインのような柔軟な対応を強いられる制作では大切になると感じています。 Question: 意思決定層との密なコミュニケーションをとり、スムーズに開発を進めていくために、苦労した点や工夫した点を教えてください。 Answer: どれもディレクターとして基本的な内容になりますが、僕は以下のようなことを
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも
レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。まだβ版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。 メディア・クエリの確認 インスペクターを開くと、以下のように閲覧しているページに設定されているメディアク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
