はてなブックマーク

■ IE対策　- HTML5編 - IE8とそれ以前はHTML5に対応していません。 html5でサイトを作ってみる。とどちらに載せようか迷いましたが、CSS3に関する記事もあるので IEに関する情報はこちらにまとめて掲載することにします。 HTML5やCSS3に適用させる方法は、日々新しいやり方が出ている気がしています。ここに掲載されている内容も、すぐに古くなるかもしれません。 ここではいくつかの方法をご紹介していますが、いくつかを併用したり、サイトの用途によって使い分けてもいいでしょう。 html5shiv 上記URLからファイルをダウンロードし、jsファイルを任意のディレクトリに置き、headに組み込むだけ。 旧バージョンのブラウザでもHTML5を認識しブロック要素として認識される。 この場合、IE9はhtml5対応なので、IE9未満に向けて設定する。 <!--[if lt IE 9

サンプルhtml --[ html ]----------------------- <div class="anime01"></div> --[ CSS ]------------------------ .anime01{ background:#000; color:#fff; margin:25px 0; width:100px; height:10px; -moz-animation:anime01 5s infinite alternate linear; -webkit-animation:anime01 5s infinite alternate linear; animation:anime01 5s infinite alternate linear; } @-webkit-keyframes anime01{ 0% {} 100% {-webkit-transfor

■ はじめに はじめに 只今CSS3の情報を収集中です。 書店などにも、CSS3のみを扱うものがあまりないので、主にネットにて情報を集めています。 誤った記述、優良な情報などがあれば教えて下さい。 このサイトはsafariまたはchromeでご覧下さい。 CSS3とは (いろいろなサイトを見た上での個人的見解なので間違っていれば訂正します。) Webサイトを閲覧するユーザーにとって、情報発信ツールとしてより便利に快適に使用する為に生まれたCSSの進化系だと勝手に解釈しています。 Flashや画像などは、本来はあまりつけない方がよいという考えの元にソースだけで画像に効果を与えたり動かしたりしようというもので、 そういったサイトが重くなる原因のものを極力省くことでより情報をスムーズに伝達できるようにしている。 まだ対応ブラウザが限られているなど弊害があるが、将来的にはほとんどのブラウザはバージ

--[ html ]----------------------- <div class="anime01"> <img src="./img/heart.png" /> </div> --[ CSS ]------------------------ .anime01 { width:55px; height:44px; -webkit-animation: anime01 2s linear infinite; animation: anime01 2s linear infinite; } @-webkit-keyframes anime01 { 0% { -webkit-transform: rotate(-0deg); } 100% { -webkit-transform :rotate(360deg); } } @keyframes anime01 { 0% { transfo

■ アイコン safari/chromeでご覧いただけます。 いろいろな動きをするアイコン達。 KAYAC DESIGNER'S BLOGさんのサイトを参考にしています。 T e x t --[ html ]----------------------- <p class="anime01"> <span class="ani01_t">T</span> <span class="ani01_e">e</span> <span class="ani01_x">x</span> <span class="ani01_t2">t</span> </p> --[ CSS ]------------------------ p.anime01{ zoom: 1; display: table; line-height: 1; text-shadow: 0 1px 0 #3f3f3f; float:

■ 伸縮・移動・透過 ここでは主に移動・透過・伸縮に関するコードを掲載します。 ここはwebkitを使ったサンプルページでしたが、firefoxにも対応させました。(2013/2/1) 伸縮 スマートフォン＆PCに対応している。 [ 伸縮のサンプル ] サンプルhtml --[ html ]----------------------- <div class="shinshuku"></div> --[ CSS ]----------------------- div.shinshuku { -moz-animation: anime1 5s ease -2s infinite alternate; -webkit-animation: anime1 5s ease -2s infinite alternate; animation: anime1 5s ease -2s infinite

--[ html ]----------------------- <div id="radius">Radius Border</div> <div id="radius_img">Radius Image</div> --[ CSS ]------------------------ #radius { background: #69c; border: solid 1px #036; padding: 10px 30px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } #radius_img { width:100px; background:url("../img/button.png") no-repeat; -webkit-border-radius: 5px; -mo

■ いろいろな動き ここはwebkitを使ったサンプルページでしたが、firefoxにも対応させました。(2013/2/1) マウスオンでアクションするサンプル [ 角を丸く ] サンプルhtml --[ html ]----------------------- <div class="anime01"></div> --[ CSS ]------------------------ .anime01{ background:#000; color:#fff; padding:10px; width:100px; height:10px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out; } .anime01:hover{ -webkit-bor

■ はじめに はじめに 只今CSS3の情報を収集中です。 書店などにも、CSS3のみを扱うものがあまりないので、主にネットにて情報を集めています。 誤った記述、優良な情報などがあれば教えて下さい。 このサイトはsafariまたはchromeでご覧下さい。 CSS3とは (いろいろなサイトを見た上での個人的見解なので間違っていれば訂正します。) Webサイトを閲覧するユーザーにとって、情報発信ツールとしてより便利に快適に使用する為に生まれたCSSの進化系だと勝手に解釈しています。 Flashや画像などは、本来はあまりつけない方がよいという考えの元にソースだけで画像に効果を与えたり動かしたりしようというもので、 そういったサイトが重くなる原因のものを極力省くことでより情報をスムーズに伝達できるようにしている。 まだ対応ブラウザが限られているなど弊害があるが、将来的にはほとんどのブラウザはバージ

(※ このページには古い情報が含まれている可能性があります。) ■ iPhone対策　その1 iPhoneサイトのサンプルを見るには、http://www.nemuchan.com/sp/へiPhoneでアクセスしてみてください。 実験的に作っているのでリンク切れなどに関してはご容赦を・・・(^ ^;) iPhoneサイトへ振り分ける PCでアクセスしたらPCサイトへ、iPhoneでアクセスしたらiPhoneサイトへ誘導する方法です。 Javascript, PHPでも実現出来ますが、今回はhtaccessで振り分けます。 サンプルコード <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} iPhone RewriteCond %{QUERY_STRING} !mode=pc //PC or iP

first-child みかん りんご バナナ キュウイ もも ブドウ --[ html ]----------------------- <ul class="giji01"> <li>みかん</li> <li>りんご</li> <li>バナナ</li> <li>キュウイ</li> <li>もも</li> <li>ブドウ</li> </ul> --[ CSS ]------------------------ .giji01 li{ width:80px; padding:3px 0; border-top:#333 dashed 1px; } .giji01 li:first-child { border:none; } last-child みかん りんご バナナ キュウイ もも ブドウ --[ html ]----------------------- <ul class="gij