HOME»  » TOP  » RSS  » ADMIN

category

  • [BYJ]情報(204)
  • [BYJ]家族の想い(10)
  • [BYJ]動画(18)
  • [BYJ]Artwork(0)
  • [好き]音楽(19)
  • [好き]BOOK(5)
  • [好き]映画/ドラマ(9)
  • [好き]未分類(7)
  • [3D]動画(23)
  • [3D]画像(3)
  • [3D]日々徒然(148)
  • [3D]覚書(10)
  • [3D]お気にソフト(1)
  • [3D]情報(3)
  • [3D]未分類(49)
  • [情報]孫ブロ(21)
  • [情報]韓国(11)
  • [情報]PC関連(59)
  • [情報]サイト関連(11)
  • [情報]ソフト関連(2)
  • [情報]動画(12)
  • [情報]音楽(4)
  • [情報]画像(5)
  • [情報]カメラ(3)
  • [情報]未分類(24)
  • [情報]電子マネー(1)

クリック募金

Sponsored Link

dot1 dot1

listスポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告--.--(--)--:--|コメント(-)|トラックバック(-)|Top↑
dot1 dot1

list「align」について学ぶ

とほほのWWW入門:align
スポンサーサイト
[情報]PC関連06.24(Fri)01:47コメント(2)|トラックバック(-)|Top↑
dot1 dot1

list画像をリンクボタンにする

<*a href="リンク先URL"><*img
src="画像URL" border=0 height=20 width=100 alt="リンク先の説明"><*/a>

[情報]PC関連06.24(Fri)01:25コメント(0)|トラックバック(-)|Top↑
dot1 dot1

list写真のテーブルの中にマーキーを入れる

<*div style="background-color:transparent;">
<*h2 style="filter:glow(color=#CC33CC);width:100%;color:white;font-size:1.5em;font-weight:bold;font-family:'Times New Roman';text-align:center;line-height:160%;">
<*/h2>
<*/div>
<*p>
<*table style="filter:alpha(opacity=90);" background="マーキーのテーブルURL" width="写真テーブルの幅" hight="テーブルの高さ">
<*tr>
<*td width="テーブルの中の写真テーブルの幅"height="テーブルの中のテーブルの高さ">
<*marquee direction=up scrollamount=3 height=200>
<*img src="写真URL" style="filter:;" alt="" width="揃える写真幅">
<*img src="写真URL" style="filter:;" alt=""width="揃える写真幅">
<*img src="写真URL" style="filter:;" alt=""width="揃える写真幅">
<*img src="写真URL" style="filter:;" alt=""width="揃える写真幅">
<*img src="写真URL" style="filter:;" alt=""width="揃える写真幅">
<*/td>
<*/table>
[情報]PC関連06.22(Wed)14:36コメント(4)|トラックバック(-)|Top↑
dot1 dot1

list写真に文字を載せる

<*table width="写真の幅"height="写真の高さ"align="文字の位置"background="写真のURL">


<*table background="写真URL">
<*tr><*th style="color:white">写真に載せる文字<*/th><*/tr>
<*/table>

[情報]PC関連06.22(Wed)12:43コメント(2)|トラックバック(-)|Top↑
dot1 dot1

list写真にフィルターをかける

スタイル2:円形フィルター
<*img src="写真URL"style="filter:alphaopacity=100,style=2,finishopacity=0)">
[情報]PC関連06.22(Wed)09:53コメント(1)|トラックバック(-)|Top↑
dot1 dot1

listスタイルシート

・透過する
<*STYLE> body { background-image:url(写真URL ); background-attachment: fixed; background-repeat: no-repeat; background-position: 100% 100%; } table { background-color: transparent; } td { background-color:transparent ; } <*/STYLE>




<*STYLE>で始まり <*/STYLE>のように、 / を付けて、終わる定義は今までと変わりません。
では、その間に入るTAGはどのようなものかというと、bodyTAG と tableTAG に分かれます。
bodyTAGは、ここで言えば、カキコの外側の領域(背景)を指定するTAGです。
tableTAGは、ここでは、カキコテーブルの指定をするTAGです。

まず、bodyTAGから。
{   } で囲うこと。
では、その中味。




background-image:url( 写真のURL);

▼背景画像を指定(background-image)
・ 背景画像を指定する属性(none/すべて/しない)
・「url()」のカッコの中に背景画像のURLを指定します
・外部ファイル(.css)に記述する場合はそのファイルからのURLで指定します
・文字や段落ごとに背景画像を変えることも可能です

「background-image:url(@@);」
( )内に画像のURL(相対パス)を指定

htmlではこれはできません



 
background-attachment: fixed;

↑はその写真をどう処理するかという指示です。固定するか?それとも一緒にスクロールさせるか?を指定します。

