スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSで水滴を書いている?!

これすごすぎる~!
CSSだけで、この水滴を描いているらしい。

CSSで水滴を描く

CSSで水滴を描く


photoshopで作れって言われても、簡単に作れませんて~

参考サイト

CSSで描画された水滴グラフィックスが凄い
スポンサーサイト

正規表現でaタグからURLだけ抜き取る

正規表現を使ってaタグからURLを抜き出す方法。
前も使って、忘れてたからメモ。
正規表現の最短マッチを使うのがポイント。


$html = '<a href="http://test.com" name="taitol">test</a>';
$pattern = "/<a[^>]+href=[\"']?([-_.!~*'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)[\"']?([^>]*)>/";
preg_match($pattern, $html, $match);
print_r($match);


結果はこんな感じ

Array
(
[0] => <a href="http://test.com" name="taitol">
[1] => http://test.com
[2] => name="taitol"
)

日付Picker

入力フォームとかで日付の入力補完をするjavascriptをいくつかメモ。

月表示、週表示、日表示が可能でイベントをドラッグ&ドロップで移動可能:FullCalendar
1週間が基本の日付ピッカー
Googleカレンダーみたいなカレンダー
その他色々
その他色々2
角丸を使った可愛いカレンダーピッカー

日付じゃなくて、時間だけの入力補完。
jQuery.ptTimeSelect

CSSレイアウト時のよくやる失敗と対処法

■floatでレイアウトしたときのボックスの間に隙間が出来る
→隙間が出来るボックス要素全てに float 要素を追加

■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る
→ 下記を追加
img { display: block; }

■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる
→ずれる<div>等に vertical-align を設定する(top 又は bottom)

■ <td>内のフォントが正しく指定したとおりでない(Win IE Mac IE)
→<td>の中に<span>をいれて対応する

■MacIEで<div>を floatさせると表示が崩れる。
→ フロートさせるdiv の width height 属性を指定する

■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると
隙間が出来てしまう
→ overflow:hidden;
font-size:1px; を追加
line-height プロパティ値をチェック

■ background-imageで指定した画像が表示されない
外部CSSに記述している場合、そのCSSファイルからの相対パスで表記する必要があるので、パスの記述に間違いがないか調べる

■ Windows版 IE 6 で 高さ 1px の div が作成できない。(10pxくらいのdivになってしまう)
→height:1px; overflow:hidden;
と記述する。

■ Windows版 IE 6 で float 時の margin が 2倍に解釈されてしまう。
→display: inline; を加える
(CSS2 の仕様では「float を指定した要素は display の指定を無視する」のでほかのブラウザでもOK)
float: left; display: inline; を1セットと覚えておくと楽。

■ Windows版 IE 7 でcssのみでブロック要素をセンタリングできない。
→ センタリングしたい要素に margin:0 auto;
→ 親要素に text-align: center;
(厳密にはIEのレンダリングモードによるのでまずそれをチェックすること)


参考サイトはコチラ

エレメントとエレメントを繋いで自由に動かせるスクリプト

サイトマップを作ったり、ER図とかもこれで作れてしまうかも。
まだ、どうやって実装してんのかとかは見てないけれど・・・

こないだ読んだ雑誌に「今後はwebのモック版とかはfireworksやphotoshopからHTMLで行うようになる」と書いてあったけど・・・
これも出来れば、HTMLでサイトマップとかまで作れちゃうから便利かもですね。

[JS]エレメントとエレメントを繋いで自由に動かせるスクリプト -jsPlumb

入れ子になったdivの子要素にmargin-topを入れた時のfirefoxのバグ

下記のようなCSSとHTMLがあった場合のfirefoxのバグについてメモ。
style.css

.boxA {
background-color:red;
height:260px;
}
.boxB {
margin-top:5px;
background-color:blue;
height:190px;
}


margin.html

<div class="boxA">
<div class="boxB">
box A B
</div>
</div>


このとき、IEだと正常にboxA と boxBの間に余白が入る。
IEで見た時のキャプチャ

同じものをfirefoxで見ると余白が入らない。
firefoxで見た時のキャプチャ


これはfirefoxのバグらしい。

margin-topで起きるFIREFOXのバグ

対処法は2つ。

1.margin-topではなく、padding-topを使う。
2.boxBにfloat:left を入れる。

注:1の場合はboxBにも背景とかを設定しているとIEと同じにならない。

zendで、特定のアクションではZend_Layoutを使わないようにする方法

通常、同じレイアウトの部分をZend_Layoutを使って共通化すると管理が楽になります。
ただ、使いたく無い場合もあるのでそんな時のメモ。


public indexAction()
{
Zend_Layout::resetMvcInstance();
}

とアクション部分に1行書けば、Zend_Layoutは使われずに、viewの部分だけ表示されます。

viewも使いたく無い場合は

$this->_helper->viewRenderer->setNoRender();

