2006年04月29日

cssでページの右上に広告を表示する。

当WEBサイト右上に挿入している広告ですが
ブログのタグを複雑に変更して挿入しているものじゃありません。
CSSのpositionで再現しております

ソース
<div style="position:absolute;top:0;right:0;">
<a href="リンク先" target="_blank">
<img border="0" width="468" height="60" alt="" src="バナー画像">
</a>
</div>

このソースをページ内のどこかに挿入すれば自動的に右上に挿入されます。
※poztion:relativeをページ内で使用している場合、その前に記述する必要があります。

右上が空きスペースになっているBlogなんかは結構見かけるので
この方法で簡単に広告を配置してみてはいかがでしょうか?

ちなみに当サイトの広告はA8.netさんからご提供いただいてます。


posted by ねこまんま at 02:05
Comment(0) | TrackBack(0) | CSS

2006年04月28日

cssのみで画像をプリロードする方法

PHPSPOTさんの記事を見て思いつきました。
僕の中で
画像をプリロードする方法の決定版

body{
background: url(path/to/image1.png); /* 読ませたいイメージ1 */
background: url(path/to/image2.png); /* 読ませたいイメージ2 */
background: url(path/to/image3.png); /* 読ませたいイメージ3 */
background: url(path/to/image4.png); /* 読ませたいイメージ4 */
background: none;
}
これだと構造的に無駄なタグを追加する必要もなくjavascriptがoffでも問題なし。

追記2006/06/23



