ラベル yui の投稿を表示しています。 すべての投稿を表示
ラベル yui の投稿を表示しています。 すべての投稿を表示

2015年6月29日月曜日

JavaScript, CSSライブラリの CDN



たくさんのライブラリをホスティングしているところ

RawGit
・（cdn.rawgit.comの方は）by MaxCDN
・Github上のライブラリが対象

jsDelivr
・by MaxCDN and CloudFlare

cdnjs
・by CloudFlare

OSSCDN
・by MaxCDN



特定のライブラリのみホスティングしているところ（と言ってもGoogleとMicrosoftはそこそこ揃ってる）

Google Developers Hosted Libraries
・by Google
・AngularJSあり

Microsoft Ajax Content Delivery Network
・by Microsoft
・Bootstrap、Knockoutあり

jQuery CDN
・by MaxCDN
・jQeuryファミリーのみ

Bootstrap CDN
・by MaxCDN
・Bootstrap、Font AwesomeとBootswatchのみ

Yahoo! Developer Network
・by Yahoo
・YUIとPure.cssのみ
・HTTPS不可


MaxCDNがんばってる


参考
floatingdays: JavaScriptフレームワーク/ライブラリの CDNいろいろ


tags: , , , , , , , , , , , 0 コメント

2011年9月28日水曜日

JavaScriptフレームワーク/ライブラリの CDNいろいろ


prototype.jsとかは、もういいや。


プロダクト別CDN

（2013/3/19 追記）
（追記終わり）


CDNごとの特徴
  • Google Libraries API
    • HTTPS可
    • マイナーバージョン（もしくはリビジョン番号）を省略すると、指定したメジャーバージョン（もしくはマイナーバージョン）内で最新のファイルをロードする
    • 他にもprototype.jsやDojo、Ext core等メジャーなJavaScriptフレームワークがいくつかある
  • Microsoft Ajax Content Delivery Network
    • HTTPS可
    • 他にもメジャーなjQuery Pluginがいくつかある
  • jQuery CDN （jQuery CDN、jQuery CDN （jQeury Mobile））
    • HTTPS不可
  • YUI （YUI Configurator、YUI 2: Dependency Configurator）
    • HTTPS不可
    • 複数のファイルを結合して1ファイルとしてロードできる
  • cdnjs.com
    • HTTPS可
    • 最新バージョンの適用タイミングは遅いかも？


結論


おまけ
以下のCDNは更新されていないようだ。


関連

tags: , , , , , , , , , 0 コメント

2011年8月5日金曜日

YUI3の Calendarウィジェット



YUI2にはあるけどYUI3には無いCalendarが、YUI3の次期バージョンである3.4でリリースされるようだ。


Calendar - YUI Libraryを参考に使ってみたら、簡単に使えた。
上記画像のように、YUI2のカレンダーよりちょっとかっこいい？
ただし、ここに書いてあってもまだ未実装の機能もあるようだ。
さらに、イベントハンドラ等、詳細についてはここには書いてない。詳細はAPI docsを見ろと書いてあるが、そのリンク先は現時点ではNot Found。


また、formへの日付入力で活躍するDatepicker機能はさらに次バージョンの3.5で実装予定のようだ。
The calendar is currently not enabled with popup functionality: it will be released as a calendar plugin in 3.5


tags: , , , , , 0 コメント

2011年2月8日火曜日

YUI2と YUI3の CSSの比較

ついにGoogle Libraries APIがYUI3系の配信を開始した。
YUI 2 CSS ToolsからYUI 3 CSS Resourcesへ乗り換えるための準備として、変更されている点を洗いだしてみた。
（追記：比較したのは、YUI 2.8.2r1と YUI 3.3.0。）


fonts.css

変更なし


grids.css

根本的に変わったので、小手先の変更による対応は無理。
ただしclass名のプリフィクスも変わった（2はyui、3はyui3）ので、2と3は共存できる。


reset.css

buttonのmargin、paddingのリセットがなくなった。

