Fireworks 拡張アレコレ追加メモ Fireworks用にいろんなサイトで配布されているスタイルやパターンなどなど、いろんな素敵なものを追加するためのメモです。自分で作ったものを登録しておく方法の説明は今回は省略してます。 各素材等はmxp形式で配布されているものも多いので、その場合はExtension Managerでインストールしてください。下記はそうでない場合についてのお話です。 また、私の使用しているバージョンはCS4(Win用)なので、それに基づいてのメモとなります。バージョンやOS違いの場合は自分の環境に置き換えて確認してください。 スタイルを追加する スタイルパネルのオプションメニューで「スタイルライブラリを読み込み」を選択、スタイルライブラリの名前と場所を選択します。 「スタイルを読み込む」と「スタイルライブラリを読み込み」の違いは、前者の場合は現在のドキュメントに対

DW用 CSS3対応セレクタコードヒント 2010.04.04追記 このエントリ書いて寝て起きたら修正版が出てた！仕事速い！このエントリの下の方で属性セレクタがなんたらかんたら…と書いてる部分に対して、修正してくださってます。 CSSセレクターコードヒント修正 - dwlog.net （「 [ 」 を入れたら属性セレクタが出てくるようになったバージョン） が、しかし、今度は「：」を押しても反応がなくなったので作者さんのブログにコメント送ってみたところなう。(2010.04.04 10:58) 2010.04.04 12:19 さらに追記　自己解決 上に書いた「：」を入れても反応しないの件、Configuration/CodeHints/css_selector.xmlの50行目辺りに<menu pattern=":" DOCTYPES="CSS">に対する閉じタグ</menu>を追加したら

近況とか。CSS,PHP雑記の巻。 しばらく更新を怠ってたので、なんか書こうかなーと。 最近のもろもろ。雑記。日記。チラシの裏とも言う。 CSS関連　雑記 IE三兄弟にモヤモヤしてた。 検証ブラウザにIE8を含まなくちゃならなくなってから、IE6.7.8のIE三兄弟の対応にイライラすることも多々。「MSブラウザ、1つ増えたら1つ消えろや」と声を大にして言いたい。兄弟みんなが微妙に違うっていうケースにも遭遇してハックで凌いでみたり。よくないよね。メンテナンス性悪いなー、汚いなー、そもそもそうしなくちゃならないのって根本的にデザイン or 組み方がおかしいからだろー、とか自分で思いながらもそうせざるを得ない状況で悔し涙を流したり。そんでもってもうIE9の話とか出てきてるし。 IE8、ガッタンゴットンスパイラル これはだいぶ前の話だけど、IE8で思い出した。昔作ったサイトをIE8で見直したらho

PHP宿題　MVC の勉強 頂いた宿題勉強日誌。今日は「MVC」について。(MVC - Google 検索) フレームワークを利用する前にきっちり理解しておくといい内容とのこと。 実は前にSmartyを使ったことがあって、デザインとロジックを分ける主旨についてはイメージできるのだけれど、MVCと言われると「C」の役割がいまいち分からない。（MとCの境目がイマイチ分からない） MVCについて検索してるとフレームワークのお話に行き着く事が多くてなかなか初心者向けの簡単な説明が見つからないのだけれど、いろいろ調べた結果を自分なりに解釈すると、 表示担当がView 入力された内容についてModelに処理をお願いしたり、Viewに表示をお願いしたり、橋渡し的な役割をするのがController データの処理がModel（こっちでは入力されたデータの受取とか処理後の結果を直接Viewに渡したりはしない

Photoshopブラシ「まとめ」の「まとめ」 2009.11.22　2件追加しました。 2010.02.07　5件追加しました。 先日Photoshop用ブラシをFireworksで使うためのエントリを書いたので、その肝心のブラシまとめ記事のまとめ。ちょっと自分でもこういう系のエントリをブクマしすぎて把握できなくなってきたのでメモ的に。 勢いでまとめたのでリンクミスとかあったらすいません＞＜ 今まで自分がブクマとかしたブラシまとめ・紹介ページ とりあえず適当にジャンル分けしてみた。 光系・キラキラ系 光が超カッコいいPhotoshopのブラシ色々まとめ:phpspot開発日誌 きらめく光のPhotoshopブラシ200選 | CREAMU 45の光を表現するphotoshopブラシ集[記事紹介]*ホームページを作る人のネタ帳 光線を描くためのPhotoshopブラシ250+ | CREA

CSS 画像の一部を使う3つの方法 こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも！とか思ったのでメモがてらにエントリ。 3 Easy and Fast CSS Techniques for Faux Image Cropping | Css Globe ちなみに上記エントリでは、これらの方法を「Faux Image Cropping」って呼んでます。私の拙い英語力ではCropって「作物」としか記憶してなくて一瞬何のこっちゃと思ったんですが、辞書引いてみると「刈る」とかいう意味もあるんですね。なるほどなるほど。 ネガティブマージンを利用する方法 まず１つ目はネガティブマージンを利用する方法。 必要条件 親要素に「overflow:hidden;」を指定 一部分を利用する画像に対してのネガティブマージンの指定 >>ネガティ

PHP 画像にロゴを入れる 追記:090702 はてブのコメントでこのエントリの別案タイトルを頂きました。その名も「PHPのGDライブラリをつかったウォーターマークの入れ方！」（ryuzi_kambeさん、ありがとうございます）こういうのってウォーターマークっていうんだなーと。そういえばなんか聞いたことありました（多分）。普段は「透かし」とか言ってたよ･･･。 ブログを利用してご自身で日々の情報やら画像やらを更新してくださってるクライアントさんから「アップする写真にうちのロゴを入れたいんだけど」というお願いがきた。（画像パクられたくない的な感じ）画像加工のソフト使えばーとか思ったけど、最近放置気味だったPHPの勉強再開のいいタイミングかなーということで、PHPを利用してできないかやってみた。 やりたい事 画像ファイルの右下辺りにロゴを入れたい。 後で「この写真のロゴの入ってない元データを無

印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは

カラム落ちとか自分のコーディングとかの話 先日の自分もプロパティの書き順とかのエントリに頂いたブクマコメントでこういうのがありました。forestkさん、コメントありがとー。 padding, margin が width, height の側に無いと調整してたら 「カラム落ちした！どこ？どこのサイズがでかいん！？」 とかならないですか？ 結論から言うとならないようにしてます。というか、後からwidthをいじる必要がないように計算機使いながらやってます。探さなくていいように紙も使ってます。 せっかくなのでその辺り含めて、カラム落ちやコーディング手順について書いてみようかなと思いました。（前にもちょっと書いた記憶があるけど） ボックスについて カラム落ちって外枠のボックス自体に問題がある場合と中身に問題がある場合の2パターンあると思うんですが、まずボックス自体について。 頭の中の前提 2段組

PHP ファイルのアップロード 勉強メモ フォーム側のお約束事はこれだけ form要素に「enctype="multipart/form-data"」を追加する。 inputのtype属性には「file」を指定。 必ずPOSTメソッドを指定。 アップロード処理の流れ フォームに入力→送信 テンポラリファイルとしてアップロードされる ディレクトリにコピーして保存 テンポラリファイルとしてアップロードされたままにしておくと処理完了と同時に削除されてしまうので、ファイルを保存するために書き込み権限のあるディレクトリにコピーする。 $_FILES アップロードされたデータの内容は「$_FILES」に入る。 $_FILES['userfile']['name'] クライアントマシンの元のファイル名。 $_FILES['userfile']['type'] ファイルの MIME 型。ただし、ブラウザが

htmlSQL すごかった。感動した。 PHPでtitleタグの中身を取り出すのにfile_get_contentsで全部htmlソース取得する方法以外に何かいい方法ないのかなみたいな事を書いたら、コメントにて「htmlSQLというモジュールが便利です。」とお教え頂いたのでさっそく試した。 >>jonasjohn.de: htmlSQL - a PHP class to query the web by an SQL like language >>htmlSQL - live example　(デモ) すごいぞ。すごい細かい事まで指定できるぞ。 SQL文ちっくな書き方で抜き出したいものを指定してゲット。素人にも分かりやすい使い方で安心。ダウンロードするとデモが十数種同梱されてたので観察。titleの中身だけ欲しい時は「SELECT * FROM title」とか「SELECT text

get_meta_tags とか便利すぎる！ get_meta_tags とか便利すぎる！というつぶやきをTwitterで見かけて何それ何それ！というノリで調べてみた。（Twitterの公開はプロテクトされてるようなので直接発言にリンクはしないけれども） get_meta_tags　ファイル上のすべてのメタタグ情報を配列に展開する おお。なんかすごいぞ。やってみる。まずmeta書いた。geo.positionはいいや。 <meta name="author" content="red_hippy"> <meta name="keywords" content="php,勉強,get_meta_tags"> <meta name="description" content="descriptionの内容"> 次、phpの方。 <?php $tags = get_meta_tags("ファイル

簡単なお知らせを表示する(1) まぁそういうことで、さっそくタイトルの通り、簡単なお知らせを表示させるものをPHPで作ってみる。トップページに載ってるような感じのちょこっとしたお知らせをイメージしてる。更新情報みたいなものか。でも更新情報って詳細はこちら的なリンクがたいがいついてますよね。今日はリンクをつける気はないので敢えて「お知らせ」。 完成目標 入力内容は「タイトル」「本文」の2つだけ。 「日付」は更新された時の時間を表示する。 作るファイルはフォームページ(index.html)と処理・表示するページ(news.php)とログ用ファイル(data.dat)の3つにする。 エラー処理とかなし！後で！ 件数指定とかなし！後で！ パスワードとかなし！後で！ リンクを入れたいとかなし！後で！ 画像を入れたいとかなし！後で！ その他モロモロなし！後で！ 考えた流れ 目次的な・・・クリックした

だから変数に入れてからループ回せって話 >>「こんな書き方もできる！」追記しました。 先日RedLine Magazine : 簡単なお知らせを表示する(1)を書いたときに疑問だったことをメモってたんだけど、それに対して「こうだから変数に入れた方がいいと思うよ」っていうのをTwitterのお友達、reaさんに教えていただきました。 疑問だった内容、該当ソースはこんな感じ。 $news_list = file($data_file); $news_num = count($news_list); for($i = 0; $i < $news_num; $i++){ 処理内容 } $news_num = count($news_list);の部分について 「$news_num = count($news_list);」は別に変数に入れなくてもforの「$i < $news_num;」の部分を直

スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記　コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社　名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分

よく使うhtmlとCSSのソースセット 読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。 ナビゲーション部分用のソース サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて１枚もの画像になってる前提。 <ul id="navi"> <li id="menu01"><a href=" " title=" "> </a></li> <li id="menu02"><a href=" " title=" "> </a></li> <li id="menu03"><a href=" " title=" "> </a></li> <li id="m

IE6 standalone の落とし穴 ※2008年2月13日夜、「解決した！の巻」追記しました。 大袈裟なタイトルにしてしまったけど、そんな大袈裟なお話ではないです。ごめんなさい。 どうでもいいと言えばどうでもいい話なんだけど、2月13日に先駆けてIE7をstandalone版から正式版に変更した。とはいえIE6もまだまだ無視できないということで、IE6の検証にはevolt.org - Browser Archiveのものを利用させてもらってるわけなんだけど、どうもコイツは透過絡みの処理ができないっぽい。 jsでもcssでも「透明」と名のつくものは一切関知しません的な態度をとられてるんだけど、これ何とかする方法ってあるのかな。なんかIE7正式版+IE6 standalone環境もいいじゃんって思ってたけど、思わぬ落とし穴だった。もしかして私だけだったりする？わかんないけど。 つーことで

リストタグを使用時のIEでの変な隙間を消す 私的覚え書き。 リストタグを使用してメニューを作ったりする際にIEだけに変な余白が入る事がある。それを解消するネタ。 >>問題のサンプル・こんな感じ。 Firefox等で見るとちゃんとメニューの間が詰まっててＯＫなのだが、IEの場合だと勝手に余白が入る。marginやpaddingを0にしても、liタグを途中改行しても効果なしで、その都度ごまかしてきたりしてたんだけど、とりあえず原因はIEの場合、リスト内のインライン要素をブロック化すると余計な余白を入れるというかline-heightの解釈が正しくないっぽい。 >>対策はこんな感じ。 li { line-height:0; } a { display: block; background-color:#900; padding: 5px; color: black; text-decoratio

『Tab Groups』と『FaviconizeTab』 Firefoxの拡張ネタは大好きで自分でもいろいろ試したりしてるわけですが、最近特に自分にとってありがたいのがこの２つ。 Tab Groups FaviconizeTab タブをバンバン開いてしまう人間なのですが、さすがにタブが２段３段になって閲覧スペースが圧縮されていくのもキツいので入れてみたこの２つの拡張。今では自分の必須ツール。 『Tab Groups』についてはこちらが詳しいです。(自分もここで知りました) >>開きすぎたタブをグループ化できるFirefox拡張『Tab Groups』 | P O P * P O P んで、こんな感じになってます。 とりあえずRSSリーダーなどの常時開いておきたいサイトを１つのグループの中にまとめて入れて、FaviconizeTabで小さくして並べてます。Faviconが置いてあるサイトでは

Firebugを使ってjQueryを実行 先日jQueryの記事を書きましたが、Firefoxの拡張のFirebug使って、便利に使える技を紹介してくださってたサイトさんがあったのでご紹介。 Firebugをもっと使いやすくするためのブックマーク（jQueryバージョン） - WEBデザイン　BLOG 元ネタはLearning jQuery » jQuerify Bookmarkletだそうですが、上記WEBデザイン BLOGさんでも使い方を詳しく説明されていたので、すごく分かりやすかったです（例がはてブなのがいいw） 蛇足だと思うけど必要なもの Firebugをもっと使いやすくするためのブックマーク（jQueryバージョン）- WEBデザイン　BLOGの下記からjQuerifyをゲット。 Firebugを入れてない場合は下記からアドオンゲット。 >>Firebug :: Firefox