2009年8月まとめ

for文とgetElementByIdとclassNameを利用して簡単に実装できる。
必要なcssはdisplayのnoneとblockのみ。

macにはinsertキーがない(fn + return = insert)。
shift + fn + return ≠ ペースト なので、winのように右手でコピペできない。

Winだと、
shift + delete = 切り取り
shift+ insert = 貼付け

あと、ドラッグ&ドロップで起動はmacが不便。

macだとソフトのアイコンに、ファイルをドロップしないと起動しない。これはなかなか不便。

あとは、ファイル名を選択した状態でエンターキーだと名前変更になる。ファイルが起動されない。まぁ慣れですね。慣れれば全く問題ないです。

はっきり仕様には書いてますね。気づかなかった。

書くとどうなるか。

pタグの中にdivを書くとこうなる。赤いボーダーがpタグ。pタグがdivをかこっているが、floatしたみたいに高さが消えている(Fx3[mac])。divの中にあるpタグは正しい挙動をしているのもわかる。そして、ブラウザによってタグの挙動が違う。

pタグの中にdivを書くと変な感じになる。

ブラウザ比較

p_div2.gif

firefox3.5

p_div1.gif

safari4

p_div3.gif

opera9

サンプルがすごく素直に動いてくれた。

urlに引数を付与しておいて、リンク先のページのjavascriptで引数を読み込み、ページ内のタブ切り替えを制御できるようにした。

↓とりあえず、タイトルがすごくながい。今まで見た中で一番か二番に長いかもしれない。

今日いじっているhtmlが、実はよく見るとdoctype宣言がない状態とほぼ等しい宣言だった。。。つまり後方互換モードになっていました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

↑ほぼすべてのモダンブラウザが後方互換モードになる。

↑この互換モードの一覧表を見ると、一目瞭然。この宣言だと表のすべてのブラウザで後方互換モードになる宣言のようだ。

そして、後方互換モードだと、:hoverなどの疑似要素はliなどの普通のタグでは効かなくなる。

firebugで一生懸命クラスを探しても認識されていないcssは表示されない。
このことから:hoverがブラウザに認識されていないことがわかる。

結論

後方互換モードで疑似要素を使う時はaタグなら動きます。

フラッシュみたいな動き。クリックするといろいろな反応をしてくれる。

時間に応じて、イベントを引き起こすことができる貴重な機能です。

tinyscrollとかフローディングメニューとか、たくさんの機能に使用されている重要なメソッド。

CSSいじるだけだからもっと簡単にできるかと思ったけど、クロスブラウザ問題でややこしくなってますね。だからjQueryとかの外部ライブラリを利用したサンプルが横行してるんだ。

毎日何か作らないと覚えたメソッドもプロパティもすぐ忘れる。

ということで、inputタグのvalue要素に任意の文字列を入れる方法。

これはすごい。操作も簡単。マクロの編集も誰でもできる。

getElementsByTagNameは、getするElementが複数だから、getElementsと複数形の"s"がついているのだそうです。

getElementByIdの場合は、Elementが単数系なので、取得できるのが一つだけということ。そもそも、1ページ内におけるid名は一度だけだから。

表の一番下に解説になっているのかなっていないのか、微妙な改行についての解説もありますね。

[ホワイトスペースの違いを無視] をオフにしてください。

と、書いてあるので、改行とホワイトスペースのマッチに関係がありそう。

「k2editor 空行 削除」で検索されてる方が毎日いらっしゃるので、エントリー。

ある文字が含まれる行を消す正規表現は、↓で置換。

「^.*あああああああ.*$」

「」

今日は正規表現三昧だった。基本的なものしか使ってないけど。抜き出して、削除して、の繰り返し。k2editorは最初の設定(テキストのハイライトとか)がないからとっつきにくいけど、フォルダ内検索ができたから今日は救われた。emeditorでも同じ正規表現でいけると思う。(最近使ってないからわすれたけど。)

追記

k2editorのよいところ。
フォルダ内検索の検索結果が別ウィンドウでリスト化される点。この点ではドリを超えているなー、と。
別ウィンドウで結果が表示されるので、検索結果に対して、検索結果を残しつつ、新たな検索結果を得ることができる。
そして、テキストエディターなので検索結果の保存が非常にお手軽。

世の中本当に面白くなってきましたね。名刺に音声情報が入っているのでしょうか?

AR Business Card from James Alliban on Vimeo.

jqueryとか外部ライブラリを使用せずに、自前のソースだけでスムーズスクロールが実現できそう。コードがシンプルになるのがいい。まだいろいろ改善の余地があるなぁ。
スクロールひとつとってもスクリプトの癖で微妙に差が出るのがおもしろい。

設計事務所らしいデザインがjavascriptとマッチしている。

あわせて読みたいブログパーツ