CSS

今まではHTMLとは何かについて学びました。ここでは新たにCSS(Cascading Style Sheets)について学びましょう！
HTMLがウェブサイトの構造を表す言語だったのに対し、CSSはウェブサイトの見た目を表す言語です。Blositeではstyle属性をHTML要素に加え、その中にCSSのブロックを組み立てて見た目を変更することができます。
style属性を追加するには左上の「HTML属性」の中に入っているstyleと書かれたブロックを使います。

styleブロックの使い方

CSSのブロックはHTML属性のブロックと同じように横並びにつなげることもできますが、styleブロックは縦並びにCSSのブロックをつなげることができます。
styleブロックの中にある歯車をクリックすると、右のように項目がでてきます。項目と書かれたブロックをドラッグすることで接続できる部分の数を変更することができます。
使うCSSのブロックの数が増えてきたときは縦並びにまとめると見やすくなるので覚えておきましょう。

色を変えてみよう

それでは実際に文字の色を変えてみましょう。「HTMLについて知ろう」のチュートリアルで作成した遠足の持ち物リストがあるので、その文字の色を変えてみましょう。
文字の色を変えるにはstyleブロックの中に、「見た目」カテゴリーに含まれているcolorブロックをを接続して変更します。色はパレットをクリックすることで選択肢の中から選んで変更できます。変えるにはstyleブロックに見た目フォルダに含まれているcolorブロックを接続して変更します。色はパレットをクリックすることで選択肢の中から選んで変更できます。

複数のCSSを制御しよう

先ほどは文字の色だけを変更してもらいましたがCSSでできるのは文字の色の変更だけではありません。今度は背景の色と文字の配置を変えて、右の画像と同じものを作ってみましょう。

どんな変更が加えられているか

ここでは以下の三つの変更点があります。

• 「遠足の持ち物」が中央に配置されている。
• 背景の色が黄色になっている。
• 持ち物のリストが青色になっている。

ヒント

背景の色を変えるにはbackground-colorブロックを使いましょう。色の指定の仕方はcolorブロックと同じです。
文字の位置の変え方はいくつかの方法がありますが、今回はtext-alignブロックを使ってみましょう。text-alignブロックは特定の値(left,right,center,justfy)しか入力できないので注意してください。
また、マウスカーソルをかざしたときに出る説明文も参考にしてください。