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

LINEで送る
Pocket

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

cssファイルを別ファイルで作成する場合には、タグ、id、classを指定してスタイルを設定していきます。タグとはh1などのタグのことを指しており、cssではこのタグに対してスタイルを設定することが可能です。この場合、作成したcssファイルを読み込む全てのHTMLファイルに対して、該当するタグのスタイルが反映されます。この方法は基本的な文字の大きさを揃えたりするのに便利な方法です。一方で、ウェブデザインをするにはもう少し細かくスタイルを設定する必要があり、そこで出てくるのはidとcssです。

idはその名の通り、タグにidを付与するもので、cssではこのidに対してスタイルを設定することができます。ただし条件としてidは一つのページに1回のみ使用可能となっており、重複してはいけません。そのため、命名するときには一定のルールを守ってするようにしておきましょう。

classはタグにclassの要素を付与するものであり、一つのページで何度でも付与することができるものになります。ページ内で繰り返す要素など、何度も同じスタイルを設定する必要があるものをclassで指定しておくとスタイルを設定するのが楽です。

cssの構造

cssはセレクタ、プロパティ、値の3つの要素で構成されます。基本的な構成は次の通りです。

h1{
color:blue;
}

上記のh1がセレクタ、colorがプロパティ、blueが値に相当します。セレクタ、プロパティ、値はそれぞれ「どこの、何を、どのように」するのかを表しており、この基本構造に基づいてウェブページのデザインをしていきます。

上記の様にh1などのタグを指定することもできますが、idやclassの設定もできます。

p#id{} /*—idを指定--*/
p.class{} /*—class—*/

上記の様にidを指定する時は「#」を使用し、classを指定する時は「.」を使用します。cssの基本構造はこのようになっています。

HTMLからcssを読み込む

HTMLファイルとcssファイルを連結させるためには、HTMLファイルからcssファイルを呼ぶことが必要になります。ページによって、必要なcssの要素も変わりますので、分類ごとにcssファイルを複数作成するのも一つの手法です。

HTMLファイルからcssファイルを呼ぶ時はheader内に次の様に書きます。

上記のhrefに呼び込むcssファイルのパスを指定すれば完了です。階層が複雑に分岐している場合には、相対パスではなく絶対パスで指定すると良いでしょう。これでHTMLファイルとcssファイルが連結され、cssで指定したスタイルを持つウェブページになります。

まとめ

いかがでしたでしょうか?cssは現代のウェブサイトに欠かすことのできない言語であり、視覚的に見やすくなるように大切な要素です。これからウェブサイトを作成したいという方や、ウェブデザインを勉強したいという方は、cssについて少しずつ勉強していくことがおすすめです。

cssを読める様にしておくことで、ちょっとサイトを変更したいといったときに自分で簡単にできるようになります。是非楽しんで学んでいってくださいね。

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です