×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
だいぶ前に読んだ論文
Hybrid Image
見る距離によって，”Happy”な顔だったり”sad”な顔だったり．
http://cvcl.mit.edu/hybridimage.htm
人間の視覚は音と同様に見えない色，見える色があります．
色は光の周波数によって決定されます．
近くで見る場合は「高周波」成分が見やすくなり，「低周波」成分が見えにくくなります．
逆に遠くで見る場合は「低周波」成分が見やすくなり，「高周波」成分が見えにくくなります．
簡単に言えば，高周波⇒細かい変化なので，遠くからみると細かすぎてわからない．
でも近くで見れば，変化がわかるという感じ．
作り方は，2つの画像を用意し，高周波成分のみの画像と低周波成分のみの画像の2つを作って合成．
高周波画像は近くでみるとき，低周波画像は遠くで見るときです．
ガウシアンフィルタをかければ低周波，1-ガウシアンをかければ高周波になります．
Hybrid Image
見る距離によって，”Happy”な顔だったり”sad”な顔だったり．
http://cvcl.mit.edu/hybridimage.htm
人間の視覚は音と同様に見えない色，見える色があります．
色は光の周波数によって決定されます．
近くで見る場合は「高周波」成分が見やすくなり，「低周波」成分が見えにくくなります．
逆に遠くで見る場合は「低周波」成分が見やすくなり，「高周波」成分が見えにくくなります．
簡単に言えば，高周波⇒細かい変化なので，遠くからみると細かすぎてわからない．
でも近くで見れば，変化がわかるという感じ．
作り方は，2つの画像を用意し，高周波成分のみの画像と低周波成分のみの画像の2つを作って合成．
高周波画像は近くでみるとき，低周波画像は遠くで見るときです．
ガウシアンフィルタをかければ低周波，1-ガウシアンをかければ高周波になります．
PR
大文字タグはだめ
もともと小文字使ってるからまぁ，大丈夫か。。。
見た目の表現を既定する要素はだめ
※画像のaltは付けないとバリデートととおらない
※DreamWeaverでFLASHオブジェクトを貼り付けると，バリデート通らない
⇒W3Cが言ってるやり方でFLASH貼ると，FireFoxでは見れたがIEじゃ微妙（バージョンで異なる？）
もともと小文字使ってるからまぁ，大丈夫か。。。
見た目の表現を既定する要素はだめ
| font | spanでfont-weightやfont-sizeを指定 |
| strong | font-weight:boldを使用 これ，普通に使ってた・・・ |
| center | text-align:center |
| target | リンク要素のtargetは廃止だった気がorz これ結構使えるのにね |
| iframe | objectで代用 しかし，IE6まではobjectの動作がおかしい！だからIEきらい（笑 |
| strike | text-decotation:line-through 打ち消しなんてめったに使いませんが |
| u | text-decoration:underline 下線はリンクぐらいしか使わないかな． |
| i | font-style:italic 斜体もめったに使わないなー |
| tt | font-family:monospace 等幅もあまり使わん |
※画像のaltは付けないとバリデートととおらない
※DreamWeaverでFLASHオブジェクトを貼り付けると，バリデート通らない
⇒W3Cが言ってるやり方でFLASH貼ると，FireFoxでは見れたがIEじゃ微妙（バージョンで異なる？）
http://planet.yukishigure.com/cg/webtemplate/006/index.html
のまとめです．↑は私のHPの中に潜むテンプレです（笑
●HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><img src="images/header.jpg" alt="My Home Page" /></h1>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
<li><a href="#">Page4</a></li>
</ul>
</div>
<div id="contents">
<div id="main">
<div class="colmun">
<p class="colmun_title">当サイトについて</p>
<p class="colmun_content">当サイトはSENが作成したWEBテンプレートの1つです．個人でのご利用はご自由にお使い下さい．<br />
淡い緑を主に出し，清涼感が出るように作りました．が，どうでしょうかね；；<br />
お気に召されれば，お持ち帰り下さい．<br />
ヘッダ画像はレイヤ保持のPNGも含まれていますので，タイトルとURLを変更してください．<br />
Fireworksで作りましたが，フォトショやGIMPでもOKでしょう． <br />
いつものごとく，IE6とFireFox2.xで確認してます．<br />
<br />
ヘッダ画像はtoshiの写真箱（<a href="http://www.geocities.jp/sion7700/" >http://www.geocities.jp/sion7700/</a>）さんより</p>
</div>
<p> </p>
<div class="colmun">
<p class="colmun_title">What's New</p>
<p class="colmun_content">
[xx.xx.xx]HP作成！<br />
[xx.xx.xx]なんとかかんとかー<br />
</p>
</div>
<p> </p>
</div>
<div id="sidenavi">
<img src="../../../images/logo.gif" alt="logo"/>
<br />
<br />
<img src="images/ban.gif" alt="バナー" width="200" height="60" />
<p> </p>
</div>
</div>
<div id="footer">Copyright©sen</div>
</div>
</body>
</html>
●CSS
* {
line-height: 150%;
font-weight: normal;
margin: 0px;
padding: 0px;
}
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 0.96em;
text-align: center;
color: #333333;
}
h1 {
float: right;
padding-bottom: 0.5em;
}
a {
color: #669900;
}
a:hover {
color: #006600;
text-decoration: none;
}
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-image: url(images/header_bg.gif);
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCFF;
}
#header ul {
list-style-type: none;
padding-left: 20px;
}
#header li {
float:left;
}
#header a {
text-decoration: none;
color: #006600;
background-image: url(images/menu_normal.gif);
height: 40px;
width: 140px;
background-repeat: no-repeat;
display: block;
margin-right: 15px;
text-align: center;
font-size: 16px;
padding-top: 4px;
}
#header a:hover {
color: #FF6600;
background-image: url(images/menu_over.gif);
}
#contents {
padding-right: 10px;
padding-left: 10px;
}
#contents #main {
width: 570px;
float: left;
}
#contents #sidenavi {
float: right;
width: 200px;
}
#footer {
clear: both;
background-color: #B1FF97;
color: #006600;
text-align: right;
padding-right: 10px;
}.colmun {
background-image: url(images/div_content.gif);
background-repeat: repeat-y;
width: 570px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B1FF97;
}
.colmun_title {
color: #006600;
background-image: url(images/div_title.gif);
background-repeat: no-repeat;
height: 28px;
padding-left: 25px;
padding-top: 2px;
}
.colmun_content {
padding-right: 10px;
padding-left: 15px;
}
そのまんまです．
HTMLはxhtml1.1で，W3Cのバリデータに通してＯＫでした．
ＣＳＳも同様にＣＳＳバリデータに通してＯＫでした．
画像は上のリンクから適当に拾ってください（ぇ
7回目：こいつのコンテンツ部分ですねー
●HTML
<div id="contents">
<div id="main">
<div class="colmun">
<p class="colmun_title">コラムタイトル</p>
<p class="colmun_content">コラムコンテンツ</p>
</div>
</div>
<div id="sidenavi">
右のサイドブロックです
</div>
</div>
divのmainが左側
divのsidenaviが右側です．
main内でさらに、ブロックをわけます．
これがcolmunブロックです．この中にタイトル部分のスタイル：colmun_titleと、ないよう部分のスタイル：colmun_contentを用意します．
colmunブロックは新着や更新などいろいろ使えます．
●CSS
#contents {
padding-right: 10px;
padding-left: 10px;
}
#contents #main {
width: 570px;
float: left;
}
#contents #sidenavi {
float: right;
width: 200px;
}
#footer {
clear: both;
background-color: #B1FF97;
color: #006600;
text-align: right;
padding-right: 10px;
}
.colmun {
background-image: url(images/div_content.gif);
background-repeat: repeat-y;
width: 570px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B1FF97;
}
.colmun_title {
color: #006600;
background-image: url(images/div_title.gif);
background-repeat: no-repeat;
height: 28px;
padding-left: 25px;
padding-top: 2px;
}
.colmun_content {
padding-right: 10px;
padding-left: 15px;
}
#contents：
コンテンツブロックはmainとsidenaviをまとめるブロックです．
左右に10pxパディングをとっています．まぁ，ここは何となく．
#contents #main：
幅570pxで左に回りこみ
#contents #sidenavi：
幅200pxで右に回り込み
※mainとsidenaviを足すと570+200=770．
contents内に左右パディングを10pxとっているので，合わせて20px．
770+20=790なので，（全体の幅800に指定しているので）mainとsidenaviの間は10px空きます．
我流ですが，私はあまりぴったり合わせません笑
全体幅より5～10小さめに作ってます．
空白デザインですかね（ぇ
.column
コラムブロックでは幅（これは特に指定しなくてもOK)
背景画像（ボーダーを画像で表示してます）
ボーダーを定義
.colmun_title
コラムのタイトル部分では、タイトルの背景画像と高さを指定
このタイトル背景は高さ30pxです．
heightとpaddingは独立しているので，合わせて30pxになるようにします．
paddingが0だと，上側にくっついてしまうので，上側2px空けてみました．
padding-leftは25pxとっています．
これは，■が三つ並ぶ画像にかぶらないようにするため．
.colmun_cont
ボーダーに近すぎないように適度に余白を設定します．
#footer：
フッタは・・・適当（笑
これで完成だー！
●HTML
<div id="contents">
<div id="main">
<div class="colmun">
<p class="colmun_title">コラムタイトル</p>
<p class="colmun_content">コラムコンテンツ</p>
</div>
</div>
<div id="sidenavi">
右のサイドブロックです
</div>
</div>
divのmainが左側
divのsidenaviが右側です．
main内でさらに、ブロックをわけます．
これがcolmunブロックです．この中にタイトル部分のスタイル：colmun_titleと、ないよう部分のスタイル：colmun_contentを用意します．
colmunブロックは新着や更新などいろいろ使えます．
●CSS
#contents {
padding-right: 10px;
padding-left: 10px;
}
#contents #main {
width: 570px;
float: left;
}
#contents #sidenavi {
float: right;
width: 200px;
}
#footer {
clear: both;
background-color: #B1FF97;
color: #006600;
text-align: right;
padding-right: 10px;
}
.colmun {
background-image: url(images/div_content.gif);
background-repeat: repeat-y;
width: 570px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B1FF97;
}
.colmun_title {
color: #006600;
background-image: url(images/div_title.gif);
background-repeat: no-repeat;
height: 28px;
padding-left: 25px;
padding-top: 2px;
}
.colmun_content {
padding-right: 10px;
padding-left: 15px;
}
#contents：
コンテンツブロックはmainとsidenaviをまとめるブロックです．
左右に10pxパディングをとっています．まぁ，ここは何となく．
#contents #main：
幅570pxで左に回りこみ
#contents #sidenavi：
幅200pxで右に回り込み
※mainとsidenaviを足すと570+200=770．
contents内に左右パディングを10pxとっているので，合わせて20px．
770+20=790なので，（全体の幅800に指定しているので）mainとsidenaviの間は10px空きます．
我流ですが，私はあまりぴったり合わせません笑
全体幅より5～10小さめに作ってます．
空白デザインですかね（ぇ
.column
コラムブロックでは幅（これは特に指定しなくてもOK)
背景画像（ボーダーを画像で表示してます）
ボーダーを定義
.colmun_title
コラムのタイトル部分では、タイトルの背景画像と高さを指定
このタイトル背景は高さ30pxです．
heightとpaddingは独立しているので，合わせて30pxになるようにします．
paddingが0だと，上側にくっついてしまうので，上側2px空けてみました．
padding-leftは25pxとっています．
これは，■が三つ並ぶ画像にかぶらないようにするため．
.colmun_cont
ボーダーに近すぎないように適度に余白を設定します．
#footer：
フッタは・・・適当（笑
これで完成だー！
6かいめー
前回ソースみすったのでヘッダをもう一回書きます．
●HTML
<div id="header">
<img src="images/header.jpg" alt="My Home Page" />
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
<li><a href="#">Page4</a></li>
</ul>
</div>
これがヘッダです．画像＋メニュー付ver
あとは，リストに対してCSSを設定してボタンらしくしていきます．
ボタン画像は以下を使用（自作ですが・・・）
●ノーマル用
●マウスオーバー用
マウスが乗っかったときに，ちょっと濃い目の画像を使用します．
JAVAスクリプトでもできますが，今回は全部CSSです．
●CSS
#header ul {
list-style-type: none;
padding-left: 20px;
}
#header li {
float:left;
}
#header a {
text-decoration: none;
color: #006600;
background-image: url(images/menu_normal.gif);
height: 40px;
width: 140px;
background-repeat: no-repeat;
display: block;
margin-right: 15px;
text-align: center;
font-size: 16px;
padding-top: 4px;
}
#header a:hover {
color: #FF6600;
background-image: url(images/menu_over.gif);
}
#header ul：
これはid="header"内にあるulタグに対して適用されます．
リストタイプを無し⇒通常は「・」とかが付きますが，何もつけないようにする．
パディングを上下左右20pxとります．
#header li：
フロートで左に回りこませます．
<li>タグが直線上にならびます．
例）
リスト１
リスト２
リスト３
↓
リスト１ リスト２ リスト３
#header a：
リンク要素，つまりTOPやPage1，Page2といったリンクですね．
まず，下線をなしに．
色を緑に．
背景をノーマル用の画像に．
高さと幅は画像サイズに合わせます．
背景は繰り返しません．
ブロック要素に指定します※
右側のマージンを15pxに⇒ボタン同士の間隔を空ける．
文字は中央ぞろえに．
文字サイズ16px．
上側のパディング4pxに．⇒文字が上に詰めて書かれるとバランス悪いので多少空けてみた．
#header a:hover：
マウスオーバー時の設定
色を変える．
背景画像をマウスオーバー用画像にする．
----------------------------------------------
※ブロック要素とは，divとかtable，pのような1つの大きな塊です．
これに対して，インライン要素というものがあり，これはブロック要素の中で使われます．
インラインは例えば，bとかspanとかliというもの．
これでヘッダは完成だ！
前回ソースみすったのでヘッダをもう一回書きます．
●HTML
<div id="header">
<img src="images/header.jpg" alt="My Home Page" />
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
<li><a href="#">Page4</a></li>
</ul>
</div>
これがヘッダです．画像＋メニュー付ver
あとは，リストに対してCSSを設定してボタンらしくしていきます．
ボタン画像は以下を使用（自作ですが・・・）
●ノーマル用
●マウスオーバー用
マウスが乗っかったときに，ちょっと濃い目の画像を使用します．
JAVAスクリプトでもできますが，今回は全部CSSです．
●CSS
#header ul {
list-style-type: none;
padding-left: 20px;
}
#header li {
float:left;
}
#header a {
text-decoration: none;
color: #006600;
background-image: url(images/menu_normal.gif);
height: 40px;
width: 140px;
background-repeat: no-repeat;
display: block;
margin-right: 15px;
text-align: center;
font-size: 16px;
padding-top: 4px;
}
#header a:hover {
color: #FF6600;
background-image: url(images/menu_over.gif);
}
#header ul：
これはid="header"内にあるulタグに対して適用されます．
リストタイプを無し⇒通常は「・」とかが付きますが，何もつけないようにする．
パディングを上下左右20pxとります．
#header li：
フロートで左に回りこませます．
<li>タグが直線上にならびます．
例）
リスト１
リスト２
リスト３
↓
リスト１ リスト２ リスト３
#header a：
リンク要素，つまりTOPやPage1，Page2といったリンクですね．
まず，下線をなしに．
色を緑に．
背景をノーマル用の画像に．
高さと幅は画像サイズに合わせます．
背景は繰り返しません．
ブロック要素に指定します※
右側のマージンを15pxに⇒ボタン同士の間隔を空ける．
文字は中央ぞろえに．
文字サイズ16px．
上側のパディング4pxに．⇒文字が上に詰めて書かれるとバランス悪いので多少空けてみた．
#header a:hover：
マウスオーバー時の設定
色を変える．
背景画像をマウスオーバー用画像にする．
----------------------------------------------
※ブロック要素とは，divとかtable，pのような1つの大きな塊です．
これに対して，インライン要素というものがあり，これはブロック要素の中で使われます．
インラインは例えば，bとかspanとかliというもの．
これでヘッダは完成だ！