5分でCSSを学ぶ-初心者向けのチュートリアル

Webの設計言語に関する簡単なチュートリアル。

CSS(Cascading Style Sheets)は、Webページの見栄えを良くするものです。これは、最新のWeb開発に不可欠な部分であり、Webデザイナーや開発者にとって必須のスキルです。

この記事では、CSSの使用を開始するのに役立つ簡単な紹介をします。

また、Scrimbaで無料のフルレングスCSSコースを開始しました。ここをクリックしてチェックしてください。

HTMLの基本を理解していることを前提としていますが、それ以外に、このチュートリアルの前提条件はありません。

入門

プロジェクトにCSSを含める方法を学ぶことから始めましょう。通常、これを行うには3つの方法があります。

1.インラインCSS

まず、CSSをHTML要素に直接含めることができます。このために、style属性を利用してから、プロパティを提供します。

Hello world!

ここでは、のプロパティを指定しcolor、値をblueに設定します。これにより、次のようになります。

style必要に応じて、タグ内に複数のプロパティを設定することもできます。ただし、HTMLに大量のCSSが含まれていると、状況が乱雑になり始めるため、このパスを続行したくありません。

これが、CSSを含める2番目の方法が導入された理由です。

2.内部CSS

CSSを含めるもう1つの方法は、HTMLドキュメントのセクションのstyle要素を使用することheadです。これは内部スタイリングと呼ばれます。

  h1 { color: blue; }   

style要素では、要素を選択してHTML要素にスタイルを設定し、スタイル属性を指定できます。上記colorh1要素にプロパティを適用したのと同じです。

3.外部CSS

CSSを含めるための3番目で最も推奨される方法は、外部スタイルシートを使用することです。次のように、.css拡張子が付いたスタイルシートを作成し、そのリンクをHTMLドキュメントに含めます。

上記のコードではstyle.csslink要素を使用してファイルのリンクを含めています。次に、すべてのCSSをと呼ばれる別のスタイルシートに記述して、style.css簡単に管理できるようにします。

h1 { color: blue; } 

このスタイルシートは他のHTMLファイルにもインポートできるため、再利用性に優れています。

CSSセレクター

前に説明したように、CSSはHTML要素のスタイル設定に使用される設計言語です。また、要素のスタイルを設定するには、最初に要素を選択する必要があります。これがどのように機能するかをすでに垣間見ましたが、CSSセレクターについてもう少し深く掘り下げて、HTML要素を選択する3つの異なる方法を見てみましょう。

1.要素

HTML要素を選択する最初の方法は、名前を使用することです。これは、上記で行ったことです。それがどのように機能するか見てみましょう:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

上記の例はほとんど自明です。、などのさまざまな要素を選択しh1、それらにさまざまなスタイル属性を与えています。コントロールのテキストのサイズは、テキストの色を設定し、要素の周囲に間隔が追加されます。pdivfont-sizecolormargin

2.クラス

HTML要素を選択する別の方法は、class属性を使用することです。HTMLでは、要素にさまざまなクラスを割り当てることができます。各要素は複数のクラスを持つことができ、各クラスは複数の要素にも適用できます。

実際の動作を見てみましょう。

This is heading

 .container { margin: 10px; } 

上記のコードでは、のクラスをcontainerdiv要素に割り当てています。スタイルシートでは、.classNameフォーマットを使用してクラスを選択し、10pxマージンを与えます。

3.ID

クラスと同様に、IDを使用してHTML要素を選択し、それらにスタイルを適用することもできます。クラスとIDの唯一の違いは、1つのIDを1つのHTML要素にのみ割り当てることができることです。

This is a paragraph

 #para1 { color: green; font-size: 16px; } 

上記の例は、段落要素にIDを割り当て、後でスタイルシートのIDセレクターを使用して段落を選択し、それにスタイルを適用する方法を示しています。

フォントと色

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS is Coooooool!!!!

.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.

Conclusion

You might feel a bit overwhelmed by all this information, but don’t worry.

Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.