404 Not Found nginx
2013-04-13 CSS Nite @Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite @Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは!!と思い。テーマは「UIデザインのパターン化」。ちょうど「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」という本を出されたばかりだったので、本から抜粋された内容が紹介されました。以下Agenda。 UIのパターン化・ルール化とは プラットフォームの流儀 画面パターン UIコンポーネント 実践事例 パターンとルールがもたらすメリット 90分という短い時間だったけど、ワークショップ的なの
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード(ヒント付き) こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記: ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 (一部の図はセミナーの資料を元に作成してます。) 始めに:スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ(0からスマートフォンサイト用に構築) jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
TEDで『Fat, Forty, and Fired』の著者であるNigel Marshさんが、いかにしてワークライフバランスを獲得したかという話をしていました。いいワークライフバランスを見つけたいと思った時に、最初からすべてを大きく変えようとすると、結局は失敗することになります。高い目標を設定して失敗するダイエットと同じようなものです。Marshさんは、少しずつ変えることで、最終的に大きな変化になると言っています。 このトークの中での一番の名言はおそらく「ほとんどの人が、好きでもない人を感動させるために、必要のないものを買い、そのために嫌いな仕事を長時間やっています」でしょう。これは、ある一定レベルのほとんどの人にとって、核心をついている言葉だと思います。 では、どうすればこの悪循環を断ち切ることができるのでしょうか?嫌いな職場や会社に勤めているとしたら、それで悲惨な人生になっているのだ
Emmet には便利なショートカットキーがあるのでまとめておく。 Actions | Emmet Documentation Expand Abbreviation[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで 説明した事ができる。詳しく書いているのでぜひ見てほしい。 Match Tag Pair[SublimeText2]Bracket Highlighterで括弧を強調表示する | DevAchieveの括弧内全選択のHTML限定版。 キーひとつで範囲広げたりできるのでHTMLメインならEmmetの方が便利。 Sublime Text 2 では単語選択のショートカットとかぶっているのためか、ショートカットキーが異なる。 Ctrl + d: 選択範囲拡大 Ctrl + j: 選択範囲縮小 Go to Matching Pai
FrancescoMugnai.comのエントリーから、作業効率をアップするPhotoshopの20のショートカットを紹介します。 20 Photoshop Secrets Revealed… 15番目は不明でしたが、moritaさんのコメントにより解決しました。 下記に、コマンド別に紹介します。 ※Win XP+Photoshop CS2でのコマンドです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt Photoshopの起動時に、[Ctrl] + [Alt] + [Shift] Photoshopの設定を初期化。 「目(レイヤーの表示/非表示)」を[Alt] + クリック クリックしたレイヤー以外の表示・非表示の切替。 開いているファイル上で、[Space] カーソルがハンドアイコンに変わる。カーソルが行方不明になった時に便利。 レイヤースタイルの
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
2013-04-11 クックパッドのUI設計の秘訣は仮説思考にあった! クックパッドと言えばRubyの匠として有名ですが、どうやらUX / UI に関してもめちゃくちゃ力を入れているようで、「こりゃ調べるっきゃねぇ!」と思い立ったが吉日。ググってるとこんな記事(【インタビュー】クックパッドのUIデザイナー:「エンジニアの仕事が0を1にする仕事なら、デザインは1を100にする仕事 」)に出会うことができたので、この記事の中からエッセンスを読み取ってまとめてみました! こんな人に読んでほしい! ・他社はUI設計をどうやってるんだろう?と気になっている方 ・自社のUI設計を見直したいと考えている方 仮説思考とは そもそも仮説思考ってなんやねん!っておっしゃる方もいらっしゃいますでしょうから、少しばかり仮説思考についてお話させて頂きます。 仮説思考とはズバリ、”(精度の高い)思い込み”です。「もし
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
いつか使いそうなのでメモ的にエントリー。 JavaScriptでアニメーションするゲージを作れるのがJustGageだ。 ちょっとしたダッシュボードなどに使えていいのではなかろうか。 もちろん色やアニメーション速度もカスタマイズすることができる。 マークアップも簡単なので覚えておいてもいいですな。
2013年4月12日に講談社にて開催された、やまもといちろう x イケダハヤト対談イベントに行ってきました。イベントの内容に関しては「やまもといちろう ×イケダハヤトの #ブログ論争 書き起こし」あたりをご覧頂くと良いでしょうか。 やまもといちろう氏とイケダハヤト氏のブログ上の往復書簡がついにリアルイベントに発展しました。4月12日講談社講堂にてお2人が約2時間、心ゆくまで議論。その注目イベントの内容をリアルタイムに全文書き起こしました。会場に来れなかった方、ニコ生観られなかった方どうぞ。ブロガーの方、引用素材にどうぞ。 各所で論じられておりますし、内容に関してはほとんど予想通りではあったのですが、最後に飛び出した「人間サンドバッグ宣言」は想定外でした。 当初は「どうして人を笑いものにするのですか?」と、やまもとさんに質問していたイケダさんが、最後は「皆さん石を投げられる立場になってもいい
こんにちは。 何かをしようと思ったときに、検索することが当たり前の時代になりました。 そこで今日は探したい物を素早く見つけるために、Googeの基本的な検索手法を7つとりあげました。 限定検索「”キーワード”」 まずは、絞り込み検索です。あるキーワードを「限定」して検索したい時に使える検索方法です。 具体例 例えば「激おこぷんぷん丸」というキーワードの意味を一瞬で調べたい時に 「”激おこぷんぷん丸とは”」 とダブルクオーテーション(””)でキーワードを囲って検索すると「激おこぷんぷん丸とは」から始まる、説明をしてくれている検索結果が一発で並びます。便利! 除外検索「-キーワード」 あるキーワードを、検索結果から除外して検索したい時に使います。 具体例 「東京にある大学」を調べたい時に「東京 大学」と検索すると「東京大学」が大量にヒットしていしまいます。そこで 「東京 大学 -東京大学」 と
ご不便をおかけしております。 ただ今メンテナンス中です。 今しばらくお待ちください。 しばらく経っても、このページが表示されたままの場合は、 お手数をおかけいたしますが、こちらへメールでお問い合わせください。 _SPAM_Rx8ckZrB@i-solcom.com (先頭の_SPAM_を削除してください)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く