プログラミング入門講座⑥「CSSを書いてみよう」

公開日：2016-3-8 最終更新日：2016-4-21
プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ

Pocket

プログラミング入門講座の第6回です。
cssの基礎知識をつけておきたい方は、先に

をお読みください。

1 まずはfirebugをインストール
2 CSSの基本構成
3 float
4 clearfix

まずはfirebugをインストール

まずはFirefoxにfirebugプラグインをインストールしてください。
Firebug : Add-ons for Firefox

このツールはCSSがきちんと作動しているかのチェックのほか、ブラウザ上から一時的にスタイルを追加して表示を検討することができます。（保存はされませんので検討が終わったらコピペして、CSSファイルに書き込んでください。）

CSSの基本構成

以前の講座でご紹介したように、CSSは宣言ブロックが羅列されたものです。CSSには後から書かれた宣言が、前に書かれた宣言を上書きする特性があるため、土台となる宣言ブロックほど上に、各コンテンツに個別に設定するものほど下に記述するのが一般的です。ですからCSSの基本構成は上から順に概ね次のようになります。

CSSの初期化
ページ全体にかかわるスタイル
繰り返し使われるスタイル
個別に部分ごとに使われるスタイル

CSSの初期化

ブラウザには、CSSなしでもHTMLが読めるよう、タグに初期値のスタイルが設定されています。問題は、初期値がブラウザごとに違うということです。そのため、CSSを使用する場合には、どのブラウザでも差異がなくなるよう一旦スタイルを初期化して揃えます。初期化の方法はコーディングの先人たちが試行錯誤しながら、WEBに公開しています。とくに有名なのは初期化を最初に考案したEric A. Meyer氏のreset.cssです。
CSS Tools: Reset CSS

他にもYahooのYUI cssなど「css 初期化」で検索すればいろいろとヒットします。それらは概ねコピペして流用可能なライセンスになってますので、いろいろ試して、カスタマイズし自分に合ったものを使用します。

ページ全体にかかわるスタイル

次に、リンク色、全体の文字色、見出しなど、ページ全体のベースになるスタイルを記述します。著者の場合は主に、body、h1～h6、p、ul、table等、要素名単体をセレクタにする宣言ブロックをここに記述しています。この内容はCSS初期化とも一部重複しますので、その場合にはCSS初期化時に直接記述する場合もあります。

繰り返し使われるスタイル

次には多くの場合、サイト内で繰り返し利用される汎用的なスタイルが設置されます。例えば、margin、padding、textlign、float等です。これらの汎用スタイルは、1宣言を1宣言ブロックとして記述されることが多いです。
<記述例>

mt20{
 margin-top:10px;
}
.mb20{
 margin-bottom:20px;
}

mt20{

margin-top:10px;

}

.mb20{

margin-bottom:20px;

}

この例にもありますが「.mb数字」、「.mt数字」はそれぞれmargin-bottom、margin-topだけのクラスを作る時に使われる代表的な命名です。.mr数字、.ml数字、.pb数字、.pt数字、.pr数字、pl数字も同様（p~はpadding）で、多くのCSSで多くのコーダーに使われている命名ですので、表記を合わせると、引き継ぎなど他者にコードを見せる場合にスムーズでしょう。

個別に部分ごとに使われるスタイル

最後に、個別の箇所ごとに使用する、汎用性の低いスタイルを記述します。これらのスタイルは、これまでのスタイルが上書きされた後の最終的な表示状態のスタイルとなりますので、CSSの読み込み順が後になる、下の方に書く必要があるのです。また、より細かい制御のためにはセレクタの複数指定を利用するといいでしょう。

各プロパティについて

CSSのプロパティは大変数が多いため、個別の使い方は下記サイトを参照してください。
スタイルシート［CSS］/プロパティ一覧 – TAG index Webサイト

また、こちらのサンプルコードをご覧いただければ、主なプロパティが確認できます。

