ゆるあわ自習室 ゼロから『HTML』『CSS』編

ぜろから空いた時間に独学で!

#15ゼロからwebの基本「HTML」「CSS」編 〜15日目〜 『CSSをちょっと編集』

「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

今日も一緒に勉強して行きましょう。

 

今回は前々回やったCSSを少しだけいじってみましょう!

 

  • CSSをちょいと編集

 

今回は自分が最近覚えた本文のテキストが画像の横に来るようにする

ってやつをやってみましょう。

 

CSSの floatプロパティを使います。

「float: left」と指定された要素は左に配置され、それ以降に書かれた要素はその右側に配置されます。
「float: right」ならその逆で、指定された要素は右に、それ以降の要素は左側に配置されます。

 

では早速前々回のファイルのCSSの部分に、下の画像のように指定要素を追加しよう。



それでは早速ファイルを保存してブラウザでプレビューしてみましょう。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

画像の右側に本文が回っているのですがこれでは変だし見難いですね。

これをさらにいじって見やすくしましょう。

 

  • さらに編集

画像と本文の間を少し離してみましょう。

下の画像のようにCSSにマージンの指定を追加します。

 marginとは、要素の4辺(上下左右)の間隔・マージン領域を設定するプロパティのことです。 要素間の間隔をとりたいときに使われるらしいです。



marginプロパティを使えば、要素にマージンを指定でき、隣接する要素との間隔を作る事ができます。
ちなみに上のコードで使っている「1em」とは、1文字分って意味です。

また保存してプレビューしてみましょう。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

さっきより読みやすくなりますたね。

 

  • フローと指定の解除仕方

一度floatを指定するとそれ以降の要素が永遠に影響を受けることになるので、

指定を効かせたくない要素のところで解除しないといけません。

解除するには、clearプロパティを使います。

 

今回は 2番目の段落から回り込まなくて良いので、2番目の<p>に clearプロパティを使いましょう。

まず、2番目の <p>要素に クラス名を付けます(42行目)。ここでは「clear」という名前にしました。

※ちなみに名前はなんでも大丈夫です

そして CSSのほうで そのクラス名を呼出しましょう(28行目)。
自分で付けたクラス名を呼び出すには、先頭に「.(ドット)」を付けます。

これは CSS のルールのようで、
自分で要素につけた ID名を呼び出すときは、先頭に「#(ハッシュ)」を付ける決まりの様です。

そして このクラス名に対して「clear: both」と指定します(28〜30行)。
clear: both は、右も左も両方のフロート解除する指定です。

 

では、保存してプレビューしてみましょう。

ちゃんと指定した所で解除されていますね。

 ーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

  • 最後に

今回はここまでにしましょう。

ちょっと文字が多くて長かったですね。

 

次回は →ページリンクについてやって行きましょう。