ここでは、固定しています。

▼背景を固定する(background-attachment)
・スクロールによって背景画像を移動させるか固定させるかを設定する属性 (scroll/すべて/しない)
・IEのみで有効な属性です


「background-attachment:@@;」
fixed 画面をスクロールさせても背景は移動しない
scroll 画面をスクロールさせると同時に背景も移動する(初期値)




background-repeat: yes-repeat;

▼画像の貼りこむ方法の調整(background-repeat)
・背景画像の貼りこむ方法を調整する属性 (repeat/すべて/しない)
・背景は普通画面いっぱいに繰り返して敷き詰められますが、それを調整することができます

「background-repeat:@@;」
repeat 画面いっぱいに繰り返して敷き詰める(初期値)
repeat-x 横方向だけに画像を敷き詰める
repeat-y 縦方向だけに画像を敷き詰める
no-repeat 繰り返さずに一枚だけ配置




●①background-position: up;

背景画像の位置を決めます

up     上に置きます

center  真ん中に置きます

bottom   下に置きます



●②background-position: position position

背景の横方向の位置を left(左端)、center(中央)、right(右端)または 50% のような割合で指定し、

縦方向の位置を top(上端)、center(中央)、bottom(下端)または 50% のような割合で指定します。

fixed と共に指定することにより、背景画像の表示位置を指定することができます。

下記の例では、背景画像を中央にひとつだけ表示します。


BODY {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}




ここでは、出てきていませんが、写真を使わない場合は、色の指定が出来ます。
このTAGをbodyに追加します。(必ず、 ;  で始まり : で終わること)

▼背景の色を指定(background-color)
・背景の色を指定する属性 (transparent/すべて/しない)
・文字や段落ごとに背景色を変えることも可能です

「background-color:@@;」
#RGB、rgb()、キーワード、いずれの指定でも可
transparent 透明色 (NNは未対応)




次は、tableTAGですね。

基本はbodyと一緒です。ここではcolorのみの記述になっていますが、bodyと同じ指定が出来ます。


table { background-color:pink ; }

↑は、テーブル枠の色を指定しています。

td { background-color:yellow ; }

↑は、テーブルの中の色を指定しています。

transparent を、どちらも指定すれば、透過色ですので、背景と同じ色に出来ます。

片方だけに色を指定して、テーブルと枠の色を同じにすることも出来ます。




▼スタイルシートのすすめ
・スタイルシートとはタグ(html)に対していろいろな効果を与えるものです
 正確には「Cascading Style Sheets」(カスケーディング・スタイルシート)といいます
 対応ブラウザはIE3.0以上、NN4.0以上ですのでどんどん使っていっても大丈夫です
 
・スタイルをうまく組み合わせば、htmlでは決してできないクールなデザインを実現することができます
 今までなら画像を使ってデザインしていたようなことも簡単に表現できます
 いままでは、テーブルを使ってWebをレイアウトしていたでしょう
 CSSを使えばもっと簡単に、もっと思い通りに、そしてテーブルより表示が早いレイアウトができます




●スタイルシートの記述方法には基本的に次の3通りがあります

・「CSSファイル」 cssファイル( .css)にスタイルを記述して、それをhtmlから読み込む方法
・「html内への埋め込み」 htmlに直接記述する方法
・「インラインでの埋め込み」 特定のタグに直接記述する方法

同時に複数の方法で記述することもできます。その場合には優先順位があります




▼CSSファイル
・「CSSファイル」という外部のファイルにスタイルの設定をして、それをhtmlファイルに読み込ませる方法です

・CSSファイルの拡張子は「.css」で、このファイルにはセレクタと属性、値といったスタイルの基本だけを書きます

・これをhtmlに読み込ませるためには、htmlのHEAD内に以下のように記述しておきます


・複数のhtmlに同じCSSファイルを読み込むようにすれば、サイト全体のデザインの統一ができます


CSSファイルには以下のようにスタイルの設定だけを書きます

