<header>

<div>

<h1>

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

display: flex;

justify-content

align-items

font-size

font-weight

color

ヘッダーとサイトタイトルの作成

<nav>

<ul>

<li>

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

:first-child, :last-child

display

background-color

border-radius

text-align

transition

opacity

ヘッダーナビゲーションの作成

<section>

<h2~h6>

<span>

background

.bg-test {
  background-image: url('./img/test.jpg');
  $(1): $(2);
}

position

top, bottom

left

width

:nth-of-type()

ファーストビューの作成

<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

height

position: relative

box-shadow

position: absolute

right, left

アバウトセクションの作成

<table>

<thead>

<tbody>

<tr>

<th>

<td>

料金表の作成

::before, ::after

content

display: inline-block

アクセス情報のスタイリング

flex-direction

flex-grow

お問い合わせセクションの作成

<footer>

フッターの作成

Web制作会社を想定したサービス紹介サイトを制作します。
positionや疑似要素など、実務でよく出るスタイルの指定に挑戦しましょう。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【実践編💼】実案件を想定したサイト制作

サービス紹介サイトを作ろう