検索
カレンダー
2017年12月
« 4月    
 12
3456789
10111213141516
17181920212223
24252627282930
31  
ブログメニュー
Amazon検索
キーワード:

HTML5時代のセキュリティ

2015年3月24日

ためになるページを見つけたのでメモ…
Webセキュリティ・ハンズオン 〜攻撃して学ぶ、HTML5のセキュリティ〜 に参加してみた話

チェックボックスの一括チェック

2013年11月14日

jQueryで、チェックボックスの一括チェック処理をするには、どのようなセレクタにすればよいか考えてみました。

基本的には属性セレクタで

$("input[type='checkbox']")

とすればいいのですが、これだけだと disabled や readonly に対応できません。
disabled は擬似クラス :enabled で検出できるのですが、
readonly は擬似クラス :read-write を使うとエラーになるので
否定擬似クラス :not() を使うことにしました。

最終的には以下のようになります。

$("input:enabled:not([readonly='readonly'])[type='checkbox']")

HTML5時代の作法をまとめてみた

2012年8月4日

そろそろHTML5を業務で使い始めていいんじゃないかと思い、HTML5で記述するにあたって
記述しておくべき定義(作法?)をまとめてみました。

作法っていうのはHTML5の文法という意味ではなく、ある環境に対する定義とか、
別の環境から見たらおまじないみたいに見えるものとか、そんな感じです。
IE6での標準準拠モードにするためのDOCTYPEの書き方みたいな。
基本的にはheadタグの中に書くべきものを説明していきます。
DOCTYPEとかHTML5のタグの説明は期待しないで下さい…。

(続きを読む…)

jQueryをIE8で使う際にFORMがおかしくなる

2012年3月27日

jQueryを使っていてIE8でのみフォームがおかしくなる現象が発生したのでメモ。

(続きを読む…)

CSSによるブラウザごとの不透明度の指定方法

2009年12月14日

ブラウザごとに不透明度の指定方法が違うのですが、まとめられた記事を発見したのでメモ。

[CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法

ちなみに、こんな感じになります。

selector {
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

複数枚に渡るWebページ印刷時のヘッダ表示

2009年10月23日

大きなテーブルが含まれたWebページを印刷したいという要望をいただきました。

HTMLのheadタグの中で次のように指定することで、印刷時のみ適用されるスタイルシートを指定することができます。

<head>
  ...
  <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  ...
</head>

普通のページなら、このスタイルシートの中でロゴとかメニューのスタイルをdisplay:none;にするだけなのですが、ページの中に大きなテーブルが存在するときは、もうひと工夫必要です。

大きなテーブルを印刷すると、途中で改ページされた場合に2ページ以降はヘッダが表示されなくなる場合があります。テーブルのヘッダを2ページ以降も表示するようにするためには、cssファイルに次のような定義を追加し、テーブルのヘッダにしたい行をtheadタグで囲んでください。

thead {
  display: table-header-group;
}

規約では、デフォルトで設定されているはずなので、ブラウザによってはそのままで表示されるかもしれません。

HTMLの構文チェックツール

2007年8月28日

みなさんは、正しいHTMLを書いておられるでしょうか?

静的なHTMLを書くだけならDreamwaverなどのWYSIWIGなオーサリングツールを使えば事足りるかもしれませんが、PHPなどから動的にHTMLを作成するときは、その作成したHTMLが正しいかをチェックするのは難しいと思います。

そこでオススメしたいのが構文チェックツールです。私が知っているものでは、W3Cが公開している「Markup Validation Service」と、日本の方が作成しておられる「Another HTML-lint」があります。

これらのツールにチェックしたいWebページのURLやHTMLを入力すれば、そのHTMLが構文的に正しいかを採点してくれます。間違いや修正すべき点があったときは、その場所と 修正方法を示してくれます。

特に「Another HTML-lint」はソースが公開されており、自身のサーバやPCで動作させることができます。

開発中のWebサイトやWebアプリケーションで、なぜかデザインが崩れてしまうという現象が発生したときは、HTMLの構文が間違っているのかもしれません。そんなときは、これらのツールでチェックしてみてはいかがでしょうか。

スタイルシートのクラス名の命名規則

2006年12月11日

稀に、HTML中に”red”などという名前のクラス名を使ったサイト見かけることがあります。このように見た目をクラス名やID名にすると変更に弱くなり、スタイルシートの適用によって得られる利益が半減してしまうように思います。

例えば、仕事でWebページを製作していたとします。スタイルシートでデザインを別途定義できるようにし、変更にも強くなっています。ですがエラー メッセージに対して適用するクラス名は”error”ではなく”red”になっています。完成が近づいたある日、あなたの顧客や上司が「エラーメッセージ の文字は赤色でなく黄色にしないといけない」と要求してきた場合、変更に対する仕事量はどのくらいになるでしょうか。

全てのHTML中の”red”クラスを”yellow”とするなら、全てのHTMLを見直す必要があります。全てのHTMLをひとつずつ開いて”red”を検索し、それがエラー文字列に対して適用されていれば”yellow”に変更するという作業になるはずです。

もしくは、下のようにクラス名が”red”なのに内容は”color: yellow;”とするという方法もあります。

red {

    color: yellow;

}
この方法を採るとクラス名と内容が一致していない保守しづらいサイトになってしまいます。

さらに悪いことに、エラー文字とは関係なく単に赤色文字列を表示したい場合に”red”クラスを使っていれば、その部分も黄色に変更されてしまいます。これを防ぐためにはやはり全てのHTMLをチェックする必要があるでしょう。

もし、エラーメッセージに対して適用するクラス名を”red”ではなく、”error”等、見た目ではなく意味をクラス名にしていればどうなるでしょうか。スタイルシートファイルの”error”クラスを、

error {

    color: red;

}

から
error {

    color: yellow;

}

に変更するといった作業だけで済むはずです。

これは”left”等というクラス名にも当てはまります。leftと名づけられたボックスが、いつまで画面の左側に表示されているでしょうか。

シニア向けのデザイン

2006年11月17日

私はWebニュースの巡回を日課にしていますが、ふとしたことで興味深いブログの記事を見つけました。
団塊~シニア層向けのWeb設計 やっちゃいけない10のUI
そこからリンクをたどって役に立ちそうなページをいくつか見つけました。
シニアはログインでつまづく?!
シニア向けウェブサイト構築のための10のポイント
シニア向けウェブサイトの色
私自身は基本的に業務システムや中年より若い方を対象にしたサイトばかりに携わってきたので、目から鱗の思いでした。
今後は高齢化社会になっていと言われていますし「シニア向けデザイン論」みたいなものも活発になるのかもしれません。

現状では、デザイナさんから挙がってくるデザインを見ると、表示幅やフォントサイズが固定されているものが多いように思います。
表示幅やフォントを固定したほうがレイアウトが固定できデザインしやすいのでしょうが、これではブラウザの機能で文字を大きく表示している方は読めなくなってしまうのではないでしょうか。そういう意味ではFlashも同じです。

そこで私がお勧めしたいのが、スタイルシートでpxやpt単位で指定している部分を全てem単位で指定するというものです。
emという単位は、1emを英字「M」の高さとして定義されています。
指定の仕方は
p {
    margin: 0.5em;
}
というような感じです。
このように指定すればブラウザの設定で表示する文字の大きさを変えても、それに合わせてマージン幅などが変更されるので、レイアウトの崩れを防止することができます。

ただ、この方法には一つ問題があります。
ボタンなどの画像が文字の大きさに連動しないということです。画像の幅や高さをem単位で指定すればある程度解決できるのですが、無理やり拡大や縮小するので画像が汚くなる可能性があります。
この問題は今後、SVGなどのベクタ形式の画像が普通にブラウザに表示できるようになれば解決できるはずだと考えています。
早くIEが対応してくれればいいのですが…。

!DOCTYPE宣言とIEの!DOCTYPEスイッチ

2006年10月11日

IE6には標準準拠モードと後方互換モードの2種類のモードがあり、何もしないと後方互換モードになっています。この後方互換モードが標準に準拠して いないため、標準に準拠しているFirefox等と表示が違ってしまう原因になっています。 IE6で標準準拠モードにするには、HTMLにDOCTYPEを宣言する必要があります。

DOCTYPE宣言の構文とIEのモードをまとめました。

バージョン !DOCTYPE宣言 IEのモード
宣言なし 後方互換
HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> 標準準拠
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> 標準準拠
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> 後方互換
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> 標準準拠
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”> 後方互換
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> 標準準拠
XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 標準準拠
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 標準準拠
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> 標準準拠
Compact HTML 1.0 <!DOCTYPE HTML PUBLIC “-//W3C//DTD Compact HTML 1.0 Draft//EN”>