DIV {color:#ff0000;font-size:10pt;}
H1 {color:#0000ff;font-style:italic;}

このCSSファイルをすべてのページから読み込むようにすれば、
全てのページの「DIV」で囲まれた分は10ポイントのフォントサイズで色は赤、
全てのページの「H1」で囲まれた分は色は青で斜体になる、といったデザインの統一ができます




▼html内への埋め込み
・スタイルシートの設定ををhtmlにまとめて記述する方法です

・記述方法は、「HEAD」内に以下のように書きます


・ページごとのスタイルを設定するときに使います

・このスタイルの記述方法の場合、スタイルシートに対応していないブラウザ対策として、
「STYLE」タグの前後を「コメントタグ(」で囲むという方法がありますが、
現在ではわざわざこのようなことをする必要は少ないと考えられます




▼インラインでの埋め込み
・スタイルを設定したいタグに直接記述する方法です

・この記述方法の場合、セレクタはありません

・上記二つの方法でスタイルを設定したファイル内において、別の効果を与えたい場合などに使います

・タグの中に直接スタイル属性として記述していきます




▼優先順位
・スタイルの記述方法には上記のように3つありますが、これらを1つのページに同時に使うこともできます
 その場合、同じ要素に対して複数の効果が設定されることもありますが、
 「インラインでの埋め込み」が最優先、次に「html内への埋め込み」が、そして「CSSファイル」と優先順位があります
 サイトの全体的なスタイルは「CSSファイル」で、ページごとのスタイルは「html内への埋め込み」、
 部分的な効果は「インラインでの埋め込み」というように使い分けるようにしましょう

・何よりも優先させたいスタイルには、「!important」をつけます。これは「インラインでの埋め込み」よりも優先されます。
 例えばCSSファイルで設定した基本スタイルとは違ったものをインラインで設定してしまうのを避けることができます
 記述の仕方は、 {font-size:10pt !important ; }といった感じです
 ただし現時点では、IE4.0以上でしか対応していません

21WebSpiderさんより引用させて頂きました
[情報]PC関連06.21(Tue)19:00コメント(4)|トラックバック(-)|Top↑
dot1 dot1

list超オススメ素材屋さん

HPのTOPとBOTTOMにあります、FLASH。

創るのになんと今日で5日間も掛かった上に、エピソード付。
どんなエピソードかというと・・・・・今、皆には見えてるでしょ?

でも、私には見えないの。

これが5日間も掛かったって言う理由。
完成できてたのに、出来ない、出来ないって、ずーっと弄り倒してた。

はぁ~

だから、HPを見に来てくれてた方は、「???」

点いたり、消えたりの裸電球のように、なっていたそうです。
(裏でTAGを弄ってたもんだから、そうなってたのね)
ここに、居るのね。って、居所はかなり、わかりやすかったそうですが・・・・


それで、遂に、助けを求めました。Help Me~

この、FLASH素材を提供してくださっている「naturalbreeze」さんのQ&Aに駆け込みました。

ここで、また、良い出会いをする訳なのですが、これはこのサイトのQ&Aをみて頂いたらよく判るヨン。

このサイト、凄くいいよ~~。是非、お邪魔してみて。。

特にHPを持ってる人には凄くいい。
持っていない人でも、ページにUPできるから、覗いてみて。

素材の美しさとオーナーのkaoさんの細やかな配慮に感激してる私です。

私のお気に入り素材屋さんになりました^^


[情報]PC関連06.21(Tue)07:50コメント(0)トラックバック(0)Top↑
dot1 dot1

listPOQUEを貼っとく

これ見つけたんだけど、何処に貼ればいいのやら???
とりあえずここに貼っとくわ^^


[情報]PC関連06.14(Tue)20:42コメント(7)トラックバック(0)Top↑
dot1 dot1

listHPの機能

久々に、ここにカキコしながら思ったんだけど。
ここ(HP)って、超・初心者に優しい作りだよね。

以前は、ほんとの超超初心者だったので気づくことが出来なかったんだけど、TAGを勉強して自分で手書きをするようになって、初めて気付いた。

壁紙も豊富だし、URLさえ解れば貼り付けは、a href= でも img src= でも出来るし、target="_blank"まで付けてくれる。
< > まで、ポチッと押すだけで出来る。(この < の必要性がわかる人なら自分で書くだろうけど・・・)
書きながら、プレビューできる、リアルタイムプレビューはありがたい。

まだ、使ってない機能もあって、Googleで検索する為の機能とか、
線を引く機能とか、(せっかくだから、今使うか)




↑こうなるのね^^。ふむふむ

最近は、携帯用の絵文字も使えるみたい。(まだ、私は弄ってないけど)
何も知らないで、ここの機能に大いに助けて頂いていたんだなぁって気が付きました。

感謝です。002.gif

[情報]PC関連06.14(Tue)09:32コメント(0)トラックバック(0)Top↑
dot1 dot1

listHPの基本

20050614081339s.jpg

もう、てんやわんや。
って、古い??

土曜あたりから、テーブルTAGとスタイルシートを弄っていたんだが、なんだか、ごちゃごちゃで、イマイチ理解してない感じ。
まず、HPの基本学んでないのが原因なのですが・・・

HPの基本的な書き方

<*html>
<*head>
<*title>タイトル<*/title>
<*/head>
<*body>
本文
<*/body>
<*/html>

これさえも、知らなかったんだもん。(自慢してどうする)
今は、こんなことから始めて、再度勉強中。
[情報]PC関連06.13(Mon)16:51コメント(7)|トラックバック(-)|Top↑
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。