この1行でOKらしい。

参考サイト

特定のアクションではZend_Layoutを使わない

また新しい技術「Appcelerator Titanium」

HTMLやJavaScriptでWindows/Mac/iPhone/Androidアプリを開発するフレームワーク「Appcelerator Titanium 1.0」と言うのが公開されたらしい。
AdobeのAIRみたいに、デスクトップアプリケーションとかが作れるフレームワークみたいだけど・・・
AIRもそんなに流行っているようには見えない中、手を出した方が良いのか迷うところです。。

iPhone/Androidってとこが、魅力的だけど。。。

GoogleAnalyticsアクセス解析から特定IPアドレスを除外する方法

自分のIPだけは除外したいなどの場合に便利です。

GoogleAnalyticsアクセス解析から特定IPアドレスを除外する方法

IE6など古いブラウザのサポート終了の波が押し寄せているようです

CSSハックとかを駆使してIE6の対応をしてきてきたけれど・・・
ようやくその魔の手から逃れる事が出来そうです。

IE6の“葬儀”行われる Microsoftから献花も
Google、IE6など古いブラウザのサポート終了へ

googleとか大手でそういうのやってくれると、
客の説得もしやすいってもんです。

無料で出せるニュースサイトとか

SMO(Social Media Optimization(ソーシャルメディア最適化))対策の一環で、無料のニュースサイトとかに登録して、プレスリリースとかを流す方法があるそうです。
無料のサイトをいくつかメモ。

Yahoo!オンビジネス
プレスエクスプレス
NEWZINE(ニュージン)
ComSearch
DirectPress!
ニュースマッチプレス
PressPost(プレスポスト)
プレスアップ
プレスパートナーズ
バリュープレス
無料プレスリリースの配信受付サイト一覧
エヌプラス

phpでCSSを動的変換する「Smart*CSS」

便利そうだけど、smartyも必要ってとこが導入のハードル高いですね・・・。

phpでCSSを動的変換する「Smart*CSS」

でも、今後の予定で
「Smartyを外す … 導入をもっと簡単にしたい。変数ぐらいは自前で実装しよう」
って書いてあったから、今後に期待です。

PHPでexcelを作成!!

ショッピングカートとかを作っていると、請求書とか納品書を出力する場面が出てくるんですが、今まではPDFとかにしてそこに、FPDFとかを使って座標位置とかで納品書を作っていたんですが、何の気なしに検索してみたら発見!

PHPでExcelを操作・作成出来るPHPExcel
2年くらい前からあるみたいですが、使えるようになれあかなり便利ですね。

簡単な使い方は下記URLを参照

http://journal.mycom.co.jp/articles/2009/03/06/phpexcel/002.html



ただ、PHP5.2以上らしい。
今のサーバー5.1なんですよねぇ・・・。


とりあえず、テンプレートのxlsを読み込んで、それに追記して、ダウンロードさせるやり方。
excel2007がいいらしいけど、持って無いので2003とかの方で試してみました。


// 必要なクラスをインクルード
set_include_path(get_include_path() . PATH_SEPARATOR . './PHPExcel/Classes/');
include 'PHPExcel.php';
include 'PHPExcel/IOFactory.php';

// ファイルを読み込み
$reader = PHPExcel_IOFactory::createReader('Excel5');
$xl = $reader->load("template.xls");

// セルの値を設定
$xl->getActiveSheet()->setCellValue('A1', date('Y年m月d日'));
$xl->getActiveSheet()->setCellValue('A2', '文字');
$xl->getActiveSheet()->setCellValue('A3', 123);
$xl->getActiveSheet()->setCellValue('A4', '=A3 - 100');

$writer = PHPExcel_IOFactory::createWriter($xl, 'Excel5');
#$writer->save("output.xls");
ob_end_clean(); // 出力バッファをクリア

header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Disposition: attachment;filename=output.xls);
header("Content-Transfer-Encoding: binary ");
$writer->save('php://output');

propelでexitsを使う

propelでexitsを使う方法はCriteria::CUSTOMを指定して使う。

$con = Propel::getConnection();
$c = new Criteria();
$value = mysql_real_escape_string($_POST['value'], $con->getResource());
$sql = "exists (select * from customer where customer.id = order.id and name = '{$value}') ";
$c->add(OrderPeer::ID_I, $sql, Criteria::CUSTOM);

Google AdWordsキーワードツールを使ったキーワード選定方法

Google AdWordsキーワードツールを使ったキーワード選定方法について
丁寧にビデオで解説してくれています。
とても勉強になります。

【ビデオ解説】Google AdWordsキーワードツールを使ったキーワード選定方法 | 海外SEO情報ブログ

webデザイナーのためのjQueryベストプラグイン&チュートリアル10個

webデザイナーのためのjQueryベストプラグイン&チュートリアル10個

・Amazonみたいにグリングリン回る

とか、そのうち使ってみたいかも。

プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。