タグ

ブックマーク / bashalog.c-brains.jp (9)

  • 【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。

    JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの? モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',

    【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
  • まだまだ使うよ!便利なFireworksの時短ペースト紹介 | バシャログ。

    Dlifeで新たにスタートした「4400 未知からの生還者」が気になって仕方ないmackyです。Dlifeとビールさえあれば…。どうぞよろしくお願いします! さて今日は、まだまだバリバリ使わせてもらっているFireworksの、ペーストにフォーカスしてみようと思います。 Fwの便利ペーストその① ~属性のペースト編~ 属性のことなるテキストを配置します。 一番上の属性に統一させます。 ではまず、 Ctrl+Cで統一させたい属性のテキストをコピーします。 次に、 属性を変更したいテキストを選択し、Ctrl+alt+shift+Vでペースト。すると… もう完成ですね。 ビギナーには知っておくと嬉しい時短ショートカットですね。 Fwの便利ペーストその② ~マスクのペースト編~ マスクの扱いは早めに制しておきたいですよね。 画像を用意します。 マスクしたい形のオブジェクトを描きます。 オブジェクト

    まだまだ使うよ!便利なFireworksの時短ペースト紹介 | バシャログ。
  • [jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。

    最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね~。みなさん、こんにちは nakamura です。 最近ちょっとおぉ!と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな~と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ!と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね~。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·

    [jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
  • 【Fireworks】もうイラストで悩まない!簡単なイラストを描いてみよう Vol.4 | バシャログ。

    横浜はあまり雪が積もらないので、いくつになっても、雪が積れば雪だるまを作らずにはいられない seki です。もう大分溶けてきましたね~。 さてさて。今回は、ひたすらに簡単さを追及しているこのイラストシリーズ。せっかくバレンタイン前なのでサクッとチョコレートなイラストでも描いていこうかと。基ツール意外使わない、いつも以上に初心者向けな内容なので生暖かい目でお付き合いくださいね。 ものすごく簡単にチョコレートのイラストを描こう! タイトルバナーにあるようなチョコレート菓子をサクサク描きませう。 1. まずはペラいハートを用意し質感を出す 今回は大きめに作るので、横120px縦94px程度のサイズのハートを描きます。ハートの書き方は自動シェイブツールのハートを使うか、角丸長方形と、パスの型抜き&合体でさくさくと。 ↑設定は上記の通り。 色は今回ザックリ#8D4D2Eから、#2B1309辺りで斜

    【Fireworks】もうイラストで悩まない!簡単なイラストを描いてみよう Vol.4 | バシャログ。
  • 【Fireworks】Fireworksで触りたくなる「もふもふ」質感を出してみよう! | バシャログ。

    こんにちは。やっと八百屋さんの夏野菜が安くなってきてホッとしている seki です。 今回もFireworksのストロークとテクスチャについて書いていきます。 勿論皆さん、「もふもふ」した質感、好きですよね?(←押し売り) 季節的に大分遅い気もしますが、動物イラストやロゴ・アイコン・見出し背景などを、 可愛く演出してくれるFireworksで出来る個人的に大好きな質感!「もふもふ」スタイルを、手軽に再現する方法をご紹介します! 「もふもふ」スタイルを設定する タイトル画像にあるような、こんな感じのウサギの毛みたいな質感です! アイコンや背景を始め、ロゴ文字や、イラスト、アニメーションで動かしても可愛い。 また、写真と組み合わせても全くうるさくなく、使い勝手が良いのがお気に入りです。 女性向け・子供向けな、イラストの多いほんわかしたWEBサイトには持ってこいですね! 設定は以下を参考に。 塗

    【Fireworks】Fireworksで触りたくなる「もふもふ」質感を出してみよう! | バシャログ。
  • Dreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能5つ | バシャログ。

    チーム内のももクロ旋風が留まるところを知りません。 まだメンバーの顔と名前覚えきってないんだけどそんなこと言えないhakoishiです。がんばります。 さて、日はDreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能を5つほどご紹介します。 Zen Coding これはもう、いわずもがなですね。コーディング効率大幅アップ。 下記よりDreamweaver用のファイルを選択してDLしてください。 Downloads - zen-coding 閉じタグコメントを挿入 「コマンド」メニュー⇒「閉じタグコメントを挿入」で閉じタグコメントを自動で挿入してくれます。 ID・classも自動的に拾ってくれるので、構造のチェックにも便利。 コメントを生成して挿入するDreamweaver用の拡張機能を作成しました Dreamweaver CS5 Validator 「結果」パネル⇒「バ

    Dreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能5つ | バシャログ。
  • 【CSS】ネガティブマージンの使いどころ その1 パンくずリスト編 | バシャログ。

    今さらながら「ヱヴァンゲリヲン新劇場版:破」を DVD で見まして、 ヱヴァ:Q 見るまでこりゃ死ねないな、と思った sakai です。序破急だから急かと思いきや Q ってところが意味深ですよね… CSS で margin にマイナスの値を指定する、通称ネガティブマージンの使いどころについて、何回かにわけてご紹介します。(先日の CSS Nite でデモをした内容の再紹介です) 今回は「パンくずリスト」のコーディングでのネガティブマージンの使いどころです。 1. パンくずリストでネガティブマージンを使う まず HTML で普通にパンくずリストを組んでみます。 <div id="topiPath"> <ol> <li><a href="/">ホーム</a></li> <li><a href="/wear/">ウェア</a></li> <li><a href="/wear/tops/">トップ

    【CSS】ネガティブマージンの使いどころ その1 パンくずリスト編 | バシャログ。
  • デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。

    こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに!かつ操作性を向上!できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック(バリデーション)が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日語用は別途作成し、使用することが可能です。 jQuery

    デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。
  • 【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。

    地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;

    【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
  • 1