button {
    margin: 0;
    padding: 0;
}

↓

削除

delとinsのtext-decorationのリセットがなくなった。
del, ins {
    text-decoration: none;
}

↓
削除

supとsubのvertical-alignが変わった。
sup {
    vertical-align: baseline;
    ↓
    vertical-align:text-top;
}
sub {
    vertical-align: baseline;
    ↓
    vertical-align:text-bottom;
}

button、optgroup、optionのfontのinheritがなくなった。
また、input、textare、selectのfont-styleのinheritがなくなった。
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
button {
    *font-size: 100%; /* IEでリサイズ可能にするためだったらしい */
}

↓

input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}

base.css

bodyのmarginが削除された。（余計なお世話だったので朗報だ。）
body {
    margin:10px;
}

↓

削除

optgroup、del、sup、subのリセットされていたstyleの上書きが削除された。
reset.cssの方から削除されたので、baseで上書きする必要がなくなったらからだろう。
optgroup {
    font-weight:normal;
}
del {
    text-decoration: line-through;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}

↓

削除

クリック系のform要素の1pxのpadding（Opera対策らしい）が削除された。
button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] {
    padding:1px;
}

↓

削除

テキストボックス系のwidthが追加された。
これでテキストボックスのフォントをメイリオにしたときビヨーンと広がる問題が解消される。
input[type=text], input[type=password], textarea{
    width: 12.25em;
    *width: 11.9em;
}


こうして見ると、grids.css以外は大きな変更は少ないようだ。
del, ins, sup, subなんかはあまり使っていないだろうし。buttonが好きな人には影響あるのかな？
base.cssでbodyのmarginがなくなったのは影響があるかもしれないが、これもそのまま使っているサイトは少ないと思う。


（2011/2/9 追記）
base.cssのinput[type=text]とinput[type=password]の追加は影響する場合あり。属性セレクタより弱いセレクタで横幅を指定しているページでは、このbase.cssのスタイルに負けちゃうように変わっちゃうから。

tags: , , , , , , , 0 コメント

2010年9月22日水曜日

フリーで使えるJavaScriptと CSSの CDNいろいろ

httpsが使えるのはGoogleとMSのみ。
httpsに拘らないならCached Commonsがライブラリ豊富で便利そう。
でも使いたいライブラリがGoogle Libraries APIで間に合うならGoogle Libraries APIでいいんじゃないかな。レスポンス速度が速いし。
（レスポンス速度はminファイルのロード時間を4回計った2～4回目の平均値。状況によって変わってくるだろうから、参考程度に。）


Google Libraries API

  • 主要なJavaScriptライブラリをホスティングしている
  • バージョン指定でメジャーバージョンのみの指定や、マイナーバージョンまでの指定等が可能
  • https可
  • YUIはバージョン2しかない
  • ブラウザキャッシュは1時間 or 1年間（参考：floatingdays: Google AJAX Libraries APIのブラウザキャッシュ期間）
  • レスポンス速度
    • jQuery：0.069秒 
    • YUI 2 YUI Loader：0.066秒


Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library
  • ASP.NET関連以外ではjQuery関連の3つをホスティングしている。Validationプラグインは便利かも？
    • jQuery
    • jQuery UI
    • jQuery Validationプラグイン
  • https可
  • ブラウザキャッシュは1年間（max-ageとExpiresが違う気がする？）
  • レスポンス速度
    • jQuery：0.161秒


YUI
  • httpsは使えない
  • JavaScript、CSSをそれぞれ1つずつにまとめられる（Combine Files）のは便利
  • ブラウザキャッシュは10年間
  • レスポンス速度
    • YUI 2 YUI Loader：0.181秒


Cached Commons


JsLoad: Remote loading API of JavaScript library
  • Google App Engineで作られている
  • 2008年10月から更新されていないようだ


JavaScript Host（←※リンク切れ）
  • 閉鎖しちゃったみたい


