HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門 第2章
かなこ
学習初期にお世話になったサイト「Codejump【旧 Codestep】」の方が出版された本です。
全575ページとボリューム満点ですが、楽しみながら取り組みたいと思います！
目次
| 第1章 | 【入門編】プロフィールサイトを作ろう（済） |
| 第2章 | 【初級編】ブランドサイトを作ろう ←今、ココ |
| 第3章 | 【中級編】サービスサイトを作ろう |
| 第4章 | 【上級編】カフェサイトを作ろう |
| 第5章 | 【応用編】ランディングページを作ろう |
| 第6章 | 【実践編】コーポレートサイトを作ろう |
進捗
第2章 【初級編】ブランドサイトを作ろう
positionを使った画像やテキストの配置の仕方を学ぶ。
苦手なトコロなので、しっかり覚えたいです。
| 日数 | 日付 | メモ |
|---|---|---|
| 1 | 2025/02/01 | 2-1 完成イメージの確認（URL） ⇒ ロゴ（左上固定）、メインビジュアル、画像やテキストの重なり |
| 2-2 コーディングポイントの確認 ⇒ positionによる要素の固定と重ね方、フォントの指定、画像の高さの固定、背景の設定 | ||
| 2-3 コーディングの準備をしよう ⇒ ダウンロード、デザインデータ確認、素材確認、完成サイト確認、フォルダとファイルの作成 | ||
| 2-4 全体の枠組みを作ろう ⇒レイアウト構成の確認「header」「main」「footer」 mainの中に、以下を配置 ①mainvisual ②concept ③news-products ④new-type ⑤online-store ⇒ HTML、CSSのコーディング ★ 第1章のコードから再利用できそうな箇所を スニペット登録（!+)して使ってみる ★ CSSの変数を使ってみる （参考）https://gri.jp/media/entry/27051 | ||
| 2-5 ヘッダーを作ろう ⇒ レイアウト構成の確認（固定ヘッダー、ロゴのみ） ⇒ HTML、CSSのコーディング（position: fixed; 、配置、重なり順） ⇒ レスポンシブ対応（ロゴのサイズ、配置） 【ポイント】position（fixed / relative / absolute / static /stickey） | ||
| 2-6 メインビジュアルを作ろう ⇒ レイアウト構成の確認（div、画像） ⇒ HTML、CSSのコーディング（画像：幅100％、高さ固定、トリミング） ⇒ レスポンシブ対応（高さの変更） 【ポイント】object-fit（contain / cover） | ||
| 2-7 「Concept」を作ろう ⇒ レイアウト構成の確認（セクション、画像、テキストボックス、見出し(h2)、段落） ⇒ HTML、CSSのコーディング（positionによる重ね合わせ、透明度、日本語の複数行の文章は両端揃え justify） ⇒ レスポンシブ対応（重なりの解除、背景の解除、透明度、余白の調整、フォントサイズの調整） 【ポイント】透明度（rgba / opacity） | ||
| 2 | 2025/02/04 2025/02/06 | 2-8 「New Products」を作ろう ⇒ レイアウト構成の確認（セクション、wrapper、見出し(h2)、画像3枚、丸いテキスト） ⇒ HTML、CSSのコーディング（3枚の画像と丸いテキストをposition:absolute;、z-indexで重ね合わせ） ⇒ レスポンシブ対応（絶対配置の解除= positon:static;、最大幅の解除= max-width:none;、サイズの調整、余白の調整、フォントサイズの調整） |
| MOS試験 Excel エキスパート 受験準備のため中断 | ||
| 3 | 2025/02/08 | 2-9 「New Type」を作ろう ⇒ レイアウト構成の確認（セクション、.text-content、.text-box、見出し(h2)、テキスト、画像） ⇒ HTML、CSSのコーディング（画面幅を狭めた際に画像の右端が見切れて表示されるレイアウト）←苦手！ ⇒ レスポンシブ対応（縦並び、左右のpadding、テキスト・画像幅 100％、画像が見切れないように画面幅に収める object-fit: contain） |
| 2-10 「Online Store」を作ろう ⇒ レイアウト構成の確認（div、.text-box、テキスト、ボタン、背景画像、疑似要素） ⇒ HTML、CSSのコーディング（display:flex; を使用して縦横中央揃え、背景画像+背景色+ブレンドモード、ボタンは inline-block要素、疑似要素） ⇒ レスポンシブ対応（フォントサイズ） 【ポイント】backbroundプロパティ（color、image、repeat、positon、size） 【ポイント】疑似要素について（color、image、repeat、positon、size） | ||
| 2-11 フッターを作ろう ⇒ レイアウト構成の確認（背景色、ロゴ、コピーライト） ⇒ HTML、CSSのコーディング（display:flex; を使用して横並びで両端に配置） ⇒ レスポンシブ対応（余白、ロゴのサイズ） | ||
使い回せるコードの検討（調整中…）
使い回しができるように、コードの基本形を作る試みをしています。
まだまだ試行錯誤の現状で整っていませんが、テキストが終わる頃には仕上げたいと思います。
HTMLの基本の型
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- レスポンシブ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- タイトル -->
<title>ページタイトル</title>
<!-- 概要 -->
<meta name="description" content="説明">
<!-- ファビコン -->
<link rel="icon" href="./img/favicon.ico">
<!-- アップルタッチアイコン -->
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<!-- リセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- ヘッダー -->
<header class="header wrapper">
<!-- ロゴ -->
<h1 class="header__logo">
<a href="./index.html">
<img src="./img/logo.svg" alt="タイトルロゴ">
</a>
</h1>
<!-- グローバルナビ -->
<nav class="header__nav global-nav">
<ul class="global-nav__list">
<li class="global-nav__item">
<a href="#menu1" class="global-nav__link">メニュー１</a>
</li>
<li class="global-nav__item">
<a href="#menu2" class="global-nav__link">メニュー２</a>
</li>
</ul>
</nav>
</header>
<!-- メイン -->
<main class="main wrapper">
<!-- メインビジュアル -->
<div class="mainvisual">
<img src="./img/mainvisual.jpg" alt="代替テキスト">
</div>
<!-- セクション -->
<section class="section-name section">
<div class="section-name__wrapper">
<!-- セクションタイトル -->
<h2 class="section-name__title section-title">
セクションタイトル
</h2>
<!-- 画像 -->
<div class="section-name__img">
<img src="./img/section-name.jpg" alt="">
</div>
<!-- テキストボックス -->
<div class="section-name__text-box">
<h2 class="section-name__heading heading-lg">
<span class="heading-lg__en">Title</span>
<span class="heading-lg__ja">タイトル</span>
</h2>
<p class="section-name__description">
セクションの説明
</p>
</div>
<!-- リスト -->
<ul class="section-name__list">
<li class="section-name__item">
<img src="./img/item1.jpg" alt="アイテム1">
</li>
<li class="section-name__item">
<img src="./img/item2.jpg" alt="アイテム2">
</li>
</ul>
</div>
</section>
<!-- フッター -->
<footer class="footer wrapper">
<p class="footer__copyright"><small>@ サイト名.</small></p>
</footer>
</main>
</body>
</html>CSSの基本の型
@charset "UTF-8";
:root {
--font-set: 'YuGothic', 'Yu Gothic', sans-serif;
--font-set-min: 'YuMincho', 'Yu Mincho', serif;
--font-size: 15px;
--font-weight: 500;
--letter-spacing: 0;
--line-height: 1.8; /* calc(27/15) */
--color-text: #333;
--color-link: #333;
--color-bg: #fdf8f8;
--width-contents: 1040px;
}
/*-------------------------------------------
ベース
-------------------------------------------*/
html {
font-size: 100%;
}
body {
font-family: var(--font-set);
color: var(--color-text);
background-color: var(--color-bg);
}
p {
font-size: var(--font-size);
font-weight: var(--font-weight);
letter-spacing: var(--letter-spacing);
line-height: var(--line-height);
text-align: justify;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
a {
color: var(--color-link);
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
/*-------------------------------------------
共通パーツ
-------------------------------------------*/
/* コンテンツ幅の指定 */
.wrapper {
max-width: var(--width-contents);
padding: 0 var(--padding-inline);
margin: 0 auto;
}
/* セクション */
.section {
padding-top: 130px;
padding-bottom: 130px;
}
/* セクションタイトル */
.section-title {
font-family: var(--font-set-min);
font-weight: var(--font-weight);
font-size: 80px;
letter-spacing: 0.1em;
line-height: 1.2;
margin-bottom: 40px;
}
/* 見出し（大） */
.heading-lg {
font-family: var(--font-set-min);
font-weight: var(--font-weight);
line-height: 1.5;
}
.heading-lg__en {
display: block;
font-size: 40px;
}
.heading-lg__ja {
display: block;
font-size: 14px;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
}
.header__logo {
width: 100%;
max-width: 190px;
line-height: 0;
}
.header__logo a {
display: block;
}
.global-nav__list {
display: flex;
align-items: center;
}
.global-nav__item {
font-size: 14px;
margin-left: 40px;
}
/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
.mainvisual img {
width: 100%;
height: 600px;
object-fit: cover;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
.footer {
padding-bottom: 20px;
}
.footer__copyright {
text-align: center;
}
.footer__copyright small {
font-size: 12px;
}
/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
/* 共通パーツ
---------------------*/
.section {
padding-top: 40px;
padding-bottom: 40px;
}
.section-title {
font-size: 24px;
}
/* ヘッダー
---------------------*/
.header .logo {
max-width: 120px;
}
/* メインビジュアル
---------------------*/
.mainvisual img {
height: 480px;
}
}
