シンプルで使い勝手がよさそうな25のフォームのPSD | 日刊ウェブログ式
Stacked Login Form これは使い勝手がよさそうですね。 Download Login Window 2/Lite こちらも上のものと似ていますが、使いやすそうです。 Download Login modal box ログインフォームと会員登録が一緒になったもの Download Clean & Simple Signup Form (PSD) 確認パスワードを入れさせるタイプのログインフォーム Download Search boxes いろいろなデザインの検索ボックス Download デザインがシンプルなので、いろんなサイトで使えそうでいいですね。続きはこちらからどうぞ 参照: 25 Fantastic Free Form and Field PSDs 関連記事 シンプルで上質なウェブデザインの国内サイトまとめ シンプルで使い勝手がよさそうな25のフォームのPSD 煙を
無印良品「ジョイントタップ・コンセント4個口/USBポート2個口付」を、カスタマイズする。 | 淡々と
■無印良品「ジョイントタップ・コンセント4個口/USBポート2個口付」を、カスタマイズする。 ちょっと以前から無印良品の電気製品売り場に陳列されてて あーこりゃ理想的であり便利であり購入していきたい！ と思っていたものの 単品では使用できず、 純正の10cm/1m/3m/5mの電源コードを購入しなければいけない、 おまけにこいつ値段が本体と同じくらいするじゃん！高いじゃん！ （本来はコードの長さを自分で変えられるのが売りのケーブルなんだけどね） というところに二の足を踏んでいたものの、よく見れば単純な構造。 ならばということでカスタマイズしちゃいましょう。 購入した人ならわかると思うのですが、 こいつの接続部分は純正パーツを要求する割にはシンプルで、 特殊な端子ではなく＝のコンセントが直で出ている様子。 純正以外のケーブルは物理的に接続できないという構造。 んじゃ切っちゃえ。 切っちゃった
よく分からずにトーンカーブを使っている人に。 - kojika17
画像の色調補正する時、何を使いますか？ 私の場合、基本的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。 トーンカーブ基本 縦軸と横軸は、0から255まで階調を表しています。 画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。 横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。 斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。 階調の出
CSSスプライトをドラッグ&ドロップで作成、保存もできるWebサービス・SpritePad - かちびと.net
CSSスプライトの作成、保存、共有が 可能なWebサービス・SpritePadのご 紹介です。少し大きめのプロジェクト 向けのサービスですかね。ドラッグ とドロップで作れるのはちょっと 良かったです。 昨日までずっとエラーで動かなかったんですが、改善されたようなのでご紹介します。simplessっていうLESSコンパイラがあるんですが、これを作成した会社さんのサービスみたいですね。 ドラッグ&ドロップで配置出来るCSSスプライトの作成ツールです。既に沢山にたようなのはありますが、直感的で使いやすかったので。 ここにローカル環境から画像をドロップすればアップロード出来ますので、あとは配置していきます。ユーザー登録すれば保存可能ですよ。 一纏めにされた画像とCSSが渡されます。class名は画像の名前を適応しますのでどれがどれだか、みたいな事も無いでしょう。 プレミアムユーザー プレミアムにな
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4edf0eaf5e8f4c77408f10ba236c93f8031449d/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fhtml5-right-figure-01-150x150.png)
HTML5の｢コンテンツ・モデル｣と｢カテゴリー｣を理解してマークアップするためのまとめ | Mnemoniqs Web Designer Blog
PCサイトのコーディングではまだまだHTML4で行うことも多いですが、最近ではスマートフォンの案件も増え、HTML5でマークアップする機会が多くなってきました。 先日の記事、「うやむやにしていたHTML5の文書論理構造をきちんと考えてみる」では基本的な文書論理構造のフローチャートを載せました。今回はHTML5をマークアップするうえで無視できない『コンテンツ・モデル』について、自分の理解を深める意味でも、改めてまとめてみようかと思います。 目次 『コンテンツ・モデル』を理解する必要はあるの？ 『コンテンツ・モデル』って一体なに？ 『コンテンツ・モデル』の主要カテゴリー 注意！「カテゴリー」＝『コンテンツ・モデル』ではない 『コンテンツ・モデル』をもとにしたタグの配置ルール トランスペアレント・コンテンツとは？ まとめ 『コンテンツ・モデル』を理解する必要はあるの？ HTML4でマークアップし
HTML5勉強会 ライトニングトーク資料
4. likeボタン html5対応版 Likeボタンのソースって？ (Custom Data Attribute) <div class="fb-like" data-href="http:// growbutton.com" data-send="true" data- width="450" data-show-faces="true"></div> 5. ちなみにTweetボタン Tweetボタン Custom Data Attribute <a href="https://twitter.com/share" class="twitter-share-button" data- url="http://growbutton.com/yamitake" data-text="Grow! Me!" data- via="GrowBt" data-related="yamitake"
固定配置したナビゲーションのWEBサイト21個 | designaholic
ナビゲーションが固定配置されたWEBサイトのまとめです。このブログもナビゲーションを固定配置しているので個人的にも非常に気になるところですね。 b14 Happy Cog Character Face. Works. OK Studios Latorre 各コンテンツの情報量が少なかったり、コンテンツ数が少ないサイトには向いていますかね。遷移の仕方を工夫すればユーザビリティを確保しながらおもしろい演出をすることも可能です。 ただし高さのないワイドモニタなどではナビや情報が見切れてしまう可能性もあるので、様々な環境を考慮してデザインすることが重要ですね。 21 Examples of Fixed Position Menus in Web Design
rel=“prev”とrel=“next”のページネーションにおける正しい使い方
[対象: 上級] 今日の記事は、rel=”prev”とrel=”next”によるページネーションを扱ったかなり難易度が高いトピックになります。 rel=”prev/next”とビューオールページを用いたGoogleが推奨するページネーション処理を確実に理解している状態でないと意味不明でしょう。 Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始 Googleが推奨するビューオールページとページ分割のベストプラクティス 僕自身の理解度を深めるための記事とも言えます。 なので今日は興味がある方だけ読んでください。 ページネーションについての処理方法をGoogleのMaile Ohye(マイリー・オイェ)さんがビデオで解説しました。 使用しているスライドと補足説明がWebmaster Centralブログの記事でも公開されています。 マイ
はてなブックマークボタンがマイクロアド社の新ガイドラインに従ったらこうなる - ockeghem's blog
すでにこちらでご案内の通り、私のブログ（徳丸浩の日記およびEGセキュアソリューションズオフィシャルブログ）に貼っていた「はてなブックマークボタン」により、読者の皆様の閲覧行動がマイクロアド社によりトラッキングされておりました。読者の皆様に断りなく不快な結果を強いていたことに対してお詫び申し上げます。既に当該ボタンは撤去しております。 その後、株式会社はてな社長の近藤淳也氏およびはてなの日記にて行動情報の提供をやめる旨のアナウンスが一昨日ありました（こことここ）。さらに、マイクロアド社からは、昨日以下のアナウンスがありました。 今後マイクロアドでは、ブログパーツや外部ボタン等、マイクロアドと直接提携関係にあるパートナー以外の第三者にあたる媒体・配信面に付与される可能性のあるものについて、それらの表示領域にマイクロアドからの行動履歴情報の蓄積を無効化するオプトアウトページへの導線設置を義務化い
15+ Top CSS3 Generator Softwares
CSS3 generator will allow you to create virtually every CSS3 feature like gradients, shadows, box radius, font-face, transitions, animations. CSS3 generator helps you to generate CSS code that can be easily used in your webdesign and development programming. It also helps you to create CSS code with the help of GUI interface. CSS3 Generator v 1.9 CSS 3.0 Maker CSS Gradient Generator Westcv Tools C
XHR XSS の話． - ほむらちゃほむほむ
概要 CORS が「幾つかのブラウザの先行実装」の状況から「古いブラウザではサポートされない機能」に変わりつつある頃合いなので，XHR2 が XSS の起点になりますよってお話． そもそも XHR XSS って何よ 簡単に言うとXHR2 による XSS のことのつもり．身近なところだと，jQuery Mobile がやらかしたり，大阪府警がやらかしたりした． 具体例1 jQuery Mobile jQuery Mobile については，jQuery MobileのXSSについての解説 で解説されるとおり． かいつまんで言うと，jQuery Mobile に location.hash の変更( hashchange イベント発火）時に，location.hash を URL とみなして読込んで，ページ内容を変更という機能があって，その読込先 URL にクロスドメインの制約がなかったので X
enchant.js 怒涛の 100 tips | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. enchant.js 怒涛の 100 tips!! ローカル整理してたら昔勉強がてら作った enchant.js のサンプルが大量に出てきたので, 整理するついでに公開しようと思います. 最終的に 100超えちゃったけどw(全部で102個あります) 逆引きてきな感じでまとめてます. 参考になれば幸いです. 全て jsdo.it に移植したので Web上で実行できます!! fork なりダウンロードなりして遊んでくださいな♪♪ Tips Base(基本) 基礎です. enchant.js のテンプレートを用意しよう Entity(エンティティ) 表示物系の基底クラスです. 内部で DOM を持っているので表示は
jQuery Mobile 最新情報 & Tips
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。Read less
IE9でグラデーションを実現する方法
CSS3 Wizardy is what you need to create the kind of Web site or Web app to really stand out. IE9はこれまでリリースされたIEシリーズのなかではもっとも標準規約に準拠したブラウザになる。特にCSS 2.1への準拠率はほかの主要ブラウザを抜いてトップレベルにあり、標準規約への準拠を進めるMicrosoftの姿勢をよく表している。しかし、Webデベロッパの多くはすでにCSS3で実現される機能に目を向けている。CSS3の機能を活用すると実現したいデザインを今までよりもスマートに表現できる。また、レンダリング処理をJavaScriptからCSSへ振り替えることで、ハードウェアレンダリングの機能を活用しつつ、JavaScriptを別の処理に利用することができるようになるなど、高速化テクニックとしても欠かせな
いいねフィッシングはこうして起こる？をデモする·Facebook like-trap MOONGIFT
Facebook like-trapはダミーのマウスカーソルを表示していいねボタンをダミーで押させるデモソフトウェアです。 Facebookのいいねボタンを悪用したいいねフィッシングという行為が問題視されていますが、その実例といっても良いような動作をデモしてくれるのがFacebook like-trapです。カーソルが二つ現れて、目的のボタンを押すと見せかけていいねボタンをクリックさせます。 マウスポインタが二つ表示されているのが分かるでしょうか。 ボタンを押したつもりがいいねボタンを押したことになってしまいます。 通常、iframeの上にはフェイクのカーソルは出せないそうなのですが、透明なdivタグをiframeの上に重ねることで実現しているそうです。 Facebook like-trapはJavaScript/CSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記され
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
言語女子会: undefとnullは両方必要？ - 西尾泰和のはてなダイアリー
Twitterのタイムラインが面白すぎて、ついうっかり言語を擬人化して脳内で言語女子会なるものを開いてしまいました。なお、登場人物と実在の人物は1対1に対応しません。 undefinedとnullの両方必要なの？ とあるプログラミング言語が集う女子会にて: Perl: そういえばさ、なんでJavaScriptちゃんってundefinedとnullの両方もってるの？ JavaScript: えっ、未定義の変数にアクセスした時undefined返したいじゃない？ Python: 例外投げて死ねばいいじゃん Ruby: 例外投げて死ねばいいよね Python & Ruby: ねー♡ Java: いやそこは参照型ならnull、数値型なら0で初期化すべきでしょ C: これだから最近の若い子は…初期化にだってコストが掛かるんだからね！デフォルトで初期化するなんて無駄遣いよ！必要な人だけが責任をもって初
Facebook Open Graph ACTION + OBJECT で遊んでみよう « をぶろぐ
f8 Tokyo から何ヶ月も経ってしまいましたが色々整ったところで、そろそろ Open Graph Action で遊んでみましょう！ Facebook アプリの基本的な知識や作り方などは「facebookアプリの作り方(PHP編)」を参照。 ※この記事がわかりやすそうでした Facebook Open Graph Action のデモ以下、jsdo.it で作成した Open Graph Action のデモです。 Action: view + Object: source code で試してます。 Open Graph アクション投稿までの流れLogin with Facebook をクリックするとウィンドウ起ち上がるログインに成功するとウィンドウが自動で閉じられる画面に “Open a posted activity in Facebook” というのが表示されるのでクリックすると
hanamochi_2018
誠に申しわけございません。 お探しのページは見つかりませんでした。 公開期間が終了したか、 アドレスの入力違いの可能性がございます。
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
Replacing the -9999px hack (new image replacement)
IN THE BEGINNING was FIR, AKA Fahrner Image Replacement (note that one of the following links returns a 404): The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design. We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Data Visualization for Web Designers
http://blog.monoweb.info/article/2012031523.html