のはこごと

モノヅクリノハコの中の人の雑記です

12月になったので、Advent Calendar的なかんじで【HTMLとCSSの基礎の基礎講座】というテーマで始めてみよう

12月ですね。

ちまたでは、Advent Calendarが始まりましたね。

今年こそは一人でCalendarやってみようかなーと思いましたが

間違いなく三日坊主になると思うので、気が向いた時にだけ書こうと思います。

 

では本日1日のネタは、

CSSってなに?とりあえずfloatってなにそれおいしいの?】

でいこうかと思います。

 

【float】とは、ボックスを浮かすCSSです。

対になるものとして回り込み解除もあります。

CSSでの書き方は、

 

float:値;

になります。この魔法の呪文をclassまたはidやdivなどにかけてあげると、

その部分が浮きます。

ふわっふわです。

 

float:left; →対象要素を左寄せで浮かす

float:right; →対象要素を右寄せで浮かす

 

これで浮かせた要素に歯止めをかけてあげないと、いつまでもプカプカしてしまい、

何もかけていない要素が空いた隙間に入り込もうとしてきちゃいます。

それを防ぐために、

【clear:値;】をかけてあげます。

あら不思議、ぴたっと浮くのが止まります。

 

clear:left; →float:left;を解除

clear:right; →float:right;を解除

clear:both; →left,right両方の回り込みを解除

 

まあ、文章で書いててもイマイチわかりにくいと思いますので、

まずは簡単に練習。

※HTMLとCSSがかけるor触ってみたい方前提の課題です。

 

・・・なーんて、いきなり出来るわきゃないですよね。

一応完成形はこうなります。

 

img1

 

こんなかんじのものが書けるようになるまで、のったりペースで

できれば毎日ちょびちょびと書いていこうと思います。

この国旗のHTMLはこちらです。

 

img2

 

これ+あとCSSが加わって完成します。

この場合、divでもなんでもいいのですが、今回は<p>で書いています。

でもそもそも<p>ってなに?ってなりますよね。それ以前に、HTMLってなに?

CSSっておいしいの?ですよね。

そのへんから、明日以降は解説していきますよ。

 

最終的にはfloatができるようになるまで。

それを目標に、【HTMLとCSSの基礎の基礎講座】を始めていきたいと思います。