CSSとは

HTMLよりも後に生まれた言語で、広く一般に使われるようになった時期は明確に言えませんが、ホームページ制作者の間で徐々に浸透して広がりました。

目次

CSSは、デザインとレイアウトを担当します

具体的には、HTMLで作成されたウェブページの要素(テキスト、画像、背景など)に対して、文字の色やフォント、サイズ、位置、背景色、余白、枠線などのデザイン要素を指定することができます。

CSS(シーエスエス、Cascading Style Sheets)は、HTMLやXMLなどのマークアップ言語(*1)で書かれたウェブページのデザインやレイアウトを装飾するためのスタイルシート言語(*2)です。

(*1)マークアップ言語とは

マークアップ言語は、文書やデータの構造を記述するための言語です。
通常、マークアップ言語は、タグ(特定の形式の注釈)を使用して文書内の要素を識別し、それらの要素に意味を付けます。
マークアップ言語は、コンピューターやブラウザが文書の構造を理解し、正しく表示するために使用されます。
マークアップ言語を使うことで、文章や文書の構造を明確にすることができ、ウェブページや文書のデザインやレイアウトを制御することができます。

(*2)スタイルシート言語とは

スタイルシート言語は、HTMLやXMLなどのマークアップ言語で作成された文書の見た目やスタイルを設定するために使用される言語です。つまり、スタイルシート言語を使うことで、Webページやドキュメントのレイアウト、フォント、色、テキストのサイズなどを制御することができます。

Webページの見た目を設定するだけでなく、文書の構造を分かりやすくするためのマークアップ言語としても使用されます。例えば、HTMLのセマンティックな要素を使うことで、見た目とともに文書の構造を示すことができます。

初心者の場合は、CSSの基本的なプロパティを学び、Webページのスタイルを変更してみることから始めると良いでしょう。また、CSSのプロパティや構文については、オンラインのドキュメントやチュートリアルが豊富にありますので、それらを参考にしながら学びましょう。

CSSはデザイン要素|Joshiba MAGAZINE Created by Mami

[初心者のためのCSSの代表的なコード]

CSSには、さまざまなコードがありますが、初心者にとっては、基本的なコードを紹介します。

1.フォントの設定

body {
font-family: “Helvetica Neue”, Arial, sans-serif;
font-size: 40px;
font-weight: 400;
}

あいうえお

2.色の設定

h1 {
color: #06f;
}

p {
color: rgba(0, 0, 0, 0.8);
}

a {
color: blue;
}

あいうえお

3.背景色の設定

body {
background-color: #f8f8f8;
}

p {
color: rgba(0, 0, 0, 0.8);
}

a {
color: blue;
}

あいうえお

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

名刺、チラシ、パンフレット、ロゴ制作。
WEBサイトの制作を行なっています。
ハンドメイド作家としても活動しており、大分市内3ヶ所に委託販売させて頂いております。
エステティシャンとして「VIOTERRACE」にてエステをしております。浅田限定クーポンお見逃しなく!

コメント

コメントする

目次