(2010/10/19 追加)
jQuery Code Server
  • jQuery自身によるjQueryのホスティング
  • ダウンロード用のファイルをそのままhotlinkしてよいことにしたようだ
  • jQuery UIとかプラグインは提供しないのかな？



参考

tags: , , , , , , , , , , , 0 コメント

2010年6月15日火曜日

Google AJAX Libraries APIのブラウザキャッシュ期間

Google AJAX Libraries APIではバージョンの指定の際にマイナーバージョンやリビジョンを省略できる。

例えばYahoo! User Interface Libraryには2.8.1というバージョンがあるので、下記のようにバージョンを指定できる。

  • 2 → バージョン2系の中の最新版をロードする
  • 2.8 → バージョン2.8系の中の最新版をロードする
  • 2.8.1 → バージョン2.8.1系の中の最新版をロードする


で、それぞれの場合のHTTP Headerによるキャッシュ制御を調べてみる。
yuiloader-min.jsを静的に読み込んだ場合で調べてみた。

指定方法max-ageExpiresEtag
メジャーバージョン（2）1時間1時間後なし
マイナーバージョン（2.8）1時間1時間後なし
リビジョン（2.8.1）1年1年後なし

YUIは「2.8.1.1」のような2.8.1系の新しいバージョンが出ることはない（※）ので、リビジョンまで指定した場合はキャッシュ期間を1年にしている。
それ以外は1時間。ちょっと短いせめて1日くらいでも良さそうな気がするが。

※これまでのバージョンの付け方を見る限りはない。もしあったとしたら2.8.1-1のようにドット以外で繋ぐことにより回避するかもね。

tags: , , , , 0 コメント

2010年5月8日土曜日

HTML5のテンプレート例

（2010/05/28 変更：Google Analytics非同期版が正式リリースされたので、Beta版から正式版に変えた）
（2010/08/30 変更：div構造を少しすっきりさせた）
（2010/11/04 変更：Google Analyticsのコードをhead要素内へ移動）
（2011/04/25 追加：IEの条件付きコメント（Conditional Comments）の例を追加）

Google Analytics非同期版とYUI 2 Grids CSSとjQueryを組み込んだHTML5の例。
header要素等のHTML5の新要素は使わない。（今のところあまりメリットを感じないので、）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>{{ TITLE }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" href="{{ RSS_URL }}" title="{{ FEED_TITLE }}" />
<link rel="alternate" type="application/atom+xml" href="{{ ATOM_FEED_URL }}" title="{{ FEED_TITLE }}" />
<link rel="stylesheet" href="{{ STYLESHEET_URL }}" />

<style>
{{ STYLE }}
</style>
<!--[if lt IE 9.0]>
<style>
{{ STYLE for IE8- }}
</style>
<![endif]-->

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-{{ GOOGLE_ANALYTICS_ID }}']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>

<!-- @see http://developer.yahoo.com/yui/grids/builder/ -->
<body id="doc4">

<div id="hd">
{{ HEADER }}
</div><!-- #hd -->

<div id="bd">
{{ MAIN_CONTENT }}
</div><!-- #bd -->

<div id="ft">
{{ FOOTER }}
</div><!-- #ft -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{{ JAVASCRIPT_URL }}"></script>
<script>
{{ JAVASCRIPT }}
</script>

</body>
</html>

使うときに不要な要素は減らす。
{{ }}のところは置き換える。

PHPの場合、default_charsetを設定してあれば<meta charset="UTF-8" />は無くても大丈夫。

YUI 2 CSS Toolsはcommon.cssとか作ってその中でimportした方が変更に強い。

Google Analyticsは外部JavaScriptファイルにした方がすっきりするけど、そのためだけにHTTPアクセスを1回増やすのもどうかと思う。
「http://www.google-analytics.com/ga.js#UA-XXXXXXX-X」の形で呼び出せるようにすればいいのに。
（ただし静的なHTMLに埋め込む場合は、変更が発生したときに全部変更するのは大変なので外出ししておいた方がよい。）

jQueryはプラグインをいろいろ使うならマイナーバージョン（1.4とか）まで指定しておいた方が無難。


（2010/11/04 追記）
Google Libraries APIのCDNから読み込むJavaScriptが複数ある場合は、google.load()を使って非同期で読み込んだ方が少し早くなる場合がある。
<!-- 例：jQueryとjQuery UIを非同期で読み込む -->
<script src="//www.google.com/jsapi?key={{ GOOGLE_LOADER_API_KEY }}"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
    $(function() {
        //初期処理
    });
});
</script>

