Monkey Talk [HP&BLOG]Style

Monkey Talk

猿話的雑記帳

PAGE LINK 1 2

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/19 (Fri) [Entry URL]

CSSファイルの作り方

テキストエディタツール等で
事前にCSSファイルを作っておけば
統一感のあるHPの作成や
HTMLファイル毎での指定を簡略化できます。

...read more ?

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・位置を決めて配置させる

テーブルを決めた位置に配置する
画像を決めた位置に配置する
文字を決めた位置に配置する

...read more ?

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・フィルター効果に関する記述

影を付ける
半透明にする
滲ませる
影を付ける２
波の様に歪ませる
左右反転させる
上下反転させる
対処の回りにぼんやりとした色をつける
レントゲン効果

...read more ?

「影を付ける」
■文字に影を付ける
<body>から</body>間に記述

タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<span style="width:100%; filter:Shadow(color=#影の色);">
ココに影をつけたい文字を記述
</span>
テーブルに影を付ける
<body>から</body>間に記述
タグソース
<table border="1" style="width:100%; filter:Shadow(color=#影の色);">
<tr>
<td>内容記述位置</td>
</tr>
</table>
画像に影を付ける
<body>から</body>間に記述
タグソース
<img src=画像のURLを記述" style="width:100%; filter:Shadow(color=#影の色);">
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

「半透明にする」
■半透明なテーブルを作る
<body>から</body>間に記述
opacity=50　→透明度の数値　0～100で数値が少ないほど透明
*背景が透けて見えるテーブルが出来ます

startX＝100, startY=100, finishX=100, finishY=100,

タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<table border="1" style="filter: Alpha(opacity=50);">
<tr>
<td>内容記述位置</td>
</tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■半透明な画像
<body>から</body>間に記述
opacity=50　→透明度の数値　0～100で数値が少ないほど透明
--（）内に追加できる設定値--
style=1
→１は線形　２は円形　３は長方形　の形にグラデをかけるようにする指定
startX＝100, startY=200, finishX=300, finishY=400,
→グラデーションエリアの指定

タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<img src="画像のURLを記述" style="filter: Alpha(opacity=50);">
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■全体的に半透明なページにする
<head>から</head>に記述
opacity=50　→透明度の数値　0～100で数値が少ないほど透明
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■其の他のフィルタ
style=" 　から　;"　間に記述

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
滲ませる
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Blur( add=true, direction=n,strength=n)
--------------------------------------------------------------------------------
add=true
trueを指定すると元の画像をにじませた絵の上に上書き表示します
falseの場合は上書き表示しません
direction=n
上方向から時計方向の角度を指定します。右上は45、右下は135になりますstrength=n
にじませの強さを指定します

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
影を付ける２
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
DropShadow( color=影の色を指定, offX=5, offY=10,)
--------------------------------------------------------------------------------
color=影の色を指定
offX=5, offY=10,　→右に５に距離下に10の距離に影を配置
positive=false　→画像の透明化された部分にまで影をつけます
波の様に歪ませる
Wave(freq=5,strength=4,lightStrength=60)
--------------------------------------------------------------------------------
freq=5→波の数
strength=4→波の強さ
lightStrength=60→光の度合い　[１～100で指定]

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
左右反転
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FlipH()

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
上下反転
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FlipV()

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
対象の回りに色をぼんやりつける
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Glow(color=周りの色を指定）

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
レントゲン効果
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Xray()

... Close

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・テキストエリアのレイアウトを指定する

テキストエリアのレイアウトを指定する

...read more ?

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・テーブルの各部位を指定する

テーブルの各部位
上下右左の線の太さや色を指定する

...read more ?

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・背景画像に関する記述

左端だけに表示する
右端だけに表示する
下辺だけに表示する
中央に一つ配置する
右下に一つ配置する
左上に一つ配置する
場所を決めて配置する　等

...read more ?

■背景画像を左端のみに並べる
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を左端のみに並べる
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を上のみに並べる
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を下のみに並べる
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を中央に一つ配置
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を右下に一つ配置
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を左上に一つ配置
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■背景画像を決めた位置に配置する
<head>から</head>間に記述
no-repeat fixed 100px 300px
100→左端からの位置の数値
300→上からの位置の数値
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

... Close

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・インラインフレームの作り方

インラインフレームの作り方

...read more ?

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・ぺージに枠線を付ける

ぺージに枠線を付けるには

...read more ?

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・リンクに関する記述

リンク効果を消す
リンクに触れると下線、上下線、上線が出る
リンクに触れるとへこむ
リンクに触れると色が変わる
リンクに背景色を付ける
リンクに触れるとカーソルの形状が変わる等

...read more ?

■リンクの効果を全て消す
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<STYLE TYPE="text/css">

</STYLE>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに触れると下線が出る
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<STYLE TYPE=text/css>

</STYLE>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに触れると上下線が出る
<head>から</head>に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<STYLE TYPE=text/css>

</STYLE>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに触れると上線が出る
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<STYLE TYPE=text/css>

</STYLE>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに触れるとへこむ
<head>から</head>間に記述
top:1px は上から下にへこむ数値を記述
left:1px は左から右にずれる数値を記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに触れるとリンクの色が変わる
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<STYLE TYPE=text/css>

</STYLE>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに背景色をつける
<head>から</head>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<STYLE TYPE="text/css">

</STYLE>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■リンクに触れるとカーソルの形状が変わる
<head>から</head>間に記述
[形状名一覧]
　auto
　crosshair
　default
　hand
　move
　text
　wait
　help
　n-resize
　s-resize
　w-resize
　e-resize
　ne-resize
　se-resize
　nw-resize
　sw-resize
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<a href="URLを記述"style="cursor:形状名">
ここに文字を記述
</a>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

... Close

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

STYLE SHEET・文字に関する記述

文字に背景色を付ける
文字に背景画像を付ける
文字の大きさを決める
ページ全体の文字の大きさを指定する
文字の行間を指定する等

...read more ?

■文字に背景色を付ける
<body>から</body>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<FONT STYLE=background:#背景の色>
ココに色をつけたい文字を記述
</FONT>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■文字に背景画像を付ける
<body>から</body>間に記述
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<FONT STYLE=background-image:url(画像のURLを記述) color=文字の色>
ココに背景をつけたい文字を記述
</FONT>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■文字の大きさを決める
<body>から</body>間に記述
*ブラウザの文字サイズ変更に反映されません（テーブルレイアウト等に便利）
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<span style="font-size:10pt">
ココに文字を記述
</span>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■ページ全体の文字の大きさを指定する
<head>から</head>間に記述
*ブラウザの文字サイズ変更に反映されません（テーブルレイアウト等に便利）
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style type="text/css">

</style>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■文字の行間を指定する
<body>から</body>間に記述
15px→行間の指定数値　%またはptでも記述可能
タグソース
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<font STYLE="line-height:15px">
ここに行間を空ける文字を記述
</font>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

... Close

2007/07/19 (Thu) [Entry URL] [HP&BLOG]Style Trackback() Comment(0)

　｜HOME｜　　　NEXT　≫

CALENDAR

2024/04

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

LINK