外部ファイルとしてCSSを取り込む

「style要素を利用した取り込み」は、HTML内に直接指定を打ち込むCSSの利点をあまり活かせていません。
というのも、それぞれのページにおける文章に対し、個別に指定が必要となるので、
あまりメリットがないからです。


一方、ページ共通の指定が「styleタグを使った取り込み」の場合は、比較的楽に行えます。
ただ、情報量の多いホームページの場合、内部に書き込む必要があるため、
指定が複雑化し、ソースがゴチャゴチャしてしまいます。


その点、CSS3など、CSSの各レベルにおけるメリットを外部からの取り込みを行う方法は、
しっかりと活かせる方法といえます。


ではその方法を早速、紹介していきましょう。
尚、基本的にはCSS1、CSS3等といったレベルには関係なく、これらの方法も、共通して採用されます。

CSSを取り込む方法を外部から具体的に説明すると、「外部に作ったCSSファイルを取り込む」となります。
テキストエディタで外部にCSSは、作成可能です。
まず、「hr { color : #ff0000 }」という文字をテキストエディタに書き、それを保存してみましょう。
そして次に、そのファイルの拡張子を変えます。
元々は「.txt」となっているので、それを「.css」にします。

そして次に、HTML内部に「＜link rel="stylesheet" href="sample.css" type="text/css"＞」
という文章を導入します。

これによって、そのまま「.css」で保存した内容が反映されます。
非常にメリットが多く、有効な方法です。

タグ：外部ファイルとしてCSSを取り込む

CSSのデメリット

少なからずどのような便利なツール、サービスにも、デメリットは存在するものです。
これはある種、人間のやることですので仕方のないことです。
そして、それはCSSにおいてもあてはまります。


最大の問題点となるのは、ブラウザの対応です。
簡単にいえば、未対応のブラウザの場合は、
そのCSSを使ったホームページを正常な状態で閲覧する事ができないという事ですね。


これは、特にCSS3に関して大きな問題点となる事項です。
最も多くのユーザーが使用しているブラウザ
「インターネットエクスプローラ」の6～8にCSS3は対応していません。
そのため、これらのブラウザを使っているユーザーは注意が必要です。


パソコンや携帯電話などでインターネットにつないだ際、ブラウザというのは、
そのインターネット上のホームページや掲示板、ブログ等を見るために必要なツールです。

ブラウザがなければインターネットを閲覧できないという事を普段何気なく使っているので、
自覚しているユーザーは、それほど多くないかもしれません。
しかし、非常に重要なツールなのです。ブラウザというソフトウェアは。

また、インターフェースもそれぞれ異なります。
ブラウザには複数の種類があり、
パソコン用のブラウザひとつをとっても、
最も有名な「インターネットエクスプローラ」以外に、「Firefox」や「Google Chrome」などがあります。
そして、これら全てのブラウザの対応CSSが異なっています。

CSSにどの程度対応しているかという点も、ブラウザを選ぶ場合は、ひとつの判断材料となるのです。

タグ：CSS デメリット

CSS3

ホームページを作成する事は今や、決して難しくないといえる時代になりました。
ホームページ作成ツールの誕生にその最大の要因は、他なりません。
本来ホームページ作成に必要とされてきたHTMLの知識がなくても、
簡単に作成できる補助ツールの登場によって、誰でも手軽に、
短時間でホームページが作れるようになったのです。

また、近年ではホームページよりもブログの方が主流となりつつあり、
HTMLという言語を自分で使って作成するという事自体が、
マイナーなものになってきています。


しかし、従来型のホームページの必要性もその一方で、また叫ばれています。
特に、様々なコンテンツが個人ではなく企業など団体のホームページに関しては
必要となるため、簡易的なホームページでは賄えない分、どうしても従来の作り方が必要となってきます。


また、外部へのアピールを個人であっても、より強めるためには、
多種に亘る内容が求められてきます。


そういった背景もあるため、
その需要を従来型のホームページがなくすという事は、
まず考えられないと断言しても良いでしょう。

HTMLの知識は元より、
CSSの知識も多様なコンテンツを持つホームページを作る場合は、
必要となってきます。

CSSはデザインを豊かにするための言語、ツールであい
必ずしも覚えなければいけないという言語ではありません。


ですが、CSSを使用しなければ表現できない事はたくさんあります。
そして、CSS自体も進化を続けており、
その歴史は、
1996年にレベル1
1998年にレベル2
2004年にレベル2.1が誕生しました。


そんな中、2008年に始動したのがレベル3、すなわちCSS3です。
このCSS3でじっくりと何ができるのかを学んでいきましょう。

タグ：CSS3

styleタグを使った取り込み

「styleタグを使った取り込み」もHTML内に指定の文を打ち込む方法にはあります。
これは、直接CSSを指定する事でタグのstyle属性に対し表示させるという方法です。
もっと具体的にいうと、「先にHTML内にCSSの内容を指定し
これを他のページにおいても簡単に他の文章などに採用できるようにする」という方法ですね。
「style要素を利用した取り込み」とは違い、決めたルールをページ全体に採用する事ができます。

まず初めに「ベースとなるCSS」をこの方法の例として書き込むところから始めてみましょう。
「＜style type="text/css"＞」という文がその基礎となるのものです。

以下の指定が「ページ共通の指定」とこれによってなります。
その後、「hr { color: #ff0000 } ＜/style＞」という指定をしたとしましょう。
この場合、各文章全てにおいて、「hr＝水平線」が赤になるという指定になります。


この方法は短い指定でページ全体におけるレイアウトを指定できるという利点があります。
ただ、注意点としてその一方で指定が複雑化し過ぎることもあります。
いつの間にかページ数の多いホームページを制作する場合、
指定が複雑になり過ぎて、HTML内における文が乱雑になり、
わかりにくくなってしまう可能性があります。


より多くの事ができるようになったCSS3のような場合はさらに複雑化してしまいます。

CSS3等に関しては、そういう意味では、
次の「外部ファイルとしての取り込み」の方が便利かもしれません。

タグ：styleタグを使った取り込み

style要素を利用した取り込み

CSSをHTML内に取り込む方法は、基本的に、3通りあります。
CSS3であってもこれは、例外ではありません。
CSS3でも、同じ方法がCSS1でも、採られます。
では、その中でも「style要素を利用した取り込み」という方法を
の最も初歩的見ていきましょう。

まず、CSSのソースを作る必要がどの方法でも共通しますがあります。
HTMLのソース同様、ソースというのは、英語を使ったものとなります。
ただ、＜html＞等のような、HTMLでおなじみの物は使いません。
色や文字の大きさ、行間スペースなどを指定するための言葉を基本的には、使います。
文字の色を表す「color」最もわかりやすい例でしょうか。

ここでは、「h1 { color : #ff0000 }」という例を使います。
「h1」というのは、第1見出し、本文の一行目を意味し、「#ff0000」は色（これは赤色）を意味します。
つまり、一行目の文字の色を赤にするという指定ですね。
これを、HTML内に貼り付けます。

貼り付ける部分は、＜body＞?＜/body＞の間に書いている、指定を行う文のすぐ前です。
あらかじめその文章の前後には「h1」および「/h1」を足しておき、
この文章が第1見出しであると指定しておきましょう。

そうすると、その文章が「h1」という指定がなされ、
「h1 { color : #ff0000 }」がしっかりと機能します。


ただ、まだ文字はこれだけを加えても、赤にはなりません。
この、CSSを内部に書き込む形の場合は、「style="（指定）"」という形にする必要があります。
よってこの場合は「style="h1 { color : #ff0000 }"」となります。
これでCSSの指定が反映される事になります。

タグ：style要素を利用した取り込み

css3とは

CSSというのは基本的に、洋服のようなものです。
よって、CSSのレベルが2、2.1、3…と上がっていくということは、
洋服の種類が増えていくことを意味しています。

つまり、CSSが発展した形がCSS2であり、CSS2.1、またCSS3という事です。
そのため、CSSの基礎を学ぶ事からCSS3を学ぶことが始まります。

インターネットにある程度触れている人であれば、CSSという言葉自体は、
見た事、聞いた事が一度はあるでしょう。


CSSというのは、

「カスケーディング・スタイル・シート」

もしくは

「カスケード・スタイル・シート」の略語です。

では、このCSSがなぜ「洋服」と比喩されるのか、それから見ていきます。


ホームページを作るためのひとつの要素それがCSSというのはお分かりいただけたかと思います。
では、ホームページを作成する際、最も必要とされる要素・・・
そう、「HTML」ですね。


httpプロトコルを使用し、インターネット上に言語を表示するための言語…というと、
わかりにくいかもしれませんが、要するに「ウェブページを作るための言語」です。

これが、ホームページを作成する上での土台となります。
今回の比喩でいうならHTMLは「身体」ですね。


一方、そのホームページにおけるレイアウト、
デザインといった物を指定するための言語がCSSの役割です。


つまり、文字の配置、大きさ、構成、構図がCSSによって、決まるのです。
よって、HTMLという身体にまとう洋服という比喩があてはまるのです。

ホームページはCSSを使わなくても、作れます。
ですが、洋服がない状態ですから、
あまり人目に触れる事ができないホームページになる、という事になるのです。

タグ：css3とは