HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTMLだってCSSだって正しいほうがいいに決まってる
WWWで利用される技術の標準化をすすめる団体のW3Cが提供する、サイトが正しく構成されているかチェックするツールを３つ紹介します。 1. HTML Validator HTMLの文法が正しいかどうかチェックするツールです。 Another HTML-lint gatewayも有名ですね HTMLの文法が正しいことが上位表示に直結するわけではありませんが、ブラウザで正常に表示するためにも、クローラに確実にソースを読んでもらうためにも、正しいに越したことはありません。 2. CSS Validator こちらは、CSSをチェックするツールです。 CSSの記述が間違っていると思ったように表示されず、自分でも気づくことも多いでしょうが、文法に沿っていなくても見た目上正しく表示されることもあるので、確認してみましょう。 3. Link Checker こちらは、リンクが正しく機能しているかチェックす
第7回■文字エンコーディングが生み出すぜい弱性を知る
文字コードに関する問題は大別すると文字集合の問題と文字エンコーディングの問題に分類できる。前回は文字集合の取り扱いに起因するぜい弱性について説明したので、今回は文字エンコーディングに起因するぜい弱性について説明しよう。 文字エンコーディングに依存する問題をさらに分類すると2種類ある。（1）文字エンコーディングとして不正なデータを用いると攻撃が成立してしまう点と，（2）文字エンコーディングの処理が不十分なためにぜい弱性が生じることがある点だ。 不正な文字エンコーディング（1）――冗長なUTF-8符号化問題 まず，（1）の不正な文字エンコーディングの代表として，冗長なUTF-8符号化問題から説明しよう。前々回に解説したUTF-8のビット・パターン（表1に再掲）を見ると，コード・ポイントの範囲ごとにビット・パターンが割り当てられているが，ビット・パターン上は，より多くのバイト数を使っても同じコー
HTML＆CSSサンプル集
aichan.biz This domain is expired. The domain owner has to renew it from the admin setting if you continue using it. 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner direct
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
DOCTYPE宣言とDOCTYPEスイッチ - HTML・XHTML
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">
文書構造を表現するXHTMLタグの正しいマークアップ HTMLタグリファレンス（1/10） - ＠IT
文書構造を表現するタグ 文書構造を表現するXHTMLタグを大まかに分類し、分類したタグをXHTMLの“要素”として、1つずつ紹介していきます。 これらの要素類はXHTMLの骨格（枠）となる部分を形成していくために使われる、XHTMLタグの記述（＝マークアップ）を行ううえで基礎となる要素類です。 htmlタグが一番の外側（先祖）となり、その内側（子）に上からhead要素、body要素といった順番でマークアップされます。 ページとして作成する（.htmlファイル）の文書構造を考慮し、情報構造として論理的に合っているかというのを考えながらマークアップを行いましょう。 html要素 htmlのそれぞれの要素はhtml要素を頂点とする階層構造になっています。 その中でhtml要素は最も基礎となる要素で、そのほかの要素はすべてがhtml要素の子や子孫（※）となる関係性になります。 なお、htmlファイ
そのXHTML文書にXML宣言は本当に必要か？ – ofujimiki.jp
最近「XHTML文書にはXML宣言を入れることが強く推奨されているので入れるべきだ」というような意見を何度か目にしました。しかし、その説明の中で、メディア・タイプ（「text/html」や「application/xhtml+xml」など）については触れられていませんでしたので、ちょっと補足しておきたいと思います。 XHTML1.0の仕様書では、確かにXML宣言をつけることが強く推奨されており、具体的には次のように書かれています。 An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. しかし、ここで言うXHTML文書とは、仕様書
ごく簡単なHTMLの説明 -- 要素タイプ一覧
＊link要素は「少し詳しいHTMLの説明」シリーズで紹介 親要素と子要素 基本要素の章で説明したように、HTMLの要素は親子関係を持ち、それぞれ親になれるもの、子になれるものが定められています。ここでは、厳密なDTDの定義ではなく、実際にタグを書いていく上で理解しやすいようにアレンジして親子関係を整理してみました（ここで使っているBlock, InlineはDTDの%block;、%inline; と正確には一致しません）。詳しくは以下の注意点を参照してください。 親要素、子要素の欄で具体的な要素名が記述されているのは、その要素タイプのみが親子となります。 親が「Blockコンテナ」となっているものは、ブロックレベル要素のグループに属し、子要素が「Block」もしくは「任意」となっている要素の内容になります。一般にはbodyもしくはdiv要素の内容として考えておくとよいと思います。 親が
HTMLのマークアップ時に目的に合った要素を選ぶ方法
本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正しいかどうか」はツールを使ってチェックすることができますが、「目的に合っているかどうか」については人間が判断する他ありません。どの要素でマークアップするか、判断に迷う部分について掘り下げて考えてみましょう。 はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正
テキストに意味を持たせるXHTMLタグの正しいマークアップ（1/20） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/2/20 テキストに意味を持たせるXHTMLタグの正しいマークアップをおさらいしましょう。フレーズ要素を含む19タグを一挙ご紹介します。 これらの要素を用いたマークアップを行うことにより、「この文章は○○から引用された文」とか「この文字列は▲▲の略語である」といったふうに、テキストに論理的な意味を持たせることが可能になります。 p要素 p要素は、文章の段落を表すための要素です。 ブロックレベル要素として機能し、テキストとインライン要素を内包できますが、ブロックレベル要素を内包できません。 p 文章の段落構造を表すp要素 q要素 q要素は、段落による区切りが不要な短い引用文を表す際に使います。 インライン要素として機能し、テキストとインライン要素を内包できますが、ブロックレベル要素を内包できません。cite属性値に引用元のURIを記述し、必要に応じて
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans
IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</
[JavaScript] Web ページに印刷ボタンをつける
[JavaScript] Web ページに印刷ボタンをつける Permalink URL http://www.magicvox.net/archive/2007/07040148/ Posted by ぴろり Posted at 2007/07/04 01:48 Trackbacks 関連記事 (0) Comments コメント (3) Post Comment コメントできます Category 2 Guys 1 Printer Photo by Beau Giles Web ページなどに「このページを印刷する」ボタンを置いて、ユーザが印刷ボタンをクリックすると印刷ダイアログを出すための覚書。
![[JavaScript] Web ページに印刷ボタンをつける](https://cdn-ak-scissors.b.st-hatena.com/image/square/81da5be3c3d4d96abd49547a0fbe5fb6de45e8aa/height=288;version=1;width=512/http%3A%2F%2Fwww.magicvox.net%2Farchive%2F2007%2F07040148%2Fcover.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載インデックス「WebデザイナのためのHTMLチューニング入門」 - ＠IT
螺旋デザイン｜はじめてのCSS file3.基礎知識：DOCTYPE宣言
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
ホームページ作成テクニック、小技 [ホームページ作成] All About
Alternative Design Project
