<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Tips・コラム - CSS HappyLife ZERO</title>
    <link rel="alternate" type="text/html" href="http://zero.css-happylife.com/tips/" />
    <link rel="self" type="application/atom+xml" href="http://zero.css-happylife.com/tips/../feed/tips.xml" />
    <id>tag:zero.css-happylife.com,2009-11-10:/tips//6</id>
    <updated>2010-09-15T08:54:16Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Commercial 4.261</generator>

<entry>
    <title>ID名、クラス名に関して</title>
    <link rel="alternate" type="text/html" href="http://zero.css-happylife.com/tips/column/2009/id_class_name.shtml" />
    <id>tag:css-happylifezero.com,2009:/basic//2.2</id>

    <published>2009-06-24T13:32:46Z</published>
    <updated>2009-10-08T11:44:58Z</updated>

    <summary>ID名やクラス名は、扱える文字さえ守れば任意の文字で付ける事ができます。 いくら任意だからといって、あまりにも適当なID、クラス名を付けてしまうと後々CSSを確認した時に何が何だか分からなくなってしまう可能性もあります。 そのため、どの様な...</summary>
    <author>
        <name>hirasawa</name>
        
    </author>
    
        <category term="コラム" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://zero.css-happylife.com/tips/">
        <![CDATA[<p>ID名やクラス名は、扱える文字さえ守れば任意の文字で付ける事ができます。<br />
いくら任意だからといって、あまりにも適当なID、クラス名を付けてしまうと後々CSSを確認した時に何が何だか分からなくなってしまう可能性もあります。<br />
そのため、どの様なID、クラス名を付けるかは悩める部分でもありますが、特別な理由が無い限り見た目や位置に関するID、クラス名は付けないようにする事が望ましいです。</p>

<p>見た目や位置に関するID、クラス名とは、<code>#left</code>、<code>.rightBox</code>、<code>.red</code>、<code>.font16px</code>などが考えられます。</p>

<p>ではなぜ、見た目や位置に関するID、クラス名は付けない方が良いかというのは、そもそも(X)HTMLは文章の構造を表すものでうんたらかんたらといった理由も有りますが、これらのID、クラス名はサイトの仕様が変更された場合に矛盾が生じてしまいます。</p>

<p>例えば、<code>.red</code>と付けたのは良いが、後から太字にして色も変えた方が良いんじゃないか？と言った意見が出て変更しなければならなくなった。とか、その右寄せになってる部分左寄せに変更したいなどと言った場合に、ID、クラス名を変更しなければならなくなってしまいます。<br />
もちろんID、クラス名を変えなくともスタイルを変更すれば見た目上問題は有りませんが、見た目以外では問題だらけになってしまいます。</p>

<p>個人で趣味のサイトを運営している分には仕様なんて変更しない！とも考えられますが、長く運営していればサイトに手を加えたくなるのは必然だったりしますし、特に仕事においては関わる人間が多数になる事から仕様変更はあって当たり前だったりします。</p>

<p>とはいえ、セマンティックなサイトを追求するならともかく、現実的な視点で考えると見た目や位置に関するID、クラス名を全く使わない事は、中々厳しい部分が有ります。<br />
例えばブログ機能のあるサイトやブログを提供するといった場合に、それを使う人が専門的な知識を有している事はまず無いでしょうから、意味のあるID、クラス名を使ってくださいとお願いしたところで無理がありますし、ブログの機能として好きな色が使える場合も意味のあるID、クラス名を付けるのは困難です。</p>

<p>他に、JavaScriptを使って何かするような場合も、無理に意味を考えてID、クラス名を付けるくらいならその機能を表すID、クラス名を付けた方が分かりやすくなるケースが多いです。</p>

<p>この辺りは、理想と現実のバランスとメンテナンス性などを考えて付けていくことが大事だと思います。</p>

<p>ID、クラス名に悩み過ぎて時間が経ってしまうのも勿体無いので、ボクが最近使ってるID、クラス名を上げておきます。</p>

<h3>レイアウト関連で使うID名</h3>
<ul>
<li>page</li>
<li>contents</li>
<li>main</li>
<li>sub</li>
<li>header</li>
<li>footer</li>
</ul>
<h3>ナビゲーション関連で使うID、クラス名</h3>
<ul>
<li>nav</li>
<li>utilityNav</li>
<li>guideNav</li>
<li>menu</li>
<li>pageMenu</li>
<li>subMenu</li>
</ul>
<h3>メインコンテンツ関連で使うID、クラス名</h3>
<ul>
<li>area</li>
<li>article</li>
<li>section</li>
<li>item</li>
<li>mainHeader</li>
<li>mainArea</li>
<li>mainFooter</li>
<li>summary</li>
<li>description</li>
<li>meta</li>
<li>entryArea</li>
<li>focusArea</li>
<li>bodyArea</li>
<li>entryBody</li>
<li>text</li>
<li>photo</li>
<li>image</li>
</ul>

<p>ざっとこんな感じでしょうか。<br />
他に、最近だと一覧などを表示する場合にxxxListと付ける事が多いです。<br />
例えば、日付とタイトルの一覧の場合<code>dateList</code>や、概要付きの一覧なら<code>summaryList</code>といった感じで付けてます。<br />
尚、あくまでもこれはボクの付け方なのでID、クラス名の参考としてお使いください。</p>]]>
        
    </content>
