サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.d-spica.com
Webの新仕様 HTML5、CSS3 が話題になっていますが、ディ・スピカの対応方針をまとめておきます。（2010-10-12現在） 基本的な考え方 「HTML5・CSS3を積極的に使うには、まだ時期尚早」と考えています。一番のネックは非対応ブラウザのシェアが多いことです。非対応ブラウザの主なものとしては、InternetExplorerの8以下のバージョン。今のところ、これらがInternetExplorer9にバージョンアップするか、他のブラウザに換えるのを待つしかありません。対応ブラウザが普及して大部分を占めるようになるのは、早くても2〜3年後だと予想しています。 非対応ブラウザではHTML5・CSS3のメリットが十分に活かされません。使い方によっては、アクセシビリティ、ユーザビリティ、メンテナンス性を損なうことにもなります。 しかし、数年後にはHTML5・CSS3への移行が大々的に
ソース XHTML <table class="table010""> <caption>サービスコースと料金のご案内</caption> <tr> <th scope="col">コース</th> <th scope="col">内容</th> <th scope="col">時間</th> <th scope="col">料金</th> </tr> <tr class="course-c"> <td class="course">C</td> <td>テキストテキスト......</td> <td class="time">40分</td> <td class="fee">3,000円</td> </tr> <tr class="course-b"> <td class="course">B</td> <td>テキストテキスト......</td> <td class="time">6
table.calendar tr td:nth-child(7), table.calendar tr:nth-child(2n+1) td:nth-child(4) { background: #FCC; } table.calendar tr:nth-child(2) td:nth-child(1), table.calendar tr:nth-child(6) td:nth-child(5), table.calendar tr:nth-child(6) td:nth-child(6), table.calendar tr:nth-child(6) td:nth-child(7) { background: #FFF; } まず，マークアップは次の通り <ul class="product-list"> <li><a href="#"><img src="figure/dummy-
ソース XHTML <table class="table010""> <caption>サービスコースと料金のご案内</caption> <tr> <th scope="col">コース</th> <th scope="col">内容</th> <th scope="col">時間</th> <th scope="col">料金</th> </tr> <tr> <td class="course">C</td> <td>テキストテキスト......</td> <td class="time">40分</td> <td class="fee">3,000円</td> </tr> <tr> <td class="course">B</td> <td>テキストテキスト......</td> <td class="time">60分</td> <td class="fee">4,000円</td
サンプル index.html block index.html div011-hp.html div012-hpl.html div020-hpl.html …… table index.html table010.html table001.html table021.html …… list index.html list220.html list130.html list102.html …… inline others ソース XHTML <ul class="list430"> <li class="file">index.html</li> <li>block <ul> <li>index.html</li> <li>div011-hp.html</li> <li>div012-hpl.html</li> <li>div020-hpl.html</li> <li>……</li
サンプル コンセプト テキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テーマ テキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキスト。 ターゲット テキストテキスト。 テキストテキストテキストテキスト。 テキストテキストテキスト。 ソース XHTML <dl class="list511"> <dt>コンセプト</dt> <dd> <ul> <li>テキストテキスト......</li> <li>テキストテキスト......</li> <li>テキストテキスト......</li> </ul> </dd> <dt>テーマ</dt> <dd> <ul> <li>テキストテキスト......</li> <li>テキストテキスト
ソース XHTML <table class="table211"> <col class="month" /> <col class="session" /> <col class="pageview" /> <col class="newsession" /> <col class="staytime" /> <col class="conversion" /> <tr> <th scope="col">年月</th> <th scope="col">セッション</th> <th scope="col">ページビュー</th> <th scope="col">新規セッション率</th> <th scope="col">平均滞在時間</th> <th scope="col">コンバージョン数</th> </tr> <tr> <td>2007-01</td> <td>5624</td>
tableの列を示すcolgroup要素について，CSSのどんなプロパティがあてられるかのテストです。 Tried at 2008-05-24 まず，tableのマークアップは次の通り <table> <colgroup class="col1"></colgroup> <colgroup class="col2"></colgroup> <colgroup class="col3"></colgroup> <colgroup class="col4"></colgroup> <colgroup class="col5"></colgroup> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> <th>項目4</th> <th>項目5</th> </tr> <tr> <td>data11</td> <td>data21</td> <td>data31
XHTML，CSS，各種スクリプトの実験をしています。
文書の構造を示すことを目的とする。見た目の装飾に関わることを記述しない。 宣言 特に事情がない場合は，文字コードをUFT-8にして，XML宣言を省略する。 DOCTYPEは原則的にXHTML 1.0 Strict 。 ただし，更新スタッフの事情に合わせてXHTML 1.0 Transitional，HTML 4.01 Strict，HTML 4.01 Transitionalにする場合もある。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> head ページの性質を示し，UAに読ませることを目的とする。 最初に <meta http-equiv="Content-Type" content="text/html; ch
見出し部分を反転させた枠 : div020-hpl h3，pとolによるリストを含む テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 手順1 手順2 手順3 手順4 ソース XHTML <div class="div020-hpl"> <h3>見出し部分を反転させた枠 : div020-hpl</h3> <p>h3，pとolによるリストを含む</p> <p>テキストテキスト......</p> <ol> <li>手順1</li> <li>手順2</li> <li>手順3</li> <li>手順4</li> </ol> </div> CSS div.div020-hpl { margin: 1em 0; border: solid 1px #FF6464; } d
ネガティブマージンを使った小技の実験です。 （すぐに使えそうなネガティブマージン | d-spica の参考資料です） Tried at 2008-05-16 見出し テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 <div class="section"> <h3>見出し</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> <p>テキストテキストテキストテキストテ
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
リストマークをアルファベットにしたリスト : list220 テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト ソースを見る 交互に背景色を入れたリスト : list102 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存のものが適用されて期待通りに表示されないことがあるか
h3，pとulによるリストを含む テキストテキストテキストテキストテキストテキストテキストテキストテキスト 項目1 項目2 項目3 項目4 ソース XHTML <div class="div042-hpl"> <h3><img src="img/hd-div042-hpl.png" alt="見出し部分を画像にした角丸の枠 : div042-hpl" /></h3> <p>h3，pとulによるリストを含む</p> <p>テキストテキスト......</p> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> </div> CSS div.div042-hpl { margin: 1em 0; width: 570px; background: url(../block/img/bg-roundcorner.png)
図や写真を右寄せ（左寄せ）: div100-hpi h3，pと右寄せしたした画像を含む テキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 ソース XHTML <div class="div100-hpi"> <h3>図や写真を右寄せ（左寄せ）: div100-hpi</h3> <img class="figure" src="img/fg-dummy.gif" alt="figure : ダミー" width="200" height="200" /> <p>h3，pと右寄せしたした画像を含む</p> <p>テキストテキスト......</p>
tableにCSSでwidthを指定した場合，どう解釈されるかのテストです。DOCTYPEはXHTML 1.0 Strict，XML宣言は省略しています。 Tried at 2007-06-06 まず，tableのマークアップは次の通り <table> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <tr> <th scope="col">項目1</th> <th scope="col">項目2</th> <th scope="col">項目3</th> <th scope="col">項目4</th> <th scope="col">項目5</th> </tr> <tr> <td>data11</td> <td>data21
テキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。
サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</
tableの列を示すcol要素について，CSSのどんなプロパティがあてられるかのテストです。 Tried at 2007-06-10 まず，tableのマークアップは次の通り <table> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> <th>項目4</th> <th>項目5</th> </tr> <tr> <td>data11</td> <td>data21</td> <td>data31</td> <td>data41</td> <td>data51</td> </tr> ...... </table>
サンプル ライティング テキストテキストテキストテキストテキストテキストテキスト。 XHTMLコーディング テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。 カンプデザイン テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 CSSコーディング テキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 ソース XHTML <ol class="list611"> <li> <dl> <dt>ライティング</dt> <dd>テキストテキスト......</dd> </dl> </li> <li> <dl> <dt>XHTMLコーディング</dt> <dd>テキストテキスト......</dd> </dl
Service HTML5 + CSS3 + Javascript + PHP コーディング スマートフォン、タブレットなどマルチデバイス対応 レスポンシブ・ウェブデザイン（RWD）対応 WordPress、Movable TypeなどCMSによるサイト構築 サイト制作のコンサルティング コーディングに関するレクチャー、セミナー Policy Simple Straight Smart Notice 2022-06-30 Update 7月のスケジュール、まだ余裕があります 8月のスケジュール、まだ余裕があります。 Contact d-spica（ディ・スピカ） 青木隆史（Aoki Takashi） 〒400-0315 山梨県南アルプス市上野90-3 055-284-4381（9:00〜21:00 ON / 土・日・祝 OK） 090-4175-7359（いつでも OK） webmugi
ソース XHTML <table class="table001"> <caption>アクセス解析月ごとの集計</caption> <tr> <th scope="col">年月</th> <th scope="col">セッション</th> <th scope="col">ページビュー</th> <th scope="col">新規セッション率</th> <th scope="col">平均滞在時間</th> <th scope="col">コンバージョン数</th> </tr> <tr> <td>2007-01</td> <td>5624</td> <td>8021</td> <td>75.2%</td> <td>00:42</td> <td>4</td> </tr> <tr> <td>2007-02</td> <td>5021</td> <td>7533</td> <td>70.1
シンプルな枠に背景色 : div011-hp h3，pとナビゲーションリンク含む テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト リンク
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
次のページ
このページを最初にブックマークしてみませんか？
『d-spica : HTML+CSS+Javascript+PHP Coding』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
