April 16

css3でアニメーション・フェード効果

「CSS3でアニメーション」が面白いのでやってみました
もう一つマウスオーバーでフェードをかけられるのがいい感じです

ただ、今のところSafari3.1でしか見られないのが残念ですが
firefoxだと画像が切り替わるのみでフェードがかかりません

demoはこちらで

Safari3.1はココでダウンロード出来ます(Windowsもok)
cssのみでこんなフェード効果が出るとは驚きです!

ソースは以下に

more
posted by nei at 03:30 | HTML&CSS

February 18

デザインを変えるのは楽しいけれど..

このところ日替わりでデザインが変わる当ブログですが
やっと決まったかなと思うもつかの間
心配していたとおり
WindowsXP IE6.0での表示が...

サイドこそ落ちてませんでしたが影が透明になってないし
なんかスクロールバーのようになっている


browser.jpg


IEはpng画像の透明が扱えないというのをみた気がするが
もう7.0も出ている事だし大丈夫だろうとあまり気に留めなかった
が肝心の7.0のショットがないので確かめられなかったけど
ダメなような気がしてきた

いつものことながら
タメイキ...

以前にサイドが下に落ちてしまっていて驚いたことがありましたが
Windows IE ではwidthにpaddingも入るらしいので
オーバーしていたんでしょうね

Mac環境のfirefoxでいじっているとそういうことに気づかず
後でビックリということが多々あって
ちょっと変わった事をするのを躊躇してしまう

Windowsの方はこんな事あまり考えないんだろうな
(プロ意外の方は.. いやプロとおぼしき方でもMacで見ると崩れてしまっているサイトもあったような)


CSSをいじるのはキライではないけれど
こういうことが

疲れる。



追記
 IE 7.0ではpngの透明部分ちゃんと表示できるようです
 でもリリースされてはいますが自動配信は5月のようで
 まだまだ6を使っている方が多いような気がします

 画像差し替えなくては...


タグ:HTML CSS IE png
posted by nei at 07:35 | HTML&CSS

November 15

何故か文字化け

「GIMP MANUAL」のスタイルシートをちょっといじったので念のために
browsershotsをとってみた



気を失いかけた...

Garbled.jpg見事に文字化けしている!!

以前に撮った時は下半分は消えていたが文字は正常だった
いつの間にこんなことになってしまっていたのか

あ″〜〜。
続きを読む
posted by nei at 05:36 | HTML&CSS

September 29

ロールオーバー

cat.png画像の上にカーソルをおくと画像が変わる設定です
左の猫にカーソルを持っていくとこちらを向きます



まず↓2枚の絵を用意します

miry1.pngmiry2.png


ソースは以下の通りです

<img src="横を向いた猫の画像ファイル" onmouseover="this.src='こちらを向いた猫の画像ファイル'" onmouseout="this.src='横を向いた猫の画像ファイル'">

でロールオーバーの出来上がりです

カラーとモノクロ画像でもいいですね

猫の画像はVIVID様でお借りしました
有り難うございます
posted by nei at 20:23 | HTML&CSS

September 05

イメージマップ

1枚の画像に複数のリンクを設定する方法

catmap01.jpg


Mac
GIMP
freeware
 この画像の白い部分にリンクが設定されてます
 クリックすると各カテゴリが表示されます
 ニコニコマークはフリーソフトのページです 



設定の方法は画像の左上を0としてX座標(横)Y座標(縦)を<AREA>タグにCOORDSの属性値で指定します

catmap03.jpg範囲を指定する方法はその画像の形によって 
rect(四角形)は左上、右下の順に指定
poly(多角形)は左上から反時計回りにすべての頂点を指定
circle(円)は円の中心、半径を指定
以上の3種類です 
便宜上大雑把にとってますが

多角形などの場合は「GIMP」だとクリックしていくだけで座標がとれて
面倒なソースも書いてくれますのでリンク先のURLを指定するだけで後はコピー&ペーストで作成できます



具体的に上のマップのソースは

