Facebook公式アイコン（ロゴ）のダウンロード手順＆注意点を解説！
ホームページなどでFacebookの公式アイコン（ロゴ）を使いたいと思った時、皆さんはどのようにしていますか？ Facebookでは、ブランドリソースセンターで各種素材を配布しており、公式アイコンもダウンロードが可能です。しかし、意外にも手順が多かったり、ガイドラインが細かいため、いざ使いたいと思ってもダウンロードで手こずって……という方も少なくありません。 そこで今回は、Facebookの公式アイコンを使うためのダウンロード方法から、ガイドラインまでを詳しく紹介します。ホームページ、紙媒体などでこれから公式アイコンを使用しようと思っている方は、ぜひ手順などを参考にしてください。 目次 利用できるFacebook（フェイスブック）の公式アイコン（ロゴ）の種類 Facebook（フェイスブック）の公式アイコンのダウンロード方法 Facebook（フェイスブック）ブランドリソースセンターにアク
Mocka - モックアップの作成に使えそうなplaceholder
Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。 そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供します。 Mockaの使い方 実際に使う時のHTMLです。 <div class="mocka-container"> <span class="mocka-media"></span> <span class="mocka-heading"></span> <span class="mocka-text"></span> </div> こうすると表示が次のようになります。 四角いグレーの枠ですが、なんとなくそれっぽく表示されているのが分かります。画像部分はアニメーションしな
フロントエンドにおける「表示系バグのデバッグ効率化」を考えるのに役立つツールやTipsまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 画面の表示系のデバッグって、面倒で大変ですよね。 今回は、フロントエンドの開発での、表示系のデバッグを効率化するために普段使っているツールや手法をご紹介したいと思います。 便利な検証環境/ツールを用意する Macで開発している場合、IEでの表示確認を都度実機で確認するのはとても面倒です。また、都度FTPアップしないと修正の確認ができないのも、とても不便です。 まずはそれらを解決するツールを2つご紹介します ModernIE（with VirtualBox） https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/#downloads ModernIEは、Microsoftが公式に提供しているIEテスト用の仮想マシンです。 MacでもIEブラウザを動かして検証することがで
美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」 – bl6.jp
PIGNOSE Calendarは、美しくてシンプルな操作性によるデートピッカーを実装することができるjQueryプラグインです。カレンダーを表示させて、その中からユーザーに好きな日付を選択させることができます。 モバイルフレンドリーで複数の言語もサポート 以下、PIGNOSE Calendarの実際のデモページです。 デモ デモページにはたくさんの種類のデートピッカーが用意されています。あらかじめカレンダーが表示されているものからクリックでカレンダーを表示させるもの、ダークテーマ、ブルーテーマ、スケジュールカレンダー、日付の範囲指定ができるものなど、さまざまなタイプのデートピッカーがあります。 カレンダーのデザインもシンプルでクリーンでとても見やすいですね。ダークテーマやブルーテーマなどいくつかのテーマも用意されているので、自サイトに合わせたデザインにセッティングすることも可能です。 ち
いざというときに便利そうな、ちょっと変わった珍しいアイコンセット - NxWorld
汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。
Highcharts.jsでドーナツグラフを表示させたい！ーその３.タイマー機能を作る | バシャログ。
『ドラゴンクエストⅪ』を、嫁の分も合わせて2本予約をした kouraku です。 『GUNDAM VERSUS』は7月6日発売、そして『ドラゴンクエストⅪ』は7月29日発売・・・ 今からこの怒涛の7月をどう乗りこなすか、悩み事は尽きませんね。 さて今回は、前回作成したドーナツグラフを元に、更に応用してタイマー機能を作っちゃおう！ という内容をメモメモ。 【前回の記事】 【この記事で必要な知識】 HTML/CSS JavaScript jQuery 前回のおさらい 前回作成したドーナツグラフは、以下のようなものでした。 今回は、このサンプルを元にタイマー機能を作ります。 タイマー用にHTMLを変更する まずはHTMLを少しだけ変更します。 [pug] .wrap #container .count-wrap .num 60 ドーナツグラフを表示させる #container を .wrap で
Dropbox Paper の新機能！画像を使った共同作業がより簡単に
0 0 1 0 雑誌用の写真を整理したり、ロゴ デザインの候補をいくつかチェックしたりする際に、画像やマルチメディア ファイルに手間取ることなくスムーズに作業ができたら、アイデア出しにもっと集中できますよね。 本日は、そんな要望にお応えする Dropbox Paper の新機能をご紹介します。写真やデザイン ファイルをチームで共有して、アイデアを出し合ったりフィードバックをしたりすることが今まで以上に簡単になりますので、ぜひご活用ください。 キャプション機能で画像の説明が可能に 画像にキャプション（説明文）を付けられたら、チームで共有する際その画像の説明をする手間が省けて便利です。Paper の最新機能では、コメントをするのと同じ要領で画像にキャプションを挿入できます。キャプションは画像に紐づけられるため、画像の位置を変更してもキャプションは同じ画像に付いていきます。レイアウトが変更されて
アニメーションするシンプルなプログレスバー実装「Jquery Line Progress Bar」:phpspot開発日誌
アニメーションするシンプルなプログレスバー実装「Jquery Line Progress Bar」 2017年06月14日-
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
ワープするようなエフェクトを実装できる「Warp drive jQuery plugin」 – bl6.jp
Warp drive jQuery pluginは、ワープするようなかっこいいエフェクトを実装することができるjQueryプラグインです。ファイル容量も軽量なほか、HTML5のCanvasをベースにしているとのこと。 マウスを動かせばそれに合わせて視点が追従 以下、Warp drive jQuery pluginの実際のデモページになります。 デモ デモページにはいくつかのデモが設置されており、各デモにマウスオーバーすると、まるで宇宙空間をワープしているかのようなエフェクトを体感できます。マウスを上下左右に動かすことで、視点もそれに追従して移動します。 ワープ中はかなりダイナミックな動きになるので、ユーザーにも強い印象を与えることができそうですね。 デモには黒、青、赤、緑、紫など、いろんな色のタイプが用意されています。1番下のデモには真ん中にロゴも表示させています。SFチックなデザインを採
Gist HTML Preview - GistのHTMLを取得してプレビュー
Gistはちょっとしたコンテンツを載せておくのに便利ですが、セキュリティ上の制限も幾つかあります。例えばHTMLを書いてもソースが表示されるだけでHTMLページとして表示はできません。 そこで使ってみたいのがGist HTML Previewです。Gistで書かれたHTMLを表示してくれるソフトウェアです。 Gist HTML Previewの使い方 メイン画面です。基本的にはGistのIDを入れるだけです。 そうするとHTMLコンテンツが表示されます。 Gist HTML Previewの仕組みとしてはJavaScriptでHTMLコンテンツを取得して、それをそのままdocument内に展開しているようです。サーバサイドがなくとも動いている辺りが面白いです。 Gist HTML PreviewはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit
スマホWEBでの画像表示をもっと便利にする「SmartPhoto.js」:phpspot開発日誌
ECサイトなどに使える画像のカーソル部分ズームjQueryプラグイン「xZoom」:phpspot開発日誌