HTML・CSS - IT生活向上ブログ

HTML ismap機能

クライアントISMAP機能を実現します。ISMAPは画像のクリックする位置で、リンク先を替える機能で、ずいぶん昔からある機能です。
機能とすれば、いささか枯れたものですが、私はまだまだ使える機能だと思ってます。
<img src="画像ファイル名" 
usemap="#マッピング名"
longdesc="url">

まずusemapにより画像にマッピング名を定義します。longdescはラインモードブラウザ等のために説明用の飛び先を定義します。longdescを指定する場合はaltもあわせて指定するのが良い。

<map 
name="マッピング名">・・・</map>

次にマップの定義をmapタグ内に記述します。

<area shape="メソッド" href="URL" 
coodrs="位置" target="ウィンドウ名">

マップを定義する。飛び先を無しにしたい時は、nohref を指定する。

・メソッド、位置
shape="circ" coords="位置1,半径"
位置1を中心とした円のURLを設定する。 shape="circle"でも同じ。

shape="rect" coords="位置1,位置2"
 位置1と位置2を対角とした長方形のURLを設定する。
位置1は、左上 位置2は、右下になる。 shape="rectangle"でも同じ。

shape="poly" coords="位置1,・・位置n"
 位置1〜位置nまでを頂点とした多角形のURLを設定する。 shape="polygon"でも同じ。

・target
targetを指定した場合、指定ウィンドウへリンクする。


サンプル
<img src="/image/ismap.gif" 
usemap="#html-ismap-map">
<map name="html-ismap-map">
<area shape="circle" href="javascript:alert('赤');" coords="30,30,30">
<area shape="circle" href="javascript:alert('青');" coords="90,30,30">
<area shape="circle" href="javascript:alert('黄');" coords="30,90,30">
<area shape="circle" href="javascript:alert('緑');" coords="90,90,30">
<area shape="rect" href="javascript:alert('黒');" coords="0,0,120,120">
</map>

  ↓  の様にすると

 こうなる。
※MAP定義は領域が重複した場合、上の定義が優先されるため、一番最後の行に画像全体を定義すれば default と同じ働きをします。


カテゴリ:HTML・CSS
タグ:HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/02/21 20:40 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML・CSS UserSystemカラー

Win系OSのみ。画面のプロパティ→デザインで変更可能。
閲覧しているユーザの環境の色を指定できる。

色指定 色名
  activeborder   activecaption
  appworkspace   background
  buttonface   buttonhighlight
  buttonshadow   buttontext
  captiontext   graytext
  highlight   highlighttext
  inactiveborder   inactivecaption
  inactivecaptiontext   infobackground
  infotext   menu
  menutext   scrollbar
  threeddarkshadow   buttonface
  buttonhighlight   threedlightshadow
  buttonshadow   window
  windowframe   windowtext



カテゴリ:HTML・CSS
タグ:HTML CSS

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/02/05 21:25 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML・CSS 216パレット

昔の話ですが、今のようにどんなPCでも数十万色だせなかったころ、RGB指定でも、その色が出せるブラウザと出せないブラウザがありました。そんな状態はよくないので、当時デファクトスタンダードだったネットスケープが、最低限この色だけはサポートしましょうと定義した色があります。この色はセーフカラーパレットなどとも呼ばれ、ページ製作者はこの色を指定すれば、ブラウザによる発色の違いが起こる事はありませんでした。

今の時代、もはや必要ないものと思いがちだが、中には、この色にこだわってる方もいると思います。私もなんとなくこの指定をしてしまうが、それはユーザビリティ目的ではありません。0369CFの階調での指定に慣れてくると、カラーパレットで色を調べなくても、だいたい予定通りの色を設定できるようになってきます。
とりあえず参考資料として追記に置いときます。




カテゴリ:HTML・CSS
タグ:HTML CSS

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/02/04 21:47 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML・CSS 色指定

htmlやcssで色を指定する場合、指定する値は色による指定とRBGによる指定があります。色指定の場合、「color : red」の様に指定します。
RGB指定の場合、先頭に「#」をつけ3桁または6桁の16進数字で指定します。

6桁の方が一般的と思われますので6桁の場合、先頭から2桁づつ、赤(Red)、緑(Green)、青(Blue)の明度を表し、00〜ffの16進数で指定する。 値が大きい程、明度が大きい(明るい)。
3桁指定の場合は、それが0〜fになるだけです。
cssではさらに「color : rgb(nnn,nnn,nnn)」のような指定が可能です。nnnは10進数。255(ff)を100%とした%指定もできたりします。

