floatの基礎①

cocohp

5年前

初心者のためのfloat基礎

画像の説明の横に画像を挿入してみましょう。まずは、親要素となるセクションを作成し、その中に「見出し」「画像」「テキスト」の順に記述していきます。CSSに、「右に回り込ませる」というクラスセレクタを作り、回り込ませたい要素に充てます。

注意点は、floatを使うと、セクション(親要素)の中にある子要素(中にある要素)はfloat（浮いた）状態になり、親要素の高さはなくなってしまいます。したがって、全体を包囲させることができなくなるのでセクションに、overflow:hiddenを記述しておく必要があります。
▶　float(回り込みプロパティ初級前編を見る)

/*親要素 ---------------------------------------*/
section{
width:90%;
margin:30px auto;padding:10px;
background-color:#eee;
line-height:1.8em;
color:#383838;
border-radius:20px;
border:5px #ddd solid;
/*重要*/
overflow: hidden;
}
/*CSS 右へ回り込ませることができる*/
.float_R{float:right;}

/*親要素 ---------------------------------------*/

section{

width:90%;

margin:30px auto;padding:10px;

background-color:#eee;

line-height:1.8em;

color:#383838;

border-radius:20px;

border:5px #ddd solid;

/*重要*/

overflow: hidden;

}

/*CSS 右へ回り込ませることができる*/

.float_R{float:right;}

【HTML】画像が回り込む

<!-------------直接画像に充てる------------------->
<img src="images/dog.jpg" alt="ネコ" class="float_R">

1 2	<!-------------直接画像に充てる-------------------> <img src="images/dog.jpg" alt="ネコ" class="float_R">

また、画像を段落ｐ要素の中に入れ、p要素に回り込みを充てる方法でも、ほぼ同じ結果が得られます。

<!-------------段落要素に充てる------------------->
<p class="float_R"><img src="images/cat.jpg"></p>

1 2	<!-------------段落要素に充てる-------------------> <p class="float_R"><img src="images/cat.jpg"></p>

【補足】基本的に、bodyの中にある要素は、すべてブロック要素の中に入れて記述することが原則となっています。img要素は、インライン要素なので、ブロック要素の中に入れて記述することが正解ですが、すでにセクションの中に挿入されていますので、特に段落pに入れずに、直接記述しても問題ないでしょう。

See the Pen
float_001 by nakatax (@cocohp)
on CodePen.

【練習素材】

どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でワンワン泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ち付いて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛を以て装飾されべきはずの顔がつるつるしてまるで薬缶だ。

どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でワンワン泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

タピオカミルクティとは
砂糖を入れた甘いミルクティーに大粒のタピオカパールと氷を入れ、太めのストローで飲むのが一般的。店によってはホットのタピオカミルクティーを提供しているところもあります。

発祥は台湾の喫茶店「春水堂」のオーナーが、欧米の清涼飲料水に対抗できる飲み物として開発されました。当時はデザートとして食べられていたタピオカパールを、ミルクティーに入れて提供したのがはじまりとされています。濃厚で香りの良い現地産の茶葉を用いたミルクティーと、もちもちした食感のタピオカの組み合わせの新鮮さがSNS映えを意識する若年層にヒットし、同国を代表する飲料となりました。

その後、海外でもタピオカミルクティーを販売する店が増加。茶葉の香りを最大限に引き出す製法にかかる手間と見た目のお洒落さが女性層を取り込み、多い場合には6時間待ちもの行列を作る程のヒットになったのです。

出典／ニコニコ大百科