[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…
ズルいデザインテクニック2013 + セミフラット version
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…
ディレクターが知っておいて欲しい10個のMarkdown-マークダウン記法 - PHPサンプル実験室
マークダウンは、軽量マークアップ言語のひとつです。プレインテキスト文書をhtmlに変換する言語です。 覚える要素が少ないので学習コストが低いです。そして読み書きしやすい文章というのが特徴です。 しかしマークダウン記法は万能ではないので直接HTMLを記述して補うことも可能です。 マークダウンとhtmlが混合になっても問題はありません。 またGithubやBitBucketなどでも標準的なマークアップ言語として採用されており READMEやWikiなどの記述でマークダウンをお見かけする機会は多いと思います。 マークダウン用のソフトも多数有ります。 windowsならMarkDown#EditorやMarkdownPadなど Mac用アプリKobitoやMarsEditやMultiMarkdown Composerなどなど chromeの拡張でもTextdownというアプリがあります。 subl
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
【レビュー】モバイルブラウザからWebページのソースコードを表示する方法 | エンタープライズ | マイコミジャーナル
Steve Souders - High Performance Web Sites スマートフォンやタブレットデバイスといったPC以外のデバイスからWebページにアクセスするシーンが増えている。ハードウェア性能の差もあり、PCのブラウザからアクセスする場合と比べて、こういったデバイスからアクセスしたときの方がページの表示はモッサリと重さを感じることが多い。しかしこれはただハードウェア的な性能差というよりも、モバイルデバイス特有の処理にWebページの方が適合していないという理由もある。 どのようにデータ通信が実施され、どういった順序でWebページのレンダリングが実施されるかといったことはPCで動作するブラウザであれば比較的容易に調べることができる。ブラウザがデフォルトで提供している開発ツールや、エクステンション/プラグインとして後から追加したツールなどを使って調査できるようになっている。
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
【レビュー】Windows 7ソフトウェアレビュー − 操作手順を記録! 問題ステップ記録ツール編 (1) 問題ステップ記録ツールで操作手順を記録・表示 | パソコン | マイコミジャーナル
Windows 7ソフトウェアレビュー - アクセサリのワードパッド/ペイント編 Windows 7ソフトウェアレビュー - Windows Media Player 12編 Windows 7ソフトウェアレビュー − 大きく進化した電卓編 Windows 7ソフトウェアレビュー − 上級者にも魅力的になったバックアップとデフラグ編 Windows 7ソフトウェアレビュー - 拡大鏡/スクリーンキーボード/付箋編 Windows 7ソフトウェアレビュー - アクセサリの数式入力パネルで楽々数式入力編 Windows 7ソフトウェアレビュー - PCを快適に! パフォーマンスモニター編 Windows 7ソフトウェアレビュー - 標準搭載されたWindows PowerShell編 Windows 7を操作していて、トラブルに遭遇した場合、どのように対処すべきであろうか?一般
【レビュー】ページ上で選択した表の配置を保ったままコピー - Firefoxのアドオン「Table2Clipboard 0.1.1」 (1) Table2Clipboard 0.1.1の概要とインストール | パソコン | マイコミジャーナル
Table2Clipboard 0.1.1はFirefox上で表を選択しコピーすると、行･列の配置を保ったままペーストできるアドオンだ。表計算ソフトへの貼り付けや、テキストエディタへのCSV形式での貼り付けが可能になる。Firefoxの1.5〜3.0.*に対応している。 注意:本稿では、Firefoxのアドオンのインストールを行っておりますが、ソフトウェアの利用はすべて使用者の責任においてご利用ください。 インストールの方法 インストールはmozilla.orgのFirefox Add-ons集のページで行う。Firefoxで「Table2Clipboard 0.1.1」のWebサイトを開き、「Firefoxへインストール」ボタンをクリックする。 「Table2Clipboard 0.1.1」の紹介ページ。「Firefoxへインストール」ボタンをクリックする。ちなみにこの下にあるサンプル
JavaScriptベストプラクティス: Unobtrusive DOMプログラミングのススメ | エンタープライズ | マイコミジャーナル
Alex Holt氏がSmashing MagazineにおいてjQuery and JavaScript Coding: Examples and Best PracticesのタイトルのもとJavaScriptプログラミングのベストプラクティスを紹介している。Alex Holt氏は「Unobtrusive DOM Scripting」と呼ばれるプログラミング手法がWebサイトに適用するにあたり優れているとし、Unobtrusive DOM Scriptingの実現にはjQueryが実にいい具合で活用できることを説明している。 同氏はDOMを経由してWebページの各種データにアクセスしてなんらかの動作をさせるプログラミング方法をDOM Scriptingと呼び、DOM Scriptingのなかでも必要な機能を必要な要素に対して適用するものといったニュアンスを強める場合にUnobtrusi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインサンプルで学ぶCSSによるスタイリング～「見出し」編
[Think IT] 第5回：アナログ時計を作ってみよう！ (2/3)