このエントリーの内容では正しく動作しませんでした。
cssで画像をプリロードする方法(改に正しく動作するサンプルを用意いたしましたのでそちらを参照ください。
posted by ねこまんま at 14:48
Comment(0) | TrackBack(0) | CSS

Google、3Dデザインソフト「Sketchup」を使ってみる。

Googleの無料3Dデザインソフト「Sketchup」が公開されたので今まで3Dソフトなんか使った事もないくせに早速使ってみました。(ダウンロードページ

まず、
ダウンロードページからダウンロードしてインストールします。
ダウンロードの前にSketchupのニュースメールを受け取るか聞かれますが、英語が読めないんでそんなのもらいません。
インストールが終わったので早速起動。
【Sketchup起動時画面】
Sketchuo1.gif
レクチャーがあるけどやっぱり英語なんで無視しました。
で新規作成
【Sketchup新規作成画面】
Sketchuo2.gif
へんなおじさんがいるんでとりあえず消しました。
selectツールでおじさんを選択して『Delete』で消せます。

lineツールでは直線がかけました。
Eraserツールでは選択と削除が同時に可能です。
TapeMagerツールではなにか(?)を計測できるようです。
PaintBucketツールでは面に対して色を塗る事ができます。
Rectangleツールでは正方形がかけます。
基準になるのは表示角度とドラッグした距離だと思いますが、
思い通りかけるようになるには結構なれが必要と思います。
Circleツールは円がかけます。
この2つのツールに関しては基本となるxyz軸に対してのみの描写か、
他のオブジェクトを基準にして書かれる気がします。
Push/Pullツールは面を立体的にすることができます。
Move/Copyツールは面や線のオブジェクトを移動する事ができます。
Rotateツールはまったく意味が解らないんですがこれで複雑な3Dを作れるんじゃないかという気がします。
Ofsetツールも同じく意味がわかりません。
Orbitツールで視点を変更できます。
Panツールで位置をZoomツールで拡大縮小ができるみたいです。

【Sketchupでがんばった出来損ない】
Sketchuo3.gif

結論としてSketchupの使い方がよくわかりません。
日本語のSketchupの使い方サイトをご存知の方はコメントもしくはトラックバックお願いします。



posted by ねこまんま at 01:34
Comment(3) | TrackBack(0) | google

2006年04月27日

Ajaxのライブラリーブックマーク

Yahoo! UI Library
Yahoo全般で使われているJavaScriptやCSSをまとめたBSDライセンスで使えます。
ちなみにBSDライセンスとは無保証・免責を宣言し、再配布する際に著作権表示を行なうことのみを条件とするライセンスです。


Slidebox 0.4.1
mooShow 0.03 beta
スライドショーを実装するライブラリ

Prototypejs
言わずと知れた最も汎用性の高いJavaScript Framework

どんどん追加予定

posted by ねこまんま at 02:26
Comment(0) | TrackBack(0) | Ajax

2006年04月19日

数値かどうかのチェック

phpのチェック用構文

整数かどうか
is_numeric($str)

自然数か
preg_match("/\A[1-9]{1}[0-9]{0}\z/",$str)
posted by ねこまんま at 16:28
Comment(0) | TrackBack(0) | phpチュートリアル

2006年04月18日

あなたのサイトのFlashが動かなくなる!

AdobeからInternet ExplorerがActiveXコントロールを処理する方法が変更されたとのメールが着ました。
Firefoxをメインブラウザに使用しているため、あまり気にせず保留していたのですが身近な所でも問題になっていてたので対処法を調べてみる。

Adobeのサイトで検索するといろいろな説明をたらい回しにされた後に解決法にたどり着きました。
アクティブコンテンツのアップデートに関する記事で配布されているjsファイルをダウンロードしてページに読み込んでおくらしいです。

cyanoでも独自の解決法を公開しいるので参考までに
2006年4月のActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript(Flashのバージョン検出機能付き)
posted by ねこまんま at 23:45
Comment(0) | TrackBack(0) | flash

2006年04月17日

携帯サイトの開発に最適なツール

携帯サイトの開発に最適なツール。


■(imode)iモードHTMLシミュレータ
http://www.nttdocomo.co.jp/p_s/imode/flash/tool.html
 NTT DoCoMo が配布しています。HTTPヘッダーが見れたり、HTMLの文法チェックをしてくれたり、iモードHTMLのバージョンを選択できたりと、必要十分な機能をそなえています。

■(ezweb)Openwave SDK Universal Edition
http://developer.openwave.com/ja/
 Openwave Systems 社提供の WAP2.0 対応コンテンツ開発のための統合開発環境。

■(vodafone live!)919シミュレータ
http://www.919search.com/search/main/simu_edit.html
 クイックサーチという会社がフリーで配ってくれてるエミュレーターです。エディタもついてます。

参照サイト Miko's Cafeterrace

posted by ねこまんま at 20:47
Comment(0) | TrackBack(0) | 開発環境

FireFox1.502リリース

FireFox1.502がリリースされました。
今回から自動更新という形でインストールされるようで
強制的にバージョンアップされるようです。
(オプションの詳細で自動更新をOFFにも出来ます。)
マイナーバージョンアップに関してはこういう形で完全に普及させていった方がいいですよね。

リリースノートによるバージョンアップ点
■Intel Core プロセッサ搭載の Mac をネイティブでサポートした、
Firefox として初めての Universal バイナリ - 新しい Intel プロセッサに
よってもたらされたパフォーマンスの向上に対応
■安定性の向上
■いくつかのセキュリティ問題の修正


またロボフォームが使用不要になっており、
greacemonkeyの挙動についてもおかしい(再々起動をすると正常に)との情報もあります。

また、多くのクライアントで自動更新機能が正常に動作していないらしいです。
(僕が使用してるPCは3台とも正常に動作しました)
自動更新されてない人は手動で更新しましょう。

とりあえず、まだ体感できていない安定性の向上に期待して使ってみます。

関連記事
最強のCSS編集ツール by Firefox
firefoxの便利な拡張機能
『Firefox 1.5』登場
posted by ねこまんま at 14:31
Comment(0) | TrackBack(0) | 開発環境

2006年04月07日

javascriptとcssで角丸を表現する方法

webサイト作成の際に手間になってくる角丸での表現ですが
画像を使わずにCSSのみで表現する方法があります。

<div style="background:red;color:white;width:200px;">
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
<p style="padding:2px;">
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
</p>
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
</div>
2006/4/8 IEで正しく表示されないバグを修正(赤字が修正部分)


Browser View

本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文




でもこれだけでは芸がありません。
javascriptを使ってソースの中に余分なタグを極力書かないようにして
CSSで角丸を表現する方法がNifty Cornersで公開されています。

//角丸を付けたいdiv
<div id="nifty">
<p>
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
<p>
</div>

//追加するjavascript
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
Rounded("div#nifty","red","whte"); //Rounded(要素名, 背景色, 前景色)
</script>

//追加するCSS
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}


つまりjavascriptファイルやcssファイルを外部化している場合
ソースコードのdivにidを付けるだけで角丸が実現できます。

すごく便利です。
是非普、及してほしいものです。

posted by ねこまんま at 01:19
Comment(6) | TrackBack(1) | javascript

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。