IT技術Labo - HouseTect

Javaフリーエンジニアとしての苦悩や、アーキテクトになるための努力の軌跡を掲載しています。.NETとJavaに力を入れた技術情報発信ブログです。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リンクで同じページの所定の位置にスクロールする方法

よく見かけるのですが、ページの上のほうに目次のようなリンクがずらっと並んでいて、そのリンクをクリックすると所定の位置にスクロールするというページがあります。

これは1回のページロードですべてのHTML要素を表示しているので、リンク毎にページ遷移するより処理としてはかなり早いです。

たとえばこちらのページprototype.js の開発者向けメモ

上の説明と同じようなサイトですね!

詳細は続きで。
続きを読む...
スポンサーサイト

2つのテーブルのスクロール位置を動機する方法

2つのテーブルのスクロール位置を動機する方法
↑の画像のように、2個のテーブルがあり、右側のテーブルのスクロール位置と左側のテーブルのスクロール位置とを動機させるためのサンプルHTMLです。

考え方はいたって簡単で、右側のDIVタグの「onscroll」イベントでDIVタグのスクロール位置を左側のDIVタグのスクロール位置に設定するだけです。

以外と業務系のアプリなどで、全カラムを横スクロールしたくない場合があるので、この方法を知っていると有効かと思います。

詳細は続きで。
続きを読む...

インライン要素とブロック要素の違い

インライン要素とブロック要素の違い
ブロック要素とインライン要素というものがHTMLの世界では存在します。

これはいろんなサイトに詳細が記述されていますが、一言で言えば

・ブロック要素とは、横幅いっぱいを使用したタグです。
 つまり、このタグの前後には改行が入ります。

・インライン要素とは、文中という意味なので、そのままHTML文中に表示されるタグです。
 つまり、このタグの前後には改行が入りません。

もっと細かい部分を知りたい方は、
kanzakiさんのページを参照してください。
かなりしっかり書かれています。

ここでは、そうゆう難しいのを抜きにして単純にどう使うのかを説明します。

では続きで。
続きを読む...

<input type="image">タグと<img>タグの違い

<input type="image">タグと<img>タグのどちらを採用するかは、
結果的にやりたいことに依存します。

・tabindex属性について
始めに言うと以下のHTMLは文法エラーになる。
IEとかでは怒られることはないが、誤動作する原因に繋がるので注意が必要である。

まず、<img>タグには「tabindex」属性が存在しない。
その代わり「<input type="image">」には「tabindex」属性が存在します。

ここら辺でも使い方が分かれますね。
たとえば、ImageButtonとして使いたい場合は、きっちり「tabindex」属性を指定するケースが多々あるとおもうので、
その場合は、「<input type="image">」を使いましょう。

・onclickイベントについて
<img>タグでonclickイベントを使う場合、Enterを押下又は、マウスでクリックの2つになります。
スペースの押下ではイベントが反応しません。

<input type="image">ではEnterでもスペースでもイベントが反応します。



<script>
  function JS_Click(){
    alert("クリック");
  }
</script>

<img src="aaa.jpg" tabindex="1" onclick="JS_Click();">
<br>
<img src="aaa.jpg" tabindex="2" onclick="JS_Click();">
<br>
<input type="image" src="aaa.jpg" tabindex="3" onclick="JS_Click();">
<br>
<img src="aaa.jpg" tabindex="4" onclick="JS_Click();">


HTMLでdisabledにスタイル指定したい場合

実際このような場合は少ないですが、下記のようにすればうまくいくみたいです。
ただし主要のブラウザで使えないため、やっぱり使う機会は少なそうです。
参考までに。

<!-- disabledにしたテキストボックスの文字の色の指定 -->
<!-- IE6 sp2 × まったく設定できない
Netscape 7.1 ○
Opera 8.5 背景色は設定できたが、文字色が設定できない(bug?)
FireFox 1.0.7 ○
-->
<style>
 input[disabled] {color:red;}
</style>

<input class="aaa" type="text" disabled="true" readonly="readonly" value="aaaaaaaa">

HTMLイベント onchange()とonblur()の呼ばれる順番

onchangeイベントでfocus()がうまく動かない症状が出たので、
実際の処理はonchange()で処理し、その後のフォーカス移動に関しては、
onblur()で実行するようにした。

<html>
 <head>
 </head>
 <body>
  <input type="text" onchange="alert('onchangeです。');" onblur="alert('onblurです。');"
 </body>
</html>

上記のソースで、テキストボックスに値を入れ、Tabキーを押すと、
onchange()が実行され、
その後にonblur()が実行される。

HTMLエディター 「Crescent Eve」

screen1.gif
シンプルかつリアルタイムでHTMLをレンダリングしてくれる高機能エディターがこの「Crescent Eve」です。

軽いので是非画面側の製作に向いていそう。

しかもすごいのがHTMLタグのインテリセンス付き!!
これはVisual Studioですか?って感じです。

http://www.kashim.com/eve/

Pickup Link!

COUNTER



RSSの登録はこちらからどうぞ。
RSS

ブログ内の検索

Google

プロフィール

Hisasann

Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま~す。

相互リンク募集しています。 下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ

アクセスランキング

ブログパーツ

ブログランキング



ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。