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年に勧告される「
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と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
夜の間だけハロウィン仕様に変化させる [ホームページ作成] 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サイトのデザインに
[ CSS ] フォントサイズを統一＆サイズ変更できる指定方法
本文を 12 ピクセル相当の大きさで表示すべく、font-size:75%; で指定されたページを Mac Firefox 2.0 で見ると文字が小さく見えます。 これは、Mac Firefox 2.0 のデフォルトフォントサイズが 14 ピクセルの為で、計算してみると 10.5 ピクセル相当の大きさでレンダリングされている事になります。 14px * 75% = 10.5px 確かに小さいですねー。 この問題を解決すべく、各ブラウザで同じフォントサイズを実現するには、font-size:12px; とかのピクセル指定すれば良いだけなんですが、Windows Internet Explorer 7 で文字のサイズ変更が出来なくなってしまうのでピクセル指定はアウト。 と言う事で、やりたい事 各ブラウザで同じフォントサイズを実現する。 Windows Internet Explorer 7 で
![[ CSS ] フォントサイズを統一＆サイズ変更できる指定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/19691f3db719fc116cbcdd5e767c89ee15487f3e/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2018%2F09%2Fudon-1.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/イメージ/画像に並ぶテキストの位置（垂直方向）を指定する - TAG index
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
画像置換法（IR[Image Replacement]法）まとめ - パソコンＱ＆Ａ