サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.nemuchan.com
■ セクション用タグ セクション要素とは レイアウトを構成するためのひとつのかたまりです。 HTML4.01以前のバージョンでは、body,h1~h6,divなどを指して言います。 header要素 今までは、divにid名を付けヘッダを作成していましたが、今後はheaderタグが追加され、ヘッダに打ち込む内容をこのセクション内に収めるようにします。 html4.01以前の書き方 <html> <head></head> <body> <div id="header"> <h1>タイトル</h1> <p>テキストテキストテキスト</p> </div> </body> </html> html5の書き方 <html> <head></head> <body> <header> <h1>タイトル</h1> <p>テキストテキストテキスト</p> </header> </body> </html
■ 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
(※ このページには古い情報が含まれている可能性があります。) ■ 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
このページを最初にブックマークしてみませんか?
『nemuchan.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く