内側の余白と外側の余白

内側の余白と外側の余白

今日もHTMLの基礎をします。

これは私自身の頭の中の整理のために記載しております。

間違えや表現が違う可能性があります。

間違えや表現が違う場合は教えて頂けると嬉しく思います。

1. 内側の余白と外側の余白
2. marginの種類

CSSを使用するときはHTMLファイルとは別にCSSファイルが必要です。

内側の余白と外側の余白

昨日のボーダーより上の余白と下の余白を設定します。

これまで余白を設定する際は”padding”を使用しておりましたが

これはボーダーの内側に設定です。

ボーダーの外側を設定するには”margin”を使用します。

HTMLファイル

＜div class="logo1"＞

TEST1

＜/div＞

CSSファイル

.logo1 {

border:3px solid #ff0000;

padding:10px;

margin:20px;

}

上記のpaddingでボーダーの内側に10pxの余白を作り

marginでボーダーの外側の部分に20pxの余白を作成します。

marginの種類

padding同様にmarginも上下左右指定することができます。

指定方法は以下の通りとなります。

CSSファイル①（全て記載し指定する方法）

.logo1{

margin-top:20px

margin-right:10px

margin-bottom:20px

margin-left:10px

}

CSSファイル②（一文で指定する方法）

.logo1{

margin:20px 10px 20px 10px

}

こちらの指定方法は時計回りとなっており

上→右→下→左となる。

CSSファイル③（一文で指定する方法）

.logo1{

margin:20px 10px

}

こちらの指定方法は、上下・左右は一つにまとめることができるので

最初の20pxが上下を指定して、10pxが左右を指定しています。

毎日少しづつ頑張ろう！！

模索

先日は娘へのへたくそなヘアゴムをプレゼントした！

今度は何を作るかな？

少し革も余ってるしな！！

何がいいか模索中！

うれしい

先日完成したヘアゴムを娘が幼稚園につけていったそうだ！

私が帰宅してすぐに走ってきて教えてくれた！

娘「パパ！聞いて！」

私「ただいま！どうしたの？」

娘「きょうねゴムつけていった！おかえり」

私「ゴム！！パパが作ったやつ？」

娘「うん！みんながかわいいっていってくれたよ！」

私「みんなに見せたの？」

娘「朝からつけていったよ！」

私「そうなんだね！今度はもっと上手に作ってまたプレゼントするね」

娘「いっぱいつくってね！」

あんまり上手にはできていなかったけど娘がとても喜んでくれたのでとてもよかった！

また何か作ってプレゼントしよう！！

ついに完成

先日作成していた、娘へのヘアゴムのプレゼントが昨日完成した！

全然上手にできなったが、娘が楽しみにしていたので上げました！

もっと修行を積んで上手に作れるようになったら、また娘に上げよう！！

ヘアゴム

今度は何を作成しようかな？

枠線をつけよう

枠線をつけよう

今日もHTMLの基礎をします。

これは私自身の頭の中の整理のために記載しております。

間違えや表現が違う可能性があります。

間違えや表現が違う場合は教えて頂けると嬉しく思います。

1. 枠線をつけよう

CSSを使用するときはHTMLファイルとは別にCSSファイルが必要です。

枠線をつけよう

タイトルや協調したい場合にボーダー（枠線）などを入れます。

全て四角の枠で文字を囲む時は”border”を使用します。

一部のみは以下の通りとなります。

上のみに線を入れる場合

border-top

右のみに線を入れる場合

border-right

下のみに線を入れる場合

border-bottom

左のみに線を入れる場合

border-left

記述例

HTMLファイル

＜div class="logo1"＞

TEST1

＜/div＞

＜div class="logo2"＞

TEST2

＜/div＞

CSSファイル

.logo1{

border:5px solid red;

}

.logo2{

border-bottom:1px solid red;

}

毎日少しづつ頑張ろう！！

作成中

昨日は、先日お願いしていた革が届いていた！

どんな革があるのか楽しみでわくわく！

端切れを頼んだのでいろいろな種類の革が入っていた！

小さい端切れなども入っており、ネットで小物の作成を調べてみた！

娘に似合いそうなレザークラフトで作れるリボンのゴムがあり

早速作成開始！

かたちが崩れないように水につけて形を整えないといけないので昨日で完成しなかった！

今日完成するかな！

完成したら、写真を掲載したいと思います。

友だち思い！

昨日、娘と一緒にお風呂に入りながら子供は純粋な心をもっているなと感じました！

娘「明日、サンタクロースさん来てくれるかな？」

私「サンタクロースさんも忙しいから夜遅くに来るんじゃない？」

娘「お友達が来ないかもっていってたよ」

私「お友達のところこないの？」

娘「お片付けとかお手伝いしないから来ないかもしれないんだって！」

私「そうなんだ！でも、これからちゃんとお手伝いとかお片付けすればサンタクロースさんお友達のところ来てくれると思うよ！」

娘「私は、お手伝いもお片付けもちゃんとしたからサンタクロースさんくるでしょ？」

私「いっぱい頑張ってたし、サンタクロースさんもみてくれているからくると思うよ！」

娘「明日お友達に教えてあげるね！」

娘は基本的にお手伝いもお片付けも率先してしてくれる！

たまにいやいやいうときがあるがそれはしょうがない！

純粋に信じられるってすばらしいことだと思う！