おいしいパンくず、書いてますか？ ということで？！ 『構造化データを含むパンくずの書き方』、というか『Googleの検索結果にパンくずのリッチリザルトを表示する方法』について簡単に説明していきます。 リッチリザルトとは？ 普段何気なく目にしている、この検索結果画面。 こういった画面上で、通常のフォーマットとは異なる表示項目が「リッチリザルト」です。 （「リッチスニペット」と呼ばれることもあるそうです） パンくず以外にも、レシピの載った料理の画像や飲食店の評価/レビュー数など、目にしたことがある方は多いのではないでしょうか。 Google の検索ギャラリーを見ると、 いろいろな種類があることが分かります。 ▼検索ギャラリー https://developers.google.com/search/docs/guides/search-gallery?hl=ja むしろ、パンくず部分がリッチリ

母さんです。 なぜ「母さん」であるかは、まだ置いておきましょう。 スマートフォンやタブレット端末が急速に普及し、時代の風潮が「モバイルファースト」に移り変わってからというもの、わたしたちは多くのWebサイトをレスポンシブで設計・構築するようになりました。 制作する数は増えど、レスポンシブは何かと悩みが絶えないものかと思います。 例えばこんな・・・ こんな悩みをお持ちの方に、マークアップエンジニアとしてわたしが言えることは、 「ブレークポイントについて理解すれば、デザインも実装ももっと自由にできるはず！」 ということです。 というわけで、「リキッドレイアウトを活かした可変するデザインを作れるようになる！」を目標に、この記事ではレスポンシブ・ブレークポイントに関するお話をまとめます。 デザインするひともマークアップするひとも、みんな一緒に集まって相談だ！ レスポンシブで可変するデザイン ひとま

お疲れ様です、大塚です。 2016年1月12日にInternet Explorer 8（以下、Internet ExplorerはIEで表記）のサポートが終了して、約9ヶ月経過しました。 Web制作業界的にも、IE対応が9以上になったプロジェクトも多いのではないでしょうか？ 古いブラウザを切り捨てることにより、デバッグの時間も短縮されたかと思います。 また、今まで使えなかった要素を積極的に使えるようになり、表現の幅も広がりました。 たとえば、video要素。 採用情報 / 株式会社LITALICO 様 こんな感じで、メインビジュアルの背景が動画になっている演出は、静止画だけでは伝わらない情報をユーザーに届けることができます。 じゃあ、実際にコーディングしていこう！。。。。と、いきたいところではありますが、その前に、video要素の基礎をおさらいしましょう。 何事も、基本を疎かにしてはダメな

最近のWeb開発では必須！超簡単にNode.jsのバージョンを管理できるツール「nodebrew」を導入しよう（Mac編） HomebrewNode.jsnodebrewnpm 名古屋オフィスのコクシンです。 gulpなどタスクランナーの登場で需要マシマシなNode.jsですが、みなさんはNode.jsのバージョンを気にかけたことはありますか？ Node.jsのバージョンによってはモジュールが動かなかったりするので、指定されたNode.jsバージョンへ切り替える必要があります。 ただ、毎回アンインストールとインストールを繰り返してバージョンを切り替えるのは面倒ですし時間の無駄ですよね。せっかく新しいプロジェクトが始まる前だっていうのに、このバージョンの切替作業のせいで出鼻をくじかれた感が出てしまいます…。 今回は、そんな時に役に立つ 超簡単にNode.jsのバージョンを管理できるツール「n

あなたを優しく、包みたい。 茂った木の葉の間から漏れてさす日の光のように・・・ チョヌン、茂吉イムニダ。 前回はvelocity.jsのオプション機能についてご紹介しました。 velocity.jsは普段からjQueryに触れている方にとっては理解しやすく、アニメーションの滑らかさや実行速度の軽快さなどのメリットを感じてもらえたのではないでしょうか。 今回はCSSアニメーションのイージングとdurationについて書いていきたいと思います。 「イージングの値はだいたい”ease”です。」「durationは大抵同じ値です。」という方、気軽にご一読ください。 いつもの実装に少し手間を加えるだけで、サイトの印象をグッと良くする方法を紹介したいと思います。 CSSアニメーションを実装するためのtransitionプロパティ transitionプロパティは、transition効果（時間的変化）

どうも、茂吉です。 突然ですが、あなたのアニメーション、動きがカクついていませんか？ 「カクつきは感じているが仕方ない。」と思っている方、 滑らかなアニメーションにすることができます。 「いいえ。カクついてなどいません。」と思った方、 実はカクついていることに気づいていないだけかもしれません。 velocity.jsは、jQueryの.animate()よりも実行速度が早く、動きが軽快で多機能な拡張ライブラリです。 実際にjQueryとvelocity.jsを比べてどれだけアニメーションが滑らなのか、 まずはデモをご覧下さい。 デモページはこちら 2つを比較してみてどうでしょうか？ 普段使っているjQueryはvelocity.jsと比べて動きにカクつきがあることがわかります。 本記事ではvelocity.jsを使ったことがない、使い方がわからない方を対象に、 velocity.jsの基本

こんにちは。名古屋オフィスのコクシンです。 Webサイト制作で欠かせない工程にブラウザごとの動作検証（ブラウザチェック）がありますが、なかなか実機と特定のバージョンのブラウザを揃えるのって難しいですよね。 ChromeやFirefoxならどのOSにもインストールできるので準備も検証も簡単ですが、iOS SafariやAndroid Browser、Internet Explorerなどの固有のデバイス・OSにしかインストールされないものとなると非常に厄介です。 そこで今回は、iOS Safari、Android Browser、Internet Explorerといった主要ブラウザを1台のMacの仮想デバイス上で実行し、簡単にブラウザチェックする方法をご紹介します。 iOS Safari を仮想環境で実行する まずは、iOS Safariを仮想環境で実行してみましょう。 実行するためには、

ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer

今年も残すところあと3ヶ月。なんて早いんだ！と思う季節になりましたね。 どうも、sugiです。 前回「Photoshopでのスライス作業を効率アップし、コーディング時間を短縮するための3つの方法」という記事を書きましたが、「時間の短縮」に関連して今回は「Webページの表示速度の短縮」についてお話ししたいと思います。 Webページの表示速度を上げることの重要性 昨今「モバイルファースト」という言葉がよく聞かれるようになりました。 ここ数年でインターネット利用のうちスマホでのアクセスが飛躍的に伸びてきているといわれており、GoogleもWebサイトがモバイル対応されているかどうかを重要視しています。 すなわちスマホサイトの重要性が増してきているということになります。 弊社の制作現場においても、多くの案件で「レスポンシブサイト」もしくは「PCサイト＋スマホ最適化サイト」という制作要件が入ってきて

オフィスおかんで、おやつ代わりに玄米ばかり食べています。 あれは腹持ちが良くて素晴らしい。 母さんです。 なぜ「母さん」であるかは、もうちょっと置いておきましょう。 最近社内で 「XAグループ※はSlack使っているらしいね。あれってどうなの？」 と聞かれることが多くなりました。 ※XAグループ ･･･ わたしたちフロントエンドエンジニアが所属しているグループ Slackについて質問されることは主に、 Skypeとの違いをどのようなところに感じているか ツールそのものの使い勝手はどうか チャット以外にどのような使い方をしているか と、だいたいこんな感じです。 今回はこういった身の回りでよくある質問に対してザックリお答えします。 が、それ以上に、その前提にある 『コミュニケーションツールを使うことについての考え』 をまとめていきたいと思っています。 なので、Slackからリリースされている各