注意点としては、google.load()を使うには先に http://www.google.com/jsapi 読み込む必要がある。これを読み込むコストを考えると、必要なJavaScriptが1つしかないならgoogle.load()を使ってもそれほど効果はないか、逆に遅くなる。


（2011/03/15 追記）
シンプル版も書いておく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 Simple Template</title>
<link rel="stylesheet" href="stylesheet.css" />
<style>
/* STYLE */
</style>
</head>
<body>

CONTENT

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript.js"></script>
<script>
/* JAVASCRIPT */
</script>
</body>
</html>

tags: , , , , , , 0 コメント

2009年11月6日金曜日

YUI AutoCompleteを使うコードの例

【CSS】
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css" />


【JavaScript】
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/animation/animation-min.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

<script type="text/javascript">
new YAHOO.widget.AutoComplete(
    "myInput",
    "myContainer",
    new YAHOO.util.LocalDataSource(["とうきょう", "とちぎ", "とやま"]),
    {useShadow: true} //AutoCompleteに影を表示
);
</script>


【HTML】
<div style="width:15em">
    <input id="myInput" type="text">
    <div id="myContainer"></div>
</div>


参考：YUI 2: AutoComplete

tags: , , , 0 コメント

2009年3月19日木曜日

主要JavaScriptフレームワークのデザインパターン傾向の比較

Prototype、jQuery、MooTools、YUI、Dojoを比較。
痒いところに手が届く、addEvent系とHTMLエレメントのclass操作を中心に見てみる。
大きくは、エレメントをグローバルオブジェクトにパラメータとして渡す"Managerパターン"と、エレメントを包んで機能を拡張する"Wrapperパターン"に分かれる。

  • Prototype.js
    • event追加
      • <element>.observe(eventName, handler)
      • Event.observe(element, eventName, observer, flg)
    • dom ready event追加
      • Event.observe(document, "dom:loaded", func)
    • class追加
      • Element.addClassName(element, className)
    • class削除
      • Element.removeClassName(element, className)
    • class有無
      • Element.hasClassName(element, className)
    • 全子要素に実行
      • <enumObj>.each(iterator)
    • デザインパターン
      • Managerパターン
      • Managerが役割分担でたくさんいる
  • jQuery
    • event追加
      • $(～).bind(type, data, func)
      • jQuery.event.add(elem, types, handler, data)
    • dom ready event追加
      • $(document).ready(func)
    • class追加
      • $(〜).addClass(className)
    • class削除
      • $(〜).removeClass(className)
    • class有無
      • $(〜).hasClass(className)
    • 全子要素に実行
      • $(〜).each(func)
    • デザインパターン
      • Wrapperパターン
  • MooTools
    • event追加
      • $(〜).addEvent(type, func)
    • dom ready event追加
      • window.addEvent("domready", func)
    • class追加
      • $(〜).addClass(className)
    • class削除
      • $(〜).removeClass(className)
    • class有無
      • $(〜).hasClass(className)
    • 全子要素に実行
      • <iterable>.forEach(func, bind)
      • <iterable>.each(func, bind) ※forEachのalias
      • $each(iterable, func, bind)
    • デザインパターン
      • Wrapperパターン
      • 関数名が素直で分かりやすい
  • YUI
    • event追加
      • YAHOO.util.Event.addListener(element, type, func, data, overrideContextFlg)
      • obj.customEvent.Subscribe(func)　※selectEvent等のCustomEventを持っているObjectの場合
    • dom ready event追加
      • YAHOO.util.Event.onDOMReady(func, data, overrideContextFlg)
    • class追加
      • YAHOO.util.Dom.addClass(element, className)
      • YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName)　※classの変換
    • class削除
      • YAHOO.util.Dom.removeClass(element, className)
    • class有無
      • YAHOO.util.Dom.hasClass(element, className)
    • 全子要素に実行
      • 無し？
    • デザインパターン
      • Managerパターン。一部、Wrapperパターン。
      • グローバルオブジェクトが構造的に整理されている
  • Dojo
    • event追加
      • dojo.connect(element, type, context, func, dontFixFlg)
    • dom ready event追加
      • ？
    • class追加
      • dojo.addClass(element, className)
    • class削除
      • dojo.removeClass(element, className)
    • class有無
      • dojo.hasClass(element, className)
    • 全子要素に実行
      • dojo.forEach(array, func, thisObject)
    • デザインパターン
      • Managerパターン


