125 プログラミング学習日記

4.「div」で部分に切り分け、それぞれを「float」で左右に振り分ける

投稿日:

プログラム学習も7日目となりました。

たった7日で、私のHTMLとCSSの知識は格段に増えました。

これまでの20年間に及ぶ「見様見真似」の時代から、ようやく「知っている。使える」時代へと突入したのだと感じています。

ここ数日で学んだことは、

🍏 ページを構成する各部分は、<div>要素にclassという名札をつけてグループ化できること

🍏 グループ化できるということは、グループごとに思い通りの装飾やレイアウトを反映させらるということ。

例えば、「フッター」という大きな部分の中に,さらに

  • ロゴ
  • リスト

の二つの「部分」を

 

<div class="フッターロゴ(わかりやすいように日本語で書いてます)">

<div class="フッターリスト(同じくわかりやすいように日本語で)">

のようにつくれば、それぞれの部分ごとにレイアウトを変えられるということ。

 

つまり、ロゴだけ左寄せ、リストだけ右寄せできるということなんですね。

 

なんて便利。

なんで知らなかった。

簡単。

DreamWeaverやホームページビルダー が、うらでちゃんとやっていてくれたからですね。

lyustyle
そもそも、「部分」ごとに切り分ければそれぞれの部分に違ったレイアウトを反映させられるということも考えたことなかったですからね。
lala
ちゃんと体系的に学ぶということは本当に大切ね。

floatで左右どちら並びかを決める

切り分けた「ロゴ」という部分と、「リスト」という部分それぞれにちがった並び方をさせることができるようになりました。

  • そこで,ロゴという部分を左に。
  • リストという部分を右に。

そんなふうに部分ごとに振り分けたい。

 

<div>で切り分け,それぞれにclass で名前つけてるから簡単。

振り分けるための「セレクタ」は「float」です。

 

float のプロパティに

  • left
  • right

を指定することで,部分ごとに左寄せ,右寄せをすることができるんですね。

その部分だけに変更を加えるために,スタイルシートを開いて,CSSで変更を加えればOK.

🍏 <div class="footer-logo">と切り分けた「フッターロゴ」の部分を左に

スタイルシートで,「footer-logo」と名付けた部分の並び方を左にしたい。

こうします。

floatセレクタで左寄せ

.footer-logo {

 float: left;

}

  • float というセレクタを使って,
  • そのプロパティにleft を指定する

それだけ。

これで,footer-logo と名付けた部分は左寄せになりました。

🍏 <div class="footer-list">と切り分けた「フッターリスト」の部分を右に

同じく,「footer-list」と名付けた部分を右寄せにするには,

floatセレクタで右寄せ

.footer-list {

 float: right;

}

「footer-list」と名付けた部分をfloat セレクタを使って,プロパティにrightを入れて右寄せする,ということですね。

まとめ

毎朝,早起きするのが楽しくてたまりません。

ヘッダーの構造,フッターの構造で勉強してきて,

明日はいよいよメインの構造の勉強に入ります。

これまで,ブログのボディ部分をいじるために開いたhtmlやスタイルシートでよく目にしていた

container

とか

contents

とかいう言葉。

これを見るたびに身の毛がよだっていましたが,ようやくそれを私のものとすることができます。

一歩一歩近づいている気がしてうれしいですね。

メルマガ講座「10年ブログによるブランディング講座」

登録

10年ブログによるブランディング講座は30通のメールによる講座です。
また,2018年7月現在,週1回金曜日に「Lyustyleの読書」をはじめとする「知的迷走通信」を配信しています。
皆さんと一緒に楽しく成長できたらと思っています。

lyustyle
無料です。解除も自由です。下のリンクよりご登録ください。Lyustyleの設置した安全なページです。


登録するとすぐに第1回目のメールが届き,その後,30通のメール講座が始まります。

Lyustyleメルマガ「知的迷走通信」

 



よろしければ、購読の登録をしていただければ幸いです。


follow us in feedly

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ

にほんブログ村


-125 プログラミング学習日記

Copyright© 知的生活ネットワーク , 2019 All Rights Reserved.