タグ:CSS・HTML ( 85 ) タグの人気記事
ふうせんかずら  
昨年撒き忘れたふうせんかずらの種を今年撒いたらちゃんと発芽しました。
これも、故郷の友人が4.5年前に送ってくれたものです。
花が可愛い。茶色くなったら種がとれます。
マウスオンで画像が変わります。
before
d0048312_20302619.jpg
after
d0048312_2031359.jpg


head内のcssに

.af { display: none; }
a.lnk { text-decoration: none; color: black; }
a.lnk:hover { background-color: transparent; }
a.lnk:hover .bf { display: none; }
a.lnk:hover .af { display: inline; color:#0000;}

投稿欄に
<center><a href="#" class="lnk"><span class="bf">[マウスオン前の画像]</span><span class="af">[マウスオン後の画像]</span></a> </center>

(エキサイトブログでのタグです。centerタグはいらないかも。)保証しません(^_^;)
このブログではa.link:hover のtransparentは#00ffffになっています。
.afや.bfはafter、beforeを短縮しましたがわかりやすければ何でもいいです。
大分前にどこかで見て応用させていただいたのですが、どこのサイトか忘れてしまいました。
そういえば意味不明のタグがたくさん追加してありますが、どこで使ったのだろう・・・・??

 *スキン編集は自己責任で。バックアップを取ってから編集したほうがよろしいかと思います。
[PR]
by mmi331 | 2010-08-23 20:36 | 野菜と花 | Comments(2)
野菜と花
野菜の中でもっとも美しい花のひとつといわれるこの花は・・・
ハイビスカスと同じアオイ科です。
畑には朝、5時~6時半の間に行くので花はいつもつぼみです。ぎりぎりまで待って写真を撮ったのですが、やはり、開き切っていません。
マウスオンで正体が現れます。

d0048312_2239195.jpg
d0048312_2249112.jpg

オクラでした~~
7月9日の加工と同じですが、元画像に①新聞写真風9、②ぶれ3、③エッジの強調5の模様です。これを白で塗りつぶし、黒フェードアウト100×2回(黒で塗りつぶし、白フェードアウト、2回、ネガポジ反転でもよい)コピー、③まで戻り、減算合成。 これをコピー、超新星、暗い画素優先合成。これをコピー、元画像に戻り、加算合成。(画像が明るい場合は、減算合成、加算合成。または黒フェードアウトしてから加算合成)写真の明るさにより、合成方法は変わってきます。

と、ここまで書いて余計なひと手間に気が付きました。
③のあと、超新星をかけます ④。 その後。塗りつぶしとフェードアウト、④超新星模様まで戻り、減算合成。あとは同じです。

ちょっと派手だったかな? 加算合成したら超新星の意味が無かった・・・・・(ーー;)
[PR]
by mmi331 | 2010-08-19 22:40 | 野菜と花 | Comments(3)
音符
今、同好会ではイベントお誘いのホームページを作っていますが、担当のNさんとHさんは音符がマウスストーカーでついてくるスクリプトをはめ込んでいます。ご紹介できないのが残念ですが、おもしろい!私はjavaスクリプトは全然わかりません。勝手にいじると動かなくなったりするのであまり使いません。このブログはjava scriptが使えませんので、例によってマーキーで。マウスストーカーほど派手ではありませんが・・・
d0048312_18571567.gif
 
d0048312_18574144.gif
 
d0048312_18575373.gif
 
d0048312_1858653.gif
 
d0048312_18582250.gif

d0048312_18584274.gif

音符は文字コード表から入力してフォントの色を変え、アニメにしたものです。動きはマーキーをいろいろ使っています。
ブラウザによっては音符が動いていない可能性もあります。

 
d0048312_18585591.gif

音楽フォントについては2009年3月2日の記事に書きましたので。
[PR]
by mmi331 | 2010-06-26 22:27 | html・css | Comments(2)
曽我の梅林


日曜日、桜まつりの後は時間があったので江ノ島へ行こう、とカーナビを江ノ島に設定して桜と菜の花を後に・・・
ところが、ナビが沈黙をしています。こういうときはたいてい、ナビと違う道を走っています。
ぐるっと一回りさせてやっとコースに乗りました。

途中、梅の木が沢山あり、梅の花が満開の場所に来ました。
曾我の梅林です。小田原梅祭りが開催されていたのです。(1月30日から2月28日まで)
せっかくだからと寄り道して梅のお花見をしました。

曽我梅林は、中河原・原・別所の各梅林からなり、約35,000本の白梅が植えられています。
食用梅の生産が目的のため、その殆どが白い花の白梅になっています。
私たちが行ったのは別所梅林です。紅のしだれ梅がとても綺麗でした。
晴れていれば富士山が見えて、梅の花もいっそう美しく映えるとのことでした。
あいにく富士山は見えませんでしたが、とにかく広大な敷地に梅、梅、梅の花が埋め尽くされ、圧巻でした。d0048312_222225.jpg


d0048312_220544.jpg
d0048312_2294668.jpg


思いがけず得をした気分になって帰路に着きました。
西湘バイパスに乗り損ねたので江ノ島には寄らずに帰りました。
 「カーナビが あってもなくても 迷い道」

一番上の梅は背景画像です

More
[PR]
by mmi331 | 2010-02-23 22:22 | おでかけ | Comments(2)
姫蔓蕎麦
姫蔓蕎麦(ヒメツルソバ)です。こんな時期ですが地面を這うように広がって咲いています。小さな小さな花が集まってぽんぽんのような形をしています。
d0048312_2242331.jpg


e0095659_22165574.gif
d0048312_21424585.jpg
姫蔓蕎麦(ヒメツルソバ)
タデ科の蔓性常緑多年草
ピンクの金平糖のような花を咲かせます。
特に手入れをしなくてもどんどん増えます。
グラウンドカバーに最適です。


 

 

画像はピンと、ひめつるそばの花だけです。
後はスタイルシートで表示していますが、他のブラウザではこのように(黒板の上に花の画像をピンで止めてある画像に)見えるかどうかはわかりません。
もうひとつのブログにアップロードしたものをそのままコピーして投稿しました。同じエキサイトブログですとこちらで画像をもう一度アップロードしなくても表示されます。
[PR]
by mmi331 | 2009-12-18 22:10 | ブログ | Comments(4)
CSS勉強会
今日はCSS(スタイルシート)の勉強会ということで午後、自治会館でお話を聞きました。
いきなり画像に枠をつける方法や、画像を重ねる方法を教わったわけですが、HTMLに関して全く初心者の方もいらっしゃるので何のことかわからなかった方も多かったと思います。私も基礎から教えて欲しかったのですが、ある程度わかっている人が対象だったのかもしれません。
資料はいただいていたので枠線や絶対位置の表し方はなんとなくわかりましたが、今回、今までわからなかったposition:relativeという言葉が相対位置を表すタグで、基準になるものだということがわかりました。
今までは(ブログで)なんとなく数値を変えながら位置を試していましたが、
これでバッチリです・・・・と、おもいきや。
やはりブログでは苦戦しています。ブログ独自のレイアウトが邪魔をしているのでしょうか?ホームページと同じようには行きません。
ブログで、position:relativeを使って再度、あれこれ。以前の記事にプラスしました。
  追記

まだまだ道のりは遠いです。早く「home」ページを作りたいのに。私の「home」ページです。

今日はようちゃんを保育園にお迎えに行き、夕食を食べさせ、送り届けたのでパソコンで遊ぶ暇がありませんでした。ようちゃんが教えてというのでネットであやとりのやり方を調べ、一緒にあや取りをしました。  はしごを覚えました  
http://あやとり.com/2007/03/post_8.html
 あ・・・、やっぱり遊んでいます。

10月に作って、そのまま眠っていた画像をアップします。。。これはハートを書いたわけではありません。
d0048312_073572.jpg

[PR]
by mmi331 | 2009-12-09 23:56 | html・css | Comments(2)
びっくり
明日、スタイルシートについての勉強会があるというので、最近作ったページを手直ししてHTMLやCSSのチェックをしてみました。HTMLのチェックはAnother HTML-lint gatewayでチェックして問題がなければw3cのチェックを受けます。
W3C HTMLチェックサイト
W3C CSSチェックサイト
ここで検証してエラーがなければW3Cのアイコンがもらえます。
私のページは今までそんなことも知らず、あちこちのサイトをかじって真似ばかりしていたので当然ぼろぼろです。今回、思いなおしてシンプルなページを作って試してみました。CSSはエラーなしで、アイコンをもらい、HTMLはAnother HTML-lint gatewayで100点をもらったのでW3Cで検証したところ、見事に跳ねられました。英語なのでよくわからなかったのですが、文字コードが不正なようなことが書いてあります。
う~~ん、わからぬ。もう一度Another HTML-lint gatewayでチェックし、よ~く見たら丸囲み数字の部分が文字化けしています。↓が、???になっています。
これは機種依存文字だからはねられたのでしょうか。なんとかならないかと調べたらallaboutさんに回避策が書いてありました
http://allabout.co.jp/internet/hpcreate/closeup/CU20051102A/
そこでさっそく丸囲み数字を数値文字参照で書きなおし、パソコン側ではエラーなしと出たのでアップロードしたら、げっ、重大なエラーと出ます。</html>のあとにまだ何かあります・・・と。
アップロードしたページを見たら最後のほうに何やら訳のわからない文字が・・・・(Fc2の秘密の呪文かもしれないので縮小してはっきり見えないようにしました)
d0048312_2346218.jpg
これではみっともないので数字を丸のない普通の文字にしました。
お墨付きはもらったけど、シンプルすぎて面白みのない私のページでした。
(上記のチェックサイトでは内容は全くチェックしません。文法だけです。したがって点数が良くても良いページとはいえません)

昨日の・・・
gifです
d0048312_23423936.gif

超新星をかけて明るい画素優先で合成したものです。これに波紋をかけ、切り抜きました。
JPGなのでぼやけた色になっています
d0048312_2345586.jpg

[PR]
by mmi331 | 2009-12-08 23:03 | html・css | Comments(0)
手作り
9月の半ばに長女の家に行った時、卓上ピアノの入れ物を作って~、と言われ、ミシンを買ってあげると言ったら、忙しいからお母さん作って。と言われた。
長女は幼児が二人いるとはいえ、専業主婦です。仕事を持っている私に作ってくれとは何事! まぁ、急がないと言うので承諾しましたが、10月、昭和記念公園に行った帰りに立川の手芸屋さんで、やっと布を買い、5日前にやっと着手し、3日前に送りました。ミシンさえ出せば早いものです。
が、娘から卓上ピアノの寸法を聞いただけなので、製図無しであーでもない、こーでもない・・・布以外は家にあるもので済ませました。ボタンは娘がボディコン時代に着ていたコートのボタンです。一応裏地もついています。   枠はスタイルシートのgrooveです。

袋
夕べ孫からありがとうの電話があり、どうやって作ったの?って聞くのでミシンで縫ったのよ、って言ったら、「えっ!ばぁばがヌッたの?これ全部?」と驚きます。・・・・?
(キティちゃんを)クレヨンで塗ったの?色鉛筆で塗ったの?・・・・

貴方たちのママは縫い物をしたことがないのか??
あなたたちのママの親の顔が見てみたい・・・って、私でした。

ミシンを出したついでに、昨年買ってそのままになっているフリースの布で肩掛けを作りました。周りを全部バイヤステープで囲むだけなので超簡単!・・・・と思ったらそうでもなくて四苦八苦でした。製図はありましたが作り方がなく、考えながら作りましたが、失敗作品なのでとてもドアップではお見せできません。寝るときに肩が寒いので着るつもりです。
やっと日の目を見たフリース  枠はridgeです。
フリース肩掛け

メモ
<img style="border:15px ridge #0f9"  src="httpから始まる画像のURL"
width="300" height="323" alt="フリース肩掛け">
[PR]
by mmi331 | 2009-12-03 21:50 | Comments(5)
西洋桜草 CSSで画像を重ねる
パソコンくらぶの先生からcssで画像を重ねるというPDFが送られてきました。
3枚の画像をスタイルシートで重ねるというものです。宿題のようですが、回答もちゃんと送られてきたので作ってみました。でも、テーブルタグを使っているのでこのブログでは出来ません。gooブログは簡単に出来るそうです。普通のホームページもテーブルを使って出来ます。
テーブルタグを使ったホームページでの重なりです。ついでに画像の枠もCSSでつけました。

エキサイトブログではテーブルタグが使えないので背景画像とDIVタグを使って3枚の画像を重ねました。
今年初めて咲いた我が家の桜草です。ピンはフォトスケープから持ってきました。
 

桜草S
ピン 










このブログで使用したタグですので他のブログやページではレイアウトが崩れる場合があります。(私のgooブログではログインメニューがず~っと下に行ってしまい、あわてて削除しました)
(メモ)
<div style="background-repeat: no-repeat;background-image:url(背景画像のURL);margin-top:30px;margin-left:10px"><div style="margin- top:-30px;margin-left:20px"><img src="上に重ねる画像のURL" width="164" height="157" alt="桜草S"></div><img style="margin-top:-220px; margin-left:30px" src="ピン画像のURL" width="50" heught="70" alt="ピン">


</div>

数字は画像によって変える。背景画像は最後の</div>までに現れるように空白または文字入れまたは透明画像を配置する。


relativeタグを使って 12月9日追記


桜草小

ピン

桜草



<div style="text-align:center"><div
style="position:relative"><div style="position:absolute; top:80px;
left:50px"><img style="border:5px solid #0f9" src="img/sakurasouS.jpg"
width="164" height="157" alt="桜草小"></div><div
style="position:absolute; top:30px; left:70px"><img src="img/pin.gif"
width="50" height="70" alt="ピン"></div><img style="border:15px ridge
#0f9" src="img/sakurasou.jpg" width="410" height="349"
alt="桜草"></div></div>


tableタグを使ってgooブログでも試してみました。
[PR]
by mmi331 | 2009-12-02 23:32 | html・css | Comments(2)
パンジー
我が家の菊も咲き、桜草の植え替えもし、大根や、小松菜のの間引きもし、・・・でも、全然写真を撮っていないので加工も気が向きません。タグの見直しをしていますが、所詮あちこちのサイトのまねばかりしていて、ちゃんとした基本が出来ていないので、エラーがあっても自分の力で全部直せません。yahooの無料ページはCSSのチェックサイトに上げても不明のエラーと出るばかりでどこが悪いのかわかりません。そこで、CSSのURLだけをあげてみると、あ~ら、「エラーなし」と出るではありませんか!じゃ、yahooさんのCSSとぶつかっているのね。・・・と、良くわからないくせにyahooのせいにしています。(^_^;)

今日は暖かい一日でした。1時間ほど小学校の花植えのお手伝いをしてきました。もう、パンジーが出回っています。私も、昨日ビオラを買ってきました。もう、種から育てるのはしんどくなってきました。(西洋桜草は種からです。)
今日植えた小学校のパンジーです。

 

小学校のパンジーです         

以前、「どんぐりと山猫」様からタグをお借りしてアップしたエンドレスマーキーの記事を探してソースを貼り付けて気がついたのですが、エキサイトブログは<を二つ書く必要はないのでフォントサイズを1や0にする必要もなかったのですね。今やっと気がつきました。

<marquee scrollamount="2" direction ="left" style="background-image:url(http:から始まる画像のURL);">
--文字を入れる場合はこの中に--
</marquee>
[PR]
by mmi331 | 2009-11-06 23:03 | Comments(4)