8月6日 講義内容(水)- 実技(HTML・CSS基礎)6-

Pocket

◆本日使用したプロパティと値

[overflowプロパティ(教科書/辞典P.350)]

overflow ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用
・hidden  はみ出た部分は表示させないようにする値
・scroll   入りきらない内容はスクロールして見られるようにする値。※内容がはみ出してなくてもスクロールバーが表示される。横スクロールバーの領域も自動的にでてしまう。
・auto  はみ出した部分だけスクロールバーが表示される値。はみ出さなければ、スクロールバーは出ない。
・visible  内容があふれた場合、エリアからはみ出して表示される

[displayプロパティ]

display   ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
・none    要素消去する。存在自体が消える。

[visibilityプロパティ]

visibility    存在はあるが、見えなくする値
・hidden    要素を非表示にする。存在(エリア)は残る。
・visible   要素を表示にする。

[floatプロパティ(教科書/辞典P.339)]

float 指定された要素を左または右に寄せて配置する際に使用。
・left 指定した要素を左に寄せする
・right 指定した要素を右に寄せする
・none 特に配置を指定しない

[clearプロパティ(教科書/辞典P.342)]

clear floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用。floatとセットで覚える
・left 左寄せされた要素に対する回り込みを解除する
・right 右寄せされた要素に対する回り込みを解除する
・both 左寄せ、または右寄せされた全ての要素に対する回り込みを解除する
・none 回り込みを解除しない。 ※ほとんど使用しない

<floatのバグ/一番外枠の背景が表示されないバグの回避方法>

①コンテンツをくるんでいる一番外枠のdivに高さ指定をしてあげる
欠点:中身が増えた時に、コンテンツがあふれてしまう。

②overflow:hidden;を一番の外枠のdivにかけてあげる
欠点:コーディングミスがあった時に見つけづらい

③clearfixの使用(これが一番使用します)
>>詳しくはこちら http://kojika17.com/2013/06/clearfix-2013.html

◆<div>の高さ指定について

divの高さ指定は、固定で決まっている数値であれば入れてあげれば良いが、コンテンツ量が増えたり減ったりと固定されていない場合は、
中身のコンテンツ量に応じてエリアが伸びたり縮んだりくれるので、高さ指定は入れなくて良い。

◆エリア外への文字の突き抜け

日本語文章の改行は1文字単位で自動改行がされていますが英語文章は1単語(ワード)単位からの改行になる。
そのため、途切れ(スペースや点などで)の無い長い数列や英語文字列になると
1つの単語(ワード)とみなされて改行するポインが無いため領域を突き抜けてしまうため、
半角英数字をテキストに入れる場合には、半角スペースを入れて一つの単語と認識させてあげると、改行されるようになる

 

tukinuke
◆トップページのファイル名は index.html にする

index.htmlのファイル名にすると、自動的にブラウザで最初のTOPページとして認識して読み込んでくれるため、
アドレスのファイル名、index.htmlは省略しても表示される。

http://www.planner-school/bclass/

http://www.planner-school/bclass/index.htmlと
ファイル名を記述しなくてもトップページが表示されます。

◆横並びのリストタグの作成

<li>タグにfloat:left;をかけると、中身の<a>タグもfloatされる。
その際にタグはインライン要素なのでブロックレベル要素に変換する。
※高さ固定がある場合はclearfixは必要ない。

◆margin-topの突き抜け現象 回避方法

①padding-top:数値;をつける
②border-top:solid 1px;をつける
③overflow:hidden;をつける(コーディング終了後に設定するのが理想)

 

 

float_setumei

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください