Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境 フロントエンドの開発を色々と捗らせてくれる gulp について、ここ最近、私が利用しているパッケージの紹介を中心に、主に Web サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。 gulp v4 が正式リリースされたため、本記事で紹介していた gulpfile.js ファイルの記述方法を v4 にあわせて修正しました。詳しくは 「gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点」 をご覧ください。 もう 4年くらい前になりますが Web デザイナーさん向けみたいな感じで、所謂 「黒い画面」 にあまり普段から慣れていない方向けの Grunt 導入記事を書いたんですけども、内容的にはもう古いし、Grunt いいよって紹介
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
SVGO は SVG ファイルから不要なデータを取り除いたりして最適化してくれる便利なソフトウェアですが、これをブラウザの画面から使えるようにしたのが、「SVGOMG」 です。 SVGOMG SVGOMG ： GitHub 例えば JPEGmini の Web 版とか TinyPNG のような画像最適化ツールがありますが、これの SVG ファイル向けですね。ブラウザから簡単に操作できますし、最適化オプションの適用も画面上で SVG ファイルの変化を確認しながら行えますのでわかりやすいと思います。 SVGO には下記のようなオプションが用意されていますが、 cleanup attributes from newlines, trailing and repeating spaces → 属性値内の重複する空白や改行を削除 remove doctype declaration → DOCTYP
normalize.css 6.0.0 がリリース、作者の意見的意味合いが強かったスタイル定義を削除
normalize.css 6.0.0 のリリースで、それまで入っていた、純粋なブラウザ間の差異を吸収する目的からは少し外れた "opinionated" なスタイル定義がすべて削除されました。 所謂、リセット CSS （Reset CSS） の一種である 「normalize.css」 は、Web 制作界隈の方々にとっては馴染みのあるスタイル定義集で、お世話になっている方も多いのではないでしょうか。 先日、この 「normalize.css」 の最新版として、「6.0.0」 がリリースされましたが、作者である Jonathan Neal 氏の意見的意味合いが強かったスタイル定義がすべて削除されるなど、比較的大きな修正が入っています。 Normalize.css : Make browsers render all elements more consistently. necolas/n
Flickr が Pinterest 対策。一部写真で Pin を無効に
Pinterest が先週、コンテンツホルダーに配慮して導入した、公式ブックマークレットからの Pin を無効にする 「nopin」 コード （Pinterest 公式 Blog の該当記事） に Flickr が対応、写真のライセンスや公開設定によって、この Pin 無効コードをページに挿入するようになったようです。 Flickr disables Pinterest pins on all copyrighted images (exclusive) ： VentureBeat Pinterest の Pin 無効コードに関しては、Pinterest のヘルプにその記載がありますが、Pin されたくない写真が掲載されたページの head 要素内に、1行、meta タグを入れるだけ。 What if I don't want images from my site to be pinne
Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる
Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという問題について、CSS の仕様を基に考えてみたいと思います。 Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。 Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ： Cherry Pie Web 要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Wi
CSS で計算（四則計算）が行える calc() 関数を使ってみよう
CSS プロパティに指定する値を計算式で書くことができる仕様、calc() 関数について、具体的なサンプルソースをそえて解説してみたいと思います。 CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。 ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。 Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に なお、上記記事でも書いたとおり、calc() 関数は現時点で IE （IE11）や Edge を始め
Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
5分でわかる Blog を Facebook インスタント記事 （Instant Articles） に対応させる方法
運営中の Blog などから Facebook インスタント記事 （Instant Articles） 向けの RSS フィードを配信してインスタント記事に対応させる手順を解説しています。 Facebook インスタント記事 （Instant Articles） は、インターネットメディアなどが、Facebook 内で自分たちの記事を配信することができる仕組み。ユーザーは Facebook アプリ内で記事を受け取り、閲覧してそれをシェアしたりすることができます。 簡単に言ってしまえば、Facebook アプリ自体がニュースリーダーになるような感覚で、ユーザーは Facebook の外に出ることなく、記事を読むことができるのと、記事自体も専用フォーマットによって読み込み速度が速く、快適な閲覧ができるというのが売りになっています。 元々は一部の限られた大手メディア （例として The New
Firefox 39 が正式リリース、CSS Scroll Snap Points のサポートなど
ここ最近 Blog の更新サボりすぎて、Firefox のアップデート情報しか書いていない気もしますし、Firefox 39 のリリースからもうかなり時間経っちゃってるんですが...... とにかく、Firefox の最新版、Firefox 39 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。 Firefox 39.0 リリースノート Android 版 Firefox 39.0 リリースノート Firefox 39 for developers ： MDN CSS 関連では、list-style-type プロパティの値に <文字列> が指定できるようになった他、CSS Scroll Snap Points のサポートが行われ、例えばタッチデバイスにおけるスワイプ操作などで行われる要素の上下左右へのスクロールの挙動を細かく制御することが可能になりました。
1990 年代後半から CSS を触っている私が当時の記憶を振り返る、CSS 昔話
この記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。 面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。 私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年近く前の話...... もう昔過ぎてあまり明確には覚えてないんですけども、私が CSS というか、HTML をはじめとした、今でいう Web サイト制作関連の技術に興味を持ちだしたのは 1996年ごろ。 アトランタオリンピックが開催された年で、Yahoo! Japan がサービス開始した年らしい。テレビやラジオをつければ小室哲哉氏プロデュースの曲ばっかり流れていた記憶が。 当時、専門学校でメカトロ
Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に
現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。 4.5 Character range: the unicode-range descriptor - CSS Fonts Module Level 3 Editor's Draft 27 October 2014 unicode-range デスクリプタの使い方 こういう指定が妥当というか実用的かは別として、
Bootstrap 4周年の記念日に Bootstrap 4 の alpha 版がリリース
2011年 8月 19日に公開された Bootstrap は 2015年 8月 19日で 4回目の誕生日を迎えたそうですが、この記念日に Bootstrap 4 のアルファ版が最初のリリースをされました。公式 Blog にて紹介されています。 Bootstrap 4 alpha ： Bootstrap Blog Bootstrap 4 Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we're finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 alpha ： Bootstrap Blog から引用 テンション高い。 ち
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
Web アクセシビリティを身近に感じてもらうためのごく簡単なお話
この記事は、Web Accessibility Advent Calendar 2014、1日目の記事です。去年は WAI-ARIA の導入方法について、ごく初歩的な記事を書いたんですが、今年は初っぱな、1日目の記事と言うことで、ごくごく簡単な記事でハードルを下げにいってみようかと思います （余計なお世話）。 さて、「Web Accessibility （ウェブアクセシビリティ）」というと、高齢者や障害者向けなど、限られた一部 ※1 の人達に向けて、特別な対策を取ることだと思っている方もいると思いますし、これは Web サイト制作を仕事にしている人の中にも同じような考えの人、いるんじゃないでしょうか。 確かに、WCAG （Web Content Accessibility Guidelines） だの、JIS X 8341-3 だの...... あるいは、WAI-ARIA だの、支援技術が
Google+ ウィジェットの JavaScript コードに async / defer 属性がついた件
Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などの JavaScript コードすべてに、async / defer 属性が付与されるようになりました。 Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などを Web サイトに設置する際に使用される JavaScript のソースコードがありますが、これらソースコードに、script 要素の async / defer 属性が付与されるようになりました。 Googleの Ilya Grigorik 氏が自身の Google+ に投稿しているほか、実際のソースコードにもすでに反映されています。 All Google+ widgets have been updated to use the script[async + defer] pattern!... ： Ily
主要ブラウザにおける SSL 3.0 無効化タイミングのまとめ
SSL 3.0 の脆弱性 （POODLE） の件で、10月に下記の記事を書いたんですが、その中でも触れた、各主要ブラウザにおける SSL 3.0 無効化タイミングだけ、わかりやすいように抜き出してこちらにまとめておこうと思います。メモ代わり。 SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ Internet Explorer SSL 3.0 が無効になる時期： 正式な時期は不明だが、数ヶ月以内 米国時間の 2015年 4月 14日以降、デフォルトで無効に。 「マイクロソフト セキュリティ アドバイザリ 3009008」 内では、下記の通り、（10月 15日から起算して） 数ヶ月以内に IE の既存設定 （および同社のオンラインサービス） で SSL 3.0 が無効になる旨がアナウンスされています。 マイクロソフト
GIF に変わると噂の XNG という新しいアニメーション画像フォーマットを調べてみた
ネタにマジレスな感じもしないでもないですが、GIF に変わるという新しいアニメーションフォーマット、「XNG」 が開発されたなんて話題になっていましたので、簡単にその仕組みを調べてみたのと、実際に XNG ファイルを作ってみたので書いています。 ネタにマジレスな感じもしないでもないですが、GNOME （X Window System 上で動作するデスクトップ環境） の開発者である Jasper St. Pierre 氏が、GIF に変わるという新しいアニメーションフォーマットを開発したとのことで話題になっていました。 彼自身の Blog でも書いているほか、日本語では GIGAZINE さんが取り上げていましたが、興味本位からちょっと中身を調べてみたので書いてみます。ついでに実際に XNG ファイルを作る方法にも簡単に触れています。 XNG: GIFs, but better, and a
Google ウェブマスターツールに 「モバイル ユーザビリティ」 レポートが追加
Official Google Webmaster Central Blog で紹介されていましたが、Google ウェブマスターツールに新たに 「モバイル ユーザビリティ」 の項目が追加されました。自サイトのモバイル ユーザビリティを向上させるヒントが表示されるようになっています。 Tracking mobile usability in Webmaster Tools ： Official Google Webmaster Central Blog モバイル ユーザビリティ ： ウェブマスター ツール ヘルプ すでに日本語でも表示されるようになっていて、 固定幅のビューポート フォントサイズが小です ビューポートが設定されていません タップ要素同士が近すぎます コンテンツのサイズがビューポートに対応していません といった項目でレポートが表示されます。 PageSpeed Insight
bit.ly が Google セーフブラウジングで不正なサイトとしてブロックされてる件
さっき気がついたんですけども、短縮 URL サービス bitly が提供しているドメイン 「bit.ly」 が Google セーフブラウジングでブロックされてしまっているようで、短縮 URL を使用して投稿したツイートなどのリンクが Firefox や Chrome で開けなくなってました （2014年10月25日 16:30 現在）。 追記あり。復旧したようです。現在では通常通りアクセスできます。 biy.ly から始まる短縮 URL に Firefox でアクセスすると下記のような警告。 Chrome の場合は下記。 ということで、biy.ly に関する Google セーフブラウジングのレポートを見てみると、不正なサイトと認識されてしまっているのがわかります。 実際のレポートは下記で見られます。 Google セーフ ブラウジング診断ページ : bit.ly bit.ly 使えない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
