[JS]パスワード入力時・入力後に一時的にパスワードを可視化するスクリプト -hideShowPassword
demo 3: チェックボックス Hide/Show Passwordsの使い方 Step 1: 外部ファイル 外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。 ※jQueryとZeptoの兼用プラグインとなっています。 <script> document.write('<script src=vendor/' + ('__proto__' in {} ? 'zepto.custom' : 'jquery') + '.js><\/script>') </script> <script src="hideShowPassword.min.js"></script> Step 2: HTML HTMLは通常通りのフォームの作成です。 <div class="login"> <input type="text" placeholder="Usern
2013年6月20日 管理人のブックマーク:phpspot開発日誌
2013年6月20日の気になったページ集です Feedly Cloud はGoogle Reader 終了後の RSS の未来につながるか | Lifehacking.jp http://lifehacking.jp/2013/06/is-feedly-the-future/ FirefoxOSアプリ開発 JSとの健全な付き合い方 http://www.slideshare.net/KazutoshiKashimoto/firefox-os-23190140 [JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector | コリス http://coliss.com/articles/build-websites/operation/javascript/js-gridselector.html フラットデザインのコツ的なアレ -
Google AdSense がサイトオーナー向けにスコアカードを提供開始
今月の 18日で、サービス提供開始から 10周年を迎えた Google AdSense ですが、なんかダッシュボードでスコアカードっていう、通知表的なものが表示されるようになりました。 広告を掲載しているサイトが適切な広告を設定しているか、クローラーは正しくアクセスできているか、あるいはサイトの読み込み速度などは問題ないかなどをスコア付けして表示してくれます。詳しくは下記の AdSense ヘルプページに記載があります。 スコアカードについて ： AdSense ヘルプ スコアカードはさまざまなカテゴリ（収益の最適化、サイトの状況など）で構成され、それぞれのスコアが 1～5 個の青色の点で表示されます。各カテゴリのスコアは、他のサイト運営者様と比較したランキングを表しています。低いスコアは、そのカテゴリに改善の余地があることを意味しており、スコア低下の原因を特定するには、右向き矢印をクリッ
文章をデザインする – 段落や箇条書きをより読みやすくするために ｜https://wp.yat-net.com/name
文章を読み易くする為に段落を用いてレイアウトすることは非常に多く、いかに読みやすく、いかに見やすいかを考えて構成する必要がありますね。 1.段落の使い方 2.読みやすい改行位置 3.箇条書きについて 4.文章をデザインするという事 段落の使い方 このブログではある程度の長さで1段落を設定し、一つ一つのブロックが長過ぎないようにある程度の調節を心がけています。 しかし可読性や視認性の事を考えると当然これだけでは駄目ですよね。もっと考えるべき点があります。 今回はちょっとその辺りについて考えをまとめてみたいと思います。 読みやすい改行位置 まず文章を構成するにあたり、必ず考えるべきなのは改行の位置です。Webに限らず紙媒体でも同じで、どこで改行すれば読みやすいのか・見やすいのかを意識するのはとても大切な事ですよね。 基本的に改行は句読点位置で行う事。これが一番シンプルではないでしょうか？あと、
Hacker Newsライクなデザイナー向けニュースサイト・「Designer News」 - かちびと.net
Designer NewsはHacker Newsのデザイナー版ニュースサイトです。登録ユーザーが投稿し、議論が展開される、というもの。コメント数から見てもまだそこまでユーザーが多いわけでは無さそうですね。尚、Webデザイン特化かどうか分かりませんのでタイトルには「デザイナー」と表記しました。 Designer News
スマホ・タブレットのスクリーンサイズまとめサイト「Screensiz.es」:phpspot開発日誌
Screensiz.es スマホ・タブレットのスクリーンサイズまとめサイト「Screensiz.es」 端末名と併せて、シェア等に併せてスクリーンサイズを閲覧できます。世界で最も使われている端末のスクリーンサイズは大体どんなものか、ということを調べるのに役立ちます 日本でのシェアとは違うことも考えられますが、アクセス解析などから端末を調査してスクリーンサイズを簡単に調べるのに役立ちそう。特にAndroid系 関連エントリ これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ Facebook,Twitter等ソーシャルメディアデザイン用の画像をまとめて作れる「Social Media Image Maker」 前ブラウザのブラウザハックまとめ「Browserhacks」 Twitter、Facebok等のコンテンツを１ページにまとめて表示するPHPアプリ「PubwichFork」
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector
Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。 Dynamic Grid with Transitions デモはChrome, Firefoxでご覧ください。 ※Safariで見たら、クラッシュしました。 Demo 1: No transitions Demo 2: Transitions without delays Demo 3: Transitions with delays 3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。 Demo 3のディレイ有りが一番かっこいいです！ Demo 3のアニメーションgif 左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。 実装 div要素で配置したパネルと外部ファイルと
2013年6月19日 管理人のブックマーク:phpspot開発日誌
2013年6月19日の気になったページ集です 【Windows 8ユーザーズ・ワークベンチ】 さらばWindows 8、初めましてWindows 8.1 http://pc.watch.impress.co.jp/docs/column/win8wb/20130619_604190.html フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法 | コリス http://coliss.com/articles/build-websites/operation/work/making-infield-form-by-jeremy.html あのひともあのひともいた！ 習慣を作るサービス Lift に軽快なウェブ版が登場 | Lifehacking.jp http://lifehacking.jp/2013/06/lift-for-web/ サクッとおし
レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！ | バンクーバーのうぇぶ屋
「なんじゃこりゃぁあ！！」 とりあえず、コレ見た時の第一声でした。本当は昨日日本から帰ってきたばかりだったので、セミナー旅行の報告記事書くつもりだったんですが、それより先にこの興奮を伝えるのが先かなと思ったので即刻共有記事〜！ 以前『ヤバイくらい簡単にプロフェッショナルなサイトが作れるStrikingly.com』の記事を書かせて貰いました、これはこれでWEBページを作る上ではこれ以上は無いんじゃないか位の楽さとクオリティでした。 しかし、今回はWEBページというよりは完全にWEBサイトを劇的に簡単に作れるという意味でのヤバさ、あとショッピングカート機能、ブログ、その他様々なページを作って運営することが出来る「Squarespace」をちょっと簡単にご紹介させて頂きましょう！ このサイト自体は僕の記憶が確かなら以前に見たことがある気がするんですが、それにしてもその時はこんなヤバさは感じて無
200個のフラットなフードアイコンセット:phpspot開発日誌
200 Foodie Pack: A Free Set Of Food Icons | Smashing Magazine 200個のフラットなフードアイコンセット。 次のようなフラットなフラットなフードアイコンセットです。 フード系のアイコンはあんまり無くて、外食系のサイトデザインの際に使えそうですね 関連エントリ 天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」 地図と共に使えそうな２００のフリーベクターアイコン集 フラットが美しすぎるアイコン24個セット アイコン画像をアップして独自のアイコンフォントがブラウザ上で作れる「Iconvau.lt」 シンプルで使えそうな５０のベクターアイコンセット
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
floatを解除する手法のclearfix と 次世代のレイアウトの話
新着記事
ピュアCSSで描かれたアイコンセット「Cikonss」:phpspot開発日誌
新着記事
Web上でアイコンフォントを作成できる・「Fontastic」 - かちびと.net
iOS7のUIが詰まったPSD「iOS7 GUI PSD」:phpspot開発日誌