HTML｜WEB制作・WEB開発のTips＆News Kamimoto.biz Labs


    ・システムが複雑化・硬直化して、マーケットの変化に対応しきれていない
    ・システムの運用管理コストが以前より増えている
    ・人的エラーによるセキュリティリスクが増大している
    ・リソースが有効に使われておらず投資対効果があがっていない
    ・業務アプリケーションのピーク負荷の予測が困難だ
    ・障害に対する事前予防がなされていない
    ・各種規制対応、コンプライアンス強化に追われている

li要素の中に「・」を書くという、まったく意味不明のマークアップです（笑）。

これをコーディングした人は、おそらく、li要素がどういう意味付けなのかを理解していないのでしょうね（笑）。

li要素は、順不同のリストを表します。
したがって、「・」はリストの内容自体を表現していないので、不要です。

これらの部分は、CSSで定義すべきです。

続いて、dl要素について。
「新日鉄ソリューションズの特徴」というページ。

・NSGUD

グリッドユーティリティ技術を生かした、より良いITインフラ構築のためにNSGUD（NS Solutions Grid Utility Designer's Club）を発足し、実際のユーザーニーズを反映しながら検証を実施していくスキームづくりを推進しています。有力なユーザー企業の事例紹介、お客様のIT資産の共同検証をはじめ、関連セミナーなどの情報発信活動、海外の最新動向の共同視察、各種交流会の開催などの活動を行っています。

これは、見出しとデータのセットを箇条書きにしているコンテンツです。
したがって、dl要素でマークアップすべきですね。

このサイトをコーディングした人は、ちょっとやばいですねｗ

結局一番大事なのは、Webサイトの内容をしっかりと理解することです。
コンテンツの内容を理解して初めて、その文章が何を表しているのかを考えてから、マークアップすることができるようになります。

そして、それがアクセシビリティ、SEOにもつながります。

Web制作・Web開発情報のタグ

2009年10月 5日｜コメント（0）｜トラックバック（0）

カテゴリー：HTML

IE6 No Moreの使用

2009年10月 4日

RT @tkamimoto: IE6 No Moreの使用

今回、twitterデザイン集【ツイッテーマ】を公開するにおいて、ちょっと考えたのが、Web屋にとっての天敵Microsoft Internet Explorer 6への対応です。

クライアントワークでは、対応せざるを得ないのですが、ツイッテーマのような趣味のサイト（＝プライベートワーク）の場合、正直、もう対応しなくてもいいかなと思っています。

そこで、今年、Web制作会社が公開した「IE6 No More」を使いました。

日本語版は、こちらから確認することができます。

IE6 No More code-samples

ソースはこんな感じです。

<!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>Stai usando un browser obsoleto</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>Per una migliore navigazione su questo sito, per cortesia passa ad un browser di ultima generazione.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.mozilla-europe.org/it/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=it' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/it/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome?hl=it' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->

実際に、IE6で見るとこんな感じになります。

IE6 No More 日本語エラー画面

今後、趣味のサイトは、IE6は放置プレーする方向で行きます。

IE6に最適化する時間があれば、何か作った方が自分にも、世の中のためにもなると思うので。

Web制作・Web開発情報のタグ

2009年10月 4日｜コメント（0）｜トラックバック（0）

カテゴリー：HTML, カテゴリー：アイデア, カテゴリー：ブラウザ

ケータイサイト制作のスタート時の知識のまとめ

2009年9月26日

RT @tkamimoto: ケータイサイト制作のスタート時の知識のまとめ

このWeb制作ブログにアクセスいただく際に、「au エミュレータ」や「ソフトバンクエミュレータ」という検索クエリが一番多いです。

あと、趣味で、ケータイサイトデザイン集「モバイルデザインアーカイブ」を運営してるということもあり、ケータイサイト制作を始める際のお役立ちリンクをまとめてみました。

ケータイサイトをPCで確認

大手3キャリアともに、純正のエミュレータ（シミュレータ）が存在します。

ドコモの「iモードHTMLシミュレータII」について補足しておきます。

901iシリーズ以降のiモード対応HTML、Flash、デコメールテンプレートや、901iSシリーズ以降のPDF、902iシリーズ以降のトルカ、906iシリーズ以降のデコメアニメなどが確認できるようになっています。

ケータイ端末のディスプレイ

通称	ピクセル数
sQCIF（Sub-QCIF）	128 × 96
QCIF（Quarter-CIF）	176 × 144
QVGA（Quarter-VGA）	320 × 240
WQVGA（Wide-VGA）	400 × 240
CIF	352 × 288
HVGA（HalfVGA）	480 × 320
FWVGA（フルワイドVGA）	864 × 480