STRIX | ストリックスマーケティング HP制作会社

STRIX | ストリックスマーケティング HP制作会社

疑似要素,beforeとafterの使い方

疑似要素とは

疑似要素には次のようなものがあります。

この疑似要素を使うと、HTMLには書かれていない要素もどきをCSSで作ることができます。「HTMLには表記したくないけど、デザイン的にちょっと工夫したい」というときに重宝してます。
ちなみに疑似要素の書き方は、css2では:(コロンを1回),css3では::(コロンを2回)と書き方が変わっています。疑似クラスの:hoverや:selectedは変わらず:(コロン1回)なので注意。

上記の結果

  • 疑似要素【::before】の練習
  • 疑似要素【::after】の練習
  • 疑似要素【::first-letter】の練習
  • 疑似要素【::first-line】の練習
    疑似要素【::first-line】の練習

htmlとCSSでパララックスページ作成

パララックス(視差)とは

【視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること】らしい。ホームページに奥行きを作りたいときに設定するといいみたい。

background-attachment:fixedはスマホで効かない

PCでパララックス効果を表現するには【background-attachment:fixed;】で行けるけど、なにせこのbackground-attachment:fixed;スマホだと普通にscrollしてしまいます。ですので今回は【position:sticky;】を使ってみようと思います。

htmlのコーディング

まずはmarkupから。一般的なタイプのhtmlをコーディング

cssの設定


.sticky {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
p {
	display: inline-block;
	font-size: 60px;
	padding: 0;
	margin: 0;
}
.header {
	background: #212E32;
	color: #fff;
	z-index: 100;
}
.content_1 {
	background: #85937A;
	z-index: 200;
}
.content_2 {
	background: #f0f;
	z-index: 300;
}
.content_3 {
	background: #00f;
	z-index: 400;
}
.footer {
	background: #0ff;
	z-index: 500;
}

demoはこちら