あそびラボ

お問い合わせ

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

講座10 サイトを作ってみよう!(実践編)2020.5.14

ふくろう先生
ふくろう先生

前回に引き続き、今回も装飾について学んでいくぞよ。

パンちゃん
パンちゃん

はい。よろしくお願いします。
前回までの範囲はもう完璧です!

ふくろう先生
ふくろう先生

うむ。流石はパンちゃんじゃ。
今回は新しいことも学ぶので、
しっかりついて来るのじゃぞ。

class属性

さて、今回はまずはじめにclass属性というものを学習していきましょう。
classとは要素を一意(オンリーワン)にしたい時に使います。実際に例を見てみましょう!

■記述例(HTML)

<div class=”box1″></div>

上記のように記述すると、div要素に「box1」というclass属性が付与されます。
今回は例としてbox1としましたが名前は何でもOKです。

■記述例(CSS)

.box1 {
width: 100%;
background-color: blue;
}

CSSのほうでは、セレクタのところに「.box1」と記入すればいいだけです。簡単ですね!
一つ注意が必要なのが、クラス名を入れるときは必ず「ピリオド(.)」を入れてから記入します。

margin・padding

次は要素の配置に関するプロパティを学びます。
基本的に、HTMLの要素は指定をしなければ、画面の左上から順に縦に並んでいきます。
なので、細かい要素の配置などはCSSの方で整えていきます。
まずは、margin・paddingを使って配置を整えてみましょう!

■記述例

.box1 {
margin: 100px;
}

.box1 {
padding: 100px;
}

marginとは自分から見て外側に、paddingとは自分から見て内側に、
上下左右どれだけ余白を設けるか、というものです。

また「top・right・left・bottom」を付け足すことによって、その方向のみに適応させることができます。

前回作ったサイトの配置を整えよう!

長くなってしまうのでソースコードの掲載は省力しますが、
今回学んだことを使って、前回のサイトを整えてみましょう。

今回は参考として、こんな感じにしてみました。

これは一例なので、様々なデザインに挑戦してみてくださいゞ
この講座は あくまでもへっぽこ講座なので、わからないことや不明点は、
もっと参考になるきちんとしたサイトを見て、より理解を深めてみてください~> <

パンちゃん
パンちゃん

だんだんウェブサイトらしくなってきましたね!

ふくろう先生
ふくろう先生

形になってくるとワクワクするじゃろ?

パンちゃん
パンちゃん

はい!
次回も楽しみです。

へっぽこ Web講座一覧へ

池袋・練馬近郊でホームページ制作のご相談をされたい方はこちら ▶