CSSとは?

技術情報

先回HTMLについて説明をしました。その際、HTML以外に重要なCSSと呼ばれるものがあるというくだりで終わりました。なので今回はこのCSSについて説明をいたします。

CSSはCascading Style Sheetsの略称で、HTMLで記載されたタグの位置や飾りつけなどを記述します。

昔はHTMLのタグの中にこの位置や修飾情報を書き込んでいましたが、煩雑(一つ一つ設定しなければならない)になることと構成上美しくないということでHTMLファイルと別ファイルに分離されました。その分離されたファイルがCSSファイルというわけです。

CSSの記述は単純で、HTMLの各タグについての設定ができます。例えば、h1 { font-size:100%; font-weight: bold; margin-top: 20px; }などと記述します。これはh1タグで挟まれたテキスト文字は、サイズが100%(事前に絶対サイズが宣言されている)で太文字(bold)で文字列の上部を20ピクセル空けなさい、という意味になります。

また、タグの中のある特定のものだけ狙い撃ちで設定もできます。例えば、HTMLで<h1 class=”kokodake”>ここだけ</h1>と記述しておくと、CSSで、h1.kokodake
{ font-size: 200%; color: #FF0000; }と書くと、他のh1とは異なり、サイズが200%で赤色の文字になります。ただし、太文字と上部のマージンは引き継がれます。

このようにHTMLとCSSを分けておくと、HTMLの内容は同じでも、パソコンとスマホで、文字の大きさを変えたり、ある部分は表示をさせなかったり等の細工がCSSだけで可能になるわけです。

基本的にWordPressは一つ以上のHTMLファイル(実際はHTML記述を吐き出すPHPファイル)と一つのCSSファイルが必須です。

«
»
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