参考

tags: , , , , , , 0 コメント

2009年3月5日木曜日

YUIの Menu Control Widgetを最小限のコードで使う例

ページ上部のシンプルなメニューの場合。
YUI Loaderを使うと一瞬、素のHTMLが表示されるので、事前にCSS・JavaScriptを読み込んでセットアップしたほうが見栄えがよい。

（2009/03/15 追記：htmlのbody要素開始タグにclass属性を追加）


CSS

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/assets/skins/sam/menu.css">

<style type="text/css">
.active-menu{
/* アクティブなメニューボタンの装飾をする */
background: #fff;
}
</style>

JavaScript
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onContentReady("menu", function(){ new YAHOO.widget.MenuBar("menu"); });
</script>

HTML
<body class="yui-skin-sam">
<div id="menu" class="yuimenubarnav">
<div class="bd">
<ul>
<li class="active-menu"><a class="yuimenuitemlabel" href="http://google.jp">google</a></li>
<li><a class="yuimenuitemlabel" href="http://yahoo.jp">yahoo</a></li>
<li><a class="yuimenuitemlabel" href="http://goo.jp">goo</a></li>
</ul>
</div>
</div>

tags: , , , , , 0 コメント

2009年1月9日金曜日

Googleがホスティングしてくれる JavaScriptライブラリに YUIが追加されていた

Serving YUI Files from Yahoo! Serversを見たら、CDN欄にいつの間にかGoogleが．．．。Google＋Yahooのコラボレーションがこんなところで実現。
Developer's Guide - AJAX Libraries API - Google Codeを見たら、YUIの他、SWFObjectも追加されていた。

google.load()によるYUIのロードは、 YUI Loaderが対象のようだ。
Google AJAX API Loader（http://www.google.com/jsapi） をロードして、それでYUI Loaderをロードして、それでYUIのコンポーネントをロードして．．．なんか冗長だ。

静的なホスティングもしてくれるようだが、それだとYahooによるホスティングと変わらない。バージョン番号をワイルドカードにできれば嬉しいんだけど．．．。CSSは静的なロードしかできなさそうなのが残念。

ところでYUI3は2009年にGAを出す予定みたい。また大きく変わるのかな。

tags: , , , , , , , , 0 コメント

2008年9月6日土曜日

CakePHP1.2の layoutで使える Helperのまとめ

