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のみでロールオーバーイメージ（マウスが上にくると画像が変わるテクニック）を行うことができたからです。 ロールオーバ
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
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
ウェブデザイン技能検定3級に合格～合格対策など
"ウェブデザイン技能検定3級に合格～合格対策など"の情報 タグ ウェブ（3） , デザイン（2） , 試験（1） , 資格（1） このページのURL TrackBack トラックバック 【資格試験】 ウェブデザイン技能検定3級を受けようかと。 from 友月庵 at 12/01/11 ウェブデザイン技能検定を受けようと思いまして、その備忘録。 ■ウェブデザイン技能検定とは まず、ウェブ技能士とはなにかといいますと、 ウェブ...
CSSとdivを使った画像先読みテクニック:phpspot開発日誌
Better Image Caching with CSS ? Perishable Press CSSを使った画像先読みテクニック CSSの中に、background-image として指定しておくことで読み込ませるような方法もありますが、<div> と position を使って実現する方法 要は、position指定した見えないdivの中に<img>を仕込んで画像を先読みさせるというものみたい。 HTML <div id="preloader"> <img src="http://domain.tld/path/images/01.png" width="1" height="1" /> <img src="http://domain.tld/path/images/02.png" width="1" height="1" /> <img src="http://domain.tld
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 – creamu
フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなどにも対応している。 ブラウザ対応状況は以下から。 » Here is the Full List HTML、CSSもとてもシンプルなので、ぜひ見てみてほしい。 ブラウザの下部にフッターを固定表示するCSS、チェックして使ってみてはいかがだろうか。 » CSS Sticky Footer Oisixの野菜を炒めて食べました。だいぶ減ってきたな。じゃがいもとたまねぎがうめぇ。
夜の間だけハロウィン仕様に変化させる [ホームページ作成] All About
10月31日はハロウィンですね。 ハロウィンは夜のお祭りですし、夜の間だけウェブサイトをハロウィン仕様のデザインに自動的に変化させる仕組みを作ってみるのはいかがでしょうか。 以下の枠内には、ハロウィンの説明文が書かれています。 この記事を、夜8時～深夜4時の間に見ると、（以下の枠内だけ）ハロウィン仕様のデザインで表示されます。 それ以外の時間帯だと普通のデザインで表示されます。 夜の間だけハロウィン仕様に変化させる ハロウィンとは 諸聖人の祝日（万聖節）の前夜に行われる祭り。 スコットランド・アイルランドに起源を持つアメリカの祝い。 10月31日の夜に行われる。 悪魔などの扮装をした子どもたちがが「Trick or treat!」と言って近所を回る。 近所の人々は、子どもたちにお菓子などを与える。 時刻に関係なく強制的にデザインを変更させてみたい場合は以下のボタンをクリックして下さい。 ※
![夜の間だけハロウィン仕様に変化させる [ホームページ作成] 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)
初心者にもやさしい 簡単HTML作成:ホームページのタグ作成ツール
HTMLのタグの知識不要！簡単に生成できます 普段、ホームページやブログなどを書く際に、ちょっと欲しいHTMLタグ作成ツールを紹介しています。すべて無料で使用できます。 HTMLのタグの知識は不要です。やりたいことを選んでいくだけで、簡単にコードを生成出来ます。このツールは、ブラウザ上で使用できますので、HTMLエディターや、専用ソフトウェアのインストールなど、一切必要ありません。簡単にグラデーション文字の作成もできるジェネレーターです。 日記用テンプレートも追加しました。日記を書き込んで、枠や文字の色、画像のレイアウトなども好きなように変更できます。プレビュー画面で確認しながら作成できますので、タグクリエイターとして、いろいろお試しください。 ホームページ以外のブログに便利なアフィリエイトツールも増やしています。楽天アフィリエイトのリンク利用方法も紹介しています。Webサイトのデザインに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dwlog.net
AWCS
スタイルシート［CSS］/イメージ/画像に並ぶテキストの位置（垂直方向）を指定する - TAG index
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
画像置換法（IR[Image Replacement]法）まとめ - パソコンＱ＆Ａ