<img src="ファイルの場所" width="198" height="188" border="0" alt="catmap01.jpg" usemap="#catmap">
<map name="catmap">
<area shape="rect" coords="12,140,42,170" alt="Mac" href="カテゴリMacのURL">
<area shape="poly" coords="50,147,67,170,84,147" alt="GIMP" href="カテゴリGIMPのURL" >
<area shape="circle" coords="111,155,11" alt="freeware" href="カテゴリフリーソフトのURL">
</map>

となります


訂正
上のX座標80は84の間違いです

「GIMP MANUAL」イメージマップ作成方法
posted by nei at 08:34 | Comment(2) | HTML&CSS

July 16

ファビコン

ファビコンを作って設置してみました↑

絵はへたですが設置するのは簡単でした

サイズは16px 16pxが一般的のようです
保存は.ico形式で保存します

設置方法はHTMLの<head>と</head>の間に
<link rel="shortcut icon" href="〜ファビコン名.ico">と入れます
〜の部分はファビコンファイルまでのパスです

このブログの場合絶対パスを使っています




posted by nei at 02:40 | Comment(4) | HTML&CSS

June 24

.htmlファイルをmiで開く方法

昨日やっとの思いでFirefoxをバージョンアップしたら
miで作成した.htmlファイルが↓きつね色に染まってしまった

html01.jpg
Wクリックで以前はmiで開いてたのがFirefoxで展開してしまう
これはちょっと困る(かなりじゃまくさい事になる)

またまた解決方法をさがし回りました

で 見つけた答えは意外と簡単だった

controlキーを押しながらファイルをクリックして
出てくるメニューで「このアプリケーションで開く」か
「情報を見る」で「このアプリケーションで開く」でmiを選ぶだけ

で元に戻り

html02.jpg
Wクリックでmiで開くようになりました

アップデートは苦手だ!!

この記事を書きながら
こんな事知らないの私だけかも知れないと思いはじめてきた


参考にさせてもらったページ「教えて!goo
便利な機能満載のMac用テキストエディタ「mi」
posted by nei at 05:57 | HTML&CSS

February 15

音を入れてみた

こういうブログで音を入れるのはどうかな
とも考えましたが

せっかく入れ方が解ったのでちょっと入れて見ました

びっくりされたかたはごめんなさい

入れ方は簡単で画像を張るのと同じ要領で
<IMG SRC...を
<EMBED SRC...に変えるだけです

具体的には
<embed src="ファイル名" width="200" height="50"
autostart="true">または"false"です
trueにすればページを読み込んだ瞬間自動的に鳴ります
(ブラウザのプラグインを使って表示させるデータの場合)

音は「みや亭」様でお借りしました
有り難うございます

「white noize」というんですけど
猫の画像にもノイズ加工していて
私ってノイズがそんなに好きだったのか
自問自答中です

いつかは自分で作ってみたいと思っています いつか...



heightのところ「i」が抜けていましたので足しておきました
↑が正解です すみません
今音はけしています  3月6日現在
posted by nei at 21:28 | HTML&CSS

December 05

つかれた

昨日テンプレートを変えようと
適応すると中途半端な画が出てしまうので

出来上がってから適応しようと
一つ取り込んでスタイルシートを変えて
スタイルシートの変更を押して再構築で 
サイトを見てみると
全然変わってない取り込んだままの絵が出てきた

あわててそのテンプレートを削除して
元のに戻して確認 戻ってない
なんで?

FIrefoxで書いてたので
他のブラウザで見てみるとちゃんと戻っている
もう一回FIrefoxで見る 戻ってない!

もう狐ちゃんはほっといて
Netscapeで「links-left」の幅をちょっとふやし
マージンをその分0にして
これくらいで我慢しとこうくらいになったので
再構築(したと思うんだけど)

そしてこの模様を記事の追記に書いて
サイトの確認して おどろいた。。

右サイドが左サイドになっている
そしてはみだしている。。。
もう何がなんだか あたま真っ赤っ赤

もうそれならそれでいいわ!と
また左マージンを20pxにして
プレビューで見たときはうまく収まっていた

が 再構築して見てみるとはみ出したまま
もうこのままほっとこうかとも思ったりしたけど
ちょっとねー

