HTML/CSS1

4つの記号を覚えよう

〇文字の大きさ <h1>~</h1>   <h6>~</h6>

〇段落(改行) <p>~~</p>

〇リンクにとぶ <a>~</a> <a href=”URL”>リンク名</a>

〇画像を入れる <img src> <img scr =”画像URL”>

リストを作る(箇条書き)

〇基本形(黒ポチ)
<ul>
<li> ~~ </li>
<li> ~~ </li>
<li> ~~ </li>
</ul>

〇数字リスト
<ol>
<li> ~~ </li>
<li> ~~ </li>
<li> ~~ </li>
</ol>

〇その他リスト(丸数字)

<ul>
<li> ~~ </li>
<li> ~~ </li>
<li> ~~ </li>
</ul>

ハウツー箇条書き

 

文字の色

CSSで色、大きさ、配置を変える(CSSはHTMLとは別のファイルに書きます)

<h1>~</h1>ではさんだ部分の色を変えるときは、CSSファイルで色コード(#のついた番号)を指定します
h1{
color: #ff0000;
}

文字の大きさ

<h1>~</h1>ではさんだ部分の大きさを変えるときは、色と同じようにCSSファイルでフォントサイズ(font-size)を指定します(大きさには単位ピクセルpxをつけます)

h1{
font-size:  10px;
}

文字の高さ、幅

文字の高さはハイト(height)、横幅はウイドゥス(width)を使ってサイズを指定します(単位はpxを使います)
h1{
height: 500px;
width: 80px;
}

画像の高さ、幅

画像も文字と同じようにheight(高さ)とwidth(幅)で大きさを調整できます
img{
width: 500px;
height: 200px;
}

文字の種類

文字にはいろいろな種類があります。文字の種類を指定するときはフォントファミリー(font-family)を使います

h1{
font-family:  serif;
}

フォント名にスペースが入る場合は””で囲みます
h1{
font-family: “Avenir Next”;
}

〇文字の種類(フォントファミリー):例
明朝体:serif; YuMincho;
ゴシック体:sans-serif; “Lucida Grande”;

背景色を変える

文字部分の背景色は、文字色を変えるときに使ったcolorの代わりに、background-colorを使って変えられます
h1{
background-color: #ffd800;
}

リストの一文だけ色を変える

<HTML>
<ul>
<li class=”selected”>~~</li>
</ul>

<CSS>
classにCSSをつけるときはselectedの前にドット(.)を付けるのを忘れないように
.selected{
color: red;
}