目次
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
前記事
コメント