HTMLが理解できたら、次はCSSを学習しましょう。
この2つはセットで使うため、HTML+CSSでホームページの構成を作り込んでいくため、必ず必要な学習です。
簡単な理解
HTMLは、DOM構造を構築する役割で、CSSは、デザインや動きのアニメーション、HTMLタグの属性などをセットします。 HTMLのタグの装飾を行うCSSは、ホームページ作りには必須の技術でもあります。CSS ・Cascading Style Sheetsの略。 ・インターネットブラウザで表示されるHTMLタグのスタイルを設定することができる。 ・設定方法は、LINKタグと、STYLEタグと、HTMLタグに直接style属性で記述する、３パターンある。
基本CSS設定
1. 文字の色を赤色にする
文章の中の文字の色を赤色に変更します。文章の中の文字の色を<span style='color:red;'>赤色に変更</span>します。
2. 文字を太字にする
文章内の特定の単語を強調したい場合は、太字にするといいです。文章内の特定の単語を強調したい場合は、<span style='font-weight:bold;'>太字</span>にするといいです。
3. 文字を斜体にする
人名や品物などで、外国語のモノは、少し斜めに表示される、"斜体表示"にすると、カッコよく見えます。人名や品物などで、外国語のモノは、少し斜めに表示される、<span style='font-style:italic;'>"斜体表示"</span>にすると、カッコよく見えます。
4. HTMLタグに枠線をつける
DIVタグに黒い1px（ピクセル）の枠線を書きます。
<div style='border:1px solid black;'>DIVタグに黒い1px（ピクセル）の枠線を書きます。</div>
5. HTMLタグの背景色をつける
DIVタグに青色の背景色を書きます。（文字色を白にする）
<div style='background-color:blue;color:white'>DIVタグに青色の背景色を書きます。</div>
6. 文字のサイズを大きくする
特定の文字サイズを、30px（ピクセル）に変更します。特定の文字サイズを、<span style='font-size:30px;'>30px（ピクセル）</span>に変更します。
３パターンの記述方法
上記のサンプル文章を、書いたHTMLは、３つの方法でスタイルシートを設定することができるので、そのやり方をパターン別に解説します。 ※３つは、それぞれ設定方法は違いますが、設定後は同じ表示になります。<p class='text-1'>文章の中の文字の色を<span>赤色に変更</span>します。</p>
<p class='text-2'>文章内の特定の単語を強調したい場合は、<span>太字</span>にするといいです。</p>
<p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span>"斜体表示"</span>にすると、カッコよく見えます。</p>
<p class='text-4'>DIVタグに黒い1px（ピクセル）の枠線を書きます。</p>
<p class='text-5'>DIVタグに青色の背景色を書きます。（文字色を白にする）</p>
<p class='text-6'>特定の文字サイズを、<span>30px（ピクセル）</span>に変更します。</p>
1. LINKタグで設置
style.cssファイルを作り、次のコードを記述します。.text-1 span{
color:red;
}
.text-2 span{
font-weight:bold;
}
.text-3 span{
font-style:iralic;
}
.text-4{
border:1px solid black;
}
.text-5{
background-color:blue;
color:white;
}
.text-6 span{
font-size:30px;
}
次に、HTMLにLINKタグを設置します。
<link rel='stylesheet' href='style.css'/>
<p class='text-1'>文章の中の文字の色を<span>赤色に変更</span>します。</p>
<p class='text-2'>文章内の特定の単語を強調したい場合は、<span>太字</span>にするといいです。</p>
<p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span>"斜体表示"</span>にすると、カッコよく見えます。</p>
<p class='text-4'>DIVタグに黒い1px（ピクセル）の枠線を書きます。</p>
<p class='text-5'>DIVタグに青色の背景色を書きます。（文字色を白にする）</p>
<p class='text-6'>特定の文字サイズを、<span>30px（ピクセル）</span>に変更します。</p>
2. STYLEタグで設置
<style>
.text-1 span{
color:red;
}
.text-2 span{
font-weight:bold;
}
.text-3 span{
font-style:iralic;
}
.text-4{
border:1px solid black;
}
.text-5{
background-color:blue;
color:white;
}
.text-6 span{
font-size:30px;
}
</style>
<p class='text-1'>文章の中の文字の色を<span>赤色に変更</span>します。</p>
<p class='text-2'>文章内の特定の単語を強調したい場合は、<span>太字</span>にするといいです。</p>
<p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span>"斜体表示"</span>にすると、カッコよく見えます。</p>
<p class='text-4'>DIVタグに黒い1px（ピクセル）の枠線を書きます。</p>
<p class='text-5'>DIVタグに青色の背景色を書きます。（文字色を白にする）</p>
<p class='text-6'>特定の文字サイズを、<span>30px（ピクセル）</span>に変更します。</p>
3. HTMLタグに直接設置
<p class='text-1'>文章の中の文字の色を<span style='color:red;'>赤色に変更</span>します。</p>
<p class='text-2'>文章内の特定の単語を強調したい場合は、<span style='font-weight:bold;'>太字</span>にするといいです。</p>
<p class='text-3'>人名や品物などで、外国語のモノは、少し斜めに表示される、<span style='font-style:italic;'>"斜体表示"</span>にすると、カッコよく見えます。</p>
<p class='text-4' style='border:1px solid black;'>DIVタグに黒い1px（ピクセル）の枠線を書きます。</p>
<p class='text-5' style='background-color:blue;color:white;'>DIVタグに青色の背景色を書きます。（文字色を白にする）</p>
<p class='text-6'>特定の文字サイズを、<span style='font-size:30px;'>30px（ピクセル）</span>に変更します。</p>
0 件のコメント:
コメントを投稿