head要素内に記述する要素など、layoutに書く要素のうちHelperで作成できるもののまとめ。



  • ドキュメント宣言 （参考：HtmlHelper::docType）
    //引数なしの場合はXHTML1.0 Strict
    echo $html->docType();
  • Content-Typeのmetaタグ （参考：HtmlHelper::charset）※2008/09/13 誤り修正
    //デフォルトはPHPのdefault_charset？？？
    echo $html->charset();
  • CSS （参考：HtmlHelper::css）
    複数ある場合は配列で渡せる。
    //webroot/css/foo.cssを読み込む場合
    echo $html->css('foo');

    //webroot/css/foo.cssとwebroot/css/bar.cssの2つを読み込む場合

    echo $html->css(array('foo', 'bar'));
  • JavaScript （参考：JavascriptHelper::link）
    これも配列で渡せる。
    //webroot/js/foo.jsを読み込む場合


    echo $javascript->link('foo');



    //webroot/js/foo.jsとwebroot/js/bar.jsの2つを読み込む場合


    echo $javascript->link(array('foo', 'bar'));


    JavascriptHelperを使う場合、ControllerでこのHelperを有効にしておく。（「s」が小文字なので注意！）
    var $helpers = array('Html', 'Javascript');
  • その他、$html->meta('xxx')で作成できるもの （参考：HtmlHelper::meta）
    • RSS （'rss'）

    • Atomフィード （'atom'）
    • favicon （'icon'）
      • デフォルトはwebroot/favicon.ico
    • metaタグのkeyword（'keyword'）
    • metaタグのdescription （'description'）


YUI Girdsを使うならこんな感じになる。
<<?php ?>?xml version="1.0" encoding="<?php echo ini_get('default_charset'); ?>" ?>
<?php echo $html->docType(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<?php echo $html->charset(); ?>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><?php echo $title_for_layout; ?></title>
<?php
echo $html->meta('icon', '/favicon.ico'); //サイト全体で共通のfaviconを使う場合
echo $html->css(array('foo', 'bar'));
echo $javascript->link(array('foo', 'bar'));
echo $scripts_for_layout;
?>
</head>

<body>
<div id="doc2" class="yui-t7">

<div id="hd">
ここにヘッダーを書く
</div><!-- #hd -->

<div id="bd"><div class="yui-g"><?php echo $content_for_layout; ?></div></div>

<div id="ft">
ここにフッターを書く
</div><!-- #ft -->

</div><!-- #doc/[2-4]?/ -->

</body>
</html>

少しくらいCSSやJavaScriptを書くだけなら、わざわざHelperを使わずに直接書いた方がいいかも。
JavaScriptは</body>の直前に書きたいが、これでは無理か．．．？



tags: , , , , , , 0 コメント

2008年8月15日金曜日

YUI Grid.css用の XHTML 1.0 テンプレート

YUI: CSS Grid Builderで作ったHTMLの冒頭部分をXHTML 1.0 Strictにしたもの。

横幅は950pxでカラム分割無し、文字コードはUTF-8の場合。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>TITLE</title>
<!-- Keywordsはもう要らないと思う
<meta name="Keywords" content="FOO,BAR" />
-->
<meta name="Description" content="DESCRIPTION" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="some.css" />
<!-- フィードの記述は種類による -->
<link rel="alternate" type="application/rss+xml" title="FEED TITLE" href="http://www.example.com/feed.xml" />

<!-- スタイルシートは別ファイル化を推奨 -->
<style type="text/css"> /* ... */ </style> </head>
<body>
<!-- ここのidとclassは横幅等で変わる。YUI Grid Builderで調べるのが楽。 -->
<div id="doc2" class="yui-t7">
<div id="hd">
HEADER
</div><!-- #hd -->
<div id="bd">
<div class="yui-g">
MAIN
</div><!-- .yui-g -->
</div><!-- #bd -->
<div id="ft">
FOOTER
</div><!-- #ft -->
</div><!-- #doc/[2-4]?/ -->
<!-- charsetはhtml本体と同じなら不要 -->
<script type="text/javascript" src="some.js" charset="UTF-8"></script>
<!-- JavaScriptも別ファイル化を推奨 -->
<script type="text/javascript">
//<![CDATA[
...
//]>
</script>
</body>
</html>

2008/12/22 変更：JavaScriptのHTMLコメント化をCDATAに変更

tags: , , , , , 0 コメント

登録: 投稿 (Atom)

ブログ アーカイブ

tags