@charset “UTF-8″;
/*css初期化—————————————————————————————————————-*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0;
}

html, body {
 margin: 0;
 width: 100%;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

fieldset, img {
 border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
 font-style: normal;
 font-weight: normal;
}

ol, ul {
 list-style: none;
}

img, li img, ol img {
 vertical-align: bottom;
}

caption, th {
 text-align: left;
}

h1, h2, h3, h4, h5, h6 {
 font-size: 100%;
 font-weight: normal;
}

q:before, q:after {
 content: “;
}

abbr, acronym {
 border: 0;
}

body {
 font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’, ‘メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’,sans-serif;
 font-size: 14px;
 color: #000;
}

p {
 font-size: 14px;
 text-align: left;
}

/* 基本スタイル */

body{
 width:700px;
 margin-left:auto;
 margin-right:auto;
 color: #555;
}

h2{
 font-size:24px;
 font-weight:bold;
 margin:20px 0px;
 padding:5px 0 0 10px;
 color:#555;
 border-bottom:4px solid #93BF1E;
 /*border-left:10px solid #93BF1E;*/
 background:#f8f8f8;
}

h2:before{
 content:”●”;
 color:#93BF1E;
 margin-right:10px;
}

h3{
 font-size:18px;
 font-weight:bold;
 color:#444444;
 border-left:6px solid #C33;
 padding-left:10px;
 color:#C33;
 margin-bottom:10px;
}

p{
 margin-bottom:20px;
}

strong{
 font-weight:bold;
}

/* 汎用スタイル */

.clearfix {
 display: inline-block;
 min-height: 1px;
}

* html .clearfix {
 height: 1px;
}

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: “.”;
 clear: both;
 height: 0;
}

.f_left{
 float:left;
}

.f_right{
 float:right;
}

.full{
 width:100%;
}

.half{
 width:49%;
}

.center{
 text-align:center;
}

.box{
 background:#f8f8f8;
}

.mr20{
 margin-right:20px;
}

/* 個別スタイル */

#header{
 font-size:30px;
 font-weight:bold;
 color:#FFF;
 background:#93BF1E;
 text-align:center;
 margin-top:15px;
 padding:10px;
}

#footer{
 background:#666;
 color:#FFF;
 text-align:center;
 margin:20px 0 0 0;
 padding:5px 0;
}

.list_sell{
 list-style-type:disc;
 list-style-position:inside;
 padding:10px 20px;
}

.list_famer dt{
 display:inline-block;
 width:80px;
 font-weight:bold;
 margin-bottom:10px;
 background:#ddd;
 text-align:center;
}

.list_famer dd{
 display:inline-block;
 margin-bottom:10px;
 width:600px;
}

.list_access{
 list-style:decimal inside;
}

.list_access li{
 border-bottom:1px dotted #ddd;
}

.table_company{
 width:100%;
}

.table_company td,.table_company th{
 border:1px solid #ddd;
 padding:7px;
}

.table_company td,.table_company th{
 border:1px solid #ddd;
 padding:7px;
}

.table_company th{
 background:#f8f8f8;
 font-weight:bold;
}

.table_company .row_b td{
 background:#fcfcfc;
}

.table_company .row_b th{
 background:#f3f3f3;
}

.table_staff{
 width:100%;
}

.table_staff td,.table_staff th{
 border:1px solid #ddd;
 padding:7px;
}

.table_staff thead th{
 /*background: #fbaa2b;*/
 background: #C33;
 color:#5c361d;
 color:#FFF;
}

.table_staff th{
 background:#f8f8f8;
 font-weight:bold;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

@charset “UTF-8″;

/*css初期化—————————————————————————————————————-*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {

margin: 0;

padding: 0;

}

html, body {

margin: 0;

width: 100%;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset, img {

border: 0;

}

address, caption, cite, code, dfn, em, strong, th, var {

font-style: normal;

font-weight: normal;

}

ol, ul {

list-style: none;

}

img, li img, ol img {

vertical-align: bottom;

}

caption, th {

text-align: left;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-weight: normal;

}

q:before, q:after {

content: “;

}

abbr, acronym {

border: 0;

}

body {

font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’, ‘メイリオ’,Meiryo,’ＭＳＰゴシック’,’MS PGothic’,sans-serif;

font-size: 14px;

color: #000;

}

p {

font-size: 14px;

text-align: left;

}

/* 基本スタイル */

body{

width:700px;

margin-left:auto;

margin-right:auto;

color: #555;

}

h2{

font-size:24px;

font-weight:bold;

margin:20px 0px;

padding:5px 0 0 10px;

color:#555;

border-bottom:4px solid #93BF1E;

/*border-left:10px solid #93BF1E;*/

background:#f8f8f8;

}

h2:before{

content:”●”;

color:#93BF1E;

margin-right:10px;

}

h3{

font-size:18px;

font-weight:bold;

color:#444444;

border-left:6px solid #C33;

padding-left:10px;

color:#C33;

margin-bottom:10px;

}

margin-bottom:20px;

}