</entry>

<entry>
    <title>IE6から最新ブラウザへ移行する理由</title>
    <link rel="alternate" type="text/html" href="http://zero.css-happylife.com/tips/column/2010/browser_transition.shtml" />
    <id>tag:zero.css-happylife.com,2010:/tips//6.283</id>

    <published>2010-09-15T08:03:56Z</published>
    <updated>2010-09-15T08:54:16Z</updated>

    <summary>Internet Explorer (IE) 6 から、最新ブラウザへ移行を勧める理由はセキュリティによる問題が大きいです。 日本政府が情報セキュリティ政策を遂行するための機関である「内閣官房情報セキュリティセンター」からも、IE6からIE...</summary>
    <author>
        <name>hirasawa</name>
        
    </author>
    
        <category term="コラム" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://zero.css-happylife.com/tips/">
        <![CDATA[<p>Internet Explorer (IE) 6 から、最新ブラウザへ移行を勧める理由はセキュリティによる問題が大きいです。</p>
<p>日本政府が情報セキュリティ政策を遂行するための機関である「<a href="http://www.nisc.go.jp/">内閣官房情報セキュリティセンター</a>」からも、IE6からIE8への移行を推進しています。</p>

<div class="quoteArea">

<blockquote cite="http://www.nisc.go.jp/press/pdf/browser_transition_press.pdf">
<p class="tR">
平成 22 年6 月17 日<br />
内閣官房情報セキュリティセンター（NISC）
</p>
<h3>旧型ブラウザから新型ブラウザへの移行に係る取組について</h3>

<h4>１．取組の背景</h4>
<p>本年1月に報道された米国企業等を対象とするサイバー攻撃において、マイクロソフト社が提供するInternet Explorer（ＩＥ）６等の旧型ブラウザのセキュリティホールが悪用されたと言われています。ＩＥ６は、利用者が未知の脅威にさらされるおそれがあるため、マイクロソフト社においても、ＩＥ６からセキュリティ対策が強化されたＩＥ８への移行を勧めているところです。</p>

<h4>２．政府機関におけるＩＥ６の利用状況</h4>
<p>我が国の中央省庁においても、ソフトウェアの互換性を確認するコストがかかるため、依然としてシステム導入時から変わらずＩＥ６のみをブラウザソフトとして利用している府省庁があります。</p>

<h4>３．政府機関における取組</h4>
<p>NISCから各府省庁に５月１２日付で以下のとおり指示しました。</p>
<ul>
<li>ＩＥ６からＩＥ８への移行を推奨。</li>
<li>今後、各府省庁においてウェブアプリを利用するシステムの新規構築又は更改する際は、最新ブラウザに対応する設計とすること。</li>
<li>最新の複数ブラウザの利用を検討すること。</li>
</ul>

<h4>４．今後の取組</h4>
<p>政府機関においては、引き続き、ＩＥ６からの移行に係る取組等を推進し、情報セキュリティの向上に努めてまいりたいと考えております。</p>

<p class="sign">【本報道発表に関する問い合わせ先】<br />
内閣官房情報セキュリティセンター<br />
内閣参事官 木本裕司<br />
電話 03-3581-3959（センター代表）</p>
</blockquote>

<p class="quote">引用元: <a href="http://www.nisc.go.jp/press/pdf/browser_transition_press.pdf">旧型ブラウザから新型ブラウザへの移行に係る取組について（PDF） - 内閣官房情報セキュリティセンター</a></p>

</div>

<p>
機関としては、IE6からIE8への移行を推奨していますが、その他のブラウザである「<a href="http://mozilla.jp/firefox/">Firefox</a>」や「<a href="http://www.google.com/chrome/intl/ja/landing.html?hl=ja&hl=ja">Google Chrome</a>」などは、IEよりも機能面が優れていたり、動作が軽快だったり、アップデートなども頻繁に行われバグやセキュリティ問題などが発生した際の対応も早いです。<br />
なので、IEでなければならない理由が無ければ、別のブラウザに乗り換えるのも良いかと思います。<br />
古いブラウザを使っていたがために大切なデータが吹っ飛んだりしたら大変ですから、手遅れにならないためにもアップデートした方が良いと思います。
</p>]]>
        
    </content>
</entry>

</feed>

