<footer>

<div>

<img>

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

max-width

width

margin

margin: 10px 20px 30px 40px;

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

padding

padding: 10px 20px 30px;

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

display

フッターセクション作成とロゴ画像の配置

<ul>

<li>

grid

grid-template-columns

font-size

font-weight

color

:hover

メニューとサブメニューの作成1

position

content

height

border-[上下左右]

transform

left

opacity

::before, ::after

メニューとサブメニューの作成2

<button>

display: flex

flex-direction(垂直)

border

border-radius

background-color

text-align

text-decoration

cursor

ボタンの作成

SNSリンクの作成

justify-content: space-between

コンテンツを横並びに配置

コピーライトの作成

メディアクエリ

レスポンシブ対応

このレッスンでは、ウェブページにフッターセクションを作成し、ロゴ画像やメインメニューとサブメニュー、ボタンやSNSリンクの配置方法を学びます。
設置したコンテンツは、レスポンシブ対応され、異なるデバイスや画面サイズに適応できます。

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

Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

実践的なフッターセクションを作ろう

実践的なフッターセクションを作ろう

チュートリアル