記事の作成2(実践初級②)

HTML、CSS初級➁をご覧になった方はこちらで実践を行ってみましょう！

実践初級①での応用も少し使っていこうと思いますので復習にも含めて学んでいきましょう。

早速ですが今回はこのようなものを作っていこうと思います。

タグの配置決め

前回と同様にタグの配置から洗い出してみましょう！

1.見出しタグでタイトルをつける

2.ulタグでdlタグをリスト化する

3.dlタグ内にdtタグでタイトル、ddタグに画像と説明をつける

HTMLコード

<head>

</head>

<body>

<h1>about</h1>

<ul>

<li>

<dl>

<dt>1.title

<dd>

</dd>

</dt>

</dl>

</li>

<li>

<dl>

<dt>2.title

<dd>

</dd>

</dt>

</dl>

</li>

<li>

<dl>

<dt>3.title

<dd>

</dd>

</dt>

</dl>

</li>

<li>

<dl>

<dt>4.title

<dd>

</dd>

</dt>

</dl>

</li>

</ul>

</section>

</body>

ここまでできれば後は一つずつ色付けして行きます。

imgタグにwidth.heightがついていますがタグにも直接プロパティを入れれます。

見出しの色付け

前回と同様にどんな特徴があり、どのようなCSSプロパティを使用しているか見つけましょう！

特徴	プロパティ
フォントが筆記体	font-family
文字が中央	text-algan
背景が水色	background-color

CSSコード

h1{

text-align: center;

font-family: serif;

font-size: 50px;

background-color: aqua;

margin: 15px;

}

ul・liタグの色付け

ul・liタグではリストがどんな配置になっているか考えてみましょう！

特徴	プロパティ
リストが横並び	display:frex;
リストの黒点が消えている	list-style
リスト内文字が中央	text-algan

CSSコード（ul）

ul{

display: flex;

list-style: none;

margin-right: 40px;

}

CSSコード（li）

li{

text-align: center;

width: 25%;

background-color: aquamarine;

margin: 5px;

padding-right: 30px;

}

width:25%;は100％で横幅いっぱいという意味なので横並びになった4つのリストをちょうど良く画面いっぱいに並べる為に使用しています。

リストが3つの場合は33.3％

リストが2つの場合は50％で横幅いっぱいに活用できます。

dl・dt・ddタグの色付け

最後にdl・dt・ddタグの特徴・使っているプロパティを考えましょう！

特徴	プロパティ
文字が筆記体	font-family
titleが太文字	font-weight
titleのサイズが大きい	font-size

CSSコード

dt{

font-size: 30px;

font-family: serif;

font-weight: bold;

}

dd{

padding: 5px 15px;

}

主なプロパティはtitle（dtタグ）のみです。

すべて打ち込んだらmargin.paddingで整えたら完了です。