strong{

font-weight:bold;

}

/* 汎用スタイル */

.clearfix {

display: inline-block;

min-height: 1px;

}

* html .clearfix {

height: 1px;

}

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: “.”;

clear: both;

height: 0;

}

.f_left{

float:left;

}

.f_right{

float:right;

}

.full{

width:100%;

}

.half{

width:49%;

}

.center{

text-align:center;

}

.box{

background:#f8f8f8;

}

.mr20{

margin-right:20px;

}

/* 個別スタイル */

#header{

font-size:30px;

font-weight:bold;

color:#FFF;

background:#93BF1E;

text-align:center;

margin-top:15px;

padding:10px;

}

#footer{

background:#666;

color:#FFF;

text-align:center;

margin:20px 0 0 0;

padding:5px 0;

}

.list_sell{

list-style-type:disc;

list-style-position:inside;

padding:10px 20px;

}

.list_famer dt{

display:inline-block;

width:80px;

font-weight:bold;

margin-bottom:10px;

background:#ddd;

text-align:center;

}

.list_famer dd{

display:inline-block;

margin-bottom:10px;

width:600px;

}

.list_access{

list-style:decimal inside;

}

.list_access li{

border-bottom:1px dotted #ddd;

}

.table_company{

width:100%;

}

.table_company td,.table_company th{

border:1px solid #ddd;

padding:7px;

}

.table_company td,.table_company th{

border:1px solid #ddd;

padding:7px;

}

.table_company th{

background:#f8f8f8;

font-weight:bold;

}

.table_company .row_b td{

background:#fcfcfc;

}

.table_company .row_b th{

background:#f3f3f3;

}

.table_staff{

width:100%;

}

.table_staff td,.table_staff th{

border:1px solid #ddd;

padding:7px;

}

.table_staff thead th{

/*background: #fbaa2b;*/

background: #C33;

color:#5c361d;

color:#FFF;

}

.table_staff th{

background:#f8f8f8;

font-weight:bold;

}

ここで使われている主要なプロパティは下記になります。

background	font-family	margin-left
border	font-size	margin-right
border-bottom	font-style	margin-top
border-left	font-weight	min-height
border-spacing	height	padding
border-collapse	list-style	padding-left
clear	list-style-position	text-align
color	list-style-type	vertical-align
content	margin	visibility
display	margin-bottom	width
float

少しだけ、実践的なCSSコーディングに触れてみます。

float

floatは要素を表示の流れから浮かせるプロパティで、ブロックレベル要素のまわりにテキストを回り込ませたい場合や、本来縦並びになるブロックレベル要素を横並びにしたい場合に使います。

注意しなければならないのは、floatを設定した場合、設定した要素の次の要素はfloatされた要素に回り込もうとするという点です。次のような場合注意が必要です。下記はCSSの適用前です。

下記は想定していた表示です。

下記は失敗した表示です。

この場合、タグ以前の2つの要素がfloatされているため、タグのテキストは回り込もうとして、予期せぬ位置に入り込んでしまします。

正しい表示にするためには、タグにclearというプロパティをかける必要があります。これを回り込みの解除又はフロート解除と呼びます。

しかし、clearを使ったフロート解除は、floatした要素の次の要素に頼るため、コンテンツの変更に弱い欠点があります。そこで考えられたのが.clearfixです。

clearfix

.clearfixは、フロート解除の役割をfloatした要素の親要素に背負わせるクラスです。
<記述例>

clearfix {
 display: inline-block;
 min-height: 1px;
}
* html .clearfix {
 height: 1px;
}
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: “.”;
 clear: both;
 height: 0;
}