スタイルシート - CSS って何？
前回HTMLについて記事を書きました。
今回はHTMLできれいなページを作る上で欠かせないスタイルシートについて記事を書きます。
スタイルシートはCSSと略す！
まずはWikipedia
例によってまずWikipediaで調べてみました。
スタイルシート - Wikipedia
ひとつずつ調べていきましょう。
CSSもやっぱりテキストファイル
CSSもHTMLと同じでテキストファイルの集合体です。
ファイルの拡張子は「.css」になります。
HTMLと同じように「.css」のファイルに指定の記述ルールで文字を書いていくことで、Webで表示するためのページを作ることが出来ます。
スタイルシートは何のために使うの？
スタイルシートはHTMLで作ったページをより綺麗にするために使うモノです。
文字のサイズを変更したり、文字の色を変更したりといったところから、レイアウトを定義したりもできます。
このブログは本文の横に、プロフィールや最新記事などが表示されています。
この書式は2カラムと呼びます。
スタイルシートを使うことで、いろんなデザインのページを作ることが出来ます。
きれいなWebページを作るには必須の機能であるといえます。
見栄えと構造を分離する
HTMLファイルとCSSファイルは別のファイルです。
が、実はスタイルシートはHTMLファイルにも書くことが出来ます。
ですので、HTMLファイル一つで、文章を書き、デザインを定義することが出来ます。
できるのですが、HTMLとCSSでは書式が違いますし、一緒に書くとソースが意味不明な文字列で埋め尽くされてしまいます。
※ソースとは、HTMLタグや文字列などを書いたテキストの部分を指します。もとはプログラムを書くときの文字列をソースコードというところからきていると思います。
「見栄えと構造を分離する」というのは、文字を書く部分とデザインを定義する部分を分ける’という意味となります。
少し意味が違うのですが、HTMLファイルとCSSファイルを分けて書くというのが、分かり易いかなと思います。
スタイルシートってどうやって書くの？
スタイルシートの文法
スタイルシートいろんな形で書くことが出来ますが、スタイルシートファイルに書くときは、下記のようになります。
p {
color : blue ;
line-height : 1.5 ;
}
color : blue ;
line-height : 1.5 ;
}
HTMLファイルに一緒に書くときは、下記のようになります。
<p style="color:blue; line-height:1.5;"></p>
書き方はこのような形になります。
まとめ
このように様々な形でスタイルシートは書くことが出来ますが、それ故に覚えるのが大変なところもあります。
覚えるのが大変ですが、スタイルシートを最低限扱えるようになれば、はてなブログのテーマでここだけ色を変えたいといった細かい変更をすることが出来ます。
ですので、ブログを書く上では、CSSの使い方はぜひ覚えてほしいなと思います。
今は「スタイルシート 入門」で調べるとたくさん参考になるWebサイトがありますので、ぜひ参考にしてください。
最後に
今回の記事はいかがだったでしょうか？
よろしければ読者登録をしていただけると、励みになります(^▽^)/
よろしくお願いします！
