デザインの方法の比較(インライン,id指定,class指定)

CSSでhtmlをデザインする際に、どのような方法を取るべきなのか、ということについて調べたことを以下に記しておく。

 

インラインスタイル

要素に直接スタイルを設定する。それぞれの要素にその都度スタイルを設定しなければならないが、スタイルの指定の優先度では最も高い。

 

id指定

要素にidを指定し、そのid名の付いたものの装飾を別で設定する。id名はかぶってはならず、その要素固有のものを設定する際に役立つ。スタイルの指定の優先度はclass指定されたものよりも高い。

 

class指定

要素にclassを指定し、そのclass名の付いたもの全ての装飾を別で設定する。同じ要素が複数回出てくる際に役立つし、一度きりの者でも使用することができる。

 

特徴を見ると、まず「インラインスタイル」と「id指定・class指定」の二つに大別でき、インラインスタイルはhtmlの中に直接書く上に、要素ごとに設定する必要があるためhtmlが複雑になるかもしれない。ただ、どうせばらばらに設定しなければならない要素群などならば、インラインスタイルで書いてしまうのもわかりやすいかもしれない。

一方で、id指定・class指定は、html中では宣言のみのため、htmlをすっきりさせることができそうだ。そしてid指定とclass指定の大きな違いは、id指定では同じ名前を一度しか使えないという点だろう。その要素特有のものであることを明確に示したいのならばid指定がわかりやすそうだが、単体でも複数でも使えるclass指定で統一してしまった方がスタイル設定の優先度もわかりやすいため、理解しやすいhtml,cssになるかもしれない。

文字コード<UTF-8><Shift JIS>を比較する

htmlを作成してみるにあたり、保存する際の文字コードをどうするかという問題に当たったため、文字コードについて少し調べてみた。

以下に調べてみてわかったことを箇条書きで書いてみる。

 

<UTF-8>

Unicode文字集合体とする

・文字範囲が広く、どの言語の文字にも対応している

・文字によって割り振られたバイト数が違い、日本語の場合3バイト

・文字化けを起こす可能性が低い

 

<Shift JIS>

JIS X 0208文字集合体とする

・そのため、日本語については文字範囲として十分である

・一文字2バイト

・亜種が多く、環境によって文字化けが起こったりする

・日本国内の携帯で主に読めるコード

エンコードデータに制御文字を含む場合が多い

 

以上の点から、それぞれの文字コードを使用するメリット・デメリットを考えると、、

 

<UTF-8>

メリット

文字範囲が広いので、国内国外に関係なく広く利用することができる。文字化けなどが起こりにくいため、思わぬ動作が起こってしまうリスクが低い。

デメリット

日本語を主に使うならば、Shift JISと比較して一文字当たり1.5倍の容量を使ってしまう。日本国内の携帯で表示できないことが多い。

 

<Shift JIS>

メリット

日本語を使用するならば、UTF-8と比較して容量を少なくすることができる。また、国内の携帯向けならば、こちらでないと表示されない可能性がある。

デメリット

文字化けが起こる可能性がある。UTF-8と比較して文字範囲が狭いため、使用できない文字が多い。

 

といったところか。