カテゴリ:html・css( 55 )
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)
西洋桜草 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)
ワードアート
ワードアートで遊んでいます。
前回はwebdingsのハートをワードアートに入力しましたが、今回はIMEパッドの文字一覧から傘の絵文字を入力しました。面白い物があったら何でもいいです。
(傘の絵文字はUnicodeその他の記号から入力しました)
JTrimで全選択、50度回転させた3コマでアニメにしました。(32KBです)
ワードアートの書式設定→サイズ→回転角度を入れても可
d0048312_2226620.gif

ワードアートギャラリーを開き、虹色の文字をクリック→OK
d0048312_22342314.jpg

IMEパッド文字一覧を出し、ワードアートテキスト編集欄に好きな文字(絵文字)をクリック、エンターキー、・・・いくつか入力します
d0048312_2237491.jpg
こんな風になります
d0048312_22385484.jpg

ワードアート形状(abc)をクリックします
d0048312_22403854.jpg

マルを選んでクリック
d0048312_22425990.jpg

大きさや形を変えます。アクティブにして矢印ドラッグで簡単に変えられます。
d0048312_22462534.jpg
影はここをクリックして無しにすることが出来ます。
d0048312_22503178.jpg

d0048312_2345033.jpg10月31日の回転ハートはツールの回転ボタンで3クリックずつ回転させたものをアニメにしました。半分くらいで回転しなくなるので今度は逆回転させて1回転させるようにしました。

3クリックごとにコピーしてJTrimに貼り付け、15~20%ぐらいにリサイズします。それを一コマとします。
こんなふうになります。このハートはwebdingsのY入力です。ワードアートギャラリーの真ん中のスタイルにテクスチャを入れ、奥行きを出し、表面を(たぶん)プラスチックにしています。何から何までごった煮です。
d0048312_22575220.gif

10月31日のアニメ画像は同じサイズになるように余白を入れました。
[PR]
by mmi331 | 2009-11-05 23:03 | html・css | Comments(10)
訂正
昨日アップしたホームページのリボンの作り方に また 間違いがあり、訂正しました。
ご指摘がなかったのでだ~れも見て無かったようです。ある意味 ホッとしましたが・・・
⑤で透明度を指定して合成というところを明るい画素優先合成にしてしまいました。やはり、あせらないでゆっくり作らないといけませんね。ホームページはいつもメモ帳で書きます。Terapadもあるのですが、最初に勉強したサイトがメモ帳で書くように書いてあったので律儀にメモ帳で書いています。最近、ホームページは加工の仕方しか書かないのでタグも忘れてしまい、面倒になったので直前に書いたページのソースをそのまま画像のURLと大きさと文章だけ変えて済ませています。「home」ページそのものを直さなくてはいけないのですが、行き詰っています。誰か、おしえて~~。
ソースの一部です(青い部分が訂正したところ)。シンプルです。ソースはメニューバーの「表示」→「ソース」で見ることが出来ます。クリックで拡大します。
d0048312_20502282.gif
フレームを使っている場合は右クリックから見ることが出来ますが、最近はソースを見えないようにするところもあります。
yahooや、gooブログは文字化けして見られないのですが、エキサイトブログはちゃんと見られるので参考になります。
*12日訂正:コメントでで教えていただきました。IE・8では、ちゃんとソースが見られます。しかも、行番号が付いて色分けまでしてあります。あら~、IE・8にしなくちゃ。


10月は花が少ないのですが、今、プランターのメキシカンセージが咲いています。挿し木で簡単に増え、大株になります。
d0048312_22444094.jpg
ウェーブの枠はいつも500x500から角丸切りぬきで枠を作っていましたが、これは余白で作りました。(計算しなくてはいけないのでちょっと頭がいたいのですが・・・)
角丸切り抜きではぼやっとした模様が出来ますが、余白ではくっきりした模様になります
d0048312_2391076.gif

[PR]
by mmi331 | 2009-10-10 23:10 | html・css | Comments(4)
文字の大きさ
ブラウザの「表示」→「文字のサイズ」 から、文字の大きさを変えることが出来ますが、今まであまり気にしていませんでした。
が、一昨日、ブラインド枠のことを書いているとき、文字が小さくて読みにくかったのでブラウザで文字のサイズを「中」から「大」にしたところ、
あらら、せっかく乏しい脳みそを絞って書いた枠の中の説明文が大胆にはみ出しています。
あわててお詫びの書き込みをしましたが、考え直して文字サイズを固定してみました。
なんとか見られるようになり、お詫びの一文は消しましたが、・・
なるほど~、よく、文字サイズを固定しないほうが良いというのは、こういうことだったのですね。
視力が弱い人はブラウザで文字を大きくしてみているわけですから固定されている文字は小さくて見えにくいですね。レイアウトデザインだけにこだわっていると思わぬ失敗をしていることに気がつきません。
下は文字サイズを絶対値のpt(ポイント)を指定したものと、何も指定しなかったものです。
最初の画像はブラウザの文字サイズを大きくしても変わらないと思います。
次の画像はブラウザの文字を大きくするとレイアウトデザインが崩れます。(サイズ「中」でぴったり収まるように書いています)
気がつかなかったとはいえ、今までもやっていたかもしれません。反省。