またCSS開いて途方にくれてたら
ふっと思いついた
ひょっとしてとデザイン→コンテンツでみると
右サイドバーにしているところが全部左に成っている
何故だか解らないが(とかく不思議な事がよく起こる世界だ)
とにかく右に直して一安心...

その
追の追記は消してしまったけど
いまこの記事をかいて再構築すると
また左へ行ってるのではないか心配


posted by nei at 04:48 | Comment(2) | HTML&CSS

November 27

CSS

ブラウザによってスタイルシートの
ききかたがちがうので 苦労する

NetscapeとFirefoxが一緒というのは解るけど
SafariとMac用IEが一緒の反応をするというのは
ちょっと意外な感じがする
 
ちょっと直しては4つで確かめて(2つでいいんだけど)
こちらがうまく行けば あちらさんが歪んでいるというふうに
なかなかすんなりいかない

いっそ4つとも変だったら 初めからやり直せばいいけど
2つはうまくいってるのにとなると 事態はややこしい
何をどうすればいいのかさっぱり解らなくなる

どなたかブラウザを統一してください。

posted by nei at 08:00 | Comment(5) | HTML&CSS

November 22

テーブルタグ

<table>タグを閉じ忘れると
果てしなくテーブルが広がる

ある画像を記事に貼ろうとテーブルのなかに
配置された画像を貼る時に
間違って閉じる</td></tr></table>を消してしまい
それに気づかず 記事の確認をおすと

えらく左があいて
確認の記事はずーと右になってしまった
ちゃんと画像は表示されてるが
横スクロールを使うはめになった

なんか大変な事になったなと思い
慌てて消してしまったが

今になって 
スクリーンショットをとっておくんだったなと思うが
もう一度同じ事をする勇気は...ない!

またそれを右のサイドにいれてみると
サイドに画像は表示されて
メインの記事のところのバックがグレーになってしまった

画像の部分は</td>で閉じてるから
表示されたんだろう

テーブルは面白いことによくなる
ま テーブルに限らず色々と面白い事は起こるんだろう
はるかにわたしの理解を超えている...






posted by nei at 08:22 | HTML&CSS

October 25

とんでもない事になるとこだったのか

昨日のカラーコントラストチェッカーで 
明度があまりにも不足しているので
ちょっとでも 直そうと思い 

またCSSをいじって 文字色を変えてる途中
もう一つのブログ(仮に"La"としときます)を参考にしたくなり
いちいち再構築するのが 面倒だったので
これはそのまま置いておき

新しくウィンドウを開き
seesaaにサインインして(出来ないかなと思ったができた)
LaのブログのCSSを開き こっち(iMacのほう)の
CSSにキーワードを書き込み ビューを見てびっくり!
なんとそこにはLaのページが表示されている???
しかも 画像も文字もはみだした 
テンプレを変えたときのまんまの画面が

上のブログ欄は 『iMac~』になっているのに
どうなってしまったんだろう どうしよう〜
と しばらくは真っ白状態.....

とりあえずLaの方はサインアウトして
iMacのページを 恐々ブックマークからアクセスした
正常に表示されている よかった! 

いやまだ安心するのは早い
こっち(CSS)ほうはどうなるんだろう
いつのまにかブログ欄が Laになっている それをMaに変えて

落ち着いてみてみると 
キイワードを書き込むまえに戻っている
ビューをおしてみた ちゃんと表示されてる よかった
もうこのままとりあえず閉めて 無事生還

あまりなまぐさすると 予期しない事になってしまう






posted by nei at 21:35 | HTML&CSS

October 24

カラーコントラストチェッカー

cssで文字色を決める時 見えにくい色をついつい
選んでしまう そのほうが簡単で無難な組み合わせ
になるから
アイ・クリエイツ』さんのサイトでは 
色の明度 色差なんかを確かめられる
色覚異常のかたの見え方も 確かめられる

このページを調べて見ようと思ったが
サイドの色が 解らないので 似たような色で調べてみたら
明度差 色差ともに 不足していた

やはりというか...

posted by nei at 23:10 | HTML&CSS
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。