文字を変更

ここではわかりやすく理解できるように<p>を使用して学んでいきます。

大きさ・色の変更

一番よく使う文字の大きさや色の変更をしてみましょう。文字の大きさを変更するには、font-sizeを使用します。単位はpxで指定してください。色変更の場合はcolorを使用します。では下の例のように入力し、変更してみましょう。

練習

HTMLはいつもと同じように作成していきます。下の画像のように入力してください。

大きさ変更

次にCSSを作成します。下の画像のようにメモ帳でCSSを入力し、保存してください。保存するときはファイル名に注意してください。ここではひな型にあらかじめstyle.cssを使用しているのでstyle.cssで保存します。作成できればブラウザで確認してみましょう。下のブラウザ画像のように表示されれば変更できています。

文字の大きさ変更
ブラウザ表示
大きさ変更1
メモ帳(CSS)
大きさ変更2
色変更
ブラウザ表示
色変更1
メモ帳(CSS)
色変更2

変更が確認できれば色々変えてみて、どのように変化するか確認してみましょう。

問題

下に画像と同じものを作成してください。問題画像の下に問題文があるので使用してください。

条件…HTMLファイルでは、<h1>、<p>のみ使用し、CSSファイルでは色を#ffa500、フォントサイズは10pxにしてください。

蒸しパン

蒸しパンの作り方(4個)
材料…薄力粉(100g)、砂糖(35g)、ベーキングパウダー(4g)、卵(1/2)、塩(少々)、水( 65g)
下準備…薄力粉はふるいにかけておきましょう。蒸しパンなので蒸し器が必要です!準備しておい てくださいね。
1、はじめに生地を作ります。卵、砂糖、水をボールにいれ、泡立て器でよくかき混ぜます。
2、よくかき混ぜた生地に薄力粉を加え、すばやくかき混ぜます。かき混ぜすぎに注意して注意し てください。
3、できれば、型に流し込み蒸し器で15分、強火で蒸します。
出来上がり☆


ボックスの項目へ

CSSのメニューへ