30幅の
グリーンのブラインド枠に(中は黒)
名前を入れて(濃いピンク色)
バラの花の写真を
加算合成
ピンク透明度50で
枠25・丸め半径22の
角丸切抜き
この文字は
フォントサイズ
9ポイントで
書いています。
                         pt(ポイント)は固定された大きさなので
                         ブラウザの文字を大きくしても同じです


30幅の
グリーンのブラインド枠(中は黒)に
名前を入れて(濃いピンク)
バラの花の写真を
加算合成
ピンク透明度50で
枠25・丸め半径22の
角丸切抜き
この文字は
フォントサイズを
指定しないで
書いています。
                     ブラウザの文字の大きさを大きくすると
                     レイアウトが崩れます。

あ~、しんど

初心者のためのホームページ作りよりフォントのコントロールについて banbanさんのページです
[PR]
by mmi331 | 2008-11-18 21:15 | html・css | Comments(3)
背景画像
マーキーは見えないブラウザもあるということで、自分で遊んでいるだけですが、
背景画像の貼り方についてちょっとメモしておこうと思います。
下の画像ではグラデーション画像を背景画像として使用しています。
YYYYY
ハートはフォント(webdingsのY)です


<div style="background-image:url(背景画像のURL)">
この間にマーキーのタグ(ソース)を書きます。</div>

以前の説明では</div>が抜けていました。お詫びします。
この背景画像URLですが、自分のホームページにアップロードしてその画像URLを貼り付けてもいいのですが、こちらにアップロードして使用することも出来ます。
まず、参照から画像をアップロードします。gifまたはjpgのファイル名(アップロード後の)が出ますのでクリックします。画像が現れますので画像の上で右クリック。プロパティで画像のURLが表示されていますのでそれをコピーして(背景画像の URL)欄に貼り付けます。
投稿欄の画像は消します。ただし、参照でアップロードした画像は削除してはいけません。なくなってしまいます。
追記*単純にプレビューで画像を表示させ、右クリックでプロパティからURLをコピーした方がいいです。上の方法でも背景画像は表示されますが、メモ帳編集などのときはプレビューで表示された画像のURLじゃないとうまく画像が表示されませんでした。失礼しました。
メモ帳編集やスキン編集も一度exblogのアップロードしてから、画像のURLを使用します。
なお、バナーなどはマイイメージアカウントに登録しておいた方がいいと思います

スキン変更→スキン編集→HTML編集→マイイメージアカウントにイメージ登録

上のマーキーでは私のスキンの幅が500なので幅500の背景画像を使用しました。
文字やマーキーの高さ分(<div>~</div>の間分)、背景画像が表示されます。
*これはexciteブログで試したことです。他のブログはわかりません。
[PR]
by mmi331 | 2008-03-27 21:08 | html・css | Comments(7)
marquee
急に暖かくなり、梅の季節から桜の季節に移り変わりつつあります。
そんなに急がないで~~
梅の花のマーキーです。
他のブログで見かけたマーキーですが、テーブルタグが使ってありました。
exciteブログではテーブルタグが使えないのでdivタグを使用しました。動くかな?
こんなことばっかりしているから「プログラムの終了」画面が出るのかしら005.gif


[PR]
by mmi331 | 2008-03-19 19:59 | html・css | Comments(2)
朝から暖かい日が続いています。朝食前に畑に出かけて菜花類を収穫して、ちょっと違う道を通ったら、意外な場所を発見。細い階段の奥に稲荷神社があるのです。赤い鳥居が何本もあってそこをくぐるとお稲荷さんがあります。両脇に狐が鎮座しています。
写真に撮ったけど、もしかして個人のお宅の守り神様かもしれないのでアップしませんが、なんだか楽しい朝のひと時でした。もちろんお賽銭を入れてきました。

その階段の脇に咲いていた寒緋桜です。大きな木で、満開でした。
スタイルシートで枠をつけました。
上からridge、dotted、20pxの色枠です

写真にridge枠をつけました

写真にdotted枠をつけました


背景色20pxはpaddingで

どういうわけだかちゃんと表示されません・・・・
[PR]
by mmi331 | 2008-03-13 20:57 | html・css | Comments(2)
ポップアップ
これはアンカータグを利用して画像を変化させています。
ぽっとの陽だまり研究室様のタグをお借りしました。
設置の仕方が詳しく書かれていますのでそちらをご覧になってください。
スキン編集からCSSの編集を行いますので、初めての方はあらかじめCSSのバックアップを取っておいた方がいいと思います。
昨日の私のタグとは少し違いますが、私は言葉足らずのところがあり、(要はボキャ貧です。)説明はしませんが、画像と内容以外、ソースはコピーして使っていただいても結構です。ただし、自己責任でお願いします。スキンが崩れても責任は持ちません。

画像の上にマウスを置いてください。

[PR]
by mmi331 | 2008-01-26 20:52 | html・css | Comments(2)