追記の表は、w3cでSVG colorとして定義があるもので、太字はhtmlのころから定義があるものです。
最近のブラウザはだいたいこの表の名前は、問題ないと思いますが、気になる方はrgb指定のがよいと思います。ほんとはcssで指定するのがよいが、htmlのbgcolorで指定してます。それぞれちゃんと表示されていれば、そのブラウザは該当する名前はサポートされています。




カテゴリ:HTML・CSS
タグ:CSS HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/02/02 20:17 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML insタグ

文書の挿入に使用する。
単なる下線を入れたい場合、cssでtext-decoration:underlineを使用した方がよいと思われる。
<ins
 cite="url"
 テキスト</ins>

citeには挿入理由を示すurlを指定。サポートしているブラウザは少ない。

<ins>挿入テキスト</ins>

↑こんなふうに書くと


挿入テキスト
↑こんな感じになる。


カテゴリ:HTML・CSS
タグ:タグ HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/01/30 16:07 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML delタグ

文書の削除に使用する。
単なる打ち消し線を入れたい場合、cssでtext-decoration:line-throughを使用した方がよいと思われる。
<del
 cite="url"
 削除テキスト</del>

citeには削除理由を示すurlを指定。サポートしているブラウザは少ない。

<del>削除テキスト</del>

↑こんなふうに書くと


削除テキスト
↑こんな感じになる。

カテゴリ:HTML・CSS
タグ:タグ HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/01/30 16:06 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML labelタグ

labelタグはフォームの部品と関連付けをする事ができる。

<label
for="名前">
accesskey="アクセスキー">
文字列
</label>

forで指定した名前をフォーム部品のidに指定。名前を同じにする。accesskeyはショートカットキーの設定です。

たとえばラジオボタンの場合。
年齢は?
<input type="radio" name="age" value="20" id="age_1">
<label for="age_1">20代</label>
<input type="radio" name="age" value="30" id="age_2">
<label for="age_2">30代</label>
<input type="radio" name="age" value="40" id="age_3">
<label for="age_3">40代</label>
<input type="radio" name="age" value="50" id="age_4">
<label for="age_4">50代</label>

のように記述すると下記のようになります。

<style>label { cursor : hand ; }</style>
↑別途このようにCSSでカーソルを指定するとわかり易いと思います。

年齢は?
↑こんな感じになる。ボタンをクリックしてなくても、関連付けた文字列をクリックすれば、選択状態になります。テキストタイプに使えばフォーカスが移るようになります。

カテゴリ:HTML・CSS
タグ:HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/01/22 21:02 | Comment(0) | TrackBack(1) | このブログの読者になる | 更新情報をチェックする

CSS ボックスモデルスタイル

divやp等ボックスモデルに対するstyleの指定方法。
css box model style
margin,paddingは4つ値が指定できるが、
個別に指定する場合は以下のプロパティで指定する。
順番は4つ指定の場合の順番と同じにしてます。2つの場合は、1つ目がtopとbottom、2つ目がrightとleftになります。

margin:
margin-top margin-right margin-bottom margin-left

pagging:
pagging-top pagging-right pagging-bottom pagging-left

border
border-top-??? border-right-??? border-bottom-??? border-left-???

カテゴリ:HTML・CSS
タグ:CSS

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/01/21 20:56 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML rubyタグ

ルビを振るタグでIE専用。非対応ブラウザ用のマークアップもできます。
rbでルビを振る文字を指定。rtでルビを指定。全体をrubyで囲む。rpは未対応ブラウザ用の記述。
rbc,rtcは複数ルビ用のタグですが、ここでは詳しく記述しません。

記述例:
<ruby>
<rb>薔薇</rb>
<rp>(</rp><rt>ばら</rt><rp>)</rp>
</ruby>

薔薇(ばら)
↑こんな感じになる。非対応ブラウザではタグが無視されるので、「薔薇(ばら)」の表記になります。

カテゴリ:HTML・CSS
タグ:HTML タグ

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/01/12 22:00 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

HTML addressタグ

addressタグは、文書に対する連絡先等を記述するタグで、主にメールアドレス等を記述します。大抵のブラウザはイタリック表示によるサポートのようで、SEO効果もあるといわれています。

しかし、スパマーの使用するクローラの中にはaddressタグを狙い撃ちして、情報を集めるものもあるので、最近では不用意にメールアドレスを直に文字で書かないようにする人が増えてるようです。これ以上スパムを増やしたくない人はaddressタグは使わないほうがいいかもしれません。

カテゴリ:HTML・CSS

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2008/12/28 18:39 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。