HTML5の文法 World of granshe.
HTML5について学んでみました。 参考にさせていただいたサイト(敬称略) HTML5 W3C working draft HTML5.JP HTML 5 ― HTML 4 からの変更点 翻訳系の記事では常々申しておりますが、 基本的に、W3Cのワーキングドラフト（英文）を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございます。 以上をご理解いただけると助かります。 間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。 連絡先：granshe@jcom.home.ne.jp 今回は、DOCTYPE宣言と文法について。 HTML4.01では、HTMLの先頭にDOCTYPE宣言がなければならないというようなことが仕様書に記載されていました。 A valid HTML document declares what
HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ - はてなニュース
HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何？」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何？どんなことができるの？」という疑問にお答えしたいと思います。 ■HTML5でできること まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。 ＜具体的に何ができるの？＞ ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは？ - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「
XHTMLリファレンス：AWCS
XHTML ※Description of detailed XHTML based on specifications. Home JavaScript HTML CSS XHTML DHTML Columns Links AND OR 目次 >はじめに >XHTMLの基本 >Q & A コーディング >HTMLとの相違点 >例文と解説 >XHTML1.0と1.1 機能 >PDF >Information このコンテンツは、HTMLからXHTMLへの変換方法や違いについてなどを中心に、 XHTMLの初心者向け入門講座と簡易リファレンスを掲載しております。 >はじめに XHTMLとは XHTMLは（Extension HTML）の略で、従来のHTMLをXMLの仕様に沿って改良したHTMLの新バージョンとなる言語です。 XHTMLはインターネット時代に合わせて多様なニーズに応えるべく登場す
XHTML HTML辞典
Updated 2013.10.08 / Published 2005.09.12 HTML4.01, XHTML1.0, XHTML1.1の全要素・属性を網羅したリファレンスです。意味や文法をすぐに調べることができるように様々な索引を用意しています。 要素名A-Z索引 HTML4.01, XHTML1.0, XHTML1.1で定義されている全要素型をアルファベット順でリストアップした索引です。 属性名A-Z索引 HTML4.01, XHTML1.0, XHTML1.1で定義されている全属性名をアルファベット順でリストアップした索引です。 要素名の読み方 HTML4.01, XHTML1.0, XHTML1.1で定義されている要素名の発音ガイド（読み方）を掲載しています。 属性名の読み方 HTML4.01, XHTML1.0, XHTML1.1で定義されている属性名の発音ガイド（読み方）を
画像置換-text-indent-CSS TIPS
画像置換とは、html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事で、CSSでデザインを行う際にとても重宝する技術になります。 画像置換の仕方 たとえば以下のような(X)HTMLソースがあります。 <p>とあるWEBクリエイターのblog</p> この(X)THMLソースに以下のようなCSSを適応させるとにより、テキストを画像で表現することが可能です。 p{ width:400px; height:50px; text-indent:-9999px; background:url("logo.gif") top left no-repeat; } サンプル ロールオーバーイメージ 画像置換がクローズアップされたのは、JavaScriptを使わずにCSSのみでロールオーバーイメージ（マウスが上にくると画像が変わるテクニック）を行うことができたからです。 ロールオーバ
なぜ新人は聞きに来ないのか? - teruyastarはかく語りき
プログラマで、生きている: ググるな危険 http://el.jibun.atmarkit.co.jp/hidemi/2009/11/post-9d2b.html わたしが新人が検索に頼ってしまうことを危険視するのは、コピペの寄せ集めでもなんとなく動くコードが書けちゃって、それで自分は仕事を達成したという錯覚に陥ってしまうからです。 たいていの場合、新人プログラマには「きちんとしたコードを書くこと」は期待していません。先輩たちが期待しているのは「きちんとしたコードを書ける人になってくれること」です。 そこらへんの意識が行き違っちゃってるから、仙台に行くことよりも、新幹線に乗ることの方が重要事項になっちゃうんですかねえ。 最後に、わたしが新人の時に先輩から言われた言葉をご紹介させていただきます。 「自分で説明できないコードを1行たりとも書くな！」 間違うのはしかたありません。けれども、「自分
XHTML 1.0 文字実体参照 （UTF-8バージョン）
XMLでも、HTML 4と同様にISO/IEC 10646の文字コード位置で文字を参照できます。ただし、XMLではHTML 4とは異なり16進数表現の目印となる｢x｣は、小文字に限定されています。終端の｢;｣を省略できる例外規定もありません。 <!-- 10進数 --> , <!-- 16進数 --> 実体参照については、XMLではamp, lt, gt, apos, quot以外の実体は予め宣言しなければならないのでが、XHTML 1.0のDTDで外部実体宣言（Latin-1 characters, Special characters, Symbols）されているので、HTML 4との互換性は保たれています。実体はHTMLと同様に大文字小文字が区別されます。※aposという実体は、HTML 4ではサポートされていません。 A: 実体参照 表示テスト B: 10進数で文字参照
CSS の画像置換で画像にリンクを設定する
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。 このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1 １．サンプル１ h1 の後方に img を置く場合は、CSSハックを使います（h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…）。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。 画像置換サンプル1 (X)HTML <div id="header"> <h1>タイトル</h1> <div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テ
画像置換でメニューを作る-CSS TIPS
画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。 ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。 今回は要点を説明しながらメニューを作って行きたいと思います。 ひとまず、完成系のサンプルに目を通しておいてください。 ベースとなる(X)HTMLソースは以下のようにします。 <ul> <li class="ajaBtn"><a href="/ajax/">Ajax</a></li> <li class="amaBtn"><a href="/amazon/">amazon</a></li> <li class="cssBtn"><a href="/css/">css</a></li> <li class="htmBtn"><a href="/html/">html</a></li> </ul>
CSS：画像置換 - マウスオーバーで背景画像を入れ替える。ロールオーバーとか - 2
CSS のお勉強：所謂、画像置換てやつ 所謂テキストリンクの a 要素をプロック化し、text-indent : -9999px ; でテキストを遥か彼方にぶっ飛ばし、背景画像だけを表示したうえに、疑似クラスを使って、背景画像を入れ替えるという、よく知られたうざい技。一応書いとく。 使用している画像 a:link a:visited a:hover a:active text-indent : -9999px ; で背景画像のみを表示する ソース <ul class="alt"> <li><a href="textover2.html" title="クリックしる">クリックしる</a></li> <li><a href="urn:nai" title="未訪問">未訪問</a></li> </ul> スタイルシート ul.alt { margin : 0 ; padding : 0
display－スタイルシートリファレンス
displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。 ■初期値・適用対象・値の継承 インラインとブロック inline インラインボックスを生成する（初期値） block ブロックボックスを生成する list-item li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する run-in 文脈に応じてブロックまたはインラインボックスのいずれかを作成する inline-block インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。 テーブル table table要素のような表示となる inline-table インラインレベルのテーブルとなる table-r
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
画像置換とSEO
画像置換とSEO 画像置換の話題がはやっているようですのが、SEOに関して肝心なところ出てきていないようですので補足しておきます。 ひとまず、関連エントリーのまとめ 画像置換乱用してませんか？ | THE HAM MEDIA 画像置換について « grandes cedro 画像置換について考えてみました｜linker journal｜linker ここからが本文。 結論から書くとGoogleはaltもテキストも同等に扱う為、SEO上のメリットはありません。あったとしても計測できないほどの微々たるものです。 ただ、Yahooはaltに関してまったく評価されません。 つまり、画像のaltにのみキーワードがあるような場合は検索結果に登場しません。 また、a要素に包まれたテキスト、アンカーテキストと呼ばれるものですが、これは現在のSEOで結構重要なポジションにある要因なので、これが評価されていな
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 44,159 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押してください。巨大なHTMLは途中でちょん切られてしまうことがあります。 [リセット] はすべての設定内容を初期状態に戻します。 URL DATA (DATA領域指定では文字コ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dwlog.net
AWCS
美少女ゲームメーカー イリュージョンからの重要なお知らせ : ニュー速VIPブログ(`･ω･´)
スタイルシート［CSS］/イメージ/画像に並ぶテキストの位置（垂直方向）を指定する - TAG index
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
画像置換法（IR[Image Replacement]法）まとめ - パソコンＱ＆Ａ