カテゴリー別アーカイブ: 早川 百合子

最初の行にだけスタイルを適用

:first-line擬似要素 で、最初の行にだけスタイルを適用できます。

HTML

<p>最初の行にのみ、スタイルを適用します。<br />
2行目のテキスト<br />
3行目のテキスト</p>

CSS

p:first-line {color:blue; font-weight:bold;}

※今回、最初の行にのみ、青色、太字 と指定しています。

表示
firstline
 
 
 
最初の文字のみスタイルを適用させたい場合は、:first-letter擬似要素 を使用しましょう。

文字に下線を引く

文字に下線を引く場合、text-decorationプロパティを使用します。

値を underline とすると、テキストに下線が付きます。

昔は <U> タグでテキストを囲み、下線を表示させていましたが、
現在はこの方法は非推奨とされていますので、CSSで指定するのが良いでしょう。
 
CSS

p.sample {text-decoration: underline;}

 
HTML

<p class="sample">サンプルテキスト</p>

 
表示

サンプルテキスト

 
 
 

インデント幅を指定する

一行目のインデント幅を指定する時には、text-indentプロパティで指定しましょう。

インデントとは、「字下げ」のこと。
先頭の文字の頭に空白を入れて、一文字分下げることです。

pxやemなどの単位をつけて数値で指定する方法と、%で指定する方法があります。
負の値を指定することも可能です。

CSS

p.sample1 {text-indent: 10px;}
p.sample2 {text-indent: -10px;}

HTML

<p class="sample1">インデント幅を10pxで指定しています。サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p class="sample2">インデント幅をマイナス10pxで指定しています。サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

インデント幅を10pxで指定しています。サンプルテキストサンプルテキストサンプルテキストサンプルテキスト

インデント幅をマイナス10pxで指定しています。サンプルテキストサンプルテキストサンプルテキストサンプルテキスト

背景画像を指定する

背景画像を指定したい場合、background-imageプロパティで指定しましょう。

背景に使いたい画像を用意します。
bg
 
今回、「bg.gif」という名前をつけ、「images」という名前のフォルダ内に保存しました。
 
HTML

<div class="sample">
<p>サンプルテキスト</p>
</div>

 
 
CSS

div.sample{
  background-image: url("images/bg.gif");
  width:300px;
  height:30px;
}

p{
  color:white;
  padding:10px;
}

 
 
表示
sample
 
 
※背景画像を指定する場合、その上の文字の色についても気を付けましょう。
似たような色や、色のトーンが近い場合、読みにくくなってしまいます。

背景色を指定する

背景色を指定したい場合、background-colorプロパティで指定しましょう。

値は、以下のように指定ができます。
・inherit :一番近い上位要素の色を継承
・transparent:透明
・色の値を指定
 
 
HTML

<div class="sample">
<p>サンプルテキスト</p>
</div>

 
 
CSS

div.sample{
  background-color:red;
  width:300px;
  height:30px;
}

 
 
表示

サンプルテキスト

 
 
※背景色を指定する場合、その上の文字の色を考えて指定しましょう。
似たような色や、色のトーンが近い場合、読みにくくなってしまいます。

テーブルのセル内の左右の位置

table内のセルである、td内のテキストや画像などの左右の位置は、
text-alignプロパティで指定します。

CSSの記述は、以下の通り。
text-align:left; 左揃え
text-align:center; 中央揃え
text-align:right; 右揃え
 
HTML

<table>
 <tr>
  <td class="sample1">左揃えのテキスト</td>
 </tr>
 <tr>
  <td class="sample2">中央揃えのテキスト</td>
 </tr>
 <tr>
  <td class="sample3">右揃えのテキスト</td>
 </tr>
</table>

CSS

td.sample1{
	text-align:left;
}

td.sample2{
	text-align:center;
}

td.sample3{
	text-align:right;
}

表示

左揃えのテキスト
中央揃えのテキスト
右揃えのテキスト

※ブロック要素をセンタリングしたい場合は、
margin-right:auto
margin-left:auto
を使いましょう。

センタリング(ブロック要素)

p、div、tableなどのブロック要素をセンタリングしたい場合、
センタリングしたい要素の左右のマージンをautoにしましょう。

CSSには
margin-right:auto
margin-left:auto
と記述します。
 
 
HTML

<div class="sample_area">
<p class="sample_inner">テキストテキスト</p>
</div>

CSS

div.sample_area{
	border:black;
	background:aqua;
	width:500px;
	height:40px;
}

p.sample_inner{
	margin-right:auto;
	margin-left:auto;
	border:black;
	background:yellow;
	width:200px;
	height:30px;
}

表示
センタリング

※よくある間違いとして、text-align:center としてしまいがちなのですが、
これはインライン要素に対し使用するものですので、
ブロック要素自体をセンタリングしたいというときに使ってもうまくいきません。
ブロック要素に対しtext-align:centerを指定した場合は、その中のインライン要素が中央揃えで表示されます。

