CSSを使用して魅力的な最初の行を作成する::first-line
CSS ::first-line pseudo-elementは、要素の最初の行のスタイルを設定するのに役立ちます
次の例は、CSS::first-line疑似要素を示しています。
例
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: darkorchid;
}
::first-line {
font-size: 2em;
color: black;
font-weight: bold;
text-shadow: 0 -10px grey;
}
</style>
</head>
<body>
<article>
<p>Donec rutrum a erat vitae interdum. </p>
<p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
</article>
</body>
</html> 出力
これにより、次の結果が生成されます-
例
<!DOCTYPE html>
<html>
<head>
<style>
article {
text-align: center;
}
::first-line {
box-shadow: inset 0 0 13px orchid;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum. </h2>
<p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex
vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec
semper ligula ac consequat scelerisque.</p>
<p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
</article>
</body>
</html> 出力
これにより、次の結果が生成されます-
-
CSS Flexboxを使用したスライダー/カルーセルの作成（ループ内に無限に繰り返されるアイテムを含む）
JavaScriptを使用してCSSFlexboxを使用して、無限にスクロールするスライダーを作成できます。 例 次の例は、CSSを使用したカルーセルを示しています。 <!DOCTYPE html> <html> <head> <style> img { width: 100%; &nb
-
CSSを使用して魅力的な最初の行を作成する::first-line
CSS ::first-line pseudo-elementは、要素の最初の行のスタイルを設定するのに役立ちます 次の例は、CSS::first-line疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: darkorchid; } ::first-line { font-size: 2em; co