プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css
デモ：ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
細かいパターンから木やレザーまで背景に使えるシームレスな素材のまとめ
35 Tiny Pixel Patterns 個人・商用利用無料 上の画像は一つのパターンに見えるかもしれませんが、4種類のパターンです。こんな感じの細かい柄が35種類揃っています。
ウェブデザイナーは要チェック！フラットに効く400種以上のカラーがセットされたスウォッチ素材
フラットなユーザインターフェイスを作成する際にぴったりな400種以上のカラーがセットになったPhotoshop用のスウォッチ素材を紹介します。 トレンドカラーとして、フラットに興味がない人でもカラーの引き出しが増えますね。 Photoshop Swatches Library for Flat UI Design スウォッチは上記ページの「Download .aco」から直接acoファイルがダウンロードできるので、そのファイルをPhotoshopのスウォッチパネルから「読み込み」や「置き換え」して利用します。 Photoshopに入れるとこんな感じです。 Photoshopのスウォッチ サムネール表示だと何があるのか分かりにくいので、半分くらいリストで紹介します。 半分でも長いので、分割で。 最初の方は、フラットデザインでよく見かけるカラーが豊富にあり、グレーも揃っています。
「.htaccess」の修正にいろいろ失敗してブログが表示されなくなっちゃった
キッカケは「Google Adsense」管理ページ いやあ～参った。久々で血の気が引きました。 今日、Google Adsenseの管理画面を見てみると、 お客様のサイトの特に多くの広告を掲載しているページを分析したところ、ページの読み込み速度に関する問題が検出されました。これによりユーザーの利便性に悪影響が出ている可能性があります。サイト内のアクセス頻度の高いページでクライアント側のキャッシュを最大限に活用できていません。 というメッセージが表示されていました。これがキッカケ。 当ブログは現在、いろいろ弊害があってWordPressのキャッシュ系プラグインを1つも使っていません。それもあって表示速度の遅さは以前から気になってました。 プラグインを使わなくても改善できるところはしなきゃな～、ってことでカスタマイズ開始。 Googleの「PageSpeed Insights」がなかなかイイ
JavaScriptで日付を扱うならこれ！「moment.js」
■ つかいかた（基礎編） ダウンロードしたmoment.jsをscriptタグで読み込ませたら準備完了です。 あとは下記のような実装で使用できます。 // momentオブジェクトを初期化して・・・ var m = moment(); // formatで出力! var output = m.format("YYYY年MM月DD日 HH:mm:ss dddd"); console.log(output); // => 2013年05月15日 12:34:56 Wednesday // 現在時刻 moment(); // ミリ秒で指定 moment(1368543600000); // タイムスタンプ（秒）で指定 moment.unix(1368543600); // Date.parseで解析可能な文字列を指定 moment("May 15, 2013"); // Dateオブジェクトか
Contact Form 7で本文に日本語が含まれていない時は送信できないようにする方法
最近このブログの問い合わせフォームから「ヴィトンを買ってください！安いですよ！」的な英文メールが届くようになりました。 ぼくヴィトンよりプラダの方が好みですし、そもそもこんなメールはお断りしたいところ。 CAPTCHA（ぐにゃぐにゃの画像のヤツ）を使うのはなんか屈した気がします。 そこで、Japanese Onlyなサイトには鉄板の方法「本文に日本語が含まれていない時はエラーを返す」ようにしました。 実装方法 functions.phpに以下を記述するだけ。 add_filter( 'wpcf7_validate_textarea', 'wpcf7_text_validation_filter_extend_kana', 11, 2 ); add_filter( 'wpcf7_validate_textarea*', 'wpcf7_text_validation_filter_extend
dribbbleデザイナーが今最も注目しているカラーをチェックできるツール -Color Pickers
デザインの宝庫dribbbleの素晴らしいアートワークで使用されているカラーをピックアップし、カラーのインスピレーションを得られる「Color Pickers」を紹介します。 UIも洗練されていて、操作も気持ちいいです。 Color Pickers 僕も毎日dribbbleをチェックしていますが、dribbleでは日々100以上のアートワークがアップロードされ続けています。Color Pickersはそれらのアートワークからどのカラーが前途有望で、人気が高いかをチェックできるツールです。 使い方は簡単で、右上のリロードボタンをクリックするだけです。IEは非対応です（涙。 任意のカラーが選択され、そのカラーをベースとするdribbleの最も人気が高いアートワークのパレットを表示します。
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春
見て楽しい触って便利な、最近リリースされたものを中心としたウェブデザインの配色設計に役立つオンラインサービスを紹介します。 まずは、気軽にカラーを楽しめるサービスから。
ねたわん@WordPress神推しブログ
Instagram Feed（Smash Balloon Social Photo Feed）は、スマートフォン向けの写真・動画共有アプリのインスタグラム（Instagram）に投稿した写真・動画を記事・サイドバーなどに […] 続きを読む
BackWPup - Webサイトを丸ごとバックアップできるWordPressプラグイン
BackWPupは、WordPressで構築したブログ・Webサイトを丸ごとバックアップできるプラグインです。 データベースおよびサーバーファイルのバックアップができます。 バックアップの保存先は、様々なオンラインストレージやFTP接続でのバックアップに対応しています。 このプラグインは有料版もありますが、無料版でも十分過ぎるほどバックアップ機能が充実しています。 バックアップ機能があるプラグインとしては一番高機能で使いやすいです。 この記事では「データベース」と「サーバーファイル」のバックアップの設定方法を解説しています。 記事データの「XMLエクスポート」にも対応しています。 はじめに このプラグインが優れていること WordPressの様々なデータのバックアップができる。 バックアップのスケジュールを設定すれば、後は継続的にバックアップ処理が実行される。 WordPressのデータベ
漢字も企業も漫画もOK！高品質フリーフォント全部まとめ
作成：2013/05/7 更新：2014/11/01 Webデザイン > 無料フォントは星の数ほどあるけれど 結局どれを使ってよいのか、迷ってしまう 今回はシーンごとに使えるように、無料フォントをジャンル分けしました。まとめサイトをまとめてあるので、ほとんど揃うとおもいます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．有名企業やサイトのロゴ ２．プログラミング用 ３．アニメ / 漫画 / 映画 ４．漢字 / 日本語 ５．スタイリッシュ / 細字 ６．手書き １．有名企業やサイトのロゴ 企業・団体から有名なSNS、製品ロゴ。首都圏に乗り入れる鉄道会社が使用するフォントも網羅。 有名企業やサイトのロゴに使用されているフォントまとめ 東京の鉄道会社が何かと使用しているフォントまとめ 5r4ce2[Fiber Force2] pumpCurry's Webs
ブログサーバーをロリポップからシックスコアに移転する際、私がつまづいた4つのポイント
優雅に見える水鳥が水面下では必死で水をかいているように、さらっとブログを移転したように見せかけて裏では必死で色々とやっていたのでした。 その中でもメインとも言える作業が、ブログサーバーの引っ越し。 元々旧ブログ「切り抜きジャック」はロリポップというレンタルサーバーで運用していたのですが、現在はこのブログ「タムカイズム」とともにシックスコア（sixcore）という共有レンタルサーバー上に移転しています。 大量アクセス時の負荷耐性や表示速度の向上などのメリットがあるということで、知り合いのブロガーがこぞって利用しており、この機会にと私も移転を試みたのでした。 ただ、先人の話を聞いていると、どうも一筋縄では行かないような雰囲気がしていてとても怖かったのです。 自慢じゃないですがトラブルエンカウント率はかなり高めなネットライフを送っておりますので（そう、今回のブログ移転だって…＞＜）、今回は細心の
パフォーマンスから考えるSass/Compassの導入・運用
- The document discusses the introduction and use of Sass and Compass for a large-scale e-commerce site. - Key aspects covered include using Sass features like nesting, mixins, extends and @import to organize CSS, Compass features like sprite generation and creating a style guide. - The results of adopting Sass/Compass included improved development speed and a 40% increase in site traffic over 4 m
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブWebデザイン用のモックアップを作成できる・「FROONT」 - かちびと.net
JavaScriptのコードフローを視覚化するTraceGL
http://w3q.jp/go/14200