Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
Ruby の http ライブラリの通信を表示する http-dump を作った - 2nd life (移転しました)
Ruby 上で http を叩いた通信見たい時に、毎回同じ事をやってるので抽象化して http-dump というライブラリを作った。 https://github.com/hotchpotch/http-dump $ gem install http-dump require 'net/http' require 'uri' require 'http-dump' HTTPDump.dump { Net::HTTP.get(URI('http://example.com')) } と http でやりとりしてるコードを block で囲むと、以下のように出力される。 > GET http://example.com/ with headers {'Accept'=>'*/*', 'Accept-Encoding'=>'gzip;q=1.0,deflate;q=0.6,identity;q=
Jenkinsに入れているプラグインまとめ（Rails中心） - くりにっき
ふと思いついたので会社のJenkinsで使ってるプラグインをまとめてみます。 RailsでJenkins運用してる人の参考になれば幸いです。（入れてるけどあまり使ってないのは端折ってます） 他に便利なプラグインあったらコメントやブコメで教えてくださいｗ Ruby/Rails系プラグイン PMD Plugin - Jenkins - Jenkins Wiki CPD(Copy PasteDetector=コピペ検出)のためのプラグイン。 入門Jenkinsで紹介されていたので入れたはず。 入門Jenkins―実践「継続的インテグレーション」 作者: 末広尚義,竹内一成,太田健一郎,西川茂伸出版社/メーカー: 秀和システム発売日: 2012/09メディア: 単行本購入: 5人 クリック: 138回この商品を含むブログ (9件) を見る 参考：Javaだけじゃない入門jenkins アプリ作る度
我輩、激おこプンプン丸で御座候 - 坊主の日記
2013-11-15 我輩、激おこプンプン丸で御座候 最近やたらとお仕事関連でイライラすることがあったので列挙して問題点を洗い出してみる。 ちなみにお仕事はPHP+MySQL/PosgreSQLなWebサービス。 技術的問題点 ・htmlspecialchars()とmysql_real_escape_string()の違いがわからない技術者が在籍年数が長いという理由で存在する #正直技術者名乗るなレベル、あまりにもひどい。 #しかもそれが技術部のTOPだというから目も当てられない、この会社の技術力はゴミだと改めて実感した。 ・MVCがわかってない開発者が多すぎ #やっぱりお前らのMVCは間違っている！とかいうMVCを勘違いしているパターンなのではなく #単純にMVCが理解出来てないパターン。 ##ControllerにDBからデータ取得するSQLがあったり、ViewにController
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
この順番で読めばOK！JavaScriptを理解するための14冊 | DECONCEPTER
JavaScriptの書籍はjQueryやサンプル中心のチップス本などを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としてはこれがダントツでおすすめです。内容が易しく丁寧な上にサポートサイトで書籍の内容を動画で説明してくれています。 Amazon.co.jp： よくわかるJavaScriptの教科書: たにぐち まこと: 本 サポートサイトはこちら STEP2. 全体を把握するには十分なボリューム。脱初級者向けにはこの2冊。 2冊とも初級者にとっては少し厳しい内容になっていますが、この2冊が理解できれば後は作りまくる
[徳力] studygiftの炎上騒動が長期化したのは、善意と誤解の炎上ループにはまってしまったからではないか
さて、昨日肝心なところで燃え尽きてしまったstudygift炎上騒動の振り返りですが、続きを書いてみたいと思います。 なお、昨日の記事はこちらです。 ・studygiftの派手な炎上騒動から、私たちは何を学ぶべきなのか （それにしても、やはりブログ記事って予告とか約束とかして書くものじゃないですね、飲んだ後に書いたので乱文乱筆ご容赦下さい。） 私が今回の炎上騒動が長期化してしまった要因と考えているのは下記の5つです。 ■1.批判されている背景について誤解してしまった ■2.批判に対する対応が後手にまわってしまった ■3.釈明や謝罪を行うべき手段や場所を間違えてしまった ■4.関係者が失言を重ねて火に油を注いでしまった ■5.論点が整理されないまま擁護者が増えたことにより対立構造になってしまった 順番に一つずつ詳しく見てみましょう。 ■1.批判されている背景について誤解してしまった 個人的に
![[徳力] studygiftの炎上騒動が長期化したのは、善意と誤解の炎上ループにはまってしまったからではないか](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0d4f268c0ee523e4e7890ed4c95b630793fb82e/height=288;version=1;width=512/http%3A%2F%2Fblog.tokuriki.com%2Fwp%2Fwp-content%2Fuploads%2F2012%2F06%2F120531toyota.png)
第1回 Meteorをはじめよう | gihyo.jp
Meteorとは？ Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境（MacOS Xを含む）でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています（公式サイトには、「1日か2日でプロトタイプを、2～3週間で製品レベルのアプリを構築できるようにする」とあります）。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
Webサービスの利用者を無料で増やす１１の要因（＋番外） - パパパパ
「Q&Aなう」というリアルタイムで質問／疑問を解決するWebサービスを運営している@paji_a こと安宅基です。 Webサービスの運営者にとって、「いかにお金をかけずに自然発生的にバイラルを起こして利用者を獲得できるか」はいつも頭から離れない永遠の課題です。そこで今回は、成功しているWebサービスが、広告以外で、どんな要因があったから、利用者が増えていったかということを分類してみました。ちなみに、「これ以外にもこんな要因があるよ！」というのがあれば、該当のWebサービスと要因をTwitterやコメント欄に書いていただけると嬉しいです。 各Webサービスは１つの要因だけでなく、複数の要因が組み合わさって、より強いバイラルを生み出しています。要因が組み合わさればされるほど効果的です。この条件の上で、ドカーンとお金を使って広告を打つことで、成功しているサービスも多いです。 では一気に行きましょ
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
まずは見た目で。HTML5製の上品なプレゼンテーション·Landslide MOONGIFT
LandslideはテキストファイルをHTMLベースのプレゼンテーションに変換するソフトウェア。 LandslideはPython/HTML5製のオープンソース・ソフトウェア。最近はHTMLによるプレゼンテーション作成も見られるようになってきた。HTMLの方が表現力が高く、デザインの自由度もあるために格好いいものが多い。画一的なプレゼンテーションは飽きてしまう。 スライド だが皆が使い始めると、より人と違ったものを使いたくなるのが常だろう。そこで新しいHTMLプレゼンテーションであるLandslideを紹介しよう。HTML5を使ったクールなプレゼンテーションが実現する。 Landslideは前後のスライドが左右に表示されるタイプのプレゼンテーションだ。ドキュメントはMarkdownまたはReStructuredTextで記述して、それをLandslideコマンドで変換する。さらにPDFへの
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。 - Kaleidoscope
即座にDLできるようにアーカイブ化。 ※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。 （あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。 ご報告いただいたnaruさん、ありがとうございました。 （ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください） smart_sample02.zip 02.zip 02v.zip 03.zip 03v.zip 04.zip 04v.zip スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー？がスマホならではですよね。 今後のスマホサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
セキュリティガイドライン
http://html5snippets.com/