読書日記　HTML&CSS齧ってみた。Part6（書籍：スラスラわかるHTML＆CSSのきほん 第2版）

9章まとめ

今回は９章をまとめました。残りはお問い合わせフォームとサイトページのアップロードの仕方になりますのでまとめません。つまり今回でこの本の攻略は最終回です。後は実装編。

floatプロパティ

画像にテキストを回り込ませる為にfloatプロパティを使います。

<p class =”float”>

float img{

float=left;

padding-right

}

フロートは解除しなければそのままになってしまうのでclearプロパティで解除します。

---

テーブルの整形

書式

<table class=”info”>（HTML）

table.info{

border-collapse:collapse;

border:lpxsolid#b78c5f;

}（CSS）

これでテーブルに記述した部分は線で囲まれます。

table.info th, table.info td {

paddong: 8px 8px 8px 8px;

border: 1px solid #d6c2b5;

text-align: left;

vertical-align: middle;

}

table.info th{

    background-color: #c99e73;

    color: #442220

}(CSS)

これで表の項目の部分の色を変えて項目ごとに線を引く事が出来ました。

---

borderショートハンド・プロパティ

書式

border: 太さ　スタイル　色；

これで一括で指定出来る。

---

２コラムレイアウト

書式

.menu_block{

    overflow: hidden;

    zoom: 1;

}

.menu_left {

    float: left;

    width: 280px;

    margin-right: 20px;

}

.menu_right{

    float: left;

    width: 600px;

}(CSS)

これで縦に一列に並んでいた写真のレイアウトを変更できる。

---

overflowプロパティとzoomプロパティ

overflow プロパティを使ってもフロート解除ができます。zoomプロパティはインターネットエクスプローラ6/7でoverflowプロパティが動作しない場合があり、zoomプロパティが書かれていると動作することがあるとか。

 ちなみにzoomプロパティは本来ボックスを拡大縮小するためのプロパティです。しかし本来の機能で使われることはあまりない模様。

参考文献

スラスラわかるHTML＆CSSのきほん 第2版posted with ヨメレバ狩野 祐東 SBクリエイティブ 2018年04月16日 楽天ブックスAmazonKindle

前記事

読書日記　HTML&CSS齧ってみた。Part5（書籍：スラスラわかるHTML＆CSSのきほん 第2版）

CSS, CSSプロパティ, スラスラわかるHTML＆CSSのきほん, 読書日記