ホームページ制作　ＣＳＳについて

ＣＳＳハックとは？

Fri, 20 Jan 2012 13:21:57 +0900

ホームページ制作をしていくと、CSSハックという言葉を耳にすることがあるかと思います。このCSSハックとは具体的にどういった働きをするものなのでしょうか。まず、CSSでホームページのレイアウトを作成することには、多くの利点もありますがユーザーが使用するブラウザなどの環境によって表示のされ方が違ってきてしまう、などといった欠点もいくつか挙げられます。こういった、正しいコーディングをしていても出てきてしまうブラウザ間での表示の違いなどは、CSSのバグが原因にあたります。当然、ユーザーがどういった環境からホームページを閲覧するのかといったことはわかりませんし、たとえどんな環境から閲覧するのであっても同じ表示をすることが出来るのが良いホームページと言えることは間違いありません。そこで、こういったバグなどによる表示の違いを無くし、どんな環境からホームページを見た場合であってもできる限り同じ表示になるようにするためのテクニックの一つとして挙げられるものがCSSハックなのです。ここまでの説明では、CSSハックとは非常に使い勝手の良いものなのでどんどん活用していこう！と思われるかもしれません。確かに、CSSハックを使用することで簡単にブラウザ間での違いをなくすことができますのでとても使い勝手の良いものではあります。しかし、このCSSハックとはバグを利用することで表示を整えているテクニックですので、書式が正しくなくなったり、バリデータなどを通すことができなくなったりといった欠点もあります。また、ブラウザによってハックを指定しなければならないものもあるので、新しいブラウザが出るたびに、バグがあった場合はそのブラウザにあったハックを追加する…といった作業をしなければならず、結果的にソースが見づらくなってしまったりといった欠点も出てくるといえます。そのため、便利なものだからといってあまり多用しすぎるのは良いこととは言えません。このことから、CSSハックをホームページ制作にしようする際にはなるべく頼りすぎず、ある程度制限を持って使うようにすることが望ましいかもしれません。勿論、非常に手間がかかる作業ではありますが、ハックを使用せずにCSSのみでブラウザ間の表示を統一することができればそれが最も良い形であるともいえますので、できる限りCSSハックには頼ることなく、上手いコーディングができるよう工夫して見ましょう。

ＣＳＳの継承について

Fri, 20 Jan 2012 13:21:34 +0900

CSSを使用してホームページ制作をしていく中で気を付けておきたいことの一つとして、継承というものがあります。ホームページ制作でHTMLを使用してコーディングをしていく際には、要素という塊で指定をして記述していきます。要素とは、タグの開始から終了までで囲まれた部分の事、つまり～や～で囲まれた部分のことが要素となります。ホームページはこの要素の中に要素が入るといった入れ子の形になって作られることになりますが、このとき外側になるものを親要素、中に入るものを子要素と言います。継承とは、こういった作りのときに、親要素に指定したスタイルなどの設定を子要素が引き継ぐといった働きのことを指すのです。また、何も指定をしない場合には子要素にも親要素の指定がそのまま引き継がれるといったことになりますが、もしも子要素に別の指定をした場合には、継承されたスタイルに後から子要素に加えた指定が上書きされるといったことになります。このように、子要素には継承された指定に加えて新たな要素を上書きすることが可能ですが、この際注意が必要な場合もあります。例えば、文字の大きさなどを%やemを値として指定するときに、親要素に2em、子要素に2emと指定をしたりすると、子要素の部分では継承した2emを2emする、つまり4emとなって表示されてしまうといった特徴があるのです。これが原因となって、レイアウトが崩れてきてしまうと言うことにもなりかねませんので、十分注意するようにしましょう。特に、HTMLの場合には、多くの入れ子を使用することになるので、どの要素にどういった指定をしたのか、その指定が子要素にまで継承されるものなのかをしっかりと把握しておかないと後々入れ子が複雑になるにつれてレイアウトが崩れたときにどこからの継承が原因となっているのかということなどがわからなくなってしまい修正に手間がかかってしまうといった自体も起こりかねませんので注意しましょう。継承は、何ども同じスタイルを指定するといった手間を省くことができたり、多くの指定をしなくて済む分ソースがスッキリとしたりといった利点もありますが、指定したくない部分にまで継承によってスタイルが指定されてしまったりといった欠点もありますので、よく理解して上手く継承をホームページ制作の中にいかしていけるようにしましょう。

ホームページ制作にＣＳＳを使用する際の注意点

Fri, 20 Jan 2012 13:21:05 +0900

非常に利点が多く、ホームページ制作の際には欠かすことのできないCSSですが、決して利点ばかりというわけではありません。CSSを使用するにあたって注意しなければならない点も勿論あるのです。CSSでホームページのレイアウトを作成する際最も注意したいことが、ブラウザの違いによって生じる表示のされ方の違いです。どういうことなのかといいますと、CSSは、使用するブラウザによって認識のされ方が違うため、表示に違いが出てきてしまうのです。余白を指定するpaddingを例に挙げて説明するとすれば、InternetExplorerで見た場合にはpaddingで指定した余白が内側にとられるため指定した枠の幅は変わらないのに対し、Firefoxで見た場合には余白を外側にとるため、paddingで指定をした分だけ大きさが広がってしまいます。そのため、ホームページ制作の際にFirefoxを使用して確認をしながら作業を行った場合、確認の段階ではレイアウトに問題が無いように仕上がっていても、ホームページを観覧する側が一般に多く使用されているInternetExplorerからそのページを見た場合にはレイアウトが崩れてみえてしまうといったことが起こってしまいます。また、このような違いは同じ種類のブラウザであってもバージョンの違いによって生じることもあるのでその点でも注意が必要です。より質の高いホームページ制作をするためには、このブラウザ間の表示が統一され、どんな環境を使用しているユーザーであっても満足にホームページを見ることができるようになっていることが望ましいと言えます。そこで、ホームページ制作の際に必要となってくることが、複数のブラウザでの確認の作業ということになります。ブラウザには主なものとしてInternetExplorer、Firefox、GoogleChrome、Safari、Operaなどがあります。これら全てのブラウザから確認することができるのが最も望ましいと言えますが、流石にそれは大変…といった場合には、一般で多く使用されているInternetExplorerと、CSSに最も忠実な表示をするFirefoxからは最低でも確認をしておくようにしましょう。また、最もこの表示の違いが出やすいものとして、InternetExplorer6がありますので、可能であればバージョンによる違いも確認することができると更に良いでしょう。

ＣＳＳをホームページに反映させる方法と優先順位

Fri, 20 Jan 2012 13:20:21 +0900

別の項目で書いた通り、ホームページ制作の際にCSSを記述することができる場所はいくつかあります。style属性の中で直接記述を行ったり、head内でCSSを記述を行った場合に関しては正しく記述ができていればホームページにレイアウトが反映されることとなります。しかし、外部ファイルとしてCSSを作成している場合に関しては、head部分に

ＣＳＳを指定するセレクタ

Fri, 20 Jan 2012 13:19:56 +0900

CSSの記述を行う際にはセレクタというものを使用して指定を行います。セレクタには全称セレクタ、タイプセレクタ、文脈セレクタ、クラスセレクタ、一意セレクタなどといった種類があります。まず、全称セレクタについて説明します。全称セレクタは*{プロパティ:値}といったように記述を行います。これにより定義を行うことで、全ての要素にそれが適用されることになります。次に、タイプセレクタです。これは、HTML内の要素をセレクタ名として指定する場合です。例としてh1{プロパティ:値}といった指定を行った場合、そのHTML内のh1の部分全てにその定義が適用されることとなります。次にクラスセレクタについてです。これはclass属性を指定して記述を行う方法です。class属性はファイル内で何度も同じものを使用することができます。また、classの名前は任意につけることができますので、後で修正や更新をする時や他の人がソースを確認した際にわかりやすいものをつけるようにしましょう。記述の際には、class名の前に『.』をつけたものをセレクタとして指定を行い、HTML内ではその指定を行いたい部分のタグにclass=""class名""といった記述を加えることで反映をさせます。次に一意セレクタです。これは、class属性と同じようにid属性というものを指定して記述を行う方法で、HTMLへの反映のさせ方もclassセレクタと同じく適用させたい部分のタグ内でid=""id名""といった記述をする形となっています。classセレクタとの違いとしては、classセレクタがファイル内で何度も同じものを使用することができるのに対して、idセレクタの場合には同じものを2回以上使用することができないといった点が挙げられます。最後に、文脈セレクタというものです。これは、ある要素の子要素の部分にスタイルを適用させる際に使用します。これを記述する際にはセレクタに親要素と子要素を区切って記述します。例として、