ワイヤーフレーム、オンラインで描くなら『Cacoo』 | バシャログ。
こんにちは、inoueです。さっそくTVを買い替えました。マリオが大きいー。ピカチュウがきれいー。アナログで撮った過去の録画がしょぼいー。 さて、ワイヤーフレーム用ツールネタの第2弾です（前回はこちら）。ゴトウのつぶやきで知った『Cacoo』というwebアプリケーションをご紹介します。 『Cacoo』は、webブラウザ上で編集を行うワイヤーフレームをはじめとした様々な図を描くことができるアプリケーションです。 図の種類には、UML、サイトマップ、オフィスレイアウトなどがあります。基本的な図はだいたい作成することができるでしょう。 利用は無料で、アカウントとメールアドレス、パスワードなど最小限の情報登録ですぐに使い始めることができます。 大きな特徴としては「共有機能」があり、別のユーザーを招待して図の共有をすることができます。編集履歴も無制限に残る仕様になっています。 たとえば、お客様と図を
通常よく使う便利アプリケーションをご紹介 | バシャログ。
なんだか急に暖かくなった！と思ったら、どうやら花粉の飛散する量も増えたようですね。 シーブレイン web グループのボス、goto も花粉症で、毎年つらそうにしています。 ちなみに私 kimoto は、花粉症ではありません。毎年春になると鼻炎になりますが、花粉症じゃないです。花粉症じゃないんです。鼻炎です。 さて今日は、そんな goto に以前教えてもらった便利アプリケーションを 2 つ程ご紹介します。 派手さはないが効果は抜群、そんなアプリケーションたちです。 お忍びリネーム こちらはファイル名操作を楽にしてくれる、お忍びリネームです。 何年か前に紹介してもらい、凄く便利でいまでは手放せません。 ファイル名を変更する際、「F2」キーを押すと思いますが、その際、拡張子まで選択されちゃってますよね。 このお忍びリネームを入れると、一度押すと拡張子を除いたファイル名、もう一度押すと拡張子のみ、
CSS 基準文字サイズ（px）ごとの相対フォントサイズまとめ | バシャログ。
こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
Dreamweaver のテンプレート内で条件分岐処理をする | バシャログ。
サイトを Dreamweaver のテンプレートで管理していると 「トップページではヘッダのサイト名を h1 でマークアップしたいけど、トップページ以外ではページ名を h1 にするのでサイト名は p でマークアップしたいよな」 という時に、通常はサイト名のあるヘッダエリアは編集可能領域にしていないことが多いため、少し面倒だったりします。 強引にヘッダエリアを編集可能領域にしてしまう力技も可能ですが、一つのテンプレートの中で分岐処理を入れてやると、スマートかつ効率的にテンプレートを設計することができます。 分岐の方法はいくつかありますが、まずは基本的なのが Dreamweaver テンプレートのオプション領域を使用した以下の方法です。 1. <head></head> 内に以下の記述を入れます。 <head> : <!-- InstanceParam name="hoge" type="bo
jQueryを使って簡単に角丸を作れるjQuery curvyCorners | バシャログ。
最近、jQueryにハマっているishidaです。 CSSコーディングで角丸処理をする場合、たいていは上下の角丸部分を画像として切り出して、そんでもって背景画像を適用してという風にします。 また最近では、角丸を作るjavascriptライブラリーなどがあります。 でもdiv要素が増えたり、なんだかソースがすきっりしないぜぇ～と思っていましたがイイものがありました。 私がハマっているjQueryで角丸をつくるjQuery curvyCorners。 jQuery curvyCornersサンプル まずjQueryサイトからjquery-1.2.1.pack.jsファイルを入手。次に jQuery curvyCornersサイトからjquery.curvycorners.packed.jsファイルを入手。 使いかた まず、上記で入手したjsファイルをインクルード。 <script src="j
WEBデザイナー向けのサムネイルつきブックマークサービスOnly2Clicks | バシャログ。
仕事柄、いろいろなWEBサイトを見ていますが気になるデザインや参考にしたいデザインがあった場合に、はてなブックマークやlivedoorクリップに登録している人も多いと思います。 Only2Clicksはサイトごとに登録することができるので、私はWEBサイトデザイン専用としてこのサービスをブックマークサービスを利用しています。 ログイン後の画面はこんな感じ。 ブックマークはカテゴリ―を使用できるので、私はデザインのテイスト別に分類して使っています。 またサムネイルを drug&drop で並べ替えられるのは便利。 ブックマークレットもあり、サイト名のとおり2クリックで登録できます。 自動でサムネイルが登録されますが、自分で編集しアップロードすることも可能です。 WEBデザイナーの方は、使ってみてはいかがでしょうか。 Only2Clicks
【CSS】CSS のコメントの書き方 | バシャログ。
CSS コーディングのキモは「設計」にあります。 ただ漫然とコーディングしてしまうと、コードが肥大化してしまって本来 CSS のメリットであるはずの汎用性・メンテナンス性が著しく低くなってしまいます。 CSS のコーディングでは「コメント」を活用すると、全体の見通しが良くなって「設計」がしやすくなります。 いきなりセレクタとかプロパティとかを記述する前に、あらかじめサイトの構成（エリア）を CSS コメントで区切っておくと、その後のコーディングがとても楽になるのでお勧めです。 シーブレインで採用している CSS コメントにはレベル（階層）があります。コメントに階層を設けることによって、より設計しやすくしてやろうという魂胆です。 以下がその例です。 /* ========================================================= Level 1 ===
【CSS】clearfixを使わずにfloatを解除する | バシャログ。
以前、floatを解除する clearfixハックという記事を書きましたが、できることならハックは使いたくないと最近思うようになってきました。 いろいろと検証した結果、今回ご紹介するのはハックを使用せずにfloatを解除するための方法です。 divの構成はこちら。 boxというクラス名の div （floatを解除するための div ）は必要です。 cssのソース div.box { overflow: hidden; /* これがポイント */ position: relative; /* IE6でエリアを選択できるようにする */ /* DreamWeaverのデザインビューで正しく表示させる */ } div.left { float: left; /* 左に寄せて配置 */ width: 200px; } div.right { float: right; /* 右に寄せて配置 *
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
