マークアップエンジニアじゃなくても覚えておきたいHTMLとCSSの話(〜HTML5・CSS3、IE8 それぞれの準備に向けて) - livedoor ディレクター Blog(ブログ)
こんにちは。 livedoor Blogを担当しています石野と申します。 前職はマークアップエンジニア(HTMLコーダー)をしていました。 今回はその経験を踏まえ、ディレクターとして把握しておいた方が良いHTML/CSS関連のお話をご紹介しようと思います。 昨年からHTML5、CSS3、そしてInternet Explorer(以下IE)8のベータ2版発表と、バージョンアップに関するニュースが相次ぎました。 その違いを認識する上でも、また制作サイドのディレクションに活かす上でも本エントリーを参考にしてください。 ▼ 構成 (1) HTML - 文書型について (2) HTML+CSS - クロスブラウザについて (1) 文書型について - ファイルの先頭に陣取っている「DOCTYPE」とは何か？ HTMLソースを開くと、こういった記述を目にしませんか？ !DOCTYPE html PUBL
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
label のススメ | d-spica
label のススメ 2008-07-29 0 0 XHTML/CSS CSS, label, XHTML label要素とその挙動 | Web標準Blog | ミツエーリンクス これを読んでいて，ぼくがやっていることをちょっと紹介しようと思いました。 label の働き お名前 <input type="text" name="name" id="name" size="20" /> このような場合，コントロール本体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは，隣同士に並んではいるけれど，対応していることがはっきりマークアップされているわけではありません。 label要素を使って，次のようにマークアップすることで，「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが
Keryx (X)HTML Elements Best Practice Sheet
Warning! This page is not being maintained and may contain outdated information. Just use the HTML5 doctype anyway! All elements are sorted within their groups in prioritized order. Recommended (X)HTML versions are mint-colored. You may like the PDF-version or the Open Office version better, especially for printing. Version 1.09 (2009-06-30). HTML 3.2 HTML 4.01 strict HTML 4.01 transitional HTML 4
XHTML-CSS Validator
Just type or paste an URL in the form above, and click on "check it" to see the magic. If you want to fine tune your validation, click on the "advanced" link. That's it! An Idea: The Social Media Algebra I used to be very good at maths. I really was. Then I started studying computer science stuff (which is normal for a computer scientist) and as time goes by, I forgot many of the coolest stuff I l
HTMLの要素をSQLのように取り出せるPHPのライブラリ『htmlSQL』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
pylori*style wiki - HTMLパーサ Hpricot
Hpricotは Ruby用の HTML パーサです。スキャン部分は C 言語で書かれていて高速に動作します。 HTMLの解析や書き換えに威力を発揮する便利なライブラリです。 rubygemsを使うのが簡単です。 # gem install hpricot すると以下のようにプラットフォームを聞いてきます。Unix系OSであれば 1 を、mswin32 であれば 2 を選びます。 Select which gem to install for your platform (i386-freebsd6) 1. hpricot 0.4 (ruby) 2. hpricot 0.4 (mswin32) 3. Cancel installation コンパイルが始まり、インストールが行われます。 Building native extensions. This could take a while.
vim でソースコードの html 化 - Take it easy!
電脳空間カウボーイズのシン石丸さんが最近、氏のブログで ActionScript のいろんなテクニックをソースと共に公開してくれていて、なかなか面白くてためになるので楽しみにしています。シン石丸さん、ありがとうございます！ ただ、ちょっと残念な事がありまして、何かというと掲載されているソースコードがちょち見づらいカンジなんですね。 そこで、ひょっとしたらご存じかもしれないのですが、OSX に最初からインストールされている OSX の vim を使って簡単にソースコードの html 化が出来るので紹介したいとおも言います。 まずは、百聞は一見にしかずと言うことで、html 化したソースコードの紹介を。（← クリックすると表示します）どうでしょうか？かなり見やすくなっていると思うのです。 これは、シン石丸さんの6月10日のブログに掲載されているソースコードを私が gvim でhtml 化した物
カスタムチャンス！ - 正しいHTMLとWebアクセシビリティ
livedoor Blog(ライブドア ブログ)の基礎的カスタマイズの書.正しいHTML（妥当なXHTMLと論理的マークアップ）,Webアクセシビリティの向上など.[ skip ] [ 次頁 ] [ 目次 ] [ 検索 ] [ 雑記帖 ] [ サイトマップ ] ... あなたはカスタムチャンス！に来ましたね 正しいHTMLとWebアクセシビリティ こんにちは。カスタムチャンスのコーラ父（livedoor ID：cola_papa）と申します。このブログは livedoor Blog（ライブドア ブログ）を対象にした「正しいHTMLとWebアクセシビリティの向上」に関する簡単な覚書です。（見直しが必要な記事もあります。ご容赦下さい。） 概要 正しいHTMLのための覚書 Webアクセシビリティ向上のための覚書 カスタマイズ関連の記事 精選リンク集 XH
侍ズム | Samuraism - htmlのセレクト要素をインクリメンタルサーチする bookmarklet
Webのフォームで非常に多くの選択肢があるプルダウンリスト、またはリストボックスから目的のアイテムを選択するのは非常に面倒です。 残念ながら私の会社のとある社内システムでoption数が800を超えるリストから選択しなければいけない部分があり、非常に苦痛です。 エクスプローラ や Finder のファイルを選択するのと同じく、表示されているテキストの先頭数文字を入力することでその文字列から始まるリストにジャンプしてくれるブラウザもあります。 しかし、 ・テキストの途中の文字列で絞り込めない ・リストが辞書順に並んでいないと似ているアイテムを選択するのが難しい ・タイプが遅いとうまく絞り込めない ・Safari にはそもそもそんな機能がない ・日本語表示のアイテムにはジャンプできない という問題があります。 そこでリストをインクリメンタルサーチできるテキストボックスをダイナミックに追加してく
Convert text to JavaScript readable
Navigation Skip navigation. Site search Site navigation How To Create home JavaScript libraries Script license Script details Text to valid string converter Use this to convert text into a variable If you've ever tried to make some normal text containing characters like ' into a JavaScript variable, you will know how frustrating it can be when you miss one, or you miss a \ or a line break or a </s
対策遅らせるHTMLエンコーディングの「神話」
クロスサイト・スクリプティングという言葉は元々，WebアプリケーションのHTMLエンコード漏れなどを利用することによって第三者にJavaScriptを実行させる手法を指す。広義では，HTMLのエンコードによる画面改変などを含むこともある。 前回述べたように，クロスサイト・スクリプティングのぜい弱性はWebアプリケーションに見付かるぜい弱性の半分以上を占める。数年前から指摘されているにもかかわらず，一向になくならない。その理由として，クロスサイト・スクリプティング対策あるいはHTMLエンコード注1）に対する「神話」があり，正しい対策の普及を遅らせているように思う。その「神話」の数々について説明しよう。 注1）実体参照（entity reference）というのが正式だが，あまり普及していない用語なので，HTMLエンコードという用語を用いる 「すべからくHTMLエンコードすべし」が鉄則 HTM
mozilla.org マークアップ参考資料
fantasai このドキュメントの目的は、セマンティッククラスの豊富なボキャブラリーを定義するこ とです。サイト全体のスタイルシート内に指定するこ とができ、CSS の規則を書かなくても長く複雑でよく整えられたスタイルのドキュメントを記述することができるほど十分なボキャブラリーを定義します。こうしたクラスは古 い「見栄え」テンプレートに取って代わります；今では「見栄え」はスタイルシート内に定義されるようになり、マークアップをセ マンティックに保つこと ができます。これによって HTML のコードを書く人の仕事が簡素化され、ページのスタイリングに関してさらに優れた柔軟性を可能にし、一貫した仕様でサイト全体の体裁を整えます。 これらのクラスは必要に応じて使用できるように定義されています。これらのクラスを必要としないのであれば、これらを学んだり使用したりする必要は ありま
イベントハンドラをHTMLから分離する 基本サンプル [Javascript] All About
*n4でも動作します。 最近は、HTMLとデザイン(.css)を分離するということがわりと一般的に行われるようになってきました。 大規模なページでなくても、たとえば、ブログを作っていればそのツールは最初からHTML以外の分離が前提で作られて いたりします。 そこで、ここではCSSだけではなく、スクリプトを分離することについて考えてみます。スクリプトの分離といえば.js外部ファイルを利用するという手がまず思い浮かびますが、今回は、インラインのイベントハンドラをHTMLから切り離す方法です。 HTMLとそれ以外の要素を分離するメリットは、一般的にはソースが整理されることに関する事柄です。 もちろん、短いソースの場合は分離するためのオーバーヘッドが割りに合わないという場合もありますが、 何度も使う処理がある場合などには、見た目がシンプルでわかりやすくなることにより、 メンテナンス性が高まり、ミス
![イベントハンドラをHTMLから分離する 基本サンプル [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
初心者のためのホームページ作り/Web for beginner ホームページ作成支援
Lecture for beginner ■ HTML基礎講座 HTML4.01の概略 / HTML制作の準備 WEBとHTML / Webの作法 / HTMLの作成 論理構造 / 要素の親子関係 / ヘッダ情報 見出し / 段落 / リンク / フォント ボックスの概念 / 色の作法 / 画像の扱い リストの作成 / テーブルの作成 / 配置 フレーム / フォーム / 動画コンテンツ イメージマップ / スタイルシートの概念 Webページのタブー ■ HTML応用編 HTML4.01 / ヘッダ情報 / CSS応用 テキスト / アンカー / 文字実体参照 色の基礎知識 / FTPファイル転送 枠線表示の応用 / アクセシビリティ Lecture for senior ■ 初めてのXHTML講座 XHTML基礎講座 / XHTML概要 / XHTML基本 XHTML DTD / HTM
HTML覺書とCSS2リファレンス
HTML覺書とCSS2參考 HTML覺書:N HTML 4について，理想的なStrict文書について，基礎を概説します。 おまけ:見出しアウトラインを生成するブックマークレット for Firefox CSS2リファレンス:R CSS2（2.1）仕様に基いた，正しい知識を得たい人の爲の概説です。 カラーチャート:C ウェブ技術に用いられる基礎的な色名とそのコードを表にまとめました。 カラーピッカー:P スクリプトで機能する簡易的なカラーピッカーです。配色を考える際にどうぞ。 掲示板:M CSS仕様について，リファレンスについて，何か不明な点があったら，どうぞ。 ウェブデザイン關聯リンク集:L ウェブ技術を学習する人に参考にして貰いたい，良質なリソースを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hogepiyo.net » Blog Archive » HTMLフォームでIMEを自在に切り替える方法
We Ain't Seen Nothin' Yet. : マウスを乗せると広がるpreタグの作り方
Special Characters