CSSを使ったプログラミング学習、大切なこと3選
この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。
CSSとは。
CSSの書き方。
CSSの詳しい使い方。
CSSとは。
CSSとは昔の記事でも解説したと思いますが、
CSS は、 Cascading Style Sheets （カスケーディング・スタイル・シート）の略称で、スタイルシートと呼ばれることもあります。 HTML の見栄えを変えることができる言語のことを言います。
CSSの書き方。
CSS を使って、背景色を変えてみましょう。
head 要素の中に以下のように style 要素を記述します。
style と入力して Tab を押すことで要素が入力されます。
次に style 要素の中を以下の差分表記に従って編集してみましょう。
コードを入力すると、lightblue という色を示す部分の前に、その色がどういう色かという見本を VS Code が自動で表示してくれているはずです。
そしたら、Chrome で再読み込みを行ってみましょう。
Chromeで最読み込みを行うと、背景が明るい青「ライトブルー」に変わりました。中身を見ていくと、7 行目に新しい要素としてstyle 要素が出てきました。
これを使うことで HTML ファイルに直接 CSS を書けます。
style 要素は head 要素の中に含めないと認識されませんので注意してください。
この body はセレクタと呼ばれる部分です。
デザインを適用する要素を設定します。その後の { } の中身に具体的なデザインの内容を設定します。
次に、デザイン内容である、
background-color: lightblue;
この部分ですが、 background-color がプロパティで、 lightblue が値です。
値とプロパティの間には、 : 「コロン」が必要で、値の後には ; 「セミコロン」が必要です。
CSS をもっと使ってみよう
今度は、リスト要素とリンク要素の見た目を変えてみます。
以下の差分表記に従って、
self-introduction.css を変更します。
body { background-color: lightblue; }
+ li ｛+ list-style-type: square;+margin: 10px;+ }+ a {+font-weight: bold;+ }self-introduction.cssPlease Type!
リスト要素の CSS
li
というセレクタは、 リスト（li） 要素に適用するというセレクタです。
list-style-type: square;
list-style-type（リスト・スタイル・タイプ）というプロパティで「リストの種類」を設定しています。これにより、リストの先頭に描かれる記号を変更できます。
設定できる内容は以下のようなものがあります。
none : 記号が描かれません。
disc （ディスク）: 黒い丸（●）が描かれます。
circle （サークル）: 線だけの丸（○）が描かれます。
square （スクエア）: 黒い四角（■）が描かれます。
今回は square に設定し、黒い四角にしてみました。
margin: 10px;
は、マージンといい、要素と要素の余白を指定するプロパティです。ここでは 10px（ピクセル）に設定してみました。
リンク要素の CSS
a
というセレクタは、 リンク（a） 要素に適用するというセレクタです。
font-weight: bold;
は、文字の太さを指定するオプションです。ここでは bold（太字）に設定しています。
これらを記述して、 Chrome で再読み込みをしてみましょう。
以上で、リストのスタイルを変更できました。
まとめ
今回はCSSについて解説していきました。CSSはHTMLを学ぶ際に一緒にやっていたこともあり、知っている内容も含まれていましたが、詳しい使い方についてはもう少し勉強が必要だと感じました。