text-align＆text-justify CSSプロパティを使用してテキストを揃える方法は？
CSS text-justify プロパティは、要素の位置合わせタイプを指定するのに役立ちます。 text-alignプロパティは、要素内のテキストの水平方向の配置を設定します。
例
次の例は、CSSのtext-justifyプロパティを示しています。
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 3%;
background-color: peachpuff;
text-align: justify;
}
p:first-of-type{
text-justify: inter-character;
background-color: moccasin;
}
</style>
</head>
<body>
<article>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac. </p>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac.</p>
</article>
</body>
</html> 出力
これにより、次の結果が生成されます-
例
<!DOCTYPE html>
<html>
<head>
<style>
dl {
margin: 3%;
background-color: lightcoral;
text-align: justify;
}
#example{
text-justify: inter-character;
background-color: snow;
}
</style>
</head>
<body>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p id="example">Nullam in fringilla ex, at sagittis erat.
Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
</body>
</html> 出力
これにより、次の結果が生成されます-
-
CSSを使用してテキストを含むコメントボックスを作成する方法
コメントボックスは、clip-pathプロパティを使用して作成できます 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector { clip-path: /*value*/ } 例 次の例は、CSSを使用してコメントボックスを作成する方法を示しています。 <!DOCTYPE html> <html> <head> <style> .cb {
-
CSSを使用してリスト内の弾丸をアニメーション化する方法
順序付けられていないリストで箇条書きのスタイルを設定するには、リストスタイルのporを使用できます 構文 CSSli-styleプロパティの構文は次のとおりです- li { list-style: /*value*/ } 例 次の例は、CSSのliスタイルのプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> li {