最初の文字にだけスタイルを適用

:first-letter擬似要素 で、文字の最初の一文字目にだけスタイルを適用できます。
雑誌でよく見かける、イニシャルキャップという方法をWebで表現したい時に使いましょう。

※ブロックレベル要素の最初の文字にのみ適用されます。インライン要素では適用されません。

HTML

<p class="sample1">最初の文字にのみ、スタイルを適用します。</p>

 
 
 
CSS

p.sample:first-letter {font-weight:bold; font-size:30px;}

 
 
表示
first-letter

リストのマーク

list-style-typeプロパティにより、リストのマークを指定することができます。

none 無し
disc 黒丸
circle 白丸
square 四角
decimal 数字
decimal-leading-zero 数字(頭に0をつけた数字)
lower-roman ローマ数字(小文字)
upper-roman ローマ数字(大文字)
lower-greek ギリシア文字(小文字)
lower-alpha アルファベット(小文字)
upper-alpha アルファベット(大文字)
lower-latin ラテン文字(小文字)
upper-latin ラテン文字(大文字)
cjk-ideographic 漢数字
hiragana ひらがな
katakana かたかな

HTML

<ul class="sample1"><li>リストのマーク無し</li></ul>
<ul class="sample2"><li>リストのマーク disc</li></ul>
<ul class="sample3"><li>リストのマーク circle</li></ul>
<ul class="sample4"><li>リストのマーク square</li></ul>
<ol class="sample5"><li>リストのマーク decimal</li></ol>
<ol class="sample6"><li>リストのマーク decimal-leading-zero</li></ol>
<ol class="sample7"><li>リストのマーク lower-roman</li></ol>
<ol class="sample8"><li>リストのマーク upper-roman</li></ol>
<ol class="sample9"><li>リストのマーク lower-greek</li></ol>
<ol class="sample10"><li>リストのマーク lower-alpha</li></ol>
<ol class="sample11"><li>リストのマーク upper-alpha</li></ol>
<ol class="sample12"><li>リストのマーク lower-latin</li></ol>
<ol class="sample13"><li>リストのマーク upper-latin</li></ol>
<ol class="sample14"><li>リストのマーク cjk-ideographic</li></ol>
<ol class="sample15"><li>リストのマーク hiragana</li></ol>
<ol class="sample16"><li>リストのマーク katakana</li></ol>

CSS

ul.sample1{
	list-style-type : none;
}

ul.sample2{
	list-style-type : disc;
}

ul.sample3{
	list-style-type : circle;
}

ul.sample4{
	list-style-type : square;
}

ol.sample5{
	list-style-type : decimal;
}

ol.sample6{
	list-style-type : decimal-leading-zero;
}

ol.sample7{
	list-style-type : lower-roman;
}

ol.sample8{
	list-style-type : upper-roman;
}

ol.sample9{
	list-style-type : lower-greek;
}

ol.sample10{
	list-style-type : lower-alpha;
}

ol.sample11{
	list-style-type : upper-alpha;
}

ol.sample12{
	list-style-type : lower-latin;
}

ol.sample13{
	list-style-type : upper-latin;
}

ol.sample14{
	list-style-type : cjk-ideographic;
}

ol.sample15{
	list-style-type : hiragana;
}

ol.sample16{
	list-style-type : katakana;
}

 
 
表示

  • リストのマーク無し
  • リストのマーク disc
  • リストのマーク circle
  • リストのマーク square
  1. リストのマーク decimal
  1. リストのマーク decimal-leading-zero
  1. リストのマーク lower-roman
  1. リストのマーク upper-roman
  1. リストのマーク lower-greek
  1. リストのマーク lower-alpha
  1. リストのマーク upper-alpha
  1. リストのマーク lower-latin
  1. リストのマーク upper-latin
  1. リストのマーク cjk-ideographic
  1. リストのマーク hiragana
  1. リストのマーク katakana

 
 
【リストのタグについて】
olは番号付きリスト(ordered list)、
ulは順序のつかない、つまり、番号の付かないリストのことです(unordered list)。

文字を左右に寄せたい、中央に配置したい時

text-alignプロパティを使って、文字を右に寄せたり左に寄せたり、
中央配置することができます。

left :左寄せ
right :右寄せ
center :中央
justify :均等割付け

HTML

<p class="sample01">テキスト(左寄せ)</p>
<p class="sample02">テキスト(右寄せ)</p>
<p class="sample03">テキスト(中央)</p>
<p class="sample04">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト(均等割付)</p>

CSS

p.sample01 {text-align: left; }
p.sample02 {text-align: center; }
p.sample03 {text-align: right; }
p.sample04 {text-align: justify; text-justify: distribute-all-lines; }

表示

テキスト(左寄せ)

テキスト(右寄せ)

テキスト(中央)

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト(均等割付)

※上記の表示例は分かりやすいよう枠線を付けています。