2013-08-01から1ヶ月間の記事一覧
Internet Explolar6は… カラム落ちする 透過PNGが不対応 IE6透過PNG対策は「DD_belatedPNG.js」 「DD_belatedPNG_0.0.8a-min.js」ファイルをダウンロードする。 配布元：DillerDesign 適応前 適応後 IE…
写真など、ディティールの多いものをFavicon化するにはPhotoshopで下準備する。 ハイコンにしてアンシャープマスクをきつめにかける 彩度をかなり上げる 小さいパーツは大きく描きなおす 48px×48pxサイズにし、jpgで保存 マルチジェネレーター http://ao-sys…
Q05 ブラウザがページを読み込む度に画像がランダムに変更するよう記述しなさい。 <script> var img; img = new Array(); img[0] = ' img/imgA.png '; img[1] = ' img/imgB.png '; img[2] = ' img/imgC.png '; img[3] = ' img/imgD.png '; img[4] = ' img/imgE.png '…
Brand Spanking New Javascript / CSS Crossfader ここからjsファイルとサンプルhtmlをダウンロードして利用する。 <html lang="ja"> <meta charset="UTF-8"> <head> <title>CSS crossfader script</title> <style type="text/css"> body, div, p { margin: 0; padding: 0; } #container { width: 144px; margin: 20px auto; } </head></meta></html>
先生の解説ブログ 横に動かす onClipEvent (load) { speed = 5;//移動速度 } onClipEvent (enterFrame) { this._x += speed; } 加速させる（オブジェクト自体に記述） onClipEvent (load) { speed = 0;//初めは静止の0 accel = 1;//加速度を１に設定 } onCli…
<html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> body, div, ul, li { margin:0; padding:0; } ul { list-style: none; } body { font-size: 16px; font-family: "Hiragino Kaku …</meta></head></html>
最大値を戻すメソッドmax <html lang="ja"> <head> <meta charset="utf-8"> <title>Mathオブジェクト メソッドmax</title> </head> <body> <script> var num1 = 10; var num2 = 15; var num3 = 16; document.write(' <h1> ', Math.max(num1, num2, num3), ' </h1> '); document.write(' <h1> ', Math.min(num1, num2, num3), ' …</h1></body></html>
<script> var now, heisei, thDate; var days = new Array( '日', '月', '火', '水', '木', '金', '土' ); now = new Date(); heisei = now.getFullYear() - 1988; theDay = days[now.getDay()]; theDate = '平成' + heisei + '年' + (now.getMonth() +1) + '月' + n…
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">window.jQuery || document.write('<script src="js/jquery-1.8.2.min.js"><\/script>')</script>
画像をクリックすると画像が切り替る。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>toggle()メソッド</title> <style> p { cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <p>画像を変更</p> <p id="imgChange"></p></body></html>
dtをfloat:left; ddにはdtの文字幅分dadding-leftをつける。
960 Grid System http://960.gs
>>|| box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset; |
<meta name="keywords" content="Webデザイン, 初心者の勉強, 課題管理"> <meta name="description" content="Webデザイン初心者の勉強法を書く忘筌。課題管理サイト例として作成。初心者がWebデザインを勉強する時の課題のまとめかたの一例です。"> <title>Webデザイン初心者の勉強 - 課題管理サイト例｜忘筌</title> キーワードは3つまで。descriptionにはその三つの単語を頭文字にし解説を書く。</meta></meta>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのHTML5</title> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> </meta></head></html>
#nav ul li { float: left; } #nav ul li a { width: 160px; height: 50px; display: block; background: url(../img/navSprite.gif) no-repeat; overflow: hidden; white-space: nowrap; text-indent: 100%; } ちなみに、white-spaceとは、 ソース中の半角…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <style> * { margin: 0; padding: 0; } dl { width: 350px; margin: 40px auto; border-top: 5px solid #32667C; border-bottom: 5px solid #32667C; } dt { color : #32667C; border: 1px solid #CCC; font-weight: bold; background…</meta></head></html>
ページパレットに全てのページのカンプを読み込む 前頁共通部分の画像をスライスで切る スライス名を付ける（それがファイル名になる） 最適化パレットで拡張子と圧縮率や色数を設定 スライスを切ったオブジェクトの上で右クリック→選択したスライスの書き出…
共通やresetはcommon.cssに記述 style.cssに各ページのidをbodyにつけてページ毎のCSSを記述。 html側： CSS側：body#ページ名 { }※DW上でフォルダ移動する際の注意。 テストサーバー上ではアドレスの更新をしてくれないので、ローカルビューにしてから行う。
ID セレクタ <h1 id="sample">この文字は赤になります</h1> <script> $(function(){ $('#sample').css('color','red'); }); </script> CLASSセレクタ <ul> <li class="man">Paul</li> <li class="man">Billy</li> <li class="woman">Alice</li> <li class="man">Taro</li> <li class="woman">Hanako</li> </ul> <script> $(function(){ $('#cat…
<header> ヘッダー <nav> ナビゲーション <article> 本文 <aside> 本文の解説、補足など <footer> フッター <section> 章HTML 5は、正しい文法で記述しましょうとルールを変更したもの。 HTML4.0 XHTMLでは、見出しは１〜６まで順番に書かないといけなかった。 書く数字に意味があるため。 h1 大見出し h2 </section></footer></aside></article></nav></header>…
