【書籍紹介】UXと理論で作るWebデザイン：Kindle版 | バシャログ。
こんにちは。sitoです。 ついこの間、新年を迎えたと思ったらもう1月が終わってしまうことに驚愕している今日このごろ。 厳しい寒さの日が続いたり、大雪になったり、インフルエンザが猛威を奮っていたりするので、みなさま体調にはくれぐれもお気をつけください。 さて、今回は書籍の紹介です。 前回の記事で書いたセミナーに参加した際に紹介された本で、気になったので読んでみました。 ▼前回の記事 セルフユーザビリティテスト検定講座を受講してきた話 どんな本なのか 「UX設計からWebを中心としたUI作成までが学べる書籍」ということで、そもそもUXってなんなの？どうやって設計したらいいの？というところから、UX設計をどのようにUIとして落とし込んでいったらいいのかが具体的に解説されています。 デザイナーだけでなく、制作に関わる人ならどんな立場の人でも読んで欲しい内容だと思いました。 学べる内容 理論に基づ
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
【Fireworks】「クリスマス」デザインもお手の物！もみの木ブラシ作ったよ。 | バシャログ。
話題のぶつ森に目もくれず最近やっとブレイブリーデフォルトを買いました。sekiです。こういう王道RPGってほんと少なくなりましたよね。 さてさてもうすぐクリスマスですね！楽しみな人もそうでない人もいるかと思いますが、今回はそんなクリスマスなデザインにもってこいな「もみの木ブラシ」を作ったので作例とともに配布をば。前に作った「砂」ブラシ同様今回もストロークの簡単な設定になりますが、お付き合い下さいね。 ダウンロード タイトル画像にあるような、もっさりした「もみの木」のようなあしらいが簡単に作れます。 ダウンロードはコチラのリンクを右クリックで保存してください。（.stl） 保存したら、Fireworksのスタイルより「スタイルを読み込む」で、一度スタイルデータとして読み込みます。 使い方 このスタイルにはストローク情報が記憶させてあります。 スタイル画面には「クリスマス_大」「クリスマス_小
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
意外と知らなかったSublime Text 2 で使えるショートカット | バシャログ。
どうぶつの森に行きたいminamiです。 Sublime Text2 、いいエディタですよね。僕も使ってから日が浅いのですが、毎日なにかしらの発見があります！便利なショートカットがたくさんあるので備忘的にあげてみました。操作はWindows版です。 Ctrl+P 候補のファイル名を入力していくと該当するファイルを開くことができます。 Ctrl+R JavaScriptなどでメソッドを設定していると候補を表示して移動できます。 Ctrl+L 行選択。続けて入力すると次の行も選択されます。 Ctrl+G 指定行にジャンプします。 Ctrl+D 選択範囲の文字列を一度にまとめて編集できます。 また、文字列を選択してCtrl+Dを実行するごとに、同じ文字列が選択され、そのまま内容を変更できます！ Ctrl+Shift+↑↓ 行をまるごと上下に移動できます。複数行選択しても同様です。 Ctrl+Sh
Sass&ScssをリアルタイムにCSSに変換できるSassmeister | バシャログ。
エクスペンダブルズ2を吹き替えでもう一回観たいminamiです。 Webサービスのご紹介です。Sass/ScssをリアルタイムでCSSに変換してくれるSassMeisterというサービスです。 Sassmeister ページを開くとこんなかんじになっています。左のエリアににSassを書いていきます。エディタ自体もインデントできたり行をハイライトしてくれたり結構よくできています。 シンタックス、エクステンション、出力の形式も選べます！普段はScssのフレームワーク、compassを使っているのでこれが選べるのも嬉しいところ。 左エリアにこんなScssを書きました。compassのmixinも入れてみます。 Sass/Scssの場合CSSの形式にするにはコンパイルの作業が必要になりますが、このサービスではリアルタイムで右側に出力されます！すごい！ ちょっとSassを利用したいんだけど環境を整え
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプト | バシャログ。