こんにちは、Zenです。
フィリピンのセブ島にあるIT留学、英語留学のグローバルITアカデミーでのインターン研修をしております。
今日はCSSについてご説明したいと思います。
CSSとは「Cascating Style Sheets」の略でスタイルシートとも呼ばれます。
CSSは、HTMLと組み合わせて使用する言語で、HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定します。
HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、 文書の情報構造がでたらめになってしまうため、CSSで文書のスタイル指定をします。
これには複数のメリットがあります。
- スタイル指定をHTMLとは別にすることで、HTMLの文書構造を保つことができます。
- また、複数の文書でスタイルを共有できるため、メンテナンス性が向上します。
- HTMLによる見栄えの制御をやめて情報を適切にマークアップすることで、検索エンジンに正しく解釈されるウェブページとなり、SEO効果が上がります。
- スタイルに関する記述を一箇所にまとめてウェブページを軽量化することができ、アクセシビリティ向上が期待できます。
CSSでスタイルを指定する際には、どの部分に対してどのスタイルをどのように適用するかを指定します。
例えば下記のように記入します。
この場合h1（大見出し１）に対して｛｝の中で設定した要素が適用されます。
CSSはHTMLファイルの中に<style></style>と入力して、その間に入れることもできますが
今回は別にCSSファイルを作成し、そこにスタイルを指定し、HTMLファイルでそれをリンクさせました。
今回はCSSファイルをHTMLファイルと同じフォルダー内に作成したのでhref=”ファイル名“になっていますが、もし別のフォルダーにある場合はhref=”フォルダー名/ファイル名“となります。
ちなみに上記のようにCSSで設定した場合、実際の画面はこうなります。
before
after
また、idやclassといったタグを使うこともできます。
使用例
<p id=”first“>
<p class=”first“>
idで指定した場合ｃｓｓでの表記は”#（ハッシュマーク）“を使います。
#first{
}
classで指定した場合、cssでの表記は”.（ピリオド）”を使います。
.first{
}
{}の中に指定したい要素を入力します。
CSSは今後も使う機会がたくさんあると思うので、どしどし活用していきたいと思います！
Zenでした。