CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでdisplayのデフォルト値を変更する方法

CSSでは、すべての要素にデフォルトのdisplay値があらかじめ設定されています。このデフォルト値は、displayプロパティの値を明示的に指定することで、自由に変更できます。

例えば、リスト項目は通常ブロックレベルで縦に並びますが、display: inline;を指定することで横並びに変えることができます。これはナビゲーションメニューや水平メニューを作成する際によく使われるテクニックです。

それでは、水平メニューに対してinline表示を設定する具体的な例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: orange;
   color: white;
}
li {
   display: inline;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>Following are the list of resources:</p>
<ul>
<li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>

コードのポイント

  • p要素： 背景色をオレンジ、文字色を白に設定し、説明文を目立たせています。
  • li要素： display: inline; を指定することで、本来ブロックレベルとして縦方向に並ぶリスト項目が、インライン要素として横一列に並びます。

表示結果

CSSでdisplayのデフォルト値を変更する方法

このように、リスト項目が横並びのメニューとして表示されます。displayプロパティを活用すれば、HTMLの構造を変更することなく、見た目だけを柔軟にコントロールできるのがCSSの強みです。

  1. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用

  2. CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

    画像スプライト（Image Sprite）とは 画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。 CSSでスプライト画像からアイコンを表示する仕組み CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。 backgroundプロパティでスプライト画像