Home / ネットワーク・IT / IT基礎知識 / プログラミング / cssとは?cssの基礎知識と使い方

cssとは?cssの基礎知識と使い方

※本ページにはプロモーション(広告)が含まれています

63515349bf228251f9b6397b8a88da1e_s
cssとは「Cascating Style Sheets(カスケーティングスタイルシート)」のことで、ウェブサイトをデザインするために使用する言語です。スタイルシートとはワードソフトなどのデザインを指定する言語のことを指しており、ウェブページのHTMLなどの文書のスタイルを指定する主流の言語がcssとなっております。

本記事では cssの基礎知識と基本的な使い方 についてご紹介していきます。ウェブページを作成したいという方や、これからウェブデザインを学びたいという方は是非参考にしてみてください。

cssとは?cssの基礎知識


cssとは上記で紹介してきた通り、ウェブページのデザインをするために使用する言語になります。日常で見かけるほぼ全ての言語でcssは使用されており、人がみて見やすい様に色や配置などのスタイルを指定しています。

ウェブページの静的な基本構造は HTMLとcssの二つの柱で構成されており それぞれの役割を実現することによって、デザインされたウェブページを閲覧することができるようになっています。それではHTMLとcssの関係性について、詳しく見ていきましょう。

cssとHTMLの役割

ウェブページはHTMLと呼ばれる言語により記述されています。ウェブページに表示される文字や画像の情報だけでなく、基本的なウェブページや構成なども複数の種類のタグとよばれるもので実現しています。

HTMLのみでもウェブページに文字や画像を表示させることはできますが そのままの表示では人が見たときに非常に見づらく、そのままでは実用性にかける状態となります。 そこで使用されるのがcssです。

cssはHTMLの文字や画像などのスタイルを設定することができるため、ウェブページ全体のデザインをすることができます。ページレイアウトの構成や文字の大きさ、カラー、画像の大きさなど、cssで基本的なデザインを実現することができ、HTMLとcssを使用することで視覚的に見やすいウェブページを作成することができます。

基本的にはHTMLとcssのみでウェブページは実現できますが、ユーザーの特定の操作に応じてページを変化させたい場合はjavascriptなどの言語を使用することによって、よりリッチなページを実現することができるようになるのです。

それでは、HTMLとcssをどのように組み合わせて使用するのかみていきましょう。

HTMLタグ内のcss

まず、HTMLのタグ内でスタイルを使用する方法があります。これはHTMLファイルに記述されているHTMLタグの中にスタイルを指定するもので、指定されたタグのデザインをすることができます。特定の文字の場所だけ色を変えたいなどという場合に使用することがあります。

HTML内のcss

また、タグ内ではなく、HTMLファイルの中にcssを記述する方法もあります。HTMLはタグを指定してスタイルを指定する方法だけでなく、idやclassといった概念を使用して、より効率的にスタイルを指定することができます。

下記でご紹介していきますが、HTMLタグ内でスタイルを指定する方法ではなく、cssの形式でスタイルを指定する方法が一般的に使用されているウェブデザインの手法です。このcssの記述をHTMLタグ内に使用することで、当該HTMLファイル内のデザインを効率的に実装していくことができます。

一方で、単一ページのデザインであればこの方法でも問題ありませんが、ウェブページは通常非常に多くのファイルから構成されています。数十にも渡るHTMLファイルがあれば重複している箇所も多くありますので、それぞれのHTMLファイルにcssの記述を書くのは非常に非効率です。また、デザインを変更したいといった時も、一箇所を変更するのに数十のファイルを変更する必要が出てきてしまい、運用が現実的ではありません。

そこで、通常HTMLファイルとは別にcssファイルというスタイルを指定する専門のファイルを作成し、ここで一括でウェブのスタイルを指定していきます。外部ファイルを作成してデザインを指定する方法について、早速見ていきましょう。

HTMLと隔離したcss

1 2

Check Also

HTML学習に便利なHTMLのリファレンスサイト17選

HTMLを勉強する際には何を参 …