Tag Archive : CSS

/ CSS

9章まとめ

今回は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: 太さ スタイル 色;

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


2コラムレイアウト

書式

.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

前記事

今回は7章と8章の要約をしていきます。

7章要約

今回はCSSの基礎なので実習だったところだけまとめていきます。

外部CSS

CSSは外部ファイルに記述することが一般的なので外部ファイルに保存します。(その方が管理しやすい。)

HTMLとCSSをリンク

書式:<link rel=“stylesheet” type=“text/css” href=“(CSSファイルのパス)”>

8章要約


プロパティ

CSSにはさまざまなプロパティがあります。

background-color:背景色指定。

color:色指定。

font-size:フォントサイズ。文字の大きさ。

line-height:行間の幅を指定する。

図1 ボーダーのプロパティ
図2 ボーダーのプロパティ(続き)
画像は「スラスラわかるHTML&CSSのきほん 第2版」より引用

displayプロパティ

これを使って一列に並べるなど整列が出来る。

書式

display:inline;(横一列になる)


list-style-typeプロパティ

・の表示を消したりできる。

書式

list-style-type:none;(・を表示しない)


background-imageプロパティ

背景を変えられる。画像のパスはCSSファイルから相対パスを指定します。

書式

background-image:url(画像のパス)


カスケード順序

タイプセレクタ<classセレクタ<idセレクタ

classセレクタやidセレクタが含まれているとタイプセレクタ(id属性やclass属性が記述されていない)よりもそちらを優先して適用されます。


書籍紹介

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

次記事

前記事