CSSの使い方

TOP > CSS >リンク(Aタグ)をCSSで設定する(背景・下線・文字サイズなど)技
このエントリーをはてなブックマークに追加

Aタグにスタイルを設定する簡単な例①

:first-child擬似クラス …… 最初に現れる子要素にスタイルを適用する :first-line擬似要素 …… 要素の最初の行にスタイルを適用する :first-letter擬似要素 …… 要素の最初の文字にスタイルを適用する

最初の文字だけ大きくする

最初の文字が大きくなります。

サンプルソースを表示

CSS

p.first_char:first-letter{
	font-weight:bold;
	font-size:32px;
}

HTML

<p class="first_char">最初の文字が大きくなります。</p>

最初の行だけ大きくする

最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。

サンプルソースを表示

CSS

p.first_line:first-line{
	font-weight:bold;
	color:navy;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

最初の行だけ大きくする

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

.sample1 p:first-child {
  font-weight:bold;
  color:navy;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

偶数行だけ大きくする

:nth-child(n)　･･･　n番目の要素に適用 :nth-child(odd)　･･･　奇数番目の要素に適用 :nth-child(2n+1)　･･･　奇数番目の要素に適用 :nth-child(even)　･･･　偶数番目の要素に適用 :nth-child(2n)　･･･　偶数番目の要素に適用 :nth-child(3n)　･･･　3,6,9,12…番目の要素に適用 :nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

.sample2 p:nth-of-type(2n+1) {
  font-weight:bold;
  color:navy;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

偶数行だけ大きくする

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

.sample2 p:nth-of-type(2n+1) {
  font-weight:bold;
  color:navy;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

文章内の最初の文字を1文字下げる

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

p.sample4 {
	text-indent: 1em;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

長い単語やURLを途中で折り返す

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

p.sample4 {
	text-indent: 1em;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

長い単語やURLの表示を途中でやめる

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

p.sample4 {
	text-indent: 1em;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

単語を途中で折り返さない

最初のp要素にだけ適用されます。

最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます最初のp要素にだけ適用されます。

サンプルソースを表示

CSS

p.sample4 {
	text-indent: 1em;
}

HTML

<p class="first_line">最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。最初の行が大きくなります。</p>

リンクに関するスタイルシートの技