【CSS】リンク関連擬似クラス（テキストリンク）は複数設定可能なので訪問済み＋マウスオーバーも設定できる | バシャログ。
今週末は地域の餅つき大会、つくことより食べることに専念しようと思っているishida です。やっぱ、つきたての餅はあんこにかぎるよねっ！ とある案件にて、ほぇー。知らなかったわーとなったのでメモメモ。 :link 、:visited、:hover、:activeとテキストリンクに関連する疑似クラスがありますね。 この擬似クラス、複数設定することも可能でしたので簡単にご紹介。 まずはおさらいってことで、上のようなテキストリンクがあるとします。 CSSを記述すると以下のようになります。 a:link { /* 通常テキストリンク */ color: #0066FF; text-decoration: underline; } a:visited { /* 訪問済みテキストリンク */ color: #800080; text-decoration: underline; } a:hover {
【Dreamweaver】DreamweaverにExcelをプラスでちょっと省エネコーディング | バシャログ。
会社のPCの壁紙テーマを猫に変えたら、たまーに仕事中ニヤニヤするようになりました。hakoishiです。 怪しい者じゃないです。 さて、今回はExcelとDreamweaverの合わせ技でちょっと楽してコーディングする方法をまとめました。 Excelで整形してDreamweaverにコピペして調整、という流れです。 どういう時に便利？ 大きく分けて2つあります。 【パターン1】セル数が多いテーブルを大掛かりに改修する場合 ⇒例：製品のスペック表、スクールの講座一覧など 【パターン2】連番のリンク先や画像名を含み、繰り返しの多いソースの編集 ⇒例：一覧リストなど エクセルはテーブル（特に縦方向）や、連番の付与といった類の編集に強く、そして軽い。（Dreamweaverのテーブル編集、もたつきますよね。。） 全てをDreamweaverで完結させようとせず、Excelを経由する手もあると覚えて
Fireworks のリソースを公開している国内のサイトをピックアップ | バシャログ。
CSS Nite im MIYZAKI, Vol.3 に出演してまいりました。宮崎、真剣に移住を検討するほどいいところでした。ご飯が美味しい！ さて、最近 Web クリエイターの方たちと話をしていると、今 Fireworks がきてるなーと思うことが多くなりました。 マクロメディア時代からの Fireworks ファンとしては、胸が熱いです。 今回は、Fireworks の便利なリソースを公開している国内のサイトをピックアップしてご紹介します。 Fireworks マニア Fireworks 関連のブログでは一番の注目度ではないでしょうか？ Fireworks を使って綺麗なデザインを作るテクニックがたくさん紹介されています。 「その機能をそんなところに使うの！？」といった、魔法のような Tips もたくさんあって凄いです。 Webデザインのタネ Fireworks 関連の Tips が公
Dreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能5つ | バシャログ。
チーム内のももクロ旋風が留まるところを知りません。 まだメンバーの顔と名前覚えきってないんだけどそんなこと言えないhakoishiです。がんばります。 さて、本日はDreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能を5つほどご紹介します。 Zen Coding これはもう、いわずもがなですね。コーディング効率大幅アップ。 下記よりDreamweaver用のファイルを選択してDLしてください。 Downloads - zen-coding 閉じタグコメントを挿入 「コマンド」メニュー⇒「閉じタグコメントを挿入」で閉じタグコメントを自動で挿入してくれます。 ID・classも自動的に拾ってくれるので、構造のチェックにも便利。 コメントを生成して挿入するDreamweaver用の拡張機能を作成しました Dreamweaver CS5 Validator 「結果」パネル⇒「バ
【Fireworks】ダイヤモンドっぽいものを作ってみる | バシャログ。
2010 年になってはじめてのブログ当番です、toayma です。 今年もよろしくお願いします！ 昨年、小悪魔 ageha っぽい画像を作ってみる際に断念したダイヤモンドっぽいものを Fireworks で作れないかずっと考えていたのですが、フィルタとか使ってぱぱーんと作るのは私には無理！もうここは基本に戻って、パスとグラデでどうにかしようじゃないか！と開き直りました。 あまりに基本なので軽い説明にとどめたいと思います。 1.八角形の矩形を描く 2.対角線で切って、内角が45度の三角形を作る 3.三角形の塗りを白→グレーのグラデーションに設定 4.三角形をコピーしては、45度に回転。7 回繰り返して、元の 8 角形に並べます。 5.小ぶりの八角形を作って上に重ねます。それっぽくできてる？ 6.もしくは、4.で作った8つの三角形をコピーして縮小し、上に重ねます。グラデーションを乱反射する光の
QuickSilverのように使えるFireworksのランチャーQuickFire | バシャログ。
髪型のせいか熱を吸収しやすいminamiです。 今回はFireworksの拡張のご紹介です。ときどき便利系のFireworks拡張を探すのも楽しいものですが、個人的にすごい！と思ったのでご紹介です。 QuickFireはFireworks内で使えるランチャーソフトです。名前の通りMacのランチャーソフト、QuickSilverのように使うことができます。 QuickFire 上記のURLから.mxp形式または.zip形式でダウンロードすることができます。 インストールすると「コマンド」内にQuickFireが追加されていると思います。初回起動時にキーボードショートカットについて聞かれるかと思いますが、ここは自分の好きなようにカスタマイズしましょう。 パネルを呼び出すとずらっとメニューが並んでいると思います。ランチャーというだけあって、Fireworksで行える行動がほぼ網羅されています！
【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。
こんにちは、シーブレインの toyama です。梅雨入りです。 サムネイル用の画像など、一定の大きさにそろえた画像を大量に書き出さないといけないときが、長い人生に一度や二度はあると思います。 私にも以前そんな瞬間があったのですが、その頃にこの技知ってればー！という技を今更知ったのでここに記しておくことにします。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで、適当に（いい意味で）画像を配置します。 3.「コマンド」→「ドキュメント」→「レイヤーに配分」。すると、適当に読み込んだ画像が一枚づつレイヤーに格納されます。 4.画像を書き出すための「最適化」を設定したあと、「書き出し」ます。 5.書き出しのダイヤログが出てきます。「書き出し」のプルダウンメニューから「レイヤーをファイルに変換」を選択します。3.で画像をレイヤーに分
黄金比をさっと算出！Metallic Ratio | バシャログ。
高木豊の次男がオランダ1部リーグ・ユトレヒト移籍！？いやあ、日本人の欧州リーグ移籍が活発ですね。kimoto です。 Web サイトに限らず、デザインをする時に黄金比を意識する事ってあると思います。 そこで、よく使われる比率をさっと算出してくれるサイトを紹介。 Metallic Ratio この Metallic Ratio というサイトでは、黄金比はもちろん白銀比や青銅比、単純な 4:3 など、よくある比率を一発で算出してくれるサイトです。 画面はこんな感じ。 上部の比率を現すエリアをクリックして算出したい比率を選択し… 下の数値入力フォームに数字を入れると、もう片方の辺の数値を出してくれます。 また、プルダウンで、入力フォームを横の辺にするか縦の辺にするかを選択でき、さらに、小数点をどこまで求めるかも選べます。 ちょっとした計算が億劫な時にいかがでしょうか。
Web 製作者必携？iPhone からソースが確認できる「ScriptBrowser」 | バシャログ。
ペルー代表との試合を見ましたが、今のところ 3-4-3 はイマイチ機能してないですね。だんだんモノになっていくのか？ kimoto です。 この前、iPhone の Web ブラウザいろいろということでまとめの記事を書きましたが、今回もブラウザのご紹介をしようと思います。 html や js、css などを見ることのできる「ScriptBrowser」です。 まず普通にサイトを表示させたあと、「Source」をタップ。するとハイライトされた html のソースコードが表示されます。 「折り返されてないのが見づらいよ！」というあなたは右下のアイコンをタップすればちゃんと右端で折り返してくれます。 「いかんせん横が狭すぎだろ…」というあなたも、横画面にすればその悩みが解決します。さらにピンチアウト、ピンチインで拡大縮小もできます。 「html しか確認できないの？」js や css もちゃんと
Dreamweaverの全角・半角変換拡張機能 | バシャログ。
チャンピオンズリーグ決勝を見るために頑張って起きましたが、眠気のため後半途中で撃沈した sakai です。 お客様から原稿をもらったら、半角カナ、全角カナが入り混じり、数字も半角だったり全角だったり。機種依存文字も使われてたー！ なんてことがよくあるかと思います。 今回は Dreamweaver で全角・半角や機種依存文字を一括変換できる拡張機能をご紹介します。 こちら 全角・半角変換拡張機能 CS3 用とありますが、CS5.5 でも問題なく動作しました。 こんな感じでダイアログが出て、変換をすることができます。 これまでは秀丸のマクロを使って一括変換をして、それから Dreamweaver にコピーして… という手順を踏んでいましたが、この拡張機能さえあれば作業を Dreamweaver に一本化できるので、ありがたい！ 是非お試しください。
iFrameを使ったFacebookページを作る際に気をつけたいこと | バシャログ。
AUのスマートフォンラインナップが発表されましたね。 今まで食指が動かなかったけどやっぱりINFOBARにキュンときたminamiです。 さて、今回も前回に引き続きfacebookの話です。 iframeで自由にページを作ることができるようになったとはいえ、 実際に制作する際には気をつけなければいけないポイントがいくつかあります。 今回はそのあたりを挙げてみました。 スクロールバーを出さないようにする facebookページの表示領域は通常で横幅520px、縦幅800pxとなっていますが、コンテンツのサイズがそれより大きくなると問答無用で横方向のスクロールバーが表示されてしまいます。アプリの設定で「iFrameサイズ」を設定しても変わりません。スクロールバーをページ内に出したくない場合は下記のようなCSSを記述して、万が一コンテンツが大きくなったとしても表示領域が変わらないようにしましょう
iPhone持ってるコーダーさんにオススメなiPhoneアプリ「CSS UNIT Converter」 | バシャログ。
バシャログ。の右サイドサバーにある「スタッフのつぶやきfrom 馬車道」が自分のつぶやきだけになっているので、もう外してしまったほうがいいのじゃないの？と思っているishidaです。つぶやかないんなら、外しますよ！ さてさて、今回はコーダーさん向けiPhoneアプリのご紹介です。 コーディング時、bodyにサイト全体のフォントサイズを指定することが多々あります。 ピクセルでの指定は、IE6で変更できなくなるので%（パーセント）表記を使いますよね。 そして各見出しなどのパーツのフォントサイズを相対的に指定しますが、 デザインデータ上ではピクセル指定なので電卓使って「12pxがベースでなので、16pxのサイズだと…」とか計算すんのが面倒だよっーと思って、最近は以下のiPhoneアプリを使ってます。 基準となるフォントサイズをピクセル指定で入力すると、em・%・pt単位に変換し、1〜35pxのサ
Firefox4と以前のバージョンを共存させる方法 | バシャログ。
こんにちは、minamiです。今いちばん欲しいものはランタンです。 3/22にFirefox4が正式公開となりました。ちょっとさわった感じだとchromeやsafariに負けず劣らず軽快ですね。 しかし、制作環境ではFirefox4と以前のバージョンを両方確認することも必要になるかと思います。 そこでFirefox4と以前のバージョンを共存してインストールする方法をおさらいしてみました。 試した環境はWindows XPです。 プロファイルを複数作る 方法としては、以前tanakaが紹介していたものとほぼ同じになります。Firefoxのプロファイルを複数つくって、各バージョンに対応させていきます。 windows XPの場合、firefoxのプロファイルは、 C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\P
長い画像を分割して印刷したいときはエクセルが便利 | バシャログ。
夜中に家に帰ったら食卓の上に宅配ピザが置いてあって、気がついたら丸々 1 枚食べきっていた sakai です。ブヒ。 今回はちょっと便利な小ネタをご紹介します。 WEB サイトのキャプチャやデザインカンプなど、縦に長ーい画像を印刷する場合は分割して印刷することになるかと思います。 ただ、ブラウザやアプリによっては分割印刷に対応していなかったりして、意外と面倒だったりします。 分割印刷する場合は画像をエクセルに貼り付けて印刷すると簡単に上手いこといきます。 例えば、以下のような長い画像。 これをエクセルに貼り付けます。（画像はエクセル 2003 です。他のバージョンでも手順はだいたい同様だと思います） 「挿入」→「図」→「ファイルから」を選択し、画像を指定して貼り付け。 続いて、「ページ設定」できちんと分割されるように改ページを調整します。 今回は縦長の画像なので「ページ設定」で「横：1 ペ
【Fireworks】9スライスをこんな風に使ってみました。 | バシャログ。
こんにちは。今年は夏フェスにはいかない!と決めたのに、ラインナップが発表されるとソワソワしているminamiです。 Fireworksネタです。Fireworksには9スライスという便利な機能がありますが、 ちょっと応用してこんな風に使ってみました。 ※作成例はFireworks CS5を使用しています。 9スライスとは、おさらい 9スライスはFireworks CS3から導入された機能で、ベクターシンボルやビットマップシンボルの端の形状を保ったまま、中間だけを伸ばすことができます。 9スライスはシンボルを作成する際に、オプションにチェックを入れることで有効にすることができます。 よく使われると思われるのが、角丸のオブジェクトの拡大縮小です。 上のようなサイトのデザインを作った時、テキストの長さが変わると、角丸の背景部分も伸ばさないといけなくなります。普通に拡大してしまうと角丸の形状が崩れ
Apple 関連のフォントを手に入れよう | バシャログ。
シーブレインのマニュアル作成サービスチームから「スマートフォンで読めるマニュアル作成」を PR するページを作ってほしいとのご依頼があり、ページをデザインました。 せっかく iPhone を素材に使うのだから、フォントも Apple 風にしたいわあ、といろいろ探した際に知ったいくつかのフォント情報をメモします。 ひと目でフォント判別できる一流デザイナーにあこがれる！ 1. Apple 日本語サイトのフォントは「AXIS」 Apple 公式サイトの日本語や Apple store で手に入るパンフレットには「AXIS」というフォントが使われていることが多いそうです。 その「AXIS」試用版が、無料でダウンロードできます。登録さえすれば商用も OK という太っ腹ぶりです。 なだらかなラインがスマートな、きれいなフォントです。 Type Project｜試用版ダウンロード http://www.
【Fireworks】グラフィックウィザードで大量の画像を自動で作る | バシャログ。
軽い腱鞘炎になってしまいました、toyama です。左手を使うキーボードショートカットが原因です。別名で保存とか、属性をペーストとかマスクとしてペーストとかグループ解除とかしようとすると痛いので、湿布に包帯を巻いてカバーしているのですが、広範囲に巻きすぎているのか左手だけ「リングにかけろ」みたいになっています。 この資料をもとにこの見出し画像を大量に複製して書き出してください！入れる文字はエクセルにまとめてありますので！見出しごとに写真変えてね！うんざりするほど大量にあります！納期は今日！というお仕事があると思います。 テキストをコピー＆ペーストすればいいだけなのに、どうしてこんなに辛いんでしょう。そんなときは Fireworks さんにおまかせ！ 自動的に画像をつくってくれます。 グラフィックウィザードを活用する こんな画像をテキストだけ変更して、大量に作るミッションです。 用意するのは
【Fireworks】スライスに一括で連番をつけてくれるコマンド | バシャログ。
地元では BS が映らなくなったり停電したりするほど雪が降ったのに、馬車道にはまったく雪が残ってないのはどういうことでしょう。 toyama です。同じ横浜市なのに… スライス、してますか？ Fireworks のウリのひとつに「Web 制作に欠かせないスライス機能」があるわけですが、今日はそのスライス機能をさらに便利にしてくれるコマンドをご紹介します。 スライスに連番をつけてくれるコマンドです。 その便利さたるや、もっと早く出会いたかった！今までの自分がバカみたい！というレベルです。 1.コマンドをインストール PIXEL LAB さんから Fireworks 用オリジナルコマンド（jsf）をダウンロードしてインストールします。 2.スライスを設定 例として、こんな感じのサイトを作っているとしましょう。 グローバルナビや画像にスライスを設定します。 矩形スライスを使うと早いです。 3.コ
プログラムのコード量を減らす MySQL 関数 | バシャログ。
みなさん琉球朝顔ってご存知ですか？朝顔の中でもとてもたくましい事で有名な種類ですが今年の夏から我が家の庭に植えた所、未だに花が咲き誇っていて季節外れな事この上ありません、、、なんか雑草化すると駆除は困難だとか、、、 さて今日は知っておくと何かと便利な MySQL 組み込みの関数たちをご紹介しようと思います。プログラムサイドに記述すると数行に及ぶ処理が、SQL ベースで行うとほんの数文字で済んでしまいます。 DATE, DATE_FORMAT 日付や時刻関連の関数はとても充実していますが、中でもよく使うのはこの辺りでしょうか。こんなレコードがある時、、、 mysql> SELECT created FROM users; +---------------------+ | created | +---------------------+ | 2009-06-05 13:33:26 | |
【Fireworks】テキストボックスの大きさを変更する | バシャログ。
台風に対する JR の弱さはなんなんでしょう、火属性でもついてんのかしら。toyama です。 相変わらず Fireworks の小技です。 Fireworks でテキストを打って、色やらフォントやら行間を設定して、これと同じスタイルでもう1ブロック書こうと思ったら、テキストブロックそのままコピペしてテキストを上書きするのが人情ってもんですよね。楽だし確実だし。 よくあるのが、[1]みたいな長文のテキストブロックそのままコピペして[2]を書いたら、[2]の文章が思いのほか短くてテキストボックスの端があまってしまったりする状態。 こんなアンバランスな状態でも、整列コマンドなどはテキストの部分だけを見て働いてくれるのでなんら問題ないと思っていたのですが「こういうのキライ！」と社内のデザイナーに言われてしまったので（名前は伏せます）、これを解消する方法をご紹介します。 1. テキストボックスを選
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
