基礎から学ぶcssの使い方!

cssを理解し学ぼう

css(シーエスエス)といってもどうやって使ったらいいのか分からないそこのあなた。cssについて分かりやすくお伝えします。
まず始めに、cssとは Cascading Style Sheets(カスケーディング スタイル シート)の略です。省略してcssまたはスタイルシートと言います。cssはそれ単体で機能しません。html(エイチティーエムエル)と組み合わせて初めて機能するものです。
htmlとは hypertext markup language(ハイパーテキスト マークアップ ランゲッジ)の略です。cssを理解するにはまずhtmlから覚えていくことをオススメします。本記事ではなるべく短時間でcssを理解するためにhtmlについてはさらっと触れる程度に解説していきます。それではまずcssの基礎を理解していくために準備を進めていきましょう。必要なのは「PC」とPCに付属されているアプリケーション「テキストエディット」だけです。テキストエディットはMacであればパソコンを起動してすぐ、Finder>アプリケーション>テキストエディットの順で探せばあります。Windowsもテキストエディットはあります。

cssを実際に使ってみよう

それではまずテキストエディットを開いてください。テキストエディットにhtmlを記述していきます。リッチテキストになっている可能性があるためファイル>フォーマット>標準テキストへ設定を変更してください。できたら、空白になっているテキストエディットに半角英字で
<html><head><meta name="Content Style Type" content="text/css"></head><body><p style="color:red;">ここに文章がきます。</p></body></html>
と全て打ち込んでください。この文章をそのままコピーしてもオッケー。打てたらデスクトップにこの文章を保存します。保存する時の名前は今回は「renshu.html」とします。保存する時に、フォーマットの箇所を「webページ(.html)」を選んで保存します。style=の箇所がcssです。"color:red;"で、『文字を赤くしろ』と命令しています。このようにcssは文字を赤くしたり、時には文字を大きくしたりすることができます。cssはhtmlを装